Yourfeed
The Mission
With a well-defined target audience and a vibrant brand identity system, Yourfeed set out to make job hunting as fun as it should be for young people of all backgrounds, all around the world. Giving young people a new platform and new ways to share their experiences to the people that matter.
I joined Yourfeed as a Junior Designer to assist them in the launch of their new web app, I mainly worked on digital assets like icons and email designs. I was also given a lot of creative freedom to work on a prototype for a mobile app, based on the design of their new web app.
The Outcome
This project was an an ideal opportunity for me to apply the UX/UI design skills and techniques I’ve picked during my time as a designer. I am proud of the final prototype and am extremely thankful for the team atYourfeed for being so supportive of this project.
The final design is a fun, vibrant and user-focused UI that reflects Yourfeed as a brand and is in-line with their brand guidelines. The leadership team were especially pleased I had created a seamless experience between the web and mobile app. Using Flinto I was able to present a nearly perfect prototype that had been designed with eye-catching animations and interactions
Software Used
- Figma
- Sketch
- Flinto
- Adobe Illustrator
SERVICES
UX/UI
Mobile App Design
CLIENT
Yourfeed
DATE
2017
overview
Research
Research is a massive part of all my projects, and although this was a passion project, I still wanted to ensure I was creating a functional design solution.
I usually like creating mood boards for research, dragging and dropping images from google. When doing this, I am looking for working examples of simple, appropriate and functional branding for brand in their industry. It is also important for me to understand the audience of my client, with Scarlet being a B2B business, their new branding had to be able to thrive in that market.
The logotypes in this image are all companies in the same industry as Scarlet. They all use a bold, modern, geometric sans font that is legible, recognisable and memorable. Logotypes like these are timeless due to their simplicity.
PROCESS
Exploration and Modification in Illustrator
I jumped into Illustrator so I could quickly explore different solutions for the Scarlet logotype. From my research, I knew I wanted to use a modern serif type face much like other companies in the VFX industry.
I chose the Montserrat font because of is modern geometric qualities. I adjusted the kerning (space between the letters) to make the text more optically balanced and then added the responsive part of the logo. I done this by simply writing the name of the company division 3x smaller and right aligned under the logotype. Once i was happy with the design I started exploring brand colours.
PROCESS
Application
Overall, the final solution is simple but it was through the application of this branding that it started to take form.
Although this logotype was made as part of a design challenge, I still wanted to apply the branding to a range of mock-ups so I could prove to myself that the logotype was functional.
With Scarlet being a B2B visual effects company, I knew their branding should be presented using corporate mock-ups. My biggest challenge at this stage was getting the colour to match across all the images and even now I believe I could improve it a little.
PROCESS
Wireframing Using Figma
I started this project by drafting a basic concept of the wireframe on paper so I could get approval from the leadership team to start this project outside of work. The team was thrilled at the idea of a mobile app and I got to work once I got home. I decided to use an app called Figma to construct the wireframes for this project, Figma is unique for its collaborative features allowing me to share live progress of this project with all the members of the lead team. It also gave team members the ability to add notes and make a change if necessary.
Building in Sketch App
After getting the wireframe approved by the team using the collaborative features in Figma, I saved the wireframe as an SVG to be opened in Sketch. Because of my experience using Photoshop and illustrator, Sketch app became my tool of choice for UX/UI design. Looking through the brand guidelines, I found that there were assets I could use and simple rules to follow to ensure a cohesive look and feel throughout the branding.
Adding Interactions Using Flinto
With the creative freedom afforded to me to complete this project, I felt comfortable to experiment using methods I had not used before. I wanted to reflect the brand’s fun, energetic nature in the interactive design by using Flinto to create page transition animations as well as your standard hover and press animations. It was important for me to find a balanced speed for these animations, if they were too fast they detracted from the content and if made too slow the animations were painful to watch. After spending some time looking into different ease controls, I soon figured out the perfect combinations for these transitions.
