Design a user-centred responsive web app for people who need to improve their physical wellbeing for health reasons, to keep fit and to feel good.
– Offer a varying degree of workout customisations to achieve user fitness goals.
– Allow a function for users who want to concentrate on, or exclude certain muscle groups from exercises. 
– Enable socially active users to work out with friends virtually to improve their motivation and wellbeing.
My Role
As the sole UX/UI designer on this project, I conducted everything from research, testing and design to the final UI styling. 
Adobe XD | Figma | Adobe Creative Suite | Usability Hub | Microsoft Office | iWork
Competitor Research
I carried out research on existing fitness apps and websites to assess their USPs, positives and pain points for users. This was via the hands-on use of products and looking at reviews to gauge how well they had been received. 


Video and face-to-face interviews were carried out with 6 health-conscious participants who had recently used or were currently using fitness apps or websites. I learned about the interviewees' habits, needs and pain points when trying to lose weight or get fit with current products. 
Three Key Interview Takeaways
1. They often couldn't find a workout to suit their specific needs.
2. They would like to focus on, or avoid specific muscle groups.
3. When location is an issue, some interviewees said they'd like to be able to work out with friends online.

User Personas
Meet Janine, Duncan and Sarah. Using the research and key takeaways from the interviews, I developed these three user personas.

These user personas would inform my decisions going forward. For instance, I would ask myself:

"Would Janine be happy with this flow? Does it fit her needs? Would it be easy enough to use for her to navigate as her tech ability is not that great?"
User Flows
Using the user personas as an influence, I began to develop user flows.

The main feature of the user flows, aimed at pleasing Janine and Duncan, is the custom workout flow.
This provides the option to define preferences, select specific exercises and then reorder exercises to create a bespoke workout.
In order to motivate social Sarah, I created flows for inviting her friends and to workout with them via the 'Challenge participation'.

The main structure of the original user flows stood the test of time, however, there were a few alterations to the 'Challenge participation' flow after user testing sessions indicated changes were needed.

Therefore voice control instructions and the ability to view all friends at the beginning of the challenge were added to the flows.
Ideating Solutions
Using the user personas and flows as guidance, I quickly sketched out ideas of functions, elements and layout on a screen-by-screen basis. At this early stage, it's important to get ideas down quickly in low-fidelity, which can be scrapped easily without becoming too connected with them. 
After getting the rough ideas sketched on paper, I took the ideas into Adobe XD where I created the screen layouts and added interactivity to the flows. Below you can see a set of high-fidelity wireframes from the 'Custom Workout' flow.  

High-fidelity Wireframes – 'Custom Workout' Flow
Original idea for Custom Workout 

Create a custom workout using an advanced search tool. 
With this search tool, the user would be able to set various preferences for the type of exercises they require. 
The user would then select specific exercises from the results on the same screen.

Exercise results cards include a thumbnail of the exercise, a title and description and a circle with a grey tick inside. 
Below the circle would be a chevron that could be tapped to expand a panel which would give more info about the exercise.
Concept revision based on user personas
Although the advanced search function to create a custom workout may suit a tech-savvy user such as Duncan, users with lower capabilities like our primary persona Janine, would not find this function appealing. For this reason, I opted for a linear progressive flow which is more visually appealing and more pleasant to use.
This flow includes visuals of workout types, draggable sliders and images of the coaches which the user can choose from. A stepper also ensures that the user knows the progress they have made and their location throughout the process. Take a look at some of the high-fidelity screens from this revised flow below.
Moderated testing
I conducted six moderated remote and face-to-face tests on the high-fidelity prototype. These tests were recorded with written permission, so I could refer back to them at later dates. During the tests, I assessed body language and responses and noted any pain points or frustrations the test participants expressed. 
The results of these were collated and ranked relating to Jakob Nielsen’s Five Components on Usability. The main pain points were addressed in the next iteration of the high-fidelity prototype before UI visuals and styling was applied. 
What I learnt about the 'Create Custom Workout' flow
The 'Select exercises' screen needed revisions.
Although test participants found the custom workout flow innovative and something they would use in everyday life, the high-fidelity 'Select exercise' wireframe became somewhat of a sticking point. 
Problem 1: Users were confused that there was already a grey tick in the check circle which made some users confused as to what action to take.
Solution: I conducted an A/B preference test to find out what option would make it clear that the exercises needed to be selected. A clear majority of respondees opted for the empty circle. 

To emphasis this more, I gave the circle a label: 'Select exercise', removed the 'i' icon which appeared ambiguous to test participants. In the UI version, I also added the 'interactive' colour swatch to encourage action by the user. 

Problem 2: Many users ignored the 'i' as they didn't know what it was for. 
Solution: I removed the 'i' icon and added an 'Info & Preview' label underneath the thumbnail to reduce clutter on the right and make it more clear what would happen if users clicked the thumbnail. 
Problem 3: Users wanted to access a preview via the thumbnail
Solution: I added a video play icon over the thumbnail to make clear that it was interactive. The label below also showed what would appear in the modal overlay when tapped. 
Take a look at all the revisions made below. 
Iterations – from high-fidelity to User Interface design
Desktop and Responsive Website Considerations
Although my product is designed on a mobile-first basis, as a responsive web app, designing for larger screens and considering breakpoints was essential. Take a look at how two 'Custom Workout' screens translated into a mid-fidelity desktop format at the pre-testing stage. 
After iterating based on moderated test feedback, it was time to create the style guide and design system.

Following these design guidelines, I applied the style to each screen in Figma. You can see screenshots of the screens below (click to enlarge).

To view the interactive Figma prototype for My Fitness Builder, click the button below.  
Key Takeways
My concepts for a highly customisable workout and to be able to workout with friends virtually were thought of as innovative and they are features fitness product users would consider using in their everyday lives. 
A great feature to include in this product could be the introduction of a healthy meal tool enabling users to enter the ingredients they have in the kitchen and create healthy recipes based on those ingredients.
Although I reviewed the accessibility options of features, text size and colours later on in this project, in my upcoming projects, I would like to keep accessibility at the forefront of my design decisions. This way, I will not need to revise elements further down the line and I will be designing in an inclusive fashion from the start. 
Thanks for taking a look at My Fitness Builder prototype! 
Back to Top