Mealtime
Mealtime is an app for users to quickly find innovative cooking ideas, recipes and easy-to-follow guidance all matching their schedule & ingredients.
Project Overview
The Problem
For amateur cooks, it’s challenging to get recipes they like from a bunch of options, and hard to find ones with ingredients that match what they current have in hand.
The Objective
An app that enable users to customize their cooking plans and recipes to provide them with more enjoyable & time-saving cooking experience.
Role
Design Research, UX & UI Design, Visual Design
Background Research
1. Secondary research
2. User research
Who cooks for themselves?
Narrow down users
Personas & User journeys
1.Secondary research
My design started from a two-month quarantine in Shanghai this year, I found that cooking usually makes me tired and disrupts my schedules. In addition, It is hard to find inspiration every time I cook. Then I tried to know if others have same feeling.
I researched online and read articles to learn more about issues of cooking and narrow down my users as well as their needs in order to design a better experience. The following data and facts are from ‘ReportLinker‘ & ‘SWNS digital‘.
‘New normal cooking‘ - People tend to cook more often
As a result of the pandemic, Americans are both cooking (54%) and baking (46%) more. Half of the over 1000 respondents reported they’ve become eager to learn as much as possible about cooking.
Cooking is often not friendly, especially for amateurs
A survey from ‘SWNS’ showed that 56% of respondents often botch foods that are considered easy to make, and 83% of them feel sad when they messed their dishes up.
74% of respondents always spend extra time on cooking cooking than they had originally planned.
2.User research: I focus on Amateurs who look for efficient cooking
Considering that the group who cook by themselves is a mix, the whole process of cooking is also various for different people, I need to know the composition of 'the people who cook by themselves', and their respective thoughts, characteristics & habits. After identifying my main users, I started to research their key pain points in different steps of cooking.
01. Who cooks for themselves?
I surveyed the self-cooking population and focused on those who cook more often(From 3 days per week to everyday) because they are majority (86%) of this group of people. After researching the composition among them, I learnt about their same & different characteristics about cooking.
02. Narrow down users: Based on their cooking characteristics
Based on the key findings of secondary research, I categorize and summarized these 4 representatives into the following 3 candidates according to their respective cooking skills & time to define my target users:
A: Amateur cooks with limited time
They are mainly young office workers. They would like to cook but their main energy & time are spent on their jobs. They want to control their own diet and eat healthier.
B: Amateur cooks with ample time
They’re usually retired and cook for their children or even whole families. They want to make dishes that their families love, They usually have passion for cooking itself.
C: Professional cooks
They are skilled and focus on developing ingredients and designing new dishes. They want their dishes be more popular with customers.
03. Personas & User journeys
I researched online and phone interviewed with my target users about their thoughts and difficulties while cooking, I ultimately summarized them into two representative figures based on the habits they prepare and cook.
Wait a sec… what does the ‘cooking plans‘ here mean? Why it needs to be customized? To define it accurately, I deeply interviewed users and summarized their feedback into two different elements.
Define & Ideation
1. Define the design challenges
2. Competitor analysis
3. Brainstorming and design concepts
4. User flow
5. Information architecture
6. Wireframes & User testings
7. Hifi design
8. Final delivery
1. Define the design challenges
I narrow down to 3 user problems based on my survey above, then I integrated them as the start point of the next stage: 3 key design challenges to solve.
Key Design Challenges
#1 Enable users to customize some dishes or ingredients in their cooking plans.
#2 Help users find recipes that match their current ingredients and save time.
#3 Help users eat healthy by providing nutrition information.
2. Competitor analysis
Although users have some different cooking habits and preparation sequences, many of them rely on apps to find recipes and make their own cooking plans. I conducted a competitive analysis to know about others' solutions and their pros and cons.
I explored the existing recipes-finding and cooking-planing apps and clustered them in three attributes: ‘Get plans‘, ’Make plans’ and ‘Follow bloggers‘. Below are the pros and cons of each method.
Key
Summary
Rigid cooking plans
Users like to get professional meal plans directly to save time and effort, but they want to adjust some of these dishes sometimes rather than have to follow the entire plan completely.
Inefficient recipes picking
Most of the competitors directly display various of recipes. In most cases, users browse them aimlessly or search for recipes by their current ingredients separately, which is often inefficient.
Lack of accessible info when selecting recipes
When selecting recipes, It is often hard to get info such as nutrition, cooking time, portion size. Especially for users who want to eat healthier, they need to spend extra time and effort.
Social features
Users tend to choose recipes with more feedback because they can directly see the reviews from others who have cooked it, and get details such as difficulty and taste of various recipes.
3. Brainstorming and design concepts
Inspired by these methods, I did a brainstorm session to explore a better way to help them find recipes and make cooking plans. I tried to avoid the disadvantages of different methods and finally I converged them into 5 design concepts as candidates.
01. Brainstorming
Find recipes
Fit ingredients into recipes
Users can easily get recipes composed of their current ingredients, they don’t need to search for recipes one by one.
Personal recipes
Users can quickly filter out recipes they preferred by nutritional info, cooking time or portion size, etc. Users can choose to view the combination of current ingredients or browse all recipes.
Friends’ recipes
Users can see what their friends are about to eat, or browse recipes from other users who have same tastes & preferences.
Make cooking plans
Customization of cooking plans
Users can freely adjust a dish in cooking plans they searched, or customize their own cooking plans over a period of time based on their existing ingredients and their schedules.
Family cooking plans
Users can add their family and friends with different tastes or nutritional needs to their plans and search for recipes or cooking plans that match everyone's preferences.
02. Concept selecting
I discussed each candidate option with 6 potential users and invited them to compare all ideas with my competitors. Here is the summary of the main feedback I got. I prioritized these options based on feedback & further consideration about them.
4. User flow
Based on these thoughts & feedback, I created a user flow chart to guide my design and then built the information architecture.
5. Information architecture
I designed the information architecture to go on guiding me to finish the wireframes of interfaces with multiple functions.
6. Wireframes & User testings
I created a wireframe based on previous design and research. Then I invited 5 potential users to do usability testing to optimize the whole user flow as well as the interfaces.
Get prepared
Users select food + ingredients preference and their needs for better customization & recommendation later.
Manage ingredients & food
Directly import from food purchasing software. Users can know what & how much ingredients they have now.
Personal recipes
Users get recipes based on their food preference & current ingredients.
With a swipe, they would find more suitable recipes matching their schedule.
Explore cooking plans
Users can also follow others’ plans. Only need to set date & which meal, users can then eat healthily without concerning what to cook.
Planner
A cooking helper. Users can clearly know what to cook today as well as for next few days.
They can freely edit details of recipes and cooking plans here.
Start cooking
Users can get clear guidance about how to cook and prepare.
Don’t have to exit and search the next recipe, users can directly view the next one.
Profile & messages
Communicate with others, as well as check other users’ Like & cooking plans to find inspiration.
Iteration 1 : Users can add food preferences & explore recipes at the very start
User testings
Iteration 2 : More accurate and efficient search
Iteration 3 : Keep customized settings for users to access anytime
7. Hifi design
Visual design & Design System
Font: Montserrat
Easy to read, its curving shape provides a cute and lively feeling, which is exactly what I wish my users feel when they use this product or cooking.
Color Scheme: Greygreen & Light orange
I use these two colors to provide a refreshed and pleasant feeling, as they are reminiscent of fresh and delicious food.
while the lively color scheme is in line with the use of 'Mealtime' - I want users to cook with more joy.
Accessibility Check
Sticker Sheet
Final delivery
On-Boarding
Quickly know what’s ‘Mealtime‘ and pre-set default preferences based on users’ needs.
Discover - Recipes
Search recipes by multiple ingredients together & adjust customization.
Quickly find recipes needed instead of browsing aimlessly.
Fitting design challenge 2: Help users find recipes that match their current ingredients.
Search recipes directly
More customization
Discover - View recipes
Clear classification, Sample videos and Notes from other users.
More inspiring and supportive.
Fitting design challenge 3: Help users eat healthy by providing nutrition information.
Make my plan
Recommendation based on customization, pick favorite among 3 options for each dish.
No more worrying about what to eat next or hunting around for recipes!
Fitting design challenge 1: Enable users to customize some dishes or ingredients in their cooking plans.
and design challenge 3: Help users eat healthy by providing nutrition information.
Pre-set
Customize dishes
View professional cooking plans
Users can also directly follow professional cooking plans, They can pick alternative dishes of the plan to replace dishes they don't like.
Don’t have to spend time looking for other dishes without knowing if they will be(for example) over-calorie.
Fitting design challenge 1: Enable users to customize some dishes or ingredients in their cooking plans.
Planner
Have plan today
No plan today & Add one
View the preparation for all dishes at the same time, saving time and effort.
Integrated into one recipe, no need to repeatedly check multiple recipes.
Fitting main pain point: Limited time for preparing & cooking.
My ingredients
Easy to check & edit current ingredients, Various & convenient inputting methods, Able to get nutrition info of each ingredients.
Fitting design challenge 2: Help users find recipes that match their current ingredients.
and design challenge 3: Help users eat healthy by providing nutrition information.
Profile
Able to third-party login, simple registration, and easily viewing the interactions of other users and likes.
High Fidelity Prototype