EatWell
Overview
The practice of meal prepping is a great way to save money and live a healthier lifestyle. The process of prepping an entire week of meals can be frustrating. From manually calculate ingredients based on your macros to finding recipes it can take an overwhelming amount of time. EatWell helps users create and plan their meals giving personalized recipe recommendations and calculating serving sizes based on macros.
UX Design - discovery, user research, prototype and testing
80 hours
Objective
Design a mobile app that helps users meal prep with the following features:
- Simple onboarding process where users can input their information to get macros.
- Recipe database with recommendations, most popular and a search feature.
- Automatically generate a grocery shopping list based on users' plans.
Research
Competitive Analysis
I began my research by downloading and analyzing current meal prepping and food related apps.
Yummly
Strengths
- Guided cooking
- Recommendations
- Good use of images
Weakness
- Some recipes are external
- Inconsistencies in ingredients
SideChef
Strengths
- Shopping list
- Search filters
- Step-by-step guides
Weakness
- Confusing written instructions
- No filters for diets/allergies
- No pre-made weekly plans
MealLime
Strengths
- Searchable by recipes
- Filters for diets/allergies
- Clean and modern interface
Weakness
- No ingredient substitution
- Some features are paywalled
User Surveys
I sent out a Google forms survey with questions regarding cooking, diets and meal prepping to members of different online communities. The main demographic ranged from 21 - 38 of various gender identifications.
42%
83%
76%
User Interviews
Key Findings
- Users are tired of eating the same dish for consecutive days (no variety in meal prep).
- Too much effort having to calculate the calories and macros in serving sizes.
- Having no meal prep plan often leads to ordering out.
- Manually making a grocery shopping list from recipes found via multiple different sources.
How might we help users streamline their meal prep?
Persona
Based on my research the target user group would be 23 - 36 years old conscious about what they cook and eat. Having a busy life, they need a service that helps them save time when they are meal prepping.
Ideate
Task Analysis
A task analysis diagram helped me visualize the necessary components for my low-fidelity sketches.
Lo-Fi Wireframes
Onboarding Screens
My main focus was on creating a modern and minimal design to keep it as simple as possible. Based on the interviews, it was important for users to be able to keep a profile where they could store liked recipes, past grocery lists and have personalized recommendations.
The onboarding process has a short questionnaire that asks users for their basic physical information, dietary preference/restrictions. The app takes that information and gives the users recipes based on their macronutrient/caloric needs.
Landing Screen
A common pain point during interviews was decision fatigue. To combat it, this page - similar to other recipe apps - has a carousel containing recipes that are organized by Recommended and Popular. Users will be able to add these recipes to their plan from this screen, search for recipes with filter options and categorize it by "Breakfast", "Lunch", "Dinner", and "Snacks".
Plan Screen
After users add recipes and create a plan, they will have a screen that shows the dates and recipes organizing it by meals. This will give users a general view of what foods they will be prepping for the week. It will also give them quick access to those recipes and be able to make change or remove them.
Style Guide
Hi-Fi Wireframes for Testing
After users sign up for an account, they go through an onboarding process. Research showed that users who meal prep are also likely tracking calories/macros. This gives users a breakdown of their daily recommended calories and macronutrients intake based on their input.
The recipe screen gives users Popular and Recommended recipes that they can add to their plans. They have the option to change by meal, search, and filter by cuisine. For users who are tracking their calories it lets them know how much calories their plans total to.
When users add recipes to their plan the grocery shopping list tab will automatically populate and categorize the ingredients and the amount needed for the recipe. Similar to other list & to-do apps users can tap the circle to mark if they purchase or already have the ingredients at home.
Testing
Usability Testing
With Maze and Zoom I observed 7 users navigating my prototype to complete different tasks. All of them were able to complete the tasks and had an overall 8% mis-click rate.
Priority Revisions
The results from the usability highlighted some features that could use a revision or improvement:
- Ability to change the measurement in the recipe page (from bowl to grams/oz, etc.)
- Skipping the sign up process, content should be accessible without an account.
- Being able to search by more than just recipes i.e. ingredients, cuisine type, etc.
- A favorites or loved section to save certain recipes without adding to plan.
Next Steps
Based on user feedback, if given more time for the project there are some features, I'd like to implement.
- Different plan views. Being able to change the calendar view to monthly/week/daily.
- User profiles & group. If the user is prepping meals for more than just themselves there will be a way to switch profiles that displays that user's specific portion sizes based on their caloric & macro needs.
- The recipe section displays the necessary cookware for the meal.
- Creating/adding your own recipes from scratch.