Imperfect Foods

Role:
Team of 3
UX Research Lead
UI Design support

Timeline + Deliverables:
2 weeks
2 Distinct Personas
New feature for an existing app
Iterations on design work

Key Methods:
User Interviews
Persona Development
LowFi Wireframes
Usability Testing
HiFi Prototype

Problem:
Imperfect Foods is a weekly grocery delivery service that aims to reduce food waste by rescuing surplus and imperfect products from farms and businesses.
Unfortunately, this mission stops short in the customer's kitchen where 54 billion pounds of food are tossed out each year.

Solution:
Our team conceptualized and designed a new recipe feature for the Imperfect Foods mobile app that suggests recipes based upon a user's chosen ingredients, and encourages meal planning in the grocery shopping experience.

Overview

Imperfect Foods is a weekly grocery delivery service on a mission to “build a kinder, less wasteful world.” Their business model rescues produce that is considered too big, small or oddly shaped for commercial grocery store aisles…as well as surplus products that would otherwise be tossed out in a landfill.Their impact helps to address the 20 billion pounds of produce that goes to waste on farms each year.

A scale that demonstrates where food waste is happening in the United States each year.
20 billion pounds on farms, 50 billion pounds in businesses, 2 billion from manufacturers and 54 billion in homes.

Our team was inspired by Imperfect Food’s mission, and wondered…what happens to the 54 Billion pounds of food that appears to be tossed out in American’s homes each year? How might we begin to address the waste that is happening in our own kitchens?

Key Metrics:

43% of food wasted in America each year is happening in people’s homes. A family of four throws away over $1800 in food every year.

Research

First, we set out to hear from the users themselves. We recruited and conducted user interviews with 9 individuals who were either familiar with the Imperfect Foods App, or rely on a similar grocery delivery service.
‍
Through affinity mapping, we uncovered the following trends in user’s grocery shopping habits:
See Figma file here.

A drawing of 5 sticky notes from user interviews that say:

“I would appreciate suggestions on recipes based on what I order”

“I tend to buy items I am familiar with, because I already know how to cook with them”

“When I do search for recipes, I rely on food blogs or internet searches”

“I take multiple trips to the grocery store for supplemental items throughout the week”

“I usually end up composting/tossing excess food when I don’t plan for the week ahead”

Key Takeaway:

Imperfect Food’s mission to reduce food waste stops short in the customer’s kitchen. Users often find themselves ordering too much or too little produce to sustain a week of meals.

Synthesis

We were validated in our assumption that people, in fact, did not meal plan before grocery shopping, and thus often ended up composting or throwing away excess food by the end of the week.
‍
Before we could define problem statements, we developed two proto-personas:

A poster for Persona A: Fran Fuller
She says:
"I get overwhelmed by food blogs and Pinterest. Too many options give me analysis paralysis. I enjoy when friends and family recommend recipes to me."

I aim to:
- purchase enough food for the week
- cut down on my food waste
- spend minimal time grocery shopping

I am frustrated by:
- my jumbled recipe bookmarks.
- not having the right ingredients.
- having to take multiple trips to the grocery store.

I enjoy:
- spending time outdoors
- socializing with friends
- sharing recipes with my friends and family

Sometimes these things help:
- planning a meal ahead of time
- writing a shopping list

A poster for Persona B: Frankie Smith.
He says:
“I tend to buy items that I am familiar with, because I already know how to cook with them. However, I aim to spice things up in the kitchen...and I am willing to try something new.”

I aim to:
try new ingredients and recipes
stay inspired in the kitchen
learn more about how to waste less food.

I am frustrated by:
the monotony of my current meal planning
too many sites and blogs to scan for good recipes
wasting ingredients when I don’t know how to cook them.

I enjoy:
hosting friends for dinner
experimenting in the kitchen
eating out to try new cuisines.

Sometimes these things help:
reading food blogs
grocery subscription services with changing inventory
cooking instructions on product packaging.

Based on our primary persona, Fran's, wants and needs; we developed a user flow that allowed recipes to come to her, rather than relying on her to have recipes in mind before opening the Imperfect Foods app.
See Figma file here.

Problem Statement

Fran needs personalized recipe suggestions and guidance while grocery shopping, so she can effectively use the produce she purchases and plan for the week ahead.

Design

With a user flow locked in (for now), we regrouped to sketch and share some ideas about how a Suggested Recipe feature might be integrated into the Imperfect Foods app.

It was important to consider how this new feature could be integrated into the existing Information Architecture, and take on the established branding styles and personality.

A hand sketch of three screens: A product page that includes a suggested recipe list at the bottom, a recipe information page that provides details and a list of ingredients to add to cart, and a third screen that refines the layout of ingredients on the recipe page.

While sketching, our team realized that we had neglected to include a "Save Recipe" icon into the initial user flow. We explored both bookmark and heart icons....ultimately landing on bookmarks as a natural mapping between real-world recipe books and Imperfect's interface.

Another hand sketch that includes a method for saving recipes with a bookmark icon.
This sketch also demonstrates a "bulk add" or "add all" function for ingredients on the recipe page.

Our Low Fidelity Prototype brought our sketches to life, and allowed us to explore and test various ways of displaying recipe ingredients and saved recipes.
Link to Figma file here.

An image that displays four low fidelity screens for the Imperfect Foods App. These screens show the new suggested recipe feature, and two options that we tested for listing ingredients on recipe pages.

Our Solution:

Imperfect Food’s new suggested recipes feature will allow users like Fran to discover recipes based around ingredients they are shopping for. This eliminates the time wasted in searching for recipes on the internet, and the analysis paralysis of too many options to choose from.

Iteration

We conducted Usability Testing of our LowFi Prototype on 7 volunteers in order to identify areas needing improvement for our next iteration…as well as to validate that our new feature was intuitive for the Imperfect Foods shopper.

A low fidelity Saved Recipe screen with an arrow pointing to the suggested recipe carousel.

On the Saved Recipes page, some users were distracted by the Suggested Recipe carousel and did not appreciate having to scroll down to find "Zucchini Pancakes"

A low fidelity recipe information page with an arrow pointing to the quick add function on the shopping page.

Some users preferred to "quick-add" items to their cart and did not intuitively open a product information page...we will circle back to this issue!

A low fidelity screen with an arrow pointing to the bookmark icon that we added at the bottom navigation.

Users noticed that there was not a way to "save" the recipe to refer back to later. As a result, we added the bookmark icon to the recipe page and built out a page to host a user's saved recipes.

drumroll please.....

High Fidelity Prototype

The team addressed the bugs listed above, and incorporated the existing brand identity. It was important that the new feature(s) felt integrated into the existing Information Architecture and UI of the Imperfect Foods app.

Users enjoyed the new Suggested Recipe feature, and especially appreciated the Saved Recipe page as a resource for staying on track during the week.

Funnily enough, Imperfect Foods rolled out a “Shop by Recipe” feature on their app a week after we wrapped up this project!

...but even WE are imperfect

Next Steps

Our work here is certainly not done... we still have questions to consider and business needs to investigate:

Quick-Add Shoppers: How do we support the user who relies on "quick-add" buttons to shop, and thus never opens up individual product pages?

A sketch of one solution I explored for a way to suggest recipes to users who do not click into product pages.
I include a pop up page when a user opens their shopping cart that suggests recipes based upon cart ingredients.

Scalability: What does the scalability of a new feature like this involve for Imperfect Foods? We need to think about scalability of a recipe feature that is constantly adapting to Imperfect Food’s fluctuating inventory. How might serving sizes be easily adapted to varying amounts of zucchini? How might recipes that don’t have all ingredients offered one week be filtered out?