Fitted
A UI Design Case Study for a Fitness Responsive Web Application
Overview
Context
This is a hypothetical project and was completed as part of a UI design programme at CareerFoundry.
Problem
Finding suitable exercises for your fitness level can be a frustrating experience, especially if you want to try something new. Similarly, it can also be problematic to find a routine that can fit into your schedule, if you have a lot of other commitments.
Goal
The goal of this case study was to create a responsive web application that aims to help users find the right exercises for them, keep them motivated and provide routines that can be completed in as little as 5-minutes.
Tools
Sketch, Photoshop, Marvel, ProtoPie.
My Role
UI Design.
Duration
2 months.
User Flow
User flows were created to understand how users would use Fitted to achieve their goals. To do this, the following user stories were identified during the UX stage:
As a new user, I want to learn about different exercises, so that I can figure out what is best for me.
As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.
From these stories, the following user flows were created to identify the best way for users to navigate the platform.
Sketches & wireframes
Users can learn about new exercises and watch detailed video tutorials to see how to perform the movements correctly.
A variety of challenges and workout categories are provided to prevent boredom and keep users motivated to return to the platform.
I decided to introduce badges and trophies which are earned by completing challenges and milestones. These can then be redeemed for special offers to keep users motivated. Similarly, charts and stats (e.g. weight charts) are visible indicators of progression, which are also likely to keep users motivated to exercise.
Users can filter workouts to find the exact workout for their goal and make sure that they are only shown workouts that fit into their schedule.
Design Evolution
I decided to improve some of the wireframes before moving onto the final design, as I felt that they could be improved both aesthetically and to improve the user experience.
Moving from wireframe V1 to V2 (images below), the Learn More button was removed on the Daily Challenge card. I felt that this button was taking up unnecessary space as users will likely click on the image to learn more anyway. Similarly, the descriptions for Daily Challenge and Premium Plan were removed for the same reasons.
Other issues were also identified when moving from V2 to V3. The section called Workouts was confusing and not very clear as it does not state what types of workouts are listed, nor does it let the user know if the workouts are relevant to them. As a result, the name was changed to Suggested Workouts - Which was again changed to For You as this better encompasses exercises that are not traditional workouts, e.g. mobility.
I then settled on V3 and thought this would be the final design for Fitted. However, I wasn’t happy, and I just couldn’t figure out why… Upon closer inspection I realised that a few things had been overlooked:
It didn’t make sense to have Run as its own category - without categorising other exercise types in the same way. -
Similarly, there were no workout categories listed at all - this made it much more difficult for users to find the content they’re looking for.
Lastly, Fitted allows users to find the perfect workout for them with the workout customisation tool named, My Workout. However, this useful feature was buried away and therefore, it made sense to move it onto the homepage so that users wouldn’t miss this important feature.
With these changes made, it was time to start working on the styling.
Images from left to right: Initial sketch, Wireframe V1, Wireframe V2 and Wireframe V3
Styling
Mood Board
Colours
Black and Orange - These were chosen as the main colours. Orange brings warmth and energy, whilst black provides a modern and sophisticated edge.
Cerise (pink) - A bright hue of pink has been chosen as an accent colour as it's modern and youthful.
Midnight Blue - This was selected over a brighter blue as it is perceived to be more trustworthy. This colour will be an accent and provide a good contrast to the other brighter hues.
Mindaro (green/yellow) - This was a last-minute addition to the palette however, I think it makes the theme really pop! Mindaro is another accent that brings a sense of happiness (yellow) and growth (green). Happiness is self-explanatory, but growth is important as users need to feel like they're progressing when using Fitted.
Logo
Firstly, let me start by saying that I am not a logo designer by any stretch of the imagination. However, I decided to give it a shot and I used a mountain as my inspiration for the logo.
Mountains represent seemingly impossible obstacles that can only be conquered if one pushes themselves to their limits and expels all self-limiting beliefs. Body transformation is similar. Once self-limiting beliefs are removed, anything is possible.
With this in mind, I created a handful of logos and started to see the letter F (for Fitted) forming. Consequently, I made the F more apparent by introducing some active white space, and thus the final logo was created.
Typography
The combination of Futura and Lato has been used to represent the Fitted brand.
Futura has a classic, yet bold and modern appearance which feels familiar. Whilst Lato provides a warm and friendly appearance, with a touch of seriousness that is highly legible at different fonts.
Iconography
I decided to go for icons that had both rounded corners and thin strokes. Rounded corners invoke a friendly and approachable appearance - something that is important for people that are either new to exercise or returning from a long absence. By contrast, the thin strokes give them a feeling of elegance and professionalism. The latter is of great importance as users need to be assured that Fitted contains high-quality information, provided by top fitness professionals.
Final Design
Users have easy access to suitable workouts for them, daily challenges, My Workout, premium plans and workout categories.
Schedule Workouts
Users can schedule workouts and set reminders so that they can easily fit their fitness routines around their daily lives.
My Workout
My Workout allows users to find suitable workouts for them. They simply fill out the form, submit their results and then Fitted will present them with relevant workouts.
Progress
Users can stay motivated by levelling up, viewing performance statistics and earning achievements.
Workout Complete
An animation is displayed to users after they finish a workout.
The use of confetti provides a sense of achievement, whilst the animated dial keeps the user motivated to hit their goal for the week.
Want to see another project?