The product
Gains is a collaborative project with a personal trainer, Meghan McCauley, for an app idea to easily offer training services online.
The challenge
Meg currently uses different 4 applications to offer her online personal training services which makes things inefficient and confusing for her and her clients.
Role
Designer, Researcher
Duration
12 weeks
Category
Fitness app, Habit trackers, Health & Wellness
Why I made this project
I am passionate about adopting a healthy lifestyle through exercise and came across the need for more personalized online fitness programs, so I partnered up with a local trainer who offers online training to create Gains.
Gains is an app that aims to fulfill the need of personal trainers and their clients looking for consistent and personalized fitness training without being restricted by in-person availability. Gains strives to offer quality workout options to anyone who seeks it.
Market Research
The current framework
Due to the pandemic, demand for online training has increased and trainers who have adapted to their clients’ new needs are earning more than those who do not offer online services.
The need
Meghan (Meg) M. is a personal trainer in Los Angeles County with 8 years of experience who has been utilizing various applications to offer her training services online.
I began by making myself more knowledgeable about the current market and what’s out there in terms of fitness apps. After browsing through the app store, I identified three main types of fitness apps that offer personalized fitness programs.
Competitive Analysis
Workouts created through AI/algorithm
The good
Data-driven and can learn from each user’s statistics while keeping costs down
The bad
Lack of ability to give feedback on prescribed workouts and no real person to connect with
Pre-built workouts with the illusion of personalization
The good
Easy to decide what workouts to do due to limited selection
The bad
Lack of variety gets boring quickly and no way to customize workout details
Create your own with exercise library
The good
More customization and control over workouts and equipment needed
The bad
No professional feedback on program created and limited to those with fitness knowledge
I struggled with deciding the direction I wanted to go for the purpose of this app, but I decided to cut through the noise and realized that I needed to trust the trainer that I am working with because she has a specific need and has real people as her clients that are looking for a more usable app to follow their online workouts with.
Stakeholder Interview
I collected all of Meg’s current services and applications she used for her online training and then from there, decided how to combine them into an ‘all-in-one’ app that would streamline her business.
Google Docs
Google Forms
Acuity Scheduling
Google Docs: where she creates all her online workout programs and shares with clients
Google Forms: which she sends to onboard potential clients when they message her either through text or Instagram direct message (DM)
Instagram: where she has a Direct Me page that links various resources including scheduling a consultation call and where most new clients find her and DM their interest
Acuity Scheduling: which is linked to her Direct Me page and has a slightly different and shorter onboarding questionnaire form
The goal was to convert the current online program into a workout app. To prioritize the features of the MVP, the app should be able to house workouts that are easy to follow and make sense to the trainer and her clients in terms of how the program is currently structured.
Feature Roadmap
Google Docs
Since the trainer used Google Docs for her online workout program, I analyzed it to identify which elements I wanted to translate over into the app and categorized them into priority and nice-to-haves
Priority features
Weekly overview of schedule
Daily step goal
Breakdown of main sections
Exercise name
Number of sets per exercise
Number of reps per exercise
Trainer notes per exercise
A demo video per exercise
Weights needed per exercise
Client ratings/comments
Nice-to-have features
A note of any medical concerns
Client’s goals
Type of equipment client has available
Progress check-in photos
User Research
I wanted to better understand what kind of person would use this app so I gathered data on the habits/lifestyle of Meg’s client base.
Ideally, I would interview some actual clients directly but due to the circumstances, it was not the right time or place to ask for interviews so I settled with the information collected from the trainer.
I came up with three personas from the data collected and validated them with the trainer on what descriptors made the most sense and combined her input into one primary persona.
Personas
“How would a potential user sign up for this app?”
This was the question I asked myself after defining what kind of person would use this app.
After discussing with the trainer, I discovered that potential clients reached out in various ways, either through Instagram, text message, or in-person. The follow-up with onboarding went either through Google Forms or Acuity Scheduling.
I created a storyboard to better envision the user's journey based on how her clients currently find her and how the user could use the app afterward for their workout program.
Storyboarding
After organizing all of the information and data I collected from above, I had lots of ideas so I turned them into mid-fidelity wireframes.
Wireframes
Onboarding screens
Workout / Journal / Chat / Profile screens
I created a mood board around the trainer’s current branding to get a feel of what direction the UI was going to follow.
Branding
I put together a style guide for the app based on the mood board as well as created the logo and some icon illustration.
High-fidelity UI
A note
I decided to use the trainer’s brand colors for the UI in this case study, however, this was intentional with the opportunity for other trainers to choose between different color themes to best represent their brand when using this app to host their online fitness program.
I wanted to give this disclaimer here because as I did user-testing with a prototype of this app, I had a few comments from users about the cool-toned feeling of the fitness app.
Prototype
I created a clickable prototype with my high-fidelity designs for the first round of usability testing.
Usability Testing
Test 1's goal was to have users interact with the main screens and identify any glaring issues
After some interviews, some of the concerns I had with the current design were validated by users’ confusion and difficulty completing the tasks.
Revisions for the main screens
Added in a separate Overview dropdown of the entire workout near the top of the screen
Overview dropdown
Used to have a dropdown of Overview contents which confused users so changed to purely informational text
Revise exercise count
Increased contrast of buttons to match the other tertiary buttons
Button consistency
What improved?
By separating the Overview dropdown from the Exercise count, it aligned better with user expectations
With the overview at the top, the dropdown does not cut between the exercise video and the important information about the exercise located directly underneath
Increased text contrast for better readability
Contrast check
Reduced number of tabs and reworded into more common terms used for goal-setting
Redesign goal tabs
The second usability test focused on taking users through the onboarding process
I utilized unmoderated user testing to get my designs in front of more people. I received 12 responses but due to frustration with the preset options of the prototype, 4 users gave up during the onboarding task.
Revisions for the onboarding screens
• Removed shape around “find code to scan” since it looks like a button
• Made scan area interactive by adding in a QR code
• Added in more micro-interactions to the prototype, such as obvious button state change to align better with user expectations
Usability before and after the revisions
The third usability test focused on completing tasks with the rest of the screens
I continued with unmoderated user testing and collected 11 full responses. The other tasks led to further fine-tuning the features on the workout screens.
Revisions for the comment section
What improved?
There were high misclick rates on the majority of the workout screens even though users were able to complete the mission. Upon closer inspection, it was a matter of not leaving enough white space.
This is a foundational part of user design that I overlooked when I was focusing on adding in other features on the page and after this fix, the misclick rate greatly improved.
Usability before and after revisions
Additional revisions
Before
Users had to click the comment icon to open up the comment and quick-react section
After
Removed icon to have the comment section directly available for each exercise
What improved?
Almost all users wanted to tap/click on the Warm-Up even though the progress graph was complete and said DONE! instead of where the mission was supposed to start: at the section underneath.
I set an inactive state to the already completed section to deter users from tapping/clicking on already completed sections out of confusion.
Where we are now: fourth round of usability testing in progress
After having a variety of users, some with fitness experience and some without to test out the designs, I was at a good point to have the trainer I was working with sending them out to her real clients to ask them their input and if they would use the app.
Currently, I am waiting for responses from them now and will continue to expand upon this case study.
View other selected works
Puffin Maps
All-in-one live trip planner
Oral Health Center
Seamless appointment making
Midori
An easy way to shop by style