Instacart

A team design challenge to add a smart shopping list to reduce food waste.

 

Project Overview

 

Over the course of three weeks, our team of four designers (Chaeyoung Kang, Dawn Keyser, Tanya Moss, Jenny Quach) worked together to envision solutions to the food waste issue in the United States.

The challenge: Design a smart shopping list feature for a grocery delivery app to help reduce food waste.

Our solution: Adding a recipe-based smart shopping list on Instacart’s mobile app for users to reduce food waste by purchasing foods with a plan in mind and easily consume ingredients they already own.

 
 
 

Role

UX/UI Designer UX Researcher

Tool

Figma Google Forms (survey tool) Sketching tools (iPad, iPencil)

Duration

60 hours / 3 weeks

What’s the Problem?

According to the USDA, 30–40% of all food produced in the U.S. is wasted across the supply chain.

Food waste goes beyond dumping leftovers in the trash bin or throwing away a couple of rotten apples. When food waste occurs, the natural resources and labor that went into growing, processing, packing, transporting, and marketing the food items also go to waste. This has far-reaching impacts on society.

Food waste not only leaves an enormous carbon footprint but also causes huge economic loss to consumers. For the average U.S. household, approximately $2,200 worth of food is wasted each year!

We wanted to figure out a way to tackle this issue at the consumer level. Less food diverted to landfills means more opportunities for food security, and precious resources used purposefully. This began our three-week design sprint.

Research

Process: Market Research, Competitive Analysis, Survey, User Interviews, Empathy Map

Market Research

We conducted background research on the topic of food waste to discover where most foods were being wasted and how it could be fixed.

In the United States, 40% of all food is wasted. While food is wasted along the entire supply chain, consumers are the #1 source of wasted food. According to a 2017 study by the NRDC, a majority of food discarded in households was potentially edible. The most common reasons for discarding food were spoilage and undesired leftovers. The best way for consumers to reduce waste involved in improved meal planning, preparation of ingredients, and storage.

From the research, our team was able to understand that the best ways for consumers to reduce waste involved improved meal planning, preparation of ingredients, and informing customers about the correct ways of storage.

Competitive Analysis

In addition to understanding the market, we conducted a competitive analysis to understand the players in the grocery shopping industry. The first step for the analysis was to look for the most well known, nationally available, and accessible grocery shopping applications. We compared Instacart, Shipt, Walmart, Whole Foods (through Amazon), and the Kroger Company.

All five apps allow the customer to keep abreast of their total as items are added to the cart. While all five companies charge for delivery, they all charge less than $9.95 and two offer a lowered delivery charge if within a specific amount of time. Some competitor apps didn’t include descriptions of items, didn’t clearly list nutrition information, required a minimum amount of spending to check out, and didn’t offer bulk item options. Only one included the ability to shop by recipe.

 
1_4EZzVVJDwBxVu3YKHHF1aw.png

User Interviews

We conducted user interviews to understand current motivations and frustrations regarding grocery shopping and food consuming habits to uncover opportunities for the design challenge. We interviewed 6 people, ages 27–50 and household size of 2–5, asking them broad questions about their grocery shopping, meal planning, cooking and food storage habits.

“When I make impulse purchases, I tend to forget that I had bought it, and the ingredients go bad.”

Survey

While we focused on the results from our user interviews and background research, we also conducted a user survey through Google Forms to gather additional information. The survey questions were similar to the user interview questions for consistency.

According to the survey, the biggest cause of food waste was spoilage due to not consuming the ingredients in time. Half of the respondents did not create a shopping list when grocery shopping, leading to impulse purchases and forgetfulness.

“If I don’t feel like cooking with an item on a given night, sometimes it’s the same the next night, and the next, etc. Then at some point, I know the food isn’t fresh so I’m even less motivated to use it in cooking. Then eventually it goes bad.”

Empathy Map

We created an empathy map from information gathered in the qualitative user interviews to organize insights and understand how the users approached shopping, meal planning, and food storage. Based on the empathy map, we discovered two main entry points to reducing food waste on the consumer level:

  1. Help consumers purchase the right amount of ingredients.

  2. Help consumers store and use everything they purchased. The two biggest causes of food waste were changes in meal plans and forgetfulness that leads to food spoilage.

 
1_OQQOvbpvXS6uZz_3YUwPQA.png

Define

Process: Business + User Goals, HMW questions

Business + User Goals

 

To gain a better understanding of how we might target our solution, we looked for overlaps between business & user goals. We began by looking at Instacart’s current business goals. Based on our research, we adjusted the wording to include items related to reducing food waste.

For the user goals, we referred back to our user interviews and brainstormed what they would want in a delivery company with Instacart’s business goals. We found that our user’s would be more motivated to use recipes or meal-plan if they knew they were getting the freshest produce at a good deal or price. We discovered that the majority of our respondents do not look at already purchased food before shopping, often leaving food until it is too old to consume, even with the best intentions to eat sooner.

 
1_8ssEqT21HJ9xCwkxVndJyQ.png

