A fitness and online coaching app, fostering a sense of partnership for accountability and motivation.
Case Study: Redefining Fitness
Background
In today’s fast-paced society, with numerous individuals depending on mobile apps as a resource, the demand for an easy and accessible way to reach personal health goals is increasing. To address this, I designed Athleo.
Problem
Managing health and fitness can be overwhelming due to busy schedules, limited knowledge, and a lack of accountability. Users need a secure, efficient, and tailored solution to access reliable guidance and stay motivated toward their goals.
Solution
An intuitive fitness app that connects users with professional coaches for personalized workout plans and expert guidance. With tailored support, seamless progress tracking, and a secure platform, users can stay on track and achieve their fitness goals.
Target audience
Busy individuals aged 20 to 45 who struggle to reach their fitness objectives.
Challenge
The main challenge was to create a seamless and motivating experience that accommodated users with a wide range of fitness goals and abilities.
My Role
As the UX Designer, I managed the end-to-end design process to ensure the design aligned with user needs.
The Process
I immersed myself in research, uncovering users' frustrations, behaviors, and motivations to gain a comprehensive understanding of their needs and design a user-centric solution.
I learned:
Personalized Feedback Keeps Users Motivated
Progress photos and graphs help users stay on track toward their goals.
Simplicity is Essential
Cluttered interfaces and time-consuming data entry frustrate users.Automated Tracking Enhances Experience
Users want workouts and progress to sync effortlessly, reducing manual input.Customization is Non-Negotiable
Flexible workout plans tailored to user goals, needs, and muscle recovery improve their experience.
User InterviewsI started by conducting in-person interviews with potential users to explore their challenges in maintaining a healthy lifestyle, uncover their motivations, and identify their fitness needs. Through affinity mapping, I discovered patterns, validated assumptions, and extracted key insights, which set the direction of my design strategy.
Affinity Map
User SurveyTo gather more quantitative and qualitative data from a larger group of potential users, I also conducted user surveys. This helped me identify trends, validate assumptions, and uncover common pain points that could inform design choices.
Key insights:
Time and motivation are significant barriers to consistently achieving health goals.
Users prioritize fitness and often utilize progress-tracking features.
User personasUsing insights from the interviews, I developed primary personas to guide design decisions, keeping the user at the core and ensuring Athleo effectively addressed their real needs.
“I’ve tried so many different workouts, but I struggle to stay motivated.”
“I want to be healthy for my kids, but finding time to go to the gym is hard.”
Guided by research insights, I defined the core problem, brainstormed potential solutions, and envisioned how users would engage with the app.
User StoriesAs a user, I want to easily track and analyze my progress so I can stay motivated and see tangible results from my efforts.
As a user, I want to create an account and connect with a fitness coach who can develop a quick and flexible workout plan that fits my lifestyle so I can stay healthy without sacrificing time.
User JOURNEY MAPSTo better empathize with users, I mapped out their journeys. This exercise led to actionable solutions, such as providing clear guidance during onboarding and creating simplified interfaces to enhance satisfaction.
Scenario:
Chloe wants to track and analyze her progress efficiently but struggles with complex data entry.
Goal: Log her workouts and monitor her progress.
Scenario:
Noah wants an efficient workout plan that fits into his busy schedule.
Goal: Connect with a fitness coach who can develop a personalized fitness routine.
Task analysis & User FLOWsThen, user flows were created to ensure that key features included all the necessary steps for users to achieve their objectives. This approach streamlined the app's core functions and ensured a cohesive screen flow while minimizing cognitive overload.
1. Chloe completes a workout.
2. Noah creates an account.
With the groundwork in place and a clear vision in mind, it was time to bring the app to life!
sitemapTo align the app's information architecture with user mental models, I conducted an open card-sorting exercise with 10 participants. Using the data collected, I updated the sitemap to ensure it met user expectations.
WIREFRAMEsAfter establishing the app’s information architecture, I was excited to begin sketching. Starting with low-fidelity wireframes, I explored layouts and tested navigation patterns of the core features.
Onboarding
Complete a Workout
Track Progress with Pictures
Mid-fidelity prototypeOnce I had built a foundation with the low-fi wireframes, I progressed to mid-fidelity designs using Figma. Here, I incorporated more structure and details while testing interactions and usability.
Onboarding
Complete a Workout
Track Progress with Pictures
Style GuideAs the design evolved, I developed a style guide with patterns, a cohesive color palette, typography, and other UI components. This guide became the backbone for consistency across the project.
High-fidelity prototypeThis is when the app's design truly evolved! My aim was to execute a clean and intuitive interface that provided a seamless user experience. Micro-animations, such as transitions and subtle movement, were added to enhance usability and make interactions more enjoyable.
Onboarding
Complete a Workout
Track Progress with Pictures
Usability TestI conducted in-person, moderated usability tests with 6 participants to determine whether they could navigate the app easily and access key features without frustration. I focused on three tasks: creating an account, beginning and completing a workout, and using the progress picture comparison feature.
After gathering both qualitative and quantitative data, affinity mapping and organizing the results in a rainbow spreadsheet helped identify the main challenges and errors encountered by participants.
I put the design in users’ hands, observing their interactions and gathering feedback to uncover opportunities for improvement.
ChallengeDesigning the splash screen was one of my biggest challenges because I didn’t fully understand how users interact with visual elements. To gain more clarity, I conducted a preference test with 16 participants. I asked them to choose between two splash screen designs and explain the reasoning behind their choices.
Splash Screen Option 1
Splash Screen Option 2
Results from Lyssna
The test results revealed the following insights:
Users prefer a cleaner, more focused design with animated images over a more visually intense version featuring real people.
Users prioritize simplicity because it makes the text easier to read and other UI elements easier to engage with.
Therefore, I moved forward with splash screen option 1, as the data indicated that users prefer the simpler design with animated images (view detailed test report).
With actionable insights in mind, I entered iterative cycles and made refinements to ensure the designs were closely aligned with user needs.
changes to Address user InputWhat changed?
Added more clarity to the instructions to avoid confusion.
Increased the size of the checkboxes to improve accessibility and avoid frustration.
Usability Test Issue 1:
Participants had trouble interacting with the progress picture checkboxes.
Usability Test Issue 3:
Participant attempted to click the inactive 14-day trial button.
What changed?
Removed the inactive 'Start 14-day trial' button from the first screen to clarify that users must complete a specific action before proceeding.
Added a background element to draw attention to the subscription plan buttons, making them more visually prominent.
Usability Test Issue 2:
Participants wanted more information and customization features during workouts.
Usability Test Issue 4:
Participant mistook the 'next' button for the 'start' button.
What changed?
Replaced static exercise tutorial images with videos to provide a more informative experience.
Redesigned the button layout and appearance to improve intuitiveness and reduce the chance of users mistaking the 'Next' button for a 'Play' button.
Added an 'Edit' button to enhance customizability and allow users to modify workouts according to their preferences while exercising.
Added written exercise instructions and mental cues to help users better comprehend and execute workout steps effectively.
What changed?
Included additional filters to help users find a coach that better aligns with their preferences and needs.
Enhanced the process to allow users to select a coach from a list of options, giving them more control over their choice.
Usability Test Issue 5:
Participants expressed the desire for more coach customization.
enhance accessibilityI also conducted accessibility testing using the Stark Plugin on Figma to identify potential accessibility issues, ensuring the app is inclusive for all users. Below are a few iterations based on the evaluation:
What changed?
Edited the logo color to comply with WCAG AA accessibility standards for better contrast and readability.
Darkened the text and input field colors to improve readability and contrast.
What changed?
Darkened the text to improve contrast.
Updated the design of the buttons to comply with WCAG AA accessibility standards for better contrast and readability.
What changed?
Enhanced the tab bar design with a darker color to meet AA accessibility standards and improve contrast for better visibility.
Changed the color of the font to increase contrast and improve readability.
Athleo PrototypeLastly, I collaborated with CareerFoundry peers in a feedback loop to further elevate the design. Multiple rounds of iterations culminated in the evolution of Athleo to be an intuitive, user-centered, and engaging product.
This design process has been an incredible opportunity for application and growth. Each step, from research to the prototype, taught me the importance of actively listening to and understanding various perspectives, especially the needs and feelings of the users.
Looking ahead, I hope to:
Conduct another round of testing to validate recent iterations, identify any remaining usability issues, and continue to improve accessibility.
Design the rest of the prototype, including the profile and settings features, ensuring a comprehensive and intuitive experience that speaks to users’ emotional needs.
Prepare for hand-off by organizing documentation for a smooth transition to development.
My biggest takeaway from this project is that design is not about creating the “perfect” product or system; it’s about the journey. It is an ongoing process of learning, testing, and improving while keeping empathy at the forefront. I am excited to apply these lessons to future projects as I continue to grow as a designer and collaborator.
*Leveraged AI tools like Grammarly to refine my writing throughout the design process and portfolio.