2 Engineers
Advanced Tracking and Precise Diet Planning for Professional Physique Athletes and Enthusiasts.
Overview
Despite the abundance of meal planning apps available, few cater specifically to the needs of advanced athletes. Trackit.fit, a web product aimed at offering professional meal planning solutions tailored for this demographic. The MVP focuses on addressing key challenges, including enabling long-term meal planning, allowing for food substitutions that meet specific macronutrient requirements, and offering greater flexibility throughout the meal planning process. Our goal with trackit.fit is to enhance dietary management for advanced athletes, supporting their performance and health objectives.
My impact
As the sole designer on the team. I was responsible for leading all facets of design for the MVP of this product. My responsibilities spanned across UX/UI design, establishing the branding identity, conducting user research, and overseeing usability testing. In collaboration with the founder and engineering team, I played a critical role in shaping the product's direction and user experience strategy.
We're targeting a launch in summer 2024, aiming to fill a significant gap in the market with a specialized professional meal-planning tool.
The Challenge
Professionals in fitness lack an available tools for precise dietary planning and progress tracking.
Understanding the users
Professionals Plan Their Meals Through Different Methods
After conducting interviews with five individuals who are at a moderately advanced level in their fitness journey—not beginners—we uncovered three primary meal planning methods favored by professionals: the IIFYM (If It Fits Your Macros) plan, specific diet plans, and spontaneous tracking plans.
IIFYM Plan
A flexible approach allowing users to select foods that meet macro goals without specifying exact items.
"I focus on hitting my macros while enjoying the foods I love. And it just takes time to plan everything out, i used to use IIFYM method to plan without making me feel restricted."
-Justin, 35, Advanced enthusiasts
Specific Diet Plan
Involves detailed, advance planning of meals with specific food choices, aiding in efficient grocery shopping.
"I appreciate an app that helps me outline my meals in advance, including portion sizes and nutritional content, so I can stick to my plan without any guesswork."
-Daniel, 37, Personal trainer
Spontaneous Tracking Plan
Suits those who prefer to track their diet and weight changes spontaneously, adjusting as they go.
"I don't really plan my meals in advance; I just log what I eat as I go and see how they fit into my overall nutritional goals on the fly"
-Thomas, 32, Advanced enthusiasts
User persona
Meet Justin, an advanced trainer with a focus on precision and efficency.
What Justin's Meal Looks Like?
Precise Macro-Oriented Tracking and Custom Diet Plans for Achieving Fitness Goals
Current solutions in the market
Balancing Flexibility, Database, and Goal Setting in Meal Planning Tools
While each tool has its strengths, Cronometer stands out for users deeply focused on detailed nutrition, including macro and micronutrient tracking. MyFitnessPal offers the broadest food database and community support, making it a favorite for those who prioritize variety and accessibility. FatSecret provides a balanced, user-friendly experience, though it may fall short in offering advanced customization features.
Interestingly, despite the availability of these specialized tools, many trainers still prefer using Excel sheets for their unparalleled flexibility in creating pre-planned meals for different diet days, such as high and low days. This preference underscores Excel's capability to tailor plans precisely, despite its significant learning curve and the effort required for effective meal planning and tracking.
User flow
Seamless Flow for Varied Meal Planning Preferences
The initial design approach involved segmenting users into different planning modes (IIFYM, specific diet plan, or track-as-you-go) from the beginning. Upon first using the app, users were presented with a choice to select their preferred meal planning mode. This choice was based on their existing dietary habits and goals. Each flow had its own set of features and user interface elements tailored to the specific needs of that planning style.
In our revised approach, we've simplified the user experience by creating a more seamless flow for all users. Users who like to plan ahead can set up their meals in advance using the planner feature, and these meals will automatically appear on their homepage for easy access and editing. For those who prefer a more spontaneous approach, there's the option to add meals directly on the homepage as they go. This dual functionality caters to both meticulous planners and spontaneous users within a single, streamlined system, making meal tracking and planning more intuitive and adaptable to individual lifestyles.
Wireframing
With the user flow mapped out, I created lo-fi wireframes that capture all main features for user testing.
Testing & Refinement
Refinement #1: Simplified Home Page to Avoid User Cognitive Overload
During our initial usability testing, we discovered users felt overwhelmed by the abundance of information, which hindered their ability to easily access meal details. This feedback led us to prioritize clarity, simplifying how users interact with the app. We introduced a more engaging interface, enabling users to expand meal details selectively and access daily meal plans with a single click, reducing on-screen clutter.
Subsequent tests revealed users preferred having multiple meal details visible simultaneously, often expanding all sections to view comprehensive information. Feedback indicated the "ate it" feature, intended for meal tracking, inadvertently added stress, likened to task completion rather than enhancing their experience. In our final iteration, we streamlined the homepage to focus on the primary action of adding food, relegating secondary functionalities to a "more" button. This adjustment aimed to maintain simplicity and user focus, enhancing the overall usability and satisfaction with the app.
Refinement #2: Redesigning the Meal Planner from Clutter to Clarity for Enhanced Nutritional Visibility and Simplicity
Initially, feedback on the planner page highlighted issues of clutter and readability, prompting a redesign to hide meal details by default, requiring user interaction to view more. We introduced distinct sections for "Planner," "Saved Meals," and "Saved Day Types" to facilitate easy editing. However, this segmentation led to confusion in the second round of usability testing. Users were unclear about the context of nutritional information and expressed a desire to see both the macro breakdown and detailed views of each day's plan.Responding to this feedback, the final design underwent significant simplification.
We focused on enhancing day-to-day clarity by integrating pie charts within each day's card, utilizing color coding to represent the macronutrient breakdown (proteins, carbs, fats) for that specific day. This visual approach allows users to quickly grasp the nutritional emphasis of each day, improving both the usability and the informative value of the planner page. Through iterative design and user feedback, we achieved a balance between detail visibility and overall page clarity, ensuring users can efficiently plan and understand their nutritional intake at a glance.
Refinement #3: Optimizing the Food Selection Experience
During the initial phase, our wireframe presented food selection through various categories, such as "My Favorites" and "All Meat," organized in both horizontal and vertical formats. User feedback from usability testing revealed this approach was confusing, with many preferring the search function for simplicity. Responding to this, we streamlined the categorization, focusing on fewer categories and bringing recently used items to the forefront for easier access.
Users also indicated difficulty in tracking the quantity of food items added during meal creation. To address this, we introduced a visual indicator: a red badge displaying the number of added items, accompanied by a check mark for items already included. Enhancing clarity further, the final design incorporates a progress bar showing the user's current status in meeting their meal's nutritional goals. This series of refinements aimed to simplify the food addition process, making it more intuitive and helping users stay informed of their progress more effectively.
Final Design - Key Flows
Quick Log & Meal Edit on Homepage
Streamline daily meal tracking with an intuitive interface, enabling users to log meals and make edits directly from the homepage for immediate access and adjustments.
Meal Planner for Advanced Planning
Utilize the meal planner for advanced planning, designed for swift organization of meals ahead of time. This feature simplifies the scheduling process, making it quicker to outline a nutritional strategy.
Food List Management:
Improve planning speed with a customizable food list, allowing users to manage and access their preferred food combos easily. This function supports faster meal preparation and adherence to dietary goals.
Learnings
User feedback drives design decisions
User feedback significantly shaped our design process, revealing a considerable gap between our initial concepts and users' actual needs. Gaining these insights early allowed us to refine our approach significantly. The end result looks very different from what we first imagined but matches what users want much better. This demonstrated the value of using user insights to guide design towards more effective, user-focused solutions.
Next step
Introducing AI for faster meal planning and tracking
For the next phase, we plan to integrate AI technology to enable quick food scanning, allowing users to add meals by simply taking a photo. This feature will minimize manual entry, enhancing convenience, while still providing the option to edit details as needed for accuracy and personalization.
