UX/UI Case Study: FIT REBEL — Part 2

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.

​UX/UI Methods

Wireframing | Brand positioning | Moodboards | Prototyping | Usability testing | Iterating

UX/UI Tools

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.

Brand Personality

FIT REBEL’s brand personality is motivating, stylish but never complex.

Brand Position

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.

Moodboard

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.

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.

“The colours work really well — aggressive and motivational but in a good way”.

Another said:

“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

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.

SUMMARY

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.

THE FUTURE

In the future, FIT REBEL will incorporate:

  • Audible instructions (with the option to listen to music at the same time)
  • Premium function to get access to live personal trainers

THANK YOU!

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.