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 integrated approach to logging workouts, nutrition, and physical changes, 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.
Feature Addition
To better support holistic wellness, we aimed to add three core features: Progress Photo Tracking, Hydration Tracking, and a new Nutrition System that includes diet plans, recipes, meal suggestions, and macronutrient organization. This case study takes you through the journey of creating these features, from research to the final product.
My Journey
As a UX Designer, I collaborated closely with product managers, developers, and cross-functional teams to enhance key features, including progress photo tracking, water tracking, diet plans, recipes, and meal suggestions, creatively organized by macronutrients. My role spanned the entire lifecycle, beginning with research—conducting user interviews, surveys, creating personas, and performing competitive analysis—to uncover user needs. I then progressed to designing solutions through sketches, low-fidelity wireframes, and interactive prototypes, addressing challenges along the way. Through iterative user testing and feedback, I refined designs into a final product, ensuring an engaging, user-centered experience that aligned with project goals.
Overview
Objective: We aimed to include diet plans, recipes, meal suggestions, and macronutrient organization. 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:
In the research and discovery phase, we began by conducting user interviews and surveys to understand user goals, pain points, and motivations. From these insights, we developed detailed personas to represent key user groups. A competitive analysis highlighted gaps and opportunities in similar apps, providing inspiration for a creative and engaging approach. Challenges included synthesizing diverse user feedback, prioritizing features, and aligning with product goals. Early sketches and low-fidelity wireframes were tested iteratively with users, leading to actionable insights for improvement setting a strong foundation for the subsequent design and implementation phases.
User Interviews: Key Insights & Challenges
During the user interviews for Trackit.fit, we encountered challenges such as recruiting a diverse participant group, scheduling conflicts, and users struggling to articulate their needs. To address this, we used follow-up questions and guided discussions to uncover deeper insights. Despite these hurdles, the research revealed critical user needs that shaped our design decisions:
Progress Photo Tracking: Users wanted an easier way to organize, compare, and track their progress over time with better sorting and side-by-side viewing options.
Hydration Tracking: Many users struggled with consistency and requested more intuitive reminders, progress insights, and daily goal adjustments.
Nutrition System: Users expressed the need for structured meal plans, recipe suggestions, and clearer macronutrient tracking to simplify their diet planning.
These insights became the foundation for refining each feature, ensuring a more intuitive, engaging, and effective experience for users.
User Survey
Surveys played a crucial role in providing scalable user feedback. They helped identify pain points and validate assumptions about user challenges.
Progress Photo Tracking: Users wanted better organization, side-by-side comparisons, and clearer timelines for visual progress.
Hydration Tracking: Many struggled with consistency and requested smarter reminders, goal customization, and daily progress insights.
Nutrition System: Users needed structured meal plans, recipe suggestions, and easy macronutrient tracking to simplify their diet planning.
These insights helped prioritize design improvements, ensuring each feature was intuitive, engaging, and aligned with user needs.
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
In the case study, the wireframes served as the foundational blueprint for the Trackit.fit website, translating user insights into intuitive design structures. Starting with low-fidelity sketches, I created simple layouts that focused on key functionalities like progress tracking, user navigation, and photo upload features. These wireframes allowed for quick iterations and validation with both the design team and stakeholders, ensuring alignment with user needs and business goals. Wireframes were redesigned to focus on one feature at a time, such as a hydration ring that dynamically updated, making the interface intuitive and visually engaging. These iterative changes ensured the app catered to both beginners and 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 ‘aha’ moment came when users emphasized the need for stronger visual indicators of their fitness progress, which 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 design of Trackit.fit seamlessly integrated user insights into a visually engaging and intuitive interface. The website's layout was optimized to enhance the user journey, providing easy access to workout tracking, progress visualization, and community engagement. A key challenge was balancing feature richness with simplicity, ensuring that the interface was both powerful and accessible. To overcome this, we refined user flows through iterative prototyping and A/B testing, prioritizing clarity and ease of navigation. Collaborating closely with product managers and developers, we implemented a responsive design that met diverse user needs, ultimately creating a polished, user-centric experience.
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.