Muscle Map.
A fitness app that helps users keep track of their workouts with a community
Industry
Health & Fitness
Timeline
Role
UI UX Designer
8 weeks
Overview
The problem
Muscle Map is a fitness app that was created to help users achieve their wellness goals as easily as tapping a screen. Creating this app allowed me to dive deeper into the needs of users and design based on their needs.
Many individuals that strive to achieve their fitness goals face challenges in accessing personalized training guidance and effectively tracking their workout progress. Existing fitness apps often lack the flexibility to provide both expert advice from personal trainers and comprehensive self-tracking tools.
Research Plan
In conducting user interviews, surveys, and competitive analysis, the objective is to uncover insights into user needs, preferences, and behaviors.
Project Goals
With the help of fitness enthusiasts and personal trainers will aid in finding what drives each user to stay on track with a fitness routine.
Understand how users prioritize their fitness routine.
Understand pain points participants experience with staying on track with a fitness routine.
The competitor analysis revealed valuable insights into the strengths and weaknesses of key players in the fitness app market,
Competitor Analysis
Fitbod stands out for its personalized workout recommendations and adaptive training algorithms
Gymshark Training excels in providing premium workout plans and apparel integration
FitNotes, on the other hand, offers a simple yet effective workout tracking solution favored by users seeking a minimalist approach.
User Research
To empathize with the users and understand their problems, I interviewed 5 participants, ranging from beginners to advanced fitness enthusiasts, to gather insights into their motivations, habits, and pain points.
Research Insights
Fitness enthusiasts struggle to maintain balance between work and fitness.
Fitness enthusiast rely on multiple apps to keep track of their fitness routines.
Personal trainers shared that lack of motivation plays a main factor in their client’s fitness goals.
Fitness enthusiasts gravitate towards video tutorials for exercise and form.
User Persona
Pain Points
The creation of user personas for the Muscle Map fitness app project was imperative to ensure a deep understanding of the diverse range of individuals who would be using the app. By developing personas representing different demographics, fitness levels, and motivations, I gained valuable insights into the specific needs, goals, and pain points of their target audience.
physical exhaustion can keep users from continuing their fitness routines.
The use of multiple apps to maintain a fitness routine can get overwhelming.
Apps lack the capacity to use users progress data to suggest adequate progress feedback.
Affinity Map
The next phase of synthesizing information was to create an affinity map that visually represents the interconnected themes: Challenges, self-education resources, tools use to track routine, Motivators, struggles and interests.
Card Sorting
4 participants were recruited to participate in this card sorting
75% of users paired friends, community, share in the same category
100% of users group music and pictures (workouts) together under profile theme
Research Synthesis
How Might We?
How might we help fitness enthusiasts balance physical fitness and work life?
How might we help personal trainers aid their clients with their fitness routines?
How might we help fitness enthusiasts create an online community to share fitness related routines and content?
Empathy Map
In exploring user perspectives through the empathy map, several key insights emerged.
Users express a desire for personalized guidance and support in their fitness journey, emphasizing the importance of tailored workout plans and progress-tracking features.
Motivation and accountability are recurring themes, with users seeking ways to stay engaged and committed to their goals, especially when exercising alone.
Frustrations arise from the overwhelming variety of workout options available.
Story Map
The story map for the Muscle Map fitness app was created to align the development process with a clear understanding of user needs and desires. The story map serves as a blueprint for building a cohesive and intuitive user experience by visualizing the user journey from initial onboarding to achieving fitness goals, the story map serves as a blueprint for creating a cohesive and intuitive user experience.
User Engagement
Increase user engagement by providing an intuitive interface that encourages frequent interaction with the app.
Personalization
Provide personalized recommendations and tailored content based on users' fitness levels, goals, preferences, and past behavior.
Goal Achievement
Empower users to track their progress over time, celebrate milestones, and make adjustments to their routines as needed.
Accessibility
Ensure that the app is accessible to users of all fitness levels, abilities, and demographics.
Task & User Flows
Task flows & User Flows were meticulously crafted to map out the sequential steps users undertake to accomplish specific goals, such as setting up a workout routine and tracking progress.
Mood Board
In creating the mood board for the fitness app, I embarked on a creative adventure to capture the vibe, feel, and style that best represents the user experience. I dove into a mix of inspiration, browsing through fitness websites and the latest design trends. I gathered up a colorful mix of images, fonts, and visuals that just felt right, aligning perfectly with both the brand identity and what users would love.
Sitemap
Project goals
The sitemap provides a clear overview of the app's structure, ensuring that users can easily navigate between different sections and access the features they need. By organizing content logically and prioritizing user needs, the aim is to deliver a seamless and intuitive user experience that promotes engagement and helps users achieve their fitness goals effectively.
Sketches
The preliminary sketches for the fitness app are the genesis of transformation, capturing the essence of health and wellness before they evolve into dynamic user interfaces.
Lo-Fi Wireframes
The low-fidelity wireframes served as the foundational sketches for the design exploration. These initial blueprints allowed me to quickly visualize and iterate on ideas without getting bogged down in details.
Branding
I embarked on a branding journey to encapsulate the essence, vibe, and aesthetic that epitomizes the user experience. I explored fitness platforms and contemporary design movements. I curated a vibrant array of imagery, typography, and visual elements that resonated authentically, seamlessly harmonizing with the brand persona and resonating with our target audience.
UI Kit
This UI Kit ensures consistency and efficiency throughout the design process. It provides a seamless framework for creating engaging user experience that aligns seamlessly with the brand identity, fostering usability and delight across every interaction.
High-Fidelity Wireframes
After thorough review and revisions, the High-fidelity wireframes underwent further refinement to ensure alignment with the established task flows. This polishing process involved fine-tuning the layout, visual elements, and interactive components to enhance usability and clarity. Additionally, attention was paid to consistency across screens and adherence to design principles to maintain a cohesive user experience.
Prototype
Through the prototype, users can experience firsthand how the interface functions and flows, providing valuable insights into usability and user experience. By incorporating clickable elements, transitions, and interactive features, the prototype brings our design concepts to life
Usability Testing Results
I recruited five participants to collect quantitative data on task completion, time on task, and satisfaction ratings. Based on the feedback received, common themes and insights were identified to use for design revisions.
Design Iterations
These design iterations were gathered from usability testing. User feedback aided in understanding the perspective of participants.
Before
After
Based on user feedback on lowering the number of clicks, a workout list was preferred over the “see all” options
After
Before
Adjusted Color and added a CTA button for users to view their last workout input
Summary
Throughout the fitness app UI/UX project, key lessons were learned that profoundly influenced the design process. Finding suitable users for testing proved crucial, emphasizing the need for diverse representation. Interviewing techniques, including open-ended inquiries and active listening, unveiled invaluable insights.
Combining qualitative feedback with quantitative data collection methods, such as task completion rates, provided a comprehensive understanding of user behavior. The iterative design approach allowed for continuous refinement, ensuring the app's usability and functionality aligned with user expectations.
Effective collaboration and communication facilitated cross-functional feedback with my mentor which in return enriched design decisions. Documenting research findings and reflecting on successes and challenges offered insights for future projects and professional growth.
Next Steps
As I reflected on my progress through all my case studies and designs, I decided to redesign some wireframes for this project. This was my first one, and looking back, I realized how unsure I had felt about my knowledge and skills at that time. By revisiting and improving upon those initial wireframes, I aimed to apply the insights and growth I've gained since then, ensuring that the design better aligns with my current understanding and capabilities.
