YourFit
When.
May - July 2019
Role & Collaboration.
UI Designer / Individual
Tools.
Sketch / Invision / Photoshop
The challenge.
To design a responsive web app to motivate people into an exercise routine that suits their level, schedule, and interests.
Background.
YourFit was developed as part of my CareerFoundry UI Design course studies. A project brief provided initial user research, a persona for Rebecca who’s goal is to lose weight using different fitness routines that she can fit into her busy schedule and user stories.
My aim was to create a user experience and UI interface that was driven by Rebecca’s goals and focused on three key interaction design principles, usability, learnability and feedback.
Design solution.
The goal was to create an interface that allowed users to quickly access workouts they could follow, log and track their fitness information. The application should make learning a new exercise, tracking progress against goals and following a workout simple for someone who hasn’t much time and allow them to repeat this process with ease.
Given the users busy schedule, need to learn new exercises and requirement to track progress YourFit was designed to allow the user to log and access exercise/workouts from the home page. By including a favourites option a user can start their preferred workout within a few clicks. The workout pages contain large buttons, video walk-throughs and relevant information to make it easy to use whilst exercising.
Discovery.
As this was a product or brand that doesn’t exist I wanted to start by developing a brand identity, drawing on information from the key audience type and information from the project brief. This was important in order to ensure not only that the interface was attractive but the navigation and design patterns were familiar to the target audience.
Inspiration.
Drawing together the persona’s personality, behaviour traits and influences, and working with the partial brand guidelines and key messaging I was able to record the emotions, traits and personality I felt the YourFit brand should convey.
Using this as a guide I created two mood boards, these were shown to five people similar to the user persona. This provide feedback on the emotions each mood board elicited as well as their preference.
The first mood board was seen to inspire balance, calmness, invigoration and discovery. This not only reflects the brief which requires the app to be motivating and a helping hand, but also it was reflective of what the target audience felt was more appealing.
Style direction.
I wanted the typeface, colour palette and imagery to draw from the emotions inspired by the mood board. I also needed it to support the usability and help provide feedback relevant to the action or message.
Starting with the typeface I decided on the Barlow font family, specially Barlow Condensed. This font draws it style from the California public, sharing qualities with the state's car plates, highway signs, busses, and trains. This not only provides a modern, clear and familiar font but something synonymous with an area known for its cool, sporty vibe.
I reviewed several colour palettes that represent the brand values whilst also wanting to balance the need to evoke the emotions that can assist in directing the user. The two primary colours of orange and dark blue provide the mix needed between values and emotions.
YourFit has an aim to inspire and share knowledge to help users achieve their fitness goals. The orange represents encouragement and enthusiasm and dark blue evoking the emotion of confidence and knowledge.
By using the correct photography and combining this with the appropriate colour palette I am able to convey the feeling of serenity, balance and motivation to support the aim of the app in encouraging users back into fitness.
Download the style guide to see details of brand values, UI components and icons, as well details on the use of colour, typography and imagery.
With a design direction establish I needed to ensure I had a structure set in order start sketching wireframes. To do this I used the user stories and key feature requirements to create user flows and in turn an IA structure. This provide invaluable to give me the confidence to start sketching ideas. My IA process is mapped below.
Define.
IA and user flows.
The starting point was to review existing fitness apps and design concepts. I felt this would be provide me with a good basis for understanding the existing design patterns with popular apps and also generate some inspiration for the layout and navigation that could be used.
With this understanding, alongside the user stories I was then able to start developing an IA structure that would provide me with the screen requirements, navigation and interactions. I started this process by mapping each key requirement on a whiteboard and joining them up using the functionality and interactions needed. I then used that create user flows for each of the user stories and ensure I had all the requirements mapped. I then translated this into an IA structure, this provided me with the final screens I would need to design.
Above - key requirements mapped, page structure and interactions identified.
Below - using the mapping exercise I was able to create user flows for each user story.
User Flow: view an exercise video
User Flow: view a workout plan
Visual design.
Design iterations.
This IA structure, user flows and style guide then allowed me to start sketching low-fidelity wireframes for key screens. Using existing design patterns to ensure familiarity and learnability I created several design iterations. I also put my initial designs to people who were similar to the persona in order to get feedback on the interactions and the design. This was used as a basis to create mid-fidelity designs. I then continued the iterative process to create the final deliverables.
The most important aspect of the landing page was to provide a simple explanation of the app and the benefits of using it. This was a ‘sales’ page to entice people to sign up so I also wanted to show potential users what the app offers.
I tried to use familiar design patterns, such as a hamburger menu to provide familiarity, and in this case ensure the focus is on the content, not a menu.
The initial designs used a wave design, overlapping content with images. I decided to change this upon testing this initial concept with users. They felt this was too distracting and the key message wasn’t clear enough straight away.
Testing.
I used the wireframes I had created to test the design with potential users. I was particularly looking at the learnability and how intuitive they felt it was to use. Users were able to edit their profile, undertake and save workouts with ease.
Once change I made based on the feedback provided was to move from a list navigation for exercises to a visual representation. Participants suggested it wasn’t always easy to browse a long list of exercises to find the area they wanted to work on. By showing a visual representation they were able to narrow their search quickly and users found this feature much more engaging.
With this feedback I created the final wireframes and moved on to looking at the interactions of different elements within the app.
Interactions.
With YourFit I wanted to create an experience that was familiar to the user and something relatable. By using interactions that were popular within current design patterns I was able to make the app simple and intuitive, important when users are focused on working out. By also introducing elements such as interactive models to choose exercises and workouts it provides a learning opportunity for the user.
With the interactions and final wireframes created I was able to refine this and produce the high fidelity mock-ups and assets for the development team.
Delivery.
High fidelity mock ups.
The web app is design to be used in the gym and for logging and learning exercises wherever the user can fit it into their busy schedule. Final designs aim to convey the message of balance, personal developments, organisation and encouragement. The working prototype shows the interactions from logging a workout, setting a goal to learning a new exercise and sharing it with the community. The aim was to ensure usability, familiarity and learnability within an app that provided motivation to those trying to incorporate fitness into their busy schedule. YourFit provides the ability to find, undertake and save workouts within a few clicks, as well as log and track progress. Try YourFit today.
