No Pain No Gain | Fitness App
UX/UI Mobile App Design
Date: May 2023 - Sept 2023
Role: Lead Designer
Tools: Figma
Why: Portfolio Project
About
No Pain No Gain is an at-home fitness app specifically made for those who prefer to exercise in the comfort of their own homes. It’s made for busy moms, college students, workaholics, fitness newbies, and fitness experts. This app is made to provide a custom workout experience for those who struggle with motivation, injuries, and time constraints.
Problem
Working out on your own can be quite a difficult task. There’s a lack of motivation, injuries, and time constraints. Gym memberships can be expensive. In addition, not everyone likes the gym, nor does everyone have reliable transportation to a gym. Oftentimes, some people just prefer to work out alone.
Solution
Here is where No Pain No Gain comes in. This app provides a beginner-friendly interface that’s 100% customizable and makes working out at home a worthwhile experience. Reach your fitness goals, enable workout reminders, and connect to all of your fitness devices.
Design Process
User Research
Survey Results
I conducted a 9-question survey with 30 people who frequently exercise to understand their fitness patterns. The goal is to gain insight into the user experience on how one can benefit from using a fitness app at home and what can be done to improve the experience.
Here is what they’ve said:
Competitive Research
To learn more about the market, I researched several other fitness apps that allow you to work out at home. I analyzed all of their pros and cons to see what current users do and don’t want. I also checked comments to further connect with users.
Define
User Personas
Below are the user persons I came up with from my research findings. These personas represent different types of people who prefer to exercise on their own or at home and have the same end goal but different needs.
Each scenario showcases a realistic goal that can be achieved through No Pain No Gain. The goal of these personas is to show how each user has multiple different needs and will do things their own way. It also focuses on the frustrations and goals of each user.
Each user is different, which is why No Pain No Gain is completely customizable.
Empathy Map
The empathy map shows what the user thinks, feels, sees, does, hears, and says. This map focuses on the target user and what they truly do and don’t want.
Customer Journey Map
The customer journey map focuses on the pains, frustrations, and emotions a user may feel when wanting to work out at home.
Ideate
User Flow
The user flow shows multiple paths the user can take. The end goal will always be the same no matter how the user gets there.
Information Architecture
Here, I have organized all of the apps’ components and how a user can interact with them. There are four main navigation paths a user can choose from: workout, discover, progress, and settings. All of it is laid out in a way that a user can navigate to and from easily.
Prototype
Sketches
Below are some initial sketches of the general layout of the app. The first step when designing is to sketch out the ideas and turn them into paper prototypes.
Low-Fi Wireframes
After I sketched out several ideas, I solidified the concept into low-fidelity wireframes using Figma. The low-fidelity wireframes are meant to represent an early, but developed concept of the app. It is a blueprint that I shall continue to build upon to complete the final design of the app.
UI Kit
Here are all the UI elements such as the colors, logo, and font.
Test
A/B Testing
Once testing was completed, I was able to give the app some well-needed adjustments. Without A/B testing, I’d be unable to advance my app to give users what they want.
The background color and gradient were too hard on the eyes and not at all ascetically pleasing. Instead, I changed the background to a light gray, while still using the teal as an accent color. I also changed all the text to the same color for better readability. Then I added “Daily Challenges” to the home screen to coincide with the app’s incentive feature.
I made the profile screen more personal by adding the user’s stats such as how many calories they’ve burned, how many exercises they’ve completed and their rewards gained. The top half of the profile section is mainly focused on the user’s stats and then below, it allows them to keep up and connect with their friends.
Then they’ll be able to see how many rewards they’ve gained and where they can use them. Finally, I’ve included the basic profile update options. Before the update, the profile screen lacked personalization and the incentive feature was not depicted at all.
I changed the word “History” to “Progress” due to the general lack of understanding. The progress page was difficult to navigate and didn’t have much to offer. I redesigned the “calories burned”, “steps taken”, heart rate”, and “time spent” features into a scrollable option, instead of making them your only options. The progress page became a lot more customizable and user friendly once the “Today’s Plan” feature was added. It allows you to see what is on the agenda and it allows you to customize your plan to exactly what you want.
Hi-Fi Wireframes
Once the main components of the low-fidelity wireframes were completed, I was able to build High-fidelity wireframes in Figma.
Onboarding
Returning User
Other Screens
Interactive Prototype
Final Thoughts
I’ve learned that fitness apps should above all, include these 4 things: customization, accessibility, connectability, and affordability. Everyone should be able to work out whenever they choose with ease. Working out at home should never be a daunting task. Looking back, I realize that the app went through numerous changes. Some ideas that I thought were great, turned out to be less than practical. Then there were ideas I never thought about, but thanks to research and testing, I realized were absolutely necessary.