Case study: Fitness App

The product: Fitness App

ALWAYS FIT is a local personal training business. The app offers users multiple ways to pay for services as well as workout options within the app. ALWAYS FIT is ideal for those short on time or live remotely from a gym.

Project duration:

October 2022 to January 2023


Project overview

The problem:

Busy professionals and rural/remote dwellers need a way to pay for fitness services. Also they would like to have workouts to be able to do on their own.

The goal:

To build an app that allows the user to pay for fitness services. As well as provide workout options to do on their own.

My role:

UX Designer leading the app design from conception to delivery

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Understanding the user

User research: summary

I conducted interviews and created a empathy map to gain a more thorough understanding of the users I was designing for. A primary user group identified were busy professionals who would like to be  able to pay for fitness services through an app.

The research also revealed that users wanted an extra layer of accountability for days they couldn’t make it to the gym in the form of workout options within app as well. Having this option would give them back quality time to spend with their families. 


User research: pain points

  • Busy professionals don’t often have the luxury of time to make it to the gym

  • Remote dwellers can’t always make it into the gym

  • They need a way to be able to pay for fitness services in an app

Starting the design

Paper wireframes

The thought process was to come up with an app design, that addresses the users pain points. The need for payment options as well as workout options were  addressed in this initial design.

Digital wireframes

The goal is to create a product that will ease the users’ pain of not having payment or workout options.

wireframe home page explanation

Low-fidelity prototype

This low-fidelity prototype takes you through the main user flow of being able to pay for services within the app. It takes you through the secondary flow as well of selecting workouts from the respective workout libraries.

Link to Low Fidelity Prototype


low fidelity prototype

Usability study: findings

Round 1 findings:

  • Users want clear payment options

  • Users want to see individual workout libraries

  • Users want to see better checkout process

Usability study: findings

Round 2 findings:

  • Users want multiple payment methods

  • Users want to click both picture and button for library access

Refining the design

Mockups

Results from the usability study revealed that user not only wanted the option to use the buttons below the library but also to utilize the images to access the libraries. This was witnessed and commented upon during usability testing. The images were made into buttons and I added a drop shadow effect as well.

Homepage

Before usability study

After usability study

Mockups

Upon completion of the usability study. It was observed that users wanted more options outside of having to use their credit to complete the main user flow. Upon iteration, a few other payment forms were added to ensure completion of main user flow.

After usability study

Before usability study

High-fidelity prototype

This High-Fidelity Prototype met the needs of the users by adding the necessary iterations after the usability study was complete. 


View Always Fit’s 

High-Fidelity Prototype

HIgh fidelity prototype

Going forward

Takeaways

Impact:

“I like the simplicity of the app and how it addressed the payment and workout options question” C.W

What I learned:

I learned the without good research you’ll have a flawed design. Asking the right questions and applying the feed back is integral to the design process. Accessibility is needed and should be forefront whenever you design. It is important for the designs to be inclusive for all users.