Mobile design

Foodlab

A mobile application that helps home cooks incorporate unfamiliar ingredients to enjoy diverse fresh produce
Design tools
Paper sketching, Adobe XD

Research Tools
Contextual inquiry, user interview
Team
Olivia Ouyang, Claire Yuan, Linya Li, Chulun He
my role
Interaction designer, UX Researcher
Design challenge

Barriers of cooking with unfamiliar grocery ingredients

As a group of students who studied abroad, the project interest lied in our own struggling experience of cooking with unfamiliar local grocery ingredients.


We found that grocery shopping is not only a trip to refill their fridge but also an opportunity to explore local, in-season food. However, without taste reference, nutritional label or cooking instruction presented on the fresh product aisle, it is extremely hard for home cooks to decide if the unfamiliar ingredients fit their taste preferences.

solution overview

Scan-to-search Grocery Helper

Capture the ingredient with camera


Complete your shopping list in-store



Help achieve the first cooking experiment at home

The Research


Field Research

To understand different grocery shopping behaviors and user needs, I observed 4 different types of grocery stores in Beijing, ranging from the pop-up market to Carrefour supermarket. Combined with my teams' research in bay area and Shanghai, we synthesized the following key findings:

We were intrigued by the confused faces of shoppers when they were checking out an unfamiliar food item, so we decided to focus on the experience of exploring unfamiliar grocery food that lacks of nutrition labels to facilitate their cooking experiments.

User Interviews

I interviewed 1 local, 1 international student to understand their shopping experience and 1 grocery store owner for a holistic viewpoint. Synthesizing our team's findings, we created 3 personas.

We found major key pain points across 3 personas:
    1. Hesitate to purchase new ingredients because of having no idea how to use them and what taste to expect
    2. Consider left ingredients at home constantly, with or without a shopping list
    3. Refer to relating recipes for taste profile and cooking difficulty

Market Research

To help my team better different ways of learning a new ingredient, I conducted the competitive analysis and discovered these key findings:
    1. Recipe search can only applied to ingredients with known names
    2. Recipe apps use dish photos and user reviews to illustrate dish taste
    3. Providing activity-related profile information could engage users to participate

market research comparing All recipes, xiachufang, instacart and plantsnap apps

Ideation

After brainstorming together, 4 ideas stood up across the context of a grocery store to home kitchen. They covered the user journey from discovering, recognizing to finally executing.

Summary of key ideas from our brainstorming

Rapid Prototype for User Feedback

We used a quick wireframe to collect initial user feedback to prioritize our features. And we found that when making decision in-store, providing related recipes could help demonstrate the taste profile but only when the recipes were familiar. Also, the recipe which did not use up some of the entire ingredients would make pairing food difficult.

Design Detail


Scan to Search

• Use live camera to capture and fetch a brief taste profile when spotting an interesting ingredient in-store
• Paired ingredients and customized recipes provided for detailed taste demonstration

Target Pain Points:
• Lack of name tags in pop-up grocery stores
• Too much time spent on finding matched recipes through different websites

Scan Interaction

Home Page

Ingredient Profile

Recipe

• Quickly adjust the desired serving sizes to make a shopping list that takes your left ingredients at home for consideration
• 1-click add all the ingredients to merge all recipes for a holistic shopping list

Target Pain Points:
• Inflexible to adjust recipe servings on webpage recipes
• Too much manual work to shop with multiple recipes

Serving Adjustment Interaction

Add All to Cart Interaction

Recipe Ingredient Page

Cooking Instructions

• Match ingredients to step-by-step instructions
• Check the consumed ingredients out of the storage when finishing cooking

Target Pain Points:
• Separated ingredient and instruction sections that require users to switch attention frequently
• Tedious work of maintaining ingredient storage item-by-item

Instruction page - front

Instruction page - end

Grocery organizer

• Aggregate ingredients from multiple recipes for well-organized grocery shopping experience
• Help users retrace the recipes linked to ingredient-of-interest

Target Pain Points:
• Easy to be distracted when shopping without a prepared list
• Reluctant to search the desired recipe online that causes the abortion of a cooking experiment

Shopping list Page

Storage Page

Visual Design


Fresh, Clean, Calm

For branding, I chose teal green to represent the experience of enjoying fresh and healthy food. I heavily relied on white spaces for a clean interface for the situated user scenario of searching between aisles.

In terms of typography, I chose Proxima Soft for a playful visual message because trying out new food is an experiment itself.


Refactoring UI for Better Accessibility

When finalizing the high-fidelity prototype, I not only checked out the iPhone X design guidelines but also the web accessibility. And I adjusted the contrast to improve the readability without losing the branding.
Takeaways

Design Practice with Standardized Guidelines

For this mobile design project, I specially chose to iPhone X model to practice my design adaptivity. And it was a rewarding experience.

For product, it is crucial to provide a smooth transitions between screens as a cohesive branding. And for user experience, designers should carefully decide to what extent they need to follow the official design guidelines to ensure great user experience between apps on the same device.