Trackit.fit

Trackit.fit is a web platform designed to empower users to achieve their fitness goals through personalized progress tracking and insightful analytics. By offering a seamless way to log workouts, nutrition, and physical changes, the platform is a comprehensive tool for fitness enthusiasts, personal trainers, and health-focused communities. Its core value lies in its user-friendly interface, data-driven insights, and collaborative features, enabling individuals and teams to stay motivated, monitor milestones, and make informed decisions on their fitness journey.

Feature Enhancements

To better support holistic wellness, we aimed to enhance 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 Role

Timeline: 3 Months, August 2024-November 2024

Team: UX/UI Designer (Myself), Development Team, Product Management and CEO.

View Live Website

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: The objective of enhancing Trackit. fit was to improve user engagement and satisfaction by addressing pain points and optimizing core features. Key goals included streamlining the user journey for better usability, integrating new functionalities to support team collaboration, and enhancing the interface for a more intuitive and visually appealing experience. These enhancements aimed to meet the needs of diverse user personas, ensure seamless interactions across devices, and align the platform with competitive market standards to boost user retention and satisfaction.

Research and Discovery Phase:

 

In the research and discovery phase for feature enhancements like progress photo tracking, water tracking, new diet plans, and recipes organized by macronutrients, 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.

Interviews: During user interviews for Trackit.fit, we faced challenges in recruiting a diverse group of participants who represented the target audience. Scheduling conflicts and limited availability often led to rescheduling, prolonging the timeline. Some users also struggled to articulate their needs clearly, requiring follow-up questions to uncover deeper insights. Despite these hurdles, the interviews revealed critical findings: users desired a more intuitive way to track progress, better integration with fitness devices, and clearer data visualizations. Additionally, team collaboration features emerged as a priority for users managing group fitness goals, sparking ideas for feature enhancements. These findings laid the foundation for personas and informed the subsequent design iterations.

User Survey

Surveys were critical for the feature enhancements on Trackit.fit because they provided a scalable way to identify user pain points and validate assumptions about collaboration challenges. The primary challenge was understanding why team interactions on the platform felt fragmented despite having basic sharing options. Key findings revealed that users desired more robust features for assigning tasks, tracking progress, and consolidating feedback in one place, leading to clearer priorities for design improvements.

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 first iteration of the Trackit.fit design focused on addressing user needs based on insights from surveys, interviews, and competitive analysis. This initial version prioritized intuitive navigation, simple yet impactful progress tracking, and clear visual hierarchies. Wireframes and low-fidelity prototypes were created to establish a user flow that supported quick and easy access to key features, such as tracking progress photos and viewing data insights. Inspired by photo album designs, one sketch struck a balance between aesthetics and function for the progress photo tracker, setting the tone for the rest of the features. Feedback from early user testing highlighted some usability gaps, prompting iterative design improvements to streamline the experience. The iteration laid the foundation for further refinement, balancing usability with aesthetic clarity.

 

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

Customer feedback played a pivotal role in shaping the design direction of Trackit. fit. Through a combination of surveys, user interviews, and usability tests, we gathered valuable insights about users' needs, pain points, and expectations. Feedback revealed that users wanted a more intuitive navigation system, easier access to progress-tracking tools, and a more personalized experience. This direct input helped prioritize features, refine the user interface, and guide decisions around functionality and design. The most significant 'aha' moment came when users expressed a desire for clearer visual cues on their fitness progress, leading us to implement more prominent data visualization elements and streamlined progress trackers.

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

  • +40% engagement in progress tracking.

  • +30% adoption of meal planning features.

  • Hydration tracking retention improved by 50%.

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.