Meal planner for nutrition-savvy foodies
Redesigning the dashboard to simplify planning, viewing, sharing, and analyzing meal plans and nutrition info
Project
MyFoodData (MFD) is a web-based platform helping nutrition-savvy meal planners and cooks tailor their meals toward their nutritional needs. For this project, I redesigned the meal planner dashboard, which focuses on making it easier to plan, view, and share meal plans and analyze nutrition information.
- Make the MFD dashboard more useful for users
- Increase number of food entries by 200%
Problem statement
MFD’s first dashboard was a simple list of saved foods, compiling nutrition data from various sources. While it presented detailed nutrition information, it didn’t unify the content to address specific user needs. Through user discussions, key questions emerged:
- Who are MFD’s target users, and what goals do they have that MFD is uniquely positioned to help with?
- How might we present nutrition data in a way that best fits users’ goals?
Understanding problem
Competitive analysis
The food and health industry is highly competitive, with weight loss being a common user goal. However, each app takes a slightly different approach. We analyzed 35 apps and 8 websites to understand their value propositions and features.
User interviews
I conducted three user interviews to explore current behaviors. These interviews refined our personas and confirmed that the next dashboard iteration should be a data-driven meal planner with easy save, share, and print features.
User personas
We decided to focus on the planners and cooks for two reasons: my client is passionate about serving the underserved planner and cook category rather than competing in the already crowded weight-loss segment, and MFD being web-based lends itself much more naturally to flows that aren’t focused on mobile-based food intake tracking.
Features & goals
Taking insights from all user studies, we defined the following features to focus on.
Proposed solution
User flow
Our research led to three main objectives: 1) allow users to add foods, recipes, or meals to a daily planner to track nutrient goals, 2) enable saving frequently used items, and 3) provide a weekly meal plan with target nutrient insights. We then mapped key user actions for each page and defined essential links between them.
Daily planner
Challenge: Users want to plan meals using nutritional information directly in the dashboard.
Solution: Embedded food entry modal. After selecting a date and meal on the Daily Planner page, users add foods to their meal from a saved list (favorites, custom foods, recipes, or meals) or by searching the MFD database. As foods are added to the meal planner, the daily nutrition summary is automatically updated.
Customizable daily summary
Challenge: Users want to track specific nutrients important to them.
Solution: Customizable Daily Nutrition Summary component. Being able to customize the daily nutrition summary was an important feature to include, as users cared about different nutrient targets. The initial values are set to the recommended amount for a daily diet of 2,000 calories, but users can personalize the target amount and the nutrients they’re interested in.
We decided to limit the functionality there, but future work should consider including 1) educational onboarding to help teach users about nutrient targets, and 2) alert messages for meals providing too much of a specific nutrient and other unhealthy edge cases.
Food cards
Challenge: The current view doesn’t distinguish between food, recipes, and meals — making it difficult for users to understand the different terms. In addition, each card showed only ingredients without providing insight into nutrition.
Solution: Food-specific cards. The new design has three different food cards — food, recipe, and meal — that show progressively more information depending on the type. We also brought similar information into the Daily Planner and Nutrition Summary to maintain a consistent experience and surface nutrition data wherever it’s necessary.
Saved list of foods
Challenge: The current dashboard only gives the ingredient list per individual food card, and users would have to go to another page to get a more detailed analysis of nutrition data.
Solution: All-in-one food table with detailed nutrition data. Instead of taking users to a different page to view detailed information, users can see a high-level summary in the table view; clicking on a food, recipe, or meal expands a panel with more detailed nutrition data.
Weekly plan
Challenge: Users wanted to plan their meals on a weekly basis to track specific, relevant nutrients.
Solution: Weekly calendar with a detailed-information toggle. The Weekly Plan page is designed for users who want to print or share their meal plan. Users can toggle between the simple and detailed views to see a breakdown of their nutrition daily and per meal.
Next steps
The MVP was released, and the feedback we got from existing power users has been extremely positive. By providing a much clearer purpose for this dashboard, we saw a 345% increase in number of food entries, 10% in page views, and 85% increase in sign-ups.
Now that this large product iteration has launched and shown to be successful, there are a few different directions we’ve started to investigate to build upon this success. Our next steps include:
- Thinking through mobile strategy
- Redesigning other single-page tools optimized for SEO (e.g. recipe nutrition calculator) to match the new look, and integrating all the tools to lead to sign-up
- Creating a profile page to allow users to enter their personal data
- Designing for different use cases (e.g. nutritionists creating meal plans for their clients)
Key takeaways
Being aware of scope creep and knowing when to push back
With an open and idea-rich client, we quickly saw the need for clear project scope. To prevent scope creep, we introduced structured kick-off meetings, improving planning and enabling faster iterations.
Thinking through multiple ways to visualize data and presenting various options
This project allowed us to explore multiple data presentation options. Quick wireframes helped us assess strengths and weaknesses, leading to a confident final choice.
Empathizing with users that are different from myself
As a frequent calorie tracker, I thought I knew this space well. However, user interviews revealed needs I hadn’t considered, reinforcing the importance of designing for diverse users.
Importance of a design system
Working on various site features led to refining components and building a small design system. This improved efficiency and ensured a cohesive experience across the site.
Designing for engineers
With a small development team, we balanced ideal design with feasibility, ensuring solutions were not just great in theory but also practical to implement.