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


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

Interaction Design

6 weeks

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

Sketch, Illustrator, After Effects






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


Contextual inquiry

I have also followed 3 students when they do their groceries. They all have basic cooking skill. One insight from the shadowing is that they always avoid buying complicated or unfamiliar ingredients. Buying food they don't know how to cook is a big risk for them.


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."


Design Principles


After researching and having the concept of kitchen wisdom in mind. I came out with several design principles:
● Food knowledge should be easily accessible in the grocery store.
● A core incentive should be provided to create the positive feedback loop.
● It is not about the number of recipes you learn but the mix&match knowledge you gain through the learning process.








After identifying user's paint points and coming out with design principles,
I brainstormed several ideas and run a speed dating with students to get feedback. Here is what I found:
● People really like solutions situated in grocery shopping context. They provide 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.



DESIGN User Flow


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 the 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..



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 be also 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. 


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.



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.


It should 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



1. Landing Page

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



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'.



2. Recipe Category

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



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.





This is an individual project so many parts of this project are not polished. I believed that the research part provides many insights and potential opportunities for me to design interventions. However, the content of ingredient cards could be further refined. I created several high fidelity prototypes, but I could add more micro interactions elements to improve the user experience.