UI/UX Design for Upcoming Fitness App
UI/UX Design for Upcoming Fitness App
Inertia
Inertia
My Role
My Role
UX Designer
UI Designer
UX Designer
UI Designer
Project
Project
Freelance
Volunteer
Freelance
Volunteer
Timeline
Timeline
3 months (2024)
3 months (2024)
Tools
Tools
Figma, Photoshop, and Illustrator
Figma, Photoshop, and Illustrator
Overview
Overview
Inertia is an all-in-one fitness app for weightlifting and bodybuilding focused on creating the best digital workout experience and building a community around serious lifters. My role in developing this app was to create a social feature allowing users to connect with other serious lifters and gauge their progress against their peers.
Inertia is an all-in-one fitness app for weightlifting and bodybuilding focused on creating the best digital workout experience and building a community around serious lifters. My role in developing this app was to create a social feature allowing users to connect with other serious lifters and gauge their progress against their peers.
Problem
Problem
Many bodybuilders and weightlifters face challenges such as lack of motivation, inconsistent progress tracking, and limited access to personalized advice. While gyms and fitness forums exist, they often lack a cohesive way to connect like-minded individuals, share real-time feedback, or foster accountability dynamically and interactively.
Many bodybuilders and weightlifters face challenges such as lack of motivation, inconsistent progress tracking, and limited access to personalized advice. While gyms and fitness forums exist, they often lack a cohesive way to connect like-minded individuals, share real-time feedback, or foster accountability dynamically and interactively.
Solution
Solution
Create a social media function in the Inertia app that allows users to connect with other lifters, create groups to share progress and meet gym buddies, and gamify lifting stats to increase motivation and keep track of progress.
Create a social media function in the Inertia app that allows users to connect with other lifters, create groups to share progress and meet gym buddies, and gamify lifting stats to increase motivation and keep track of progress.
Design Process
Design Process
For this design, we used a double diamond approach in order to get a detailed understanding of what the problem space is and brainstorm multiple solutions for user needs.
For this design, we used a double diamond approach in order to get a detailed understanding of what the problem space is and brainstorm multiple solutions for user needs.
Discover
Discover
To begin crafting a basic understanding of the user base and problems, we researched competitor’s apps in order to synthesize what users were looking for and what they needed from social media.
To begin crafting a basic understanding of the user base and problems, we researched competitor’s apps in order to synthesize what users were looking for and what they needed from social media.
Market Research
Market Research
To begin the discovery phase, I first looked into different fitness apps with social aspects that could provide some insight into key features and areas of opportunity.
To begin the discovery phase, I first looked into different fitness apps with social aspects that could provide some insight into key features and areas of opportunity.
Findings
Lack of individual groups for differing communities that can be made both private or public
Gamifying and sharing workout progress is a popular feature found in most fitness apps
No centralized location for sharing progress and records other than a separate app (i.e. Instagram)
Through these results, we wanted to create an experience that would tailor to both the social and fitness needs of users in one location.
Findings
Lack of individual groups for differing communities that can be made both private or public
Gamifying and sharing workout progress is a popular feature found in most fitness apps
No centralized location for sharing progress and records other than a separate app (i.e. Instagram)
Through these results, we wanted to create an experience that would tailor to both the social and fitness needs of users in one location.
User Research
User Research
In order to get a better understanding of the user base, we looked into social media and app reviews to find user sentiments on these competitor's systems.
In order to get a better understanding of the user base, we looked into social media and app reviews to find user sentiments on these competitor's systems.
We found that user sentiments were mainly afforded towards the during-workout features, the overall design of the app, and the ability to connect with other users. Moving forward, we decided that these three aspects would provide the best direction for the overall design of the app.
We found that user sentiments were mainly afforded towards the during-workout features, the overall design of the app, and the ability to connect with other users. Moving forward, we decided that these three aspects would provide the best direction for the overall design of the app.
Define
Define
Affinity Map
Affinity Map
After compiling user sentiments, we synthesized the information and coded prevalent information and data into an affinity map. The affinity map defines four major points of interest prevalent in either most social media or fitness apps.
After compiling user sentiments, we synthesized the information and coded prevalent information and data into an affinity map. The affinity map defines four major points of interest prevalent in either most social media or fitness apps.
The four main elements helped guide how we understood the user's needs and the core needs that the main social features would address.
The four main elements helped guide how we understood the user's needs and the core needs that the main social features would address.
User Personas
User Personas
We were also able to create three user personas using the affinity map to direct our focus on the user. These would help in guiding the design and getting a better understanding of how the user may use the app.
We were also able to create three user personas using the affinity map to direct our focus on the user. These would help in guiding the design and getting a better understanding of how the user may use the app.
User Journey
User Journey
To better understand the flow of the user, we also undertook efforts in mapping out the user journey to address the major pain points. Using the Jennifer Kim persona, we laid out how she would utilize the social features for community engagement.
To better understand the flow of the user, we also undertook efforts in mapping out the user journey to address the major pain points. Using the Jennifer Kim persona, we laid out how she would utilize the social features for community engagement.
Through these six stages, Jennifer's relationship to both weightlifting and the app increase steadily over time. Focusing on relationship building to create community within the app environment helps to retain the user and keeps them motivated during their fitness journey.
Through these six stages, Jennifer's relationship to both weightlifting and the app increase steadily over time. Focusing on relationship building to create community within the app environment helps to retain the user and keeps them motivated during their fitness journey.
Pain Points
Pain Points
Lack of Accountability
Lack of Accountability
Maintaining a consistent schedule is the bane of most lifter's existence. Whether it's school, work, social lives, or lack of motivation, everyone struggles with finding the time and the motivation to lift. Accountability is the key to long-term habits, and without it, users may stop engaging with the app and workouts entirely.
Maintaining a consistent schedule is the bane of most lifter's existence. Whether it's school, work, social lives, or lack of motivation, everyone struggles with finding the time and the motivation to lift. Accountability is the key to long-term habits, and without it, users may stop engaging with the app and workouts entirely.
Gym intimidation
Gym intimidation
Newer lifters are often intimidated by being surrounded by more experienced lifters because they worry about looking weak or performing exercises incorrectly. This discomfort often prevents users from utilizing the gym's equipment, experimenting with new exercises, and seeking advice. This directly impacts the user's confidence and willingness to continue training. Providing users with a beginner-friendly tone and leading them towards a fitness social circle can help eliminate any gym jitters.
Newer lifters are often intimidated by being surrounded by more experienced lifters because they worry about looking weak or performing exercises incorrectly. This discomfort often prevents users from utilizing the gym's equipment, experimenting with new exercises, and seeking advice. This directly impacts the user's confidence and willingness to continue training. Providing users with a beginner-friendly tone and leading them towards a fitness social circle can help eliminate any gym jitters.
Progress Tracking Challenges
Progress Tracking Challenges
Being unable to measure your progress and improvements in a meaningful way or being unable to interpret data may make it more diffcult for any lifter to feel motivated. It's important that users are able to reinforce their goals by seeing clear cut progress whether that is through weekly updates or gamifying fitness milestones.
Being unable to measure your progress and improvements in a meaningful way or being unable to interpret data may make it more diffcult for any lifter to feel motivated. It's important that users are able to reinforce their goals by seeing clear cut progress whether that is through weekly updates or gamifying fitness milestones.
Develop
Develop
Feature Ideation
Feature Ideation
After compiling user sentiments, we synthesized the information and coded prevalent information and data into an affinity map. The affinity map defines four major points of interest prevalent in most social media and fitness apps.
After compiling user sentiments, we synthesized the information and coded prevalent information and data into an affinity map. The affinity map defines four major points of interest prevalent in most social media and fitness apps.
These four elements helped guide how we understood the user's needs and the core features that the main social features would address.
These four elements helped guide how we understood the user's needs and the core features that the main social features would address.
Information Architecture
Information Architecture
The layout of the social page is built to focus on three main points of emphasis aimed at the community building and gamifying aspects of the social feature.
The layout of the social page is built to focus on three main points of emphasis aimed at the community building and gamifying aspects of the social feature.
Lo-fi Wireframe
Lo-fi Wireframe
I made some lo-fi wireframes in Figma that would be the basis for our first design iteration.
I made some lo-fi wireframes in Figma that would be the basis for our first design iteration.
Feedback
Feedback
I received feedback from the team about the design and where to put more emphasis. The team liked how it was similar to other social media apps like Instagram while the circles function worked similarly to a group chat. This was reassuring because these two main focuses would be creating a place for users to be motivated and interact with others.
I received feedback from the team about the design and where to put more emphasis. The team liked how it was similar to other social media apps like Instagram while the circles function worked similarly to a group chat. This was reassuring because these two main focuses would be creating a place for users to be motivated and interact with others.
Edit
Edit
Edit
Efficient Design
Efficient Design
A point made by the team was to focus on getting the user to their goal in the least amount of clicks and screens possible. When using the app between sets, users have limited rest time to utilize. Providing the most efficient experience should keep users more engaged and satisfied with the contents of the app.
A point made by the team was to focus on getting the user to their goal in the least amount of clicks and screens possible. When using the app between sets, users have limited rest time to utilize. Providing the most efficient experience should keep users more engaged and satisfied with the contents of the app.
Groups
Groups
Groups
Emphasis on the People
Emphasis on the People
The core of a social app is the people and the communities they build. To emphasize this, we wanted to make sure that circles were the biggest part of the socials page. By letting the users create their groups, they can be both motivated and held accountable by others while allowing freedom within other fitness communities.
The core of a social app is the people and the communities they build. To emphasize this, we wanted to make sure that circles were the biggest part of the socials page. By letting the users create their groups, they can be both motivated and held accountable by others while allowing freedom within other fitness communities.
Deliver
Deliver
Hifi Prototype
Hifi Prototype
Over the course of a week, I focused on building a hi-fi prototype of the app in order to create polished, visually engaging screens that emphasized the apps social features. By incorporating the teams feedback, I worked to make the interface feel dynamic, motivating, and aligned with user needs.
Over the course of a week, I focused on building a hi-fi prototype of the app in order to create polished, visually engaging screens that emphasized the apps social features. By incorporating the teams feedback, I worked to make the interface feel dynamic, motivating, and aligned with user needs.
Social Homepage
Social Homepage
Leaderboard
Leaderboard
Circles
Circles
Profile
Profile
Iterations
Iterations
Before going into development, I was requested to make a few design and layout changes that clearly emphasize the app's community-building aspects. To do that, I built three new screens for each main segment while pulling back on rankings. We believe that rankings may demoralize users who don’t see themselves at the top of the leaderboard and decide to move them within circles for a more efficient layout.
Before going into development, I was requested to make a few design and layout changes that clearly emphasize the app's community-building aspects. To do that, I built three new screens for each main segment while pulling back on rankings. We believe that rankings may demoralize users who don’t see themselves at the top of the leaderboard and decide to move them within circles for a more efficient layout.
1
1
"Discovering New Horizons"
"Discovering New Horizons"
The decision to replace the strength leaderboard with a larger "discover" option on the home screen reflects a shift in prioritizing user collaboration and community-building over competition. The team believed that rankings could demoralize less experienced users, potentially discouraging engagement. By emphasizing the discovery of new groups and connections, the app focuses on a supportive and collaborative environment, which encourages users to find gym buddies, join communities, and stay motivated.
The decision to replace the strength leaderboard with a larger "discover" option on the home screen reflects a shift in prioritizing user collaboration and community-building over competition. The team believed that rankings could demoralize less experienced users, potentially discouraging engagement. By emphasizing the discovery of new groups and connections, the app focuses on a supportive and collaborative environment, which encourages users to find gym buddies, join communities, and stay motivated.
2
2
"Let's See It"
"Let's See It"
The redesigned circles page brings community interactions to life by showcasing images and videos as the central focus of posts. This visual-first approach makes it easier for users to share progress, celebrate milestones, and stay inspired by other user’s achievements. By emphasizing media content, the page pushes for deeper engagement and creates a vibrant and motivating environment for members
The redesigned circles page brings community interactions to life by showcasing images and videos as the central focus of posts. This visual-first approach makes it easier for users to share progress, celebrate milestones, and stay inspired by other user’s achievements. By emphasizing media content, the page pushes for deeper engagement and creates a vibrant and motivating environment for members
3
3
"Highlight the User"
"Highlight the User"
We don’t need to see recent activity for a user, especially if those updates are prevalent in a circle. What we should focus on is the progression of a user and what the user is currently up to. Highlights are also an integral part of the user that adds a bit more personalization to their profile. Similar to a gallery-type social media, having images and videos up can help identify the user better than their recent activity.
We don’t need to see recent activity for a user, especially if those updates are prevalent in a circle. What we should focus on is the progression of a user and what the user is currently up to. Highlights are also an integral part of the user that adds a bit more personalization to their profile. Similar to a gallery-type social media, having images and videos up can help identify the user better than their recent activity.
Conclusion
Conclusion
Reflection
Reflection
Developing the social features for Inertia was a valuable learning experience that underscored the importance of proper UX workflows and communication within a team dynamic. This was my first time working in a professional team dedicated to an app’s development, and it involved a lot of adjusting to new workflows and advocating for certain ideas.
Developing the social features for Inertia was a valuable learning experience that underscored the importance of proper UX workflows and communication within a team dynamic. This was my first time working in a professional team dedicated to an app’s development, and it involved a lot of adjusting to new workflows and advocating for certain ideas.
A key takeaway from this project was the importance of iterative design. Early prototypes focused more on text-based content and rankings, but feedback from the team helped to highlight the need for more visual experiences to build a community-oriented app.
A key takeaway from this project was the importance of iterative design. Early prototypes focused more on text-based content and rankings, but feedback from the team helped to highlight the need for more visual experiences to build a community-oriented app.
If I were to start this project again, I would want to get earlier user feedback starting from the “Discover” phase that would assist in guidance. Much of the early ideation of the app focused on what the team believed would be best for users but speaking directly to users and getting user insights would provide more direction than simply brainstorming.
If I were to start this project again, I would want to get earlier user feedback starting from the “Discover” phase that would assist in guidance. Much of the early ideation of the app focused on what the team believed would be best for users but speaking directly to users and getting user insights would provide more direction than simply brainstorming.
Overall, the design process of the Inertia social page was a transformative and useful experience for me that taught me about UX workflows and collaboration, along with takeaways for my next project moving forward.
Overall, the design process of the Inertia social page was a transformative and useful experience for me that taught me about UX workflows and collaboration, along with takeaways for my next project moving forward.
Next Steps
Next Steps
Stats Page
Stats Page
After finishing up the first iteration of the social page, I went into brainstorming different ideas for the stats page that would translate well with the rest of the app. The first idea I had was using a radar chart to showcase progress for the individual body parts along with more in-depth data for each one. Also, including a calendar that could showcase past workout stats by day would help users with tracking progress and staying motivated.
After finishing up the first iteration of the social page, I went into brainstorming different ideas for the stats page that would translate well with the rest of the app. The first idea I had was using a radar chart to showcase progress for the individual body parts along with more in-depth data for each one. Also, including a calendar that could showcase past workout stats by day would help users with tracking progress and staying motivated.
Development
Development
Before moving forward with more iterations or testing, the team wanted to develop the first working prototype of the social page. They want to utilize a fully functioning app to test and work out kinks rather than from on a screen-by-screen basis. User testing will after the completion of the first prototype.
Before moving forward with more iterations or testing, the team wanted to develop the first working prototype of the social page. They want to utilize a fully functioning app to test and work out kinks rather than from on a screen-by-screen basis. User testing will after the completion of the first prototype.
User Testing
User Testing
The Inertia team has asked me back to do user testing once they have developed the first iteration of the prototype in hopes of gathering user data and compiling it to see where bottlenecks can occur, additional areas of opportunity, and any new features we may encounter. Data-informed decision-making will be a key step in the development process and ultimately provide a definitive answer to any problems we may come up against over the next few iterations.
The Inertia team has asked me back to do user testing once they have developed the first iteration of the prototype in hopes of gathering user data and compiling it to see where bottlenecks can occur, additional areas of opportunity, and any new features we may encounter. Data-informed decision-making will be a key step in the development process and ultimately provide a definitive answer to any problems we may come up against over the next few iterations.