Fitness App - Case Study
2019
UI Design - UX Design
4 Weeks
Affinity Diagram, Card Sorting, Competitive Analysis, Information Architecture, Proto-Personas, Prototyping, User Research, User Testing, Wireframes
Background
Fitness has become an integral part of our lives with more and more people signing up to gyms and joining fitness programs each year. A key factor in this is also the mindset of “new year, new me”, the problem with this is:
• A few weeks or months down the line they lose their motivation and stop
• They hit a plateau and don’t know how to get over it
• Become “too busy” and “don’t have the time to work out
• Don’t understand the basics of fitness and nutrition
• Lack of knowledge on how to count calories for their goals (Surplus / Deficit)
Goal
The goal of this project is to create an app that helps users stick to exercise and simplify the process which will ultimately lead them to achieving their goals. 
Design Process
For this project I decided to divide my process into three major steps.
User Research
I gathered users from various fitness backgrounds (non-exerciser, casual, athlete, bodybuilder, vegan) to complete certain tasks while being timed. The purpose of these tests it to set a benchmark for the usability of the interface provided. During the observation sessions I took notes of the successes and struggles within the tool gathering specific quotes to summarise their experience.
“I entered my food and exercise but the calories don’t add up? The cardio I did today means I should have more room for extra calories.”  
“Regular gym user"
User Interviews
I gathered users from various fitness backgrounds (non-exerciser, casual, athlete, bodybuilder, vegan) to complete certain tasks while being timed. The purpose of these tests it to set a benchmark for the usability of the interface provided. During the observation sessions I took notes of the successes and struggles within the tool gathering specific quotes to summarise their experience.
I conducted 4 timed trials of the different tasks users would predominantly use to see how difficult they found each task.

There were 4 tasks in the timed trial:
1. Enter what you had for breakfast this morning 
2. Add a snack you had (chocolate, protein shake etc..)
3. Enter the exercise you did that day
4. Create an event and invite a friend to workout
Hypothesis
“The bodybuilder will complete all the tasks the fastest through all 4 tasks. “Non-exercisers” will have the slowest time as they will have the greatest trouble completing the tasks due to the complexity of them. 

Results
These tasks were chosen to cover the main fundamentals the app will aim to address. I wanted to see how easy/difficult these tasks were to complete based on their “training level”. Out of the 7 users only 1 user managed to complete all tasks. 2 users managed to complete no tasks at all. Users who placed greater importance on fitness managed to complete these tasks much quicker, epitomised by the bodybuilder (fitness is his day job), who managed to complete all tasks the fastest. To my surprise, creating a joint workout with a friend was a slow and difficult task. This was due to the apps not having the feature to do this or the switching between alternative apps (IOS calendar app) causing issues.
Results showing the performance of users who took the 4 timed tasks.
User Interviews
Furthermore I conducted user interviews to find out more about the current needs and struggles users face when using a fitness app. I interviewed 7 users and asked them 8 set questions and then further questions if they led to further discoveries.

The key points gathered from these interviews were:
1.   No app manages to meet all the user needs
2.   People found it difficult to perform certain tasks like entering macros
3.   Apps offer a lack of motivation to keep the user engaged in fitness
4.   No app offered a dual workout feature (workout with a friend)
5.   No app they used tracked sets and reps​​​​​​​
Results and answers of main questions asked during the interviews.
Open Card Sort
With a few of the users, I conducted an open card sort activity to further understand the groupings of elements for a fitness app and the different user priorities. Users created their own groupings of elements based on what they preferred (keeping their goal in mind) and had complete freedom of the types of elements they could include.   
After completing the open card sort activities, I came across a few main groupings and themes from all the final boards. Bellow is an image of the compiled results.
After completing the open card sorts, I compiled the results and came across a few main groupings and themes from the final card sorts. Here you can find the picture.

Competitor Analysis
To fully understand the thoughts and opinions on the currently available apps I looked into them to analyse them myself. I looked through the apps and sort out the pain points and what each app did well and where they could improve. Upon analysis I realised the apps were not using the spacing efficiently and the variety of features unavailable. The lack of a macronutrient calculator could cause users to use multiple apps and become overwhelmed. The mix/link between food and exercise seems to have been neglected and apps tend to only focus on one. 
Centr is a new fitness app created by Chris Hemsworth which provides workouts and diets for users. The app requires a monthly subscription.
Fitness home is also a relatively new app. It provides workouts and meals but falls short in the macronutrients tracker department.
Nike training is a very popular app which provides workouts from todays biggest sports stars.
Tone and Sculpt is an app that provides a good basis for nutrient breakdown but its lack of exercise options limits its potential.
Analysing Competitor IA
I then analysed the current information architecture of competitor apps to help me understand the user flows of the products and help give me a clearer insight into the layout of the fitness app. At a quick glance all apps seem to use a bottom nav bar as the main form of navigation. Also key information is hidden away and requires excess button presses to view. An example of this is the “Fitness home app” where the macros are hidden when they should be the main focus of attention. There are also inconsistencies between screens as some pages have a profile section and it is inaccessible from others. These inconsistencies and hidden features are some of the pain points users described during interviews.
Centr
Fitness Home
Tone & Sculpt
Nike Training
Ideation
Proto-Personas

