Helping users stay motivated on their fitness journey through personalized support.
My Role
UX Researcher, UX/UI Designer
Project Type
Fitness App Concept
Stakeholder
CareerFoundry - UX Immersion Course
Tools
Google Forms, Figma
Project Timeline
4 months
Background
When support meets motivation, progress happens.
Athleo is a responsive web app concept that helps users discover and stay connected with personal fitness coaches who match their preferences and fitness goals. I managed the end-to-end design process, from user research to high-fidelity prototypes, and tested the design with real users to make fitness coaching more accessible, motivational, and approachable.
Challenge
Following through is harder than starting.
Many people want to prioritize their fitness goals and achieve them. But they struggle to stay consistent, especially when feeling overwhelmed by endless options or time-consuming data entry.
How might we offer personalized fitness experiences that keep users engaged?
Goals
Increase user engagement and retention.
Provide Personalization.
Improve Progress Tracking and Goal Achievement.
Solution
Athleo- A personal coach, motivator, and progress tracker all in your pocket.
User-Friendly Interface
With a streamlined and intuitive dashboard, users can easily navigate the app and access its core features.
Personalized Coaching
Users are matched with professional fitness coaches who tailor workout plans to their individual goals and preferences.
Progress Tracking
Athleo uses AI to analyze and track visual progress through photos, making it easy and encouraging for users to visualize their transformation over time.
The Process
I immersed myself in research, uncovering users' frustrations, behaviors, and motivations to define the core problem.
EMPATHIZE
I started empathizing with users by conducting in-person interviews to understand their challenges in maintaining a healthy lifestyle, uncover their motivations, and identify their fitness needs. After synthesizing the findings, I found a few key takeaways:
Progress = Motivation
Visual progress keeps users motivated because photos and graphs make goals feel tangible.
Simplicity is Key
Users value clean, uncluttered interfaces—too much info or manual input leads to frustration.
One Size Doesn’t Fit All
Customizable workout plans based on user goals are essential for continuous engagement.
DIG DEEPER
I administered user surveys to collect quantitative and qualitative insights from a broader audience. Synthesizing the data revealed trends, validated assumptions, and highlighted common pain points, providing valuable data to inform and prioritize design decisions.
Biggest Challenge
Most Used Features
💡 Key insights:
67.3% of users indicated that time and motivation are significant barriers to achieving their health goals.
62.5% of users prioritize workout plans and progress-tracking features.
MEET NOAH & CHLOE
To bring clarity to the problem, I synthesized my research into two personas: one, a goal-oriented user constrained by time; the other, a user feeling overwhelmed by the never-ending fitness options and resources.
“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 problem and envisioned how users would engage with the app.
WALKING IN THEIR SHOES
To better empathize with users and uncover friction points, I mapped out their journeys. This exercise led to actionable solutions, such as providing clear guidance during onboarding and creating simplified interfaces to enhance usability.
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.
Scenario:
Chloe wants to track and analyze her progress efficiently, but struggles with complex data entry.
Goal: Log her workouts and monitor her progress.
FROM FRICTION TO FLOW
Next, I mapped user flows to anticipate user needs, establish early engagement, and design an experience that feels both guided and empowering from the first interaction.
1. Noah creates an account.
The goal of this user flow was to make onboarding personal and purposeful by matching users with the right coach. By guiding them through a tailored sign-up process, users receive immediate value, building trust and encouraging commitment to their fitness goals.
2. Chloe completes a workout.
The goal of this user flow was to make logging a workout and tracking progress effortless and rewarding. By providing immediate feedback after each session, users feel accomplished and motivated, reinforcing consistency and building momentum.
With the groundwork in place and a clear vision in mind, it was time to bring the app to life!
MAKING NAVIGATION CLEAR
To align the app's information architecture with user mental models, I facilitated an open card-sorting exercise with 10 participants. Analyzing the results, I refined the sitemap to better match user expectations and optimize content discoverability.
BASIC OUTLINE
After establishing the app's information architecture, I was excited to start sketching. To evaluate the clarity of the dashboard, simplify the workout flow for better task automation, and ensure ease of progress tracking, I created low-fidelity wireframes. This allowed me to quickly iterate on key interaction patterns and the information hierarchy.
Noah Creates an Account
Chloe Completes a Workout
They Track Progress with Pictures
LEADING TO A BETTER END-USER EXPERIENCE
As I transitioned from mid- to high-fidelity wireframes, testing usability and interactions helped me uncover key areas for improvement, especially in building learnability, efficiency, and user trust.
Homescreen Design
I updated the high-fidelity design to enhance clarity and ease of use. These changes boost user confidence and make starting workouts faster and easier.
Workout Screen Design
I made several updates to improve clarity and reduce redundancy. These changes simplify the interface and enhance the user experience while exercising.
Progress Picture Design
I improved transparency. These changes help users feel more comfortable sharing personal information and more engaged with their progress journey.
VISUAL LANGUAGE
As 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.
I put the design in users’ hands, observing their interactions and gathering feedback to uncover opportunities for improvement.
CHALLENGE
Designing the splash screen posed a key challenge, as I needed a deeper understanding of how users engage with visual elements. To gain clarity, I conducted a preference test with 16 participants, which helped uncover visual preferences and expectations that informed the final direction of the splash screen design.
Splash Screen Option 1
Splash Screen Option 2
Results from Lyssna
💡 I proceeded with splash screen option 1 as the test results provided 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.
FEEDBACK FROM REAL USERS
I conducted in-person, moderated usability tests with 6 users to evaluate how intuitively they could navigate the app and access key features without friction. The sessions focused on three core tasks: creating an account, starting and completing a workout, and using the progress picture comparison feature.
Here is what the users had to say about the usability issues that they experienced:
“Oh oops, I thought that button was a start button.”
“A video might be more helpful for someone who has never worked out.”
“I’d like more filters for my coach preferences.”
“The checkbox to choose the progress pictures is too small.”
“I wasn’t sure I had to click on one of the two subscription plans.”
Guided by actionable insights, I engaged in iterative cycles to refine the designs, ensuring they not only addressed user pain points but also enhanced overall user satisfaction and usability.
REFINING TO ADDRESS USER INPUT
Added more clarity to the instructions to avoid confusion.
Increased the size of the checkboxes to improve accessibility and avoid frustration.
Enhanced Instructions & Interactions
Removed the inactive 'Start 14-day trial' button to clarify that users must complete a specific action before proceeding.
Added a background element to the subscription plan buttons, making them more visually prominent.
Increased Clarity & Guidance
Replaced static exercise tutorial images with videos to provide a more informative experience.
Redesigned the button layout to improve intuitiveness and reduce the chance of users mistaking the 'Next' button for a 'Play' button.
Added an 'Edit' button to increase 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.
Refined the Workout Experience
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.
Improved Coach Matching
DESIGNING FOR ALL
I 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 PROTOTYPE
Lastly, 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.
Athleo received overwhelmingly positive feedback from users during testing. Participants expressed high satisfaction with the simple layout and the clarity of workout details. Overall, users felt the app would be a helpful tool in their fitness journey, with many indicating that they would use the app on if developed further.
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 satisfying experience.
Prepare for hand-off by organizing clear 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 and users at the forefront. I am excited to apply these lessons to future projects as I continue to grow as a designer and researcher.