Trackit.fit
Trackit. fit is a web platform designed to help users achieve their fitness goals by providing personalized progress tracking and insightful analytics. It offers an approach to logging workouts and nutrition, serving fitness enthusiasts, personal trainers, and health-focused communities. The platform’s value lies in its user-friendly interface, data-driven insights, and collaborative features, motivating individuals and teams to stay on track and make informed decisions about their fitness journey.
Feature Addition
We introduced three key features to enhance the user experience: Progress Photo Tracking, Hydration Tracking, and a new Nutrition System with diet plans, recipes, meal suggestions, and macronutrient organization. This case study takes you through the journey of developing these features, from research to the final product.
My Journey
As the UX Designer, I collaborated closely with product managers, developers, and teams to enhance core features including visual progress tracking, hydration monitoring, and personalized meal planning based on macronutrient targets.
My process began with comprehensive research: user interviews, surveys, persona development, and a thorough competitive analysis to understand user needs. This informed the iterative design process, which involved sketching concepts, creating wireframes, and developing prototypes refined through user testing and feedback.
Overview
Objective: We aimed to include diet plans, recipes, meal suggestions, macronutrient organization, progress photos tracking, and water tracking. Our goal was to improve user engagement and satisfaction by addressing key pain points, streamlining the user journey for better usability, and ensuring a seamless experience across devices. By developing these core features, we sought to create a more intuitive, visually appealing interface that aligns with competitive market standards and boosts user retention.
Research and Discovery Phase:
Our research phase involved user interviews and surveys to understand their goals, pain points, and motivations. We used these insights to develop detailed user personas. A competitive analysis revealed opportunities, inspiring our creative approach. Challenges included managing diverse user feedback, prioritizing features, and aligning with product goals. Iterative testing of early sketches and wireframes provided actionable improvements, building a strong foundation for design and implementation.
User Interviews: Key Insights & Challenges
During user interviews for Trackit.fit, we faced challenges like recruiting diverse participants, scheduling conflicts, and users having trouble expressing their needs. To overcome this, we used follow-up questions and guided discussions to dig deeper. Despite the hurdles, the research uncovered key user needs that informed our design:
Progress Photo Tracking: Users wanted an easier way to organize and compare their progress with better sorting and side-by-side views.
Hydration Tracking: Many struggled with consistency, asking for more intuitive reminders, progress insights, and adjustable daily goals.
Nutrition System: Users needed structured meal plans, recipe suggestions, and clearer macronutrient tracking to simplify diet planning.
These insights became the foundation for refining the features, creating a more intuitive and engaging experience for users.
User Survey
Surveys were crucial for gathering broad user feedback, helping to identify pain points and validate assumptions about user challenges.
Progress Photo Tracking: Users expressed a need for improved organization, the ability to view side by side comparisons, and clearer timelines to track visual progress.
Hydration Tracking: Users reported difficulty maintaining consistency and requested smarter reminders, customizable goals, and insights into their daily hydration progress.
Nutrition System: Users desired structured meal plans, recipe suggestions, and simplified macronutrient tracking to streamline their diet planning.
User Personas
The user personas highlighted a diverse range of fitness enthusiasts, from beginners seeking guidance to advanced users focused on tracking detailed performance metrics. Key challenges emerged around the overwhelming amount of data presented on the website and the difficulty users faced in navigating through complex features. Beginner users struggled with finding the right tools and understanding how to interpret their progress, while advanced users sought more granular control and customization options. Through user interviews, surveys, and competitive analysis, it became clear that a simplified, intuitive user experience with personalized guidance and customization options was essential. This insight led to refined navigation and feature enhancements tailored to meet both user groups' needs effectively.
Competitive Analysis
The competitive analysis of Cronometer, MyFitnessPal, and Lose It! provided valuable insights into industry standards and user expectations. By examining their strengths, such as Cronometer's precision tracking, MyFitnessPal's robust community features, and Lose It!'s gamified approach, we identified gaps and opportunities for differentiation in Trackit.fit. For example, Cronometer's data-rich interface highlighted the need for more detailed nutritional breakdowns, while MyFitnessPal's social features inspired us to consider team-based tracking enhancements. This analysis validated certain design directions and shaped innovative features that resonated with our target users, ensuring Trackit.fit stood out while meeting core needs effectively.
Flowchart
By mapping out the user journey from entry to task completion, the flowchart allowed us to identify key touchpoints and potential friction points in the navigation. A breakthrough came when the team adopted a minimalist approach, stripping down flows to their simplest forms. For example, the progress photo feature was streamlined to allow users to upload, tag, and view their photos in a timeline with just three taps. This clarity ensured a smoother user experience, aligning with the app’s mission to simplify health tracking. Key findings included areas where users experienced confusion or delays, which led to simplified paths and clearer labels. This helped us optimize the site’s layout, making it easier for users to access essential features and enhancing overall usability and satisfaction.
Initial Design
The initial Trackit.fit design focused on Progress Photo Tracking, Hydration Tracking, and the Nutrition System, guided by insights from surveys, interviews, and competitive analysis. This version prioritized:
Progress Photo Tracking: Inspired by photo album layouts, early sketches balanced aesthetics and function, allowing for better organization and side-by-side comparisons.
Hydration Tracking: Designed with simple progress indicators and smart reminders to help users stay consistent.
Nutrition System: Structured meal plans and clear macronutrient tracking for easier diet management.
Wireframes and low-fidelity prototypes established an intuitive flow for quick access to these key features. Early user testing revealed usability gaps, leading to iterative refinements to enhance clarity and efficiency.
Wireframes
The wireframes were the simple layout for the Trackit.fit website, making user ideas easy to see. I began with quick drawings showing key parts like tracking progress, navigating the site, and adding photos. These drafts let us test ideas fast and get feedback from the team, ensuring we met user needs and business aims. We then focused the wireframes on one feature at a time, such as a water tracker that visually updated as users logged their intake, making the site clear and engaging. These changes helped the app work well for everyone, from beginners to experienced users.
User Feedback
Through surveys, interviews, and usability tests, we identified key user needs and pain points that shaped our design decisions.
Progress Photo Tracking: Users wanted clearer visual cues for progress, leading to more prominent comparison tools and an improved timeline view.
Hydration Tracking: Feedback highlighted the need for better reminders and goal customization, prompting enhancements to progress indicators and daily tracking insights.
Nutrition System: Users sought a more personalized experience, inspiring the integration of structured meal plans, recipe recommendations, and macronutrient breakdowns.
A major moment came when users emphasized the need for stronger visual indicators of their fitness progress. This led to more intuitive data visualizations and streamlined tracking across all three features.
Early Prototypes
User Engagement
Ensuring long-term engagement required more than just functionality. Users wanted progress photo tracking to feel rewarding and the hydration tracker to inspire consistency. Gamification was tested, but it felt gimmicky. Instead, subtle motivators like weekly progress highlights and personalized tips were introduced. These changes resonated with users, who appreciated the app’s role as a supportive partner rather than a taskmaster.
Design System
Using a design system greatly streamlined the process by providing a centralized repository of standardized design components, patterns, and guidelines. The design system ensured consistency and coherence across the application.
Final Designs
The final Trackit.fit design made it easy and enjoyable to use, thanks to what users told us. The website was set up to help people track workouts, see their progress, and connect with others without any fuss. It was important to have many features but keep things simple. So, we tested different versions and made changes to make sure everything was clear and easy to find. By working together with the team, we created a design that looks good on any device and puts users first.
Results & Impact
Increased engagement in progress tracking, with more users consistently uploading and reviewing photos.
Higher adoption of meal planning features, making nutrition tracking more seamless.
Improved retention in hydration tracking, with users sticking to their goals more effectively.
Conclusion
This project was a testament to the power of user-centered design and close collaboration across teams. Enhancing Trackit.fit’s features addressed user pain points and drove engagement, making health tracking a seamless, enjoyable experience. The progress tracker helps users visualize their journey over time by organizing and comparing photos in a clear, chronological timeline, enabling them to track and celebrate their personal growth. The hydration tracker used intuitive visuals like a refillable water glass icon, and the nutrition system combined meal logging with insightful trends. User testing revealed a sense of delight and relief—users could now track their health comprehensively without juggling multiple apps. The challenges faced throughout the process ultimately shaped a product that was intuitive, engaging, and aligned with user needs.
What I Would Do Differently
Make Progress Dashboards More Customizable – Let users choose who sees their progress and what details they share.
Enhance Feedback & Comments – Add threaded conversations and emoji reactions to boost interaction.
Improve Goal-Setting & Check-Ins – Introduce smart reminders and streaks to keep users engaged.