Charlie, 22 years old, Personal Trainer
Charlie uses fitness apps on a regular basis, his main priorities are tracking his calories, weight and the weights he lifts. He goes through cycles of bulking and cutting so he needs something that allows him to adjust his goals easily and somewhat often. Furthermore he has clients that he trains and needs to arrange times for their sessions. Some of his clients don’t understand dietary requirements such as macro and micro nutrients as well as the deficit and surplus fundamentals. He would like something he could recommend to his clients so they can both monitor their progress.  

Emily, 18 years old, Student, Regular Gym User
Emily is a student so doesn’t have the funds available to pay app subscriptions to help with her goals. She is fairly new to nutrition but understands the basics of macros. She is very competitive and demanding of herself, constantly seeking to better her results. She likes to track her PB’s (Personal Bests) and make sure she is progressively overloading. She likes to go the gym with her friends and occasionally films her workouts to post on across her social media platforms. 
Design Principles
1.       Create a clear and engaging way to track macros and calories
2.       Create a clear way to track progress and weight (Pictures and Personal bests)
3.       Simplify the steps between initial and final interaction of a desired flow
4.       Introduce a simple way to connect with friends/clients
5.       Make exercise tutorials clear and easy to follow
Sketches
Sketches help me visualise where each component can go and to help make sure I use white space effectively.
Initial Ideation
Arranging Pages
Elements and Lo-Fi Wireframe
Lo-Fi Wireframes
Lo-fi wireframes save time and improve efficiency by helping me structure the app content effectively. It is a rough map that shows landmarks on a page, they connect the underlying structure to the surface of the mobile app.
Mobile Usability
For me mobile usability is about paying attention to how users use those devices and understanding that mobile experiences are unique. It is predominantly about how it feels rather than how it looks (although that is also very important). People use their fingers to interact with a screen, and it is different to the traditional desktop experience with a mouse/trackpad and keyboard. This is why mobile experience is about how it feels. One key aspect in this is the button placements and navigation bar placements. Mobile devices are usually held and used by/in one hand and tend to have much smaller screen sizes. This is why is important to make sure “reachability” is of a user friendly manner.​​​​​​​
Buttons that make it easy for the user to add the 3 key inputs: Event, Food and Exercise. These are the 3 components that will be vital to the user and need to be as easily and quickly accessible at any 1 point.
UX Flow
Users start with one of the 5 main navigation options (Diet, Progress, Add, Planner and Exercise) with inbox coming in as a feature not all users would use. Each screen leads to each of the 4 main pages while the “Add” option is available as an overlay on every page.  The nav bar is consistent throughout the app which will provide familiarity. The user flows are based on logic and analysis on the tests completed by the users. 
Implementation
Design Guide​​​​​​​
For the UI I create a simple design guide based on several elements that capture the mood and vibe of fitness. I chose the primary colour of purple because it represents strength, ambition and devotion which represent the mentality of athletes. 
Final Designs
After a series of user interviews, prototypes, testing and gathering ideas, these are the designs I came up with. These designs tackle user pain points and have made the experience clearer and more concise. The designs provide consistency and focus primarily on human usability and ergonomics making the experience enjoyable for the user.
Diet
An easy to follow macro screen allows you to know how your calories have been split and a breakdown of the nutrients that each portion of food you have eaten possess. Also a feature that suggests a meal or a type of food based on what macronutrient you are lacking has been added to further simplify user frustrations.
Progress
A quick and easy way to monitor your progress through weight tracking and body composition photos has been added to further aid progress checks. As users tend to get heavier (due to muscle gain) during the initial months of exercise, weight is not a good factor of progress and this is where body composition photos come in. Also a simple tracker of the 3 main lifts has been added to help encourage users to try and beat their personal bests and keep them motivated.
Planner
A simple calendar feature allows users to plan, schedule and invite friends or clients to sessions or joint workouts. This saves users having to use multiple apps and having to send messages which can be easily forgotten about. Reminders are provided through notifications.
Exercise
The exercise section shows multiple workouts by leading fitness influencers to help people stay motivated. A simple follow along also shows users the correct form and gives a clear indication of where they are for that set exercise, the workout as a whole and an overview of the upcoming exercises. 
Reflection and Next Steps
Overall the design was a success. It is now more user friendly and easy to follow app than what is currently available on the market. It offers shorter status (weight, food and progress) update than what is currently available, greatly reducing customer pain points. 
In terms of design elements, I took advantage of white space, made the screens easier to understand and added a quick add feature to shorten the user journey. By also adding a calendar and invite friends feature, it makes exercise easier and more enjoyable as everything is already planned out. This will lead to users being more engaged and will help them stick to their fitness goals. 
With more time I would create the full experience in Framer by including motion design and micro animations to further improve user satisfaction. With the Framer prototype I would do the timed trials again and the user interviews to see how their flows have improved.

You may also like

Back to Top