How might we…

We developed the following questions to frame our search for solutions:

  • How might we help customers purchase the correct amount of food?

  • How might we incorporate menu planning into grocery shopping?

  • How might we help integrate recipes into shopping lists?

  • How might we provide reminders for users to eat their purchased goods?

  • How might we help users not lose food at the back of the fridge?

  • How might we help users cook meals that can be repurposed into other cooked dishes?

For this challenge, we were integrating our feature into a grocery delivery app, therefore we focused on the first three “how might we” statements, targeting purchasing decisions, to develop solutions.

We also decided to integrate our feature within Instacart because of its reach (anyone can shop because there are no membership fees) and focus on grocery delivery and pick-up services.

Ideate

Process: Low-Fidelity Wireframe Sketches

Round 1 Sketches

We had a team meeting to discuss results from our background research, user interviews and user survey. From this, we decided on building a recipe feature that would help Instacart users:

  • Plan out their meals

  • Gain inspiration for what to make using the ingredients they already have available at home

Our feature would also help users correctly estimate the quantities of food needed to make a recipe, and provide a plan to use up all the ingredients they purchase.

While making our sketches, we referred back to Instacart’s existing UI design to draw out patterns we could replicate for our new feature. We wanted our feature to look as if it were already part of the existing app.

Sketches that resulted from our 1st ideation round.

Sketches that resulted from our 1st ideation round.

Round 2 Sketches

We discussed our wireframes in the next group discussion and iterated on them to come up with this refined design for the recipe feature. Notable changes include:

  • Horizontal scrolling for categories within Recipes and Search Results pages instead of vertically stacked cards

  • Adding recipe-specific information such as price per serving and cooking time

  • Following the existing design pattern to add items to cart via (+) icon

  • ‘Add all to Cart’ button placed throughout the Single Recipe Page

  • Showing similar recipes in the cart page

Design Challenge - lo fi wireframe 2.png

User Flow

We created a user flow to simulate users’ navigation on the mobile app. We were able to create multiple paths that a user might take to browse new recipes and order ingredients through the app.

This scenario shows Sally, a mother in a family of 4, finding recipe ideas and purchasing the necessary ingredients using the Instacart app.

Capstone 2 - Task Flow no logo.png

UI Kit

In order to seamlessly add a new feature to an existing app, we used Instacart’s current design system and guideline to make consistent design applications.

Capstone 2 - UI Kit.png

Prototype

Process: High-Fidelity Wireframes + Prototype

High-Fidelity Wireframes + Prototype

Bringing life to the bare bones, we created a high-fidelity prototype using the lo-fi sketches and Instacart’s existing design system.

 
1_x59BZVGbfcFlo3hkV5Z1xQ.png
1_H6k1ZxA0asu-fSVGYS1Dnw.png

Test

Process: Usability Testing

Usability Testing

We used Figma to create the prototype and tested it to discover any usability issues. All tests were conducted remotely and moderated. We asked our test participants to complete three tasks to search for new recipes, check out recipe pages, and add items to cart for the checkout. All participants completed the tasks without issues or errors.

The participants succeeded in navigating through the new recipes feature and found the overall flow easy to follow. However, some issues arose during testing:

  • Not being able to modify ingredients on the recipe page

  • Information overload due to long recipes or instructions

  • Confusion by what ‘price per serving’ meant

  • Interest to see nutritional information or reviews of each recipe

If we had more time and resources for our project, we would consider making the following updates and additional features for Instacart.

  • Add an option to modify ingredients within the recipe page to account for dietary or personal preferences

  • Add a collapse/expand the option for the recipe instructions to lessen the scroll on the single recipe page

  • Add a “My recipes” and bookmark feature to recipes for users to save the recipes

  • Add an option to review recipes and add the star rating to the recipe page

Reflections

Overall, this project taught us a lot about working in a team and the importance of addressing food waste, especially at the consumer level.

  1. An intentional design can make a real change 🔮. Food waste is a serious problem, especially in the United States. There are many avenues to address it, and it requires solutions from all across the food supply chain. However, during this design challenge, we witnessed how a strategic design solution can impact consumers in their daily habits.

  2. It’s all about team effort 🤝. During the design challenge, we had a valuable opportunity to collaborate with designers from different backgrounds and exchange insights. We were able to build upon each others’ ideas. Maintaining a clear channel of communication was essential in keeping us all aligned on decisions, project goals, and ideas. Video calls were helpful to brainstorm in real-time and get feedback from each member throughout the process.

  3. How to improve our design even further✨. If we could develop the design further, we would add a push notification feature that would remind users of ingredients they had purchased through Instacart. The reminders could include expiration dates or helpful recipes to urge users to finish their groceries before they go bad. We would also add a feature within the “Your items” section that would include food waste tips and updates about expiration dates.

 
Our last design team meeting.

Our last design team meeting.

Previous
Previous

Fiserv: User-friendly developer portal and API explorer for engineers

Next
Next

Mirror: Responsive website for eCommerce retailer