MyFoodData
MyFoodData is a meal planner app for nutrition-savvy foodies to plan their meals with sophisticated and customizable nutrition data
WHEN
June - August 2021
DELIVERABLES
ux research
competitor analysis
persona development
wireframes
high-fidelity design
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.
Goal
Make the MFD dashboard more useful for users
-
Increase number of food entries by 200%
Challenges
MFD's first dashboard was simply a list of saved food. It parsed and amalgamated nutritional information for many types of food from various nutritional databases. It also allowed for navigation to different parts of the site which would then allow users to discover detailed nutritional information. It did not bring any of that information together, however. As well, it had not been designed to alleviate any distinct user pains in mind. As the discussions with MFD’s users have continued, the following core questions were been uncovered:
-
Who are MFD's target users?
-
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?
-
How might we allow customizability in a simple and intuitive design?
Process
Competitor analysis was used to identify opportunities as well as build user personas. These personas were then validated through interviews with MFD users before an evolution of the dashboard's design was proposed.
Solution Discovery
An interface that users can use to plan their meals to meet specific nutrition targets that allows users to view, print, and share their saved foods and meal plans.
Outcome
THE PROCESS
COMPETITIVE
ANALYSIS
The food and health-related space is a very saturated industry. While weight loss seems to be the number one user goal for many of these apps, the philosophies and methods each app promoted varied slightly. We explored 35 apps and 8 websites to analyze their value proposition and features to gather some insights about this space.
LEARNING #1
Planners who cook with nutrition target are an underserved market
Many food-tracking apps are mobile only, and user interactions are retroactive to eating, not catering to people who want to proactively plan their meals. Many meal planning apps will simply prescribe meal plans to follow, without detailed nutrition data or an ability to customize the plan.
LEARNING #2
Specific nutrients are hard to track
Since most services optimize for weight loss/gain use cases, nutrition data focuses primarily on calorie counts & macronutrients, not providing flexibility on the types of trackable nutrients. This can be very useful for different use cases: for example, it is important for folks with kidney problems to ensure they get the right levels of potassium. On top of that, there is an additional challenge of data reliability for many branded food items, which often is not addressed.
LEARNING #3
Nutrition data for recipes can’t be fine-tuned
For most apps, the recipe nutrition calculator is not part of the user flow, making it difficult to calibrate nutrients in a specific recipe. Some calorie tracking apps allow users to enter custom foods and recipes, but they are limited in how much users can explore and learn about the nutrition of what they have just entered.
USER PERSONAS
While most apps are designed for users interested in tracking food intake, we decided to focus on the planners and cooks for the following reasons: 1) My client is passionate about serving the underserved planner and cook category rather than attempting to create something in an already bulging weight-loss segment, and 2) with MFD being web-based, it lends itself much more naturally to use flows that aren’t as focused on mobile-based food intake tracking. We decided to narrow our focus on the following user personas.
USER INTERVIEWS
I conducted a total of 3 user interviews to deep dive into current user behavior. From our user interviews, we validated and expanded our original personas, and validated that the next product iteration for the dashboard should be a data-driven meal planner that people can easily save, share, and print.
LEARNING #1
Dashboard as a log of food entry they use to plan meals
Because the current dashboard does not have ability to tie each food entry to a date/meal, they were using the dashboard to get the nutrition data and kept a separate notebook to plan their meals.
LEARNING #2
Nutrition-savvy power users with specific needs
All current MFD's users had in-depth knowledge of nutrition science, but each person wanted to track different nutrients for various reasons. Because the current user base is already familiar with nutrition data in general, we decided to focus more on customizability rather than onboarding and educating users on nutrition data.
LEARNING #3
Importance of daily and weekly summary
While users wanted to know the nutrition data of individual recipe or food, what they really cared was the daily and weekly summary.
LEARNING #4
Saving, sharing and printing meal plans
Most users were a big advocate of being connected with what they eat, and had a strong desire to share this lifestyle with others.
USER FLOW
The personas and research above yielded a solution that has three main objectives: 1) add food items, recipes, or meals to a daily meal planner to analyze a daily target goal for specific nutrients, 2) save foods, recipes or meals that they use frequently, and 3) view the weekly meal plan with target nutrient amount.
From there, we narrowed down on user actions that we want to focus on per each page and identified where links should be made between each actions.
THE PRODUCT
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 then 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.
DAILY PLANNER
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 are interested in.
We decided to limit the functionality there, but future work should consider including: 1) educational onboarding processes to help teach users about nutrient targets, and 2) alert messages for meals that are providing too much of a specific nutrient and other unhealthy edge cases.
DAILY PLANNER
FOOD CARDS
Challenge: The current view does not 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. In addition, we provided similar information to the Daily Planner and Nutritional Summary to maintain a consistent experience and provide nutrition data wherever it is necessary.
OLD DESIGN
NEW DESIGN
MY FOODS
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 more detailed analysis on its 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 view a high-level summary on the table view; for example, once a food, recipe, or meal is clicked on, a window expands to show more detailed nutrition data.
OLD DESIGN
Dashboard view showing ingredient list for a recipe
Details analysis on nutrition data on Recipe Nutrition Calculator page
NEW DESIGN
WEEKLY PLAN
Challenge: Users wanted to plan their meals on a weekly basis to track specific, relevant nutrients
Solution: Weekly calendar with 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 view 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 an 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 that 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 integrate all the tools to lead to sign up
-
Creating a profile page to allow users to enter in their personal data
-
Designing for different use case (e.g. nutritionists creating meal plans for their clients)
KEY TAKEAWAYS
1. Being aware of scope-creep and knowing when to push back
Because the client was very open to suggestions and also had many great ideas, we quickly learned the importance of having clearly defined project scope. We have implemented a kick-off meeting that defines and documents the scope of the next project. This has additional helped with planning for incremental development to quickly launch and iterate.
2. Thinking through multiple ways to visualize data and presenting various options
This was a good opportunity to explore different options for presenting data and understanding their pros and cons. By using quick wireframes I designed, we were able to understand the strengths and weaknesses of each option and gain confidence in our solution.
3. Empathizing with users that are different from myself
As an avid calorie-tracker, I initially believed that I knew this space pretty well, especially after having used similar apps for personal use. Conducting in-depth user interviews has given me a lot of empathy for user needs I never imagined. It has really driven home the importance of thoughtful design to capture diverse user needs with a simple yet flexible solution.
4. Importance of design system
As I worked on other components of the site, such as the recipe nutrition calculator, the nutrition ranking tool, and the main website, many initial components were polished and retroactively implemented in the design of the Meal Planner. In the process, I developed the design systems and reusable components that have now been applied throughout different parts of the website. Building this design system has been instrumental in increasing my velocity in subsequent designs as well as creating a consistent experience throughout the site.
5. Designing for engineers
Several of the designs were iterated on at times to simplify some of the proposals to simplify future implementation steps. The client has a very small development team, so I took that constraint in mind when finalizing some of the designs to ensure that we did not optimize for only "best" design, but instead the "best implementable" design.
APPENDIX
RELATED PROJECTS
Working on Meal Planner Dashboard project led to working on related smaller projects that are part of MFD, including Recipe Nutrition Calculator, Nutrition Ranking Tool, and the redesigning of the main website.
DESIGN SYSTEMS
To have a single source of truth which groups all the elements that will allow a consistent visual design, I organized principles, colors, typography, design components for systematic design during my process.