A UX/UI Casestudy: FIT REBEL — Part 1

Designing the UX of a fitness app

Image for post
Image for post

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.

The Challenge: to design from scratch 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.

This Part 1 of the case study is in relation to the research and planning stages for the app and the testing of the paper prototype and low-fidelity prototypes. Part 2 focuses mainly on the UI, my design processes and decisions at the mid/high-fidelity prototype stage.

The Solution (Part 1): a low-fidelity app design that integrates the user’s body profile and the use of algorithms to generate personalised workout plans to meet the user’s fitness goals.

Image for post
Image for post

My Process

User Research

I started developing the FIT REBEL app after talking to a friend, Dan, who explained that he wasn’t seeing much improvement in his fitness and physique, despite going to the gym 2–4 times each week. As a regular gym-goer, he was frustrated and demotivated. When I interviewed him and others to dig deeper, I focused on his gym habits, routine and frustrations.

Image for post
Image for post
Interviewing Dan

Key Insights — User Pain Points

I conducted user interviews with gym-goers. Here are the Key Insights:

1. Gym goes-goers often have busy lives, so want to get the most out of their time at the gym

“I go to the gym around 2–4 times per week, usually for 1 hour (30 minutes minimum) - I want to utilise my time there better”

“I’ve a busy life so don’t get to spend as long as I’d like at the gym”

2. Gym-goers don’t know how to structure their routine to meet their fitness goals

“My main problem is not having a schedule or any structure to my workout”

“[My routine is] becoming very repetitive… so I’m not seeing a lot of improvement in my fitness or physique”

3. Gym-goers don’t know how to usilise the equiptment properly to meet their fitness goals

“I don’t know what exactly I should be working on at the gym to improve my physique and fitness to the level I want it to be at”

4. Many gym-goers can’t afford a personal trainer

Image for post
Image for post
Dan doesn’t know what weights he should be lifing to meet his fitness goals

Summary of User Research

Most of us know that “going to the gym” and “working out” are things that could improve our fitness and physique. But from my research it was clear that some gym-goers just don’t know what they’re supposed to actually do at the gym. They walk in without a plan and leave later feeling unsatisfied, not much closer to their physique goals or worse, injure ourselves because they didn’t know what was a realistic weight to bench press.

Concept Mapping

I put all his thoughts into a Concept Map to help me organise and link the main types of problems he was having and I saw a few themes emerging. For example, Knowledge, Motivation and Time.

Image for post
Image for post

I used Dan as my persona for developing this app. In order to design an app to address some of his frustrations, I focused on the four pain points mentioned. The research helped me understand that the underlying problem is:

Dan’s gym experience lacks structure and variety to help him work towards his fitness and physique goals.

Minimum Viable Product (MVP)

From the interviews and concept mapping, I understood that the app would need to:

  1. Give Dan a personalised, structured workout plan; and
  2. The workout plan would need to help him reach his fitness and physique goals.

Storyboard

Now that I had the main problem laid out, I started to think about how this could be addressed with an app. I created a storyboard which helped me shape the app’s design and purpose.

Image for post
Image for post

Sketching

The above research ultimately drove my design decisions and the key features of the app. I started by sketching the main screens I thought would be most useful within the app to solve the user’s problem.

Image for post
Image for post

FEATURES

In my first sketches, I focused on the following features:

Timer

I understood that time was of the essence for the user and thus the workout app needed to enable the user to quickly generate a clear workout plan, with a timer set for the specific workout (i.e. 30 mins or 1 hour workout)

Personalisation

The workout plan needs to be personalised as each user has different body shapes and sizes (because for example, each user has different weight levels they can bench press). So the app would need a basic user profile to draw on e.g. weight/height and fitness level in order for an algorithm to generate a user-specific plan to meet the user’s fitness and physique goals.

Variety

I wanted to give the user the choice of they type of work out they did (e.g. to work on cardio, muscle building, strength fitness) and the level of intensity of the workout.

Userflow

With a clear structure in mind, I developed a user flow keeping in mind that time was of the essence for the user, so the generation of a personalised workout plan within the needed to take seconds so the user could maximise their time at the gym. This user flow stayed consistent throughout the design process.

Image for post
Image for post
Userflow

Wireflow

I was able to use this user flow to put my screen sketches in order and ensure that all the steps required were fulfilled by the app.

Image for post
Image for post

How the App Developed

A number of changes came about due to user testing, feedback and critique (as discussed below) and these changes were implemented into a low-fi version of the app using ‘Marvel’ enabling me to test the app on a smartphone with users.

Here is the final Wireflow for the FIT REBEL app:

Image for post
Image for post
Wireflow of the app

Design and Testing

Image for post
Image for post

Home Screen

Having reviewed the sketches, I realised that I needed a Home Screen in order for the user to start to create their personalised workout plan when they open the app and also for the user to come back to when they’ve completed their workout.

Image for post
Image for post

Fitness Profile

Image for post
Image for post

During testing of the second iteration of sketches, I realised that in order for the user to input their weight/height, I would need to give them metric options (e.g. kg/lbs) so I added a drop down for these options. Further, one user feedback that they felt the “Your Profile” could be more inspiring. So I changed it to “Fitness Profile” for a better on-boarding experience when the user creates their account.

Timers

Image for post
Image for post

In my first iteration of the app, I had a pop-up come up on the screen to inform users of their next instruction 1 minute before the end of their current workout instruction. However, from user testing I learnt that gym goers don’t tend to look at their phone screens’ during their workout, so this was an unnecessary feature. I also realised that a digital countdown timer would be easier for the user to see at a glance than a clock.

Additional features

On the second iteration, I added a button to allow the user to skip an instruction and a button to give the user the option to restart the timers (see image above). However, when testing these features with users, it appeared that it would be clearer to add the words “Skip” and “Restart Timer”.

Low-fi Prototype — Testing

Image for post
Image for post

PROTOTYPE

Click here to have a go at the low-fidelity prototype in Marvel.

There was only one issue came up from testing the low-fi app in Marvel and that was the location of the “quit” button (i.e. to allow the user to quit the workout if they wanted to). I made the quit button a simple “X” in the right-hand corner of the screen. However, from observing users, this should be moved and if I was to carry out another iteration of this app, I would remove the X and test a small “Quit?” button on the top right corner of the screen, above the workout instruction.

WHAT’S NEXT?

Upping the fidelity! But also, developing the app further based on user feedback — it would be great to get the following features added to later iterations:

  • Pictures / videos of what the user needs to do, along with the instructions
  • Audible instructions, with the option to listen to music at the same time
  • Premium function, to get access to live personal trainers

SUMMARY

I believe this app with help the user meet their goals as the app will generate a workout plan that integrates the user’s body profile and use algorithms to match the workout to their personal fitness goals.

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.

Image for post
Image for post

Please note, I developed this app further to high-fidelity, designing and testing the UI / visual design.

You can access the Part 2 Case Study here.

Written by

Get the Medium app