Designing the UI of a fitness app
DEVELOPING AN APP TO MOTIVATE AND HELP USERS REACH THEIR FITNESS GOALS
FIT REBEL is an app I developed during the User Experience Design full-time course at General Assembly. It’s a workout app that is personalised to each user, to motivate and help them reach their fitness goals without the expense of a personal trainer.
The Challenge: To increase the fidelity of a fitness app I designed in my first week at General Assembly (see Part 1: UX case study here), using visual / UI design to develop FIT REBEL’s brand identity for its target user.
Part 1 was in relation to the research and planning stages for the app and the testing of the paper and low-fidelity prototypes. This Part 2 focuses on my design processes and decisions at the mid/high-fidelity prototype stage.
The Solution (Part 2): Motivational UI with a ‘no-nonsense’ feel and tone to inspire and help the target user reach their fitness goals
Wireframing | Brand positioning | Moodboards | Prototyping | Usability testing | Iterating
Sketch | Invison | Sharpies | Paper | Post-its |Keynote
FIT REBEL’S DESIGN
The main focus of Part 1 of the case study was in relation to the research and planning stages for the app and the testing of the paper prototype and low-fidelity prototypes.
This Part 2 focuses mainly on my design processes and decisions at the mid/high-fidelity prototype stage.
I considered imagery, colour, shapes, typography and form in the development of FIT REBEL’s brand guidelines, in order to enhance usability and ultimately to improve the user experience.
Below sets out the iterative process, showing how the designs changed overtime based on testing from wireframes, low-fi and mid-fi sketches.
FIT REBEL’s brand personality is motivating, stylish but never complex.
FIT REBEL is neither formal nor informal. It has a simple, easy to use design with a strong feel and will be affordable and accessible to all, but have a feel of exclusivity.
In creating a moodboard, I wanted to communicate the style, voice, and language of FIT REBEL’s design and brand. I wanted to convey that this app would motivate and help each user reach their fitness goals in the same way a personal trainer would. This is discussed in more detail below.
Tone and Language
The app is inspired by CrossFit — a high-end gym experience where the gym goer’s workout is “constantly varied functional movements performed at high intensity” and the gym-goer is motivated by instructors, much like personal trainers. It has popularised tough workouts across the globe. However, it isn’t accessible to many due to its £225 monthly price tag.
Therefore, the design of the moodboard and the app has quite an aggressive / no-nonsense feel and tone to inspire motivation for the user. Its also leaning more on the masculine side in the sense that its main colour is black and grey, although I want it to be accessible to women too and have created both an app for women and men. I wanted it to attract people who are time-poor, who like technology and thrive on pressure.
The language in the moodboard is also no-nonsense and motivational, such as “focus” and “work harder”.
Colours and Type
As this is a workout app, I wanted it to have a sense of authority, power and sophistication and to inspire enthusiasm and motivation. But I also wanted it to feel simple and accessible. Helvetica is a clean and easy to read font. See below image for the reasons I choose the four colours for the app.
In relation to the design of the final high-fidelity screens, one user commented:
“The colours work really well — aggressive and motivational but in a good way”.
“Love the colours and the layout. It has a strong image and screams professionalism and knowledge.”
ITERATIONS OF THE DESIGN
Fitness Profile — On-boarding Screen
I decided that for the on-boarding experience, the FIT REBEL logo should be a header to establish the brand name but after that, the logo would only appear in the top right corner to allow maximum use of the screen for the features of the app. I also felt that at this stage, keeping the background clean and white makes it easier for the user to insert its relevant information. The user feedback on this high-fidelity screen was that it was clear what they had to do.
Workout Type Screen
The initial design of the screen for choosing the type of workout the user wants to do was simple: buttons for the user to click which goal they want to achieve from the workout. However, when it came to considering the brand, it was clear that motivational pictures would help inspire the users — this was confirmed when carrying out user testing; users preferred to have inspiring pictures than just descriptive buttons. A couple users commented that the pictures in version 2 of the screen were a bit big and it was hard to tell that they could scroll down. Therefore, I made the pictures a little smaller and this worked much better for the users I tested with. I also wanted to ensure that (although the app has a masculine feel to it) it would be appealing to women. So once the user has chosen their gender during the on-boarding process, the images in the app going forward would correspond.
The Workout Plan Summary Screen
This screen changed quite a bit after the branding process. One of the purposes of the app is to enable the user to workout as if there is a personal trainer with them, guiding them. Therefore, adding video clips with demos of the workout activities will help the user get the most out their gym experience with this app, should they need a demo of how to do an activity. When testing, users found this feature really helpful.
Start Instruction/Timer Screens
These screens went through the various iterations during the branding process. As this is a workout app that should inspire the feeling of having a personal trainer motivating and instructing the user during their workout, I wanted to ensure the user had the workout instructions and a demo video easily accessible. This not only helps the user maximise their time at the gym, but ensure they are doing what they need to be doing to reach their fitness goals.
The first design with branding had a video on the instruction screen. However, after initial testing, users said they didn’t feel it needed to be a big feature on the page as the likelihood is that they would know how to do a most of the workout actions without having to look at the demo video (especially after they had been using the app for a while). With further testing, I discovered that most of the users felt the same about the detailed instructions on the screen. As they were both helpful features to the user, I decided to keep both the video and instructions easily accessible on these screens at the touch of a button.
When testing the Start Instruction / Timer screens with users, the feedback was that they liked having easy access to the instructions and video and liked the big timer button which they said would be easy to press when working out.
In relation to the user being able to quit the workout before it was complete, I didn’t want to make this easy for them, as one of the key purposes of the app is to motivate them to reach their fitness goals. I also wanted to ensure that the wording of this matched branding tone and style. Therefore I changed the wording from “Quit workout?” to “Are you a quitter?” to inspire the same tone of a personal trainer, to try to motivate the user to continue their workout to the end in order to help them reach their goals. This can be seen in the iteration below:
The design process really helped me establish FIT REBEL’s brand image and personality. When testing the final iterations of the design with users, it was clear from their feedback that the design matched the brand personality of motivating, stylish but never complex.
One user commented:
“Great aesthetics. It works perfectly for the brand and the app’s use.”
“Love this, the colours are cool and mean business. It has clear usability and layout. I would use it tonight if I could!”
In the future, FIT REBEL will incorporate:
- a motivational voice that speaks to the user while they workout, encouraging them to push themselves, motivating them to achieve their goal.
- Audible instructions (with the option to listen to music at the same time)
- Premium function to get access to live personal trainers
Thank you for taking the time to read my case study! If you’d like to see some more of my work, please have a look at my website.