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.
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:
Help consumers purchase the right amount of ingredients.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.