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

Previous
Previous

WePlay: An app for the elderly to explore social life

Next
Next

Akeso - Under construction :)