A phone on its side showing a fitness app
slanted grid of several phones and a smart watch showing a fitness app

Leagues Fitness

The challenge was to create a mobile fitness app to get people who don’t normally exercise moving.
Role
User Research
UI Design
Project Type
Course Project
Timeline
2 Weeks
Tools
Figma

Process

Empathize
Interviews
Survey
Define
POV
Affinity Mapping
Empathy Mapping
Competitive Analysis
Ideate
Brainstorming
Low-fidelity Prototypes
User Feedback
Prototype
User Flows
Sketches
High-fidelity Prototypes
Test
Usability Testing

Research

I ran a survey to narrow the scope of my interviews followed by 5 interviews to understand people’s habits around exercise. I was focused on finding out what motivates people to exercise.

What motivates you to exercise?
response 1: Having other people to exercise with keeps me accountable. Response 2: Healthy habits like sleep and food help me stay on track

These insights lead me to identify 2 user roles:

User roles of team players who are motivated by other people and Individuals who are motivated by their habits

Due to the time constraint, I had to focus my efforts on one group. Doing some competitive analysis I found that most apps focused on individual progress, so I chose to focus on addressing the pain points of the ‘team player’.

Design & Testing

My research led me to pursue a design that puts individuals back into a team environment. With a new team to motivate them, they are much more likely to keep up with their exercise regime.

I developed a mid-fidelity mockup which showcased the features:

User interface mockup of fitness app showing users can join teams with their friendsUser interface mockup of a fitness app showing teams can compete in leagues by earning point from working out
User interface of fitness app showing that users can create and join workouts in any category of exercise

I made a mistake at this point by skipping user testing with these ideas. Due to the time constraint, I opted to pursue a high-fidelity prototype with the same features as the mockups above. I should have tested to see where I needed to more clearly define the app.

For the hi-fi prototype I was focused on using a bold design which made it easy to achieve a minimum of AA contrast rating, with most of the app being AAA rated. I wanted to allow for the largest possible audience, and this was one step that made this more possible.

Screenshot of fitness appScreenshot of fitness appScreenshot of fitness app
High fidelity Prototype of Leagues

Using some simple prototypes and inviting people to look at my Figma file I could gather quick feedback about the design.

Users liked how it looked and loved the teams, but were confused about how the points system would work and how the tracker would work for different sports/exercise types.

While lots of testing would be needed to satiate those concerns, my mistake was jumping to a hi-fi prototype and not setting the right expectations. Because of these concerns I didn’t get as much feedback on the areas I was interested in.

What I Learned

Don’t Skip Steps - I skipped a round of user testing after my first mockups. I tried to save time this way, but it would have been more useful to test and omit the high-fidelity test later. This way I would have integrated my feedback into the design, resulting in a more user-centred product.

Keep Scope Small - I had some issues with people getting confused about where and what they could click. It would be better to do a few smaller prototypes, testing out a few screens or features on each test instead of trying to do an entire app in one go.

Lean On Your Resources - I was on my own, so there was nobody to bounce ideas off from a design perspective. This made me rely more on getting feedback from users and got me comfortable showing work-in-progress designs.

Results

The design turned out pretty well and satisfied the core needs of the target group. Since it is only a design exercise it’s hard to measure the impact of the app, but based on the feedback I got, people like the feel and would be very excited to use an app like this.

Here are some video walkthroughs of the app and companion watch app:

HomeProjectsBlogAbout