Artboard+1@4x-100.jpg
 

HOW TO COOK EVERYTHING

OBJECTIVE

How might we encourage and teach busy university students to cook healthy food? 

SOLUTION

Design a mobile app focusing on grocery shopping experience that empowers the user to cook and learn kitchen wisdom.

Type:
App Design

Duration:
6 weeks

Skills:
Interview, Contextual Inquiry, Persona, Wireframe, Storyboard, Speed dating, Usability test, Mobile design, Graphic design

Tools:
Sketch, Illustrator, After Effects
 

 

01

RESEARCH

 

Interviews (n=11)

I have done 11 user interview with students at CMU. It is no surprise that lack of time is the primary factor. Another factor is that even they want, they don't know how to start.

 

Shadowing (n=3)

I have followed 3 students when they do their groceries. They all have essential cooking skill. One insight from the shadowing is that they always avoid using complicated recipes or buying unfamiliar produce. Purchase food that they don't know how to cook is a significant risk for them.

 
Artboard+1+copy+4@4x-100.jpg
 

Secondary Research

At this moment, I came across an article, "The Why of Cooking" in The Atlantic. (link) It talks about the concept of kitchen wisdom - a unified understanding of how cooking works does not represent in the cookbook.

"Learn how to cook through recipes just like trying to learn a language only by copying down others’ sentences."

 

02

Design Principles

 
 
9Artboard 1 copy 12@2x-100.jpg
 

03

Persona

 
 

04

IDEATION & SPEED DATING

 

After identifying user's paint points and coming out with design principles,
I brainstormed several ideas and ran a speed dating with students to get feedback. Here are what I found:
● People like solution situated in grocery shopping context. It provides real-time assistance helping them make the decision.
● Information about time and money is important.
● The smartphone is the most convenient information hub for them, but representations of the information have different accessibility between context.

 
IMG_7586.JPG
IMG_7644.JPG
 

05

DESIGN User Flow

 
Artboard+1+copy+2@4x-100@2x.jpg
 

Step 1. Get an ingredient card in the grocery store
Located in the food area of the grocery store, ingredient card provides basic information of specific ingredient. It includes storage tips, how to prepare, cook it and required seasoning.

Step 2. Download the app and unlock the digital content.
The user could enter the ID on the card to unlock information of the ingredient on the card. The app is a digital archive of food knowledge.

Step 3. Learn, practice and share
The app provides instructions for a simple recipe, video of cooking skill, online community access, and function of creating a shopping list.

 

06

Key features

 

1. Scenario-based approach

The ingredient card is designed for people who are lack of food knowledge to start to consider buying unfamiliar food. It will be displayed directly near the specific ingredients showed on the card providing better accessibility.

 

2. Positive feedback

Users' current learned recipe will be shown in the app. There will also be locked content shown with a question mark in the app to create a sense of motivation for the user to go through the learning process. 

 
iphone6@2x.png
 
 

3. Skill-oriented content

Besides recipes with photos and captions, the app also provides short video clip about cooking skills such as "how to cut xxx" or "how to prepare xxx." The cooking skill is much easy to understand through short video rather than picture-text explanation, while the recipe is better for picture-text display.

24m26o.gif
cookskill.png
 

07

prototype ITERATION

 

Ingredient card

Put near the related ingredients inside the grocery store; ingredient card provides immediate access to food knowledge. Buying unfamiliar ingredient is high risk for the  novice cook, so I choose information that could help the user gain a general understanding of the ingredient.

Artboard+1+copy+6@4x-100.jpg
 
螢幕截圖+2017-09-10+22.37.29.png
 
 
 
螢幕截圖+2017-09-10+22.37.26.png
 

It should be a simple app with minimum functions to help people gain understanding about ingredients, know how to cook simple recipe and eventually learn kitchen wisdom. 

Mobile App

system 1.jpg
Artboard 9 copy@4x-100.jpg
 

 

1. Landing Page

The landing page is the recipe page including what user learned recently.

all.png
 

 

1-1. Recipe

For each recipe, there will be detail instructions.

 

 

1-2. Community

Within each recipe, the user could share his result or leave comments on others'.

community.png
 

 

2. Recipe Category

There will be several major categories of the recipe for the user to unlock and learn.

see all.png
 

 

3. Cook Skill

This part includes series of the short video clip to teach people how to deal with the different ingredient.

 

 

4. Cookbook

The user could combine recipes from the cookbook to create a shopping list.

single_cookbook.png
 

08

Reflection

 
 

Research
Since I had narrowed down my target group, I was able to conduct in-depth user research and addressed their pain points by my design solution.

Design
I tried very hard to design solution that can be differentiated from currently available solutions. Adding physical elements in the grocery shopping experience creates a great potential to help user overcome their barrier to start learning more about food and cooking.

Next Step
With limited time, I only conducted the usability test on the App design rather than the whole system. I think the user experience from the grocery store to the kitchen could be more streamlined as well as engaged.