Designing for the Real Problem.
Tackling a global issue by first addressing an individual's needs. With a mobile app, we can decrease stress, prevent over-buying and reduced food waste.
"You have something here that I would really use. I need the money I would save by using it"
- Usability Tester
Context.
The App
“Pantry” is an app by Trader Joe’s that aims to help individuals reduce waste not on a global scale, but instead, on a micro level - right from your kitchen.
The Team and My Role
Madeleine Chang
UX Researcher
UX Designer
UI Designer
Cesar Buffington
Scrum Master
UX Researcher
UX Designer
UI Designer
Kevin Regan
UX Researcher
UX Designer
​
During this project, I lead a team of three UX designers and was the scrum master for a two-week sprint.
Tools and Methods
Tools
Sketch
InVision
Methods
2-Week Sprint
Screener Survey
Feature / Competitor Analysis
User Interviews
Persona
Task Flow
Design Studio
​
Sketching
Wireframes
Functional Annotations
Prototyping
Usability Testing
Sitemap
The Project
For this project, our UX team was asked to look into a problem space and design to find a solution. Then, we needed to pick a company as a partner because of a shared vision. After deliberation, we realized there was a “problem space” that affected all of us: food waste.
Through business analysis, we selected the grocery store Trader Joe’s as a match for a likely business partnership. TJ's has a history of being waste conscious. For example, it donates unsold food to local non-profit organizations.
Our Deliverable:
Research the food waste space, design a new application from scratch and document best solutions to pitch to a possible client. Deliverable included results from screener survey, feature/competitor analysis, sitemap, user interview/usability testing takeaways, functional annotations, prototype and a pitch presentation.
Research.
“25% of all food in the United States is wasted...The average person in the United States wastes about a pound of food per day.”
- The Washington Post
In addition to researching food waste, we sent out screener surveys to find out statistical data on what people themselves did in regards to food consumption. Within a few hours, 40 people responded and the following were big data points:
-
15 out of 40 people “meal prepped” to reduce food waste.
-
25 out of 40 people “did nothing” to reduce food waste.
-
35 out of 40 people "threw food out" the week prior to the survey.
Takeaway: Whether people food prep to prevent food waste or people did nothing at all, there was one common denominator.
​
Almost everyone unwillingly threw away food.
User Interviews
Out of those that responded to our screener survey, we chose 6 individuals that had all thrown out food in order to uncover a solution to the problem. The majority of the people had these issues in common:
-
People felt they are throwing away money when they throw away food.
-
They couldn’t remember what they had in their pantry or refrigerator
-
Because people couldn’t remember what they had, they ended up with either too much food because of re-purchasing existing items or didn’t plan meals efficiently with ingredients they already had until it was too late and they started to spoil.
Screener Survey
The Business
We could align with Trader Joe’s values by raising food awareness with customers, inspire them to cook with the food they already have at home and add credibility to the company by highlighting its interest in reducing food waste.
​
Being that within the pantry app are existing Trader Joe’s recipes, TJ’s has the business incentive to introduce this app to its customers and drive repeat business by suggesting products at their stores to accompany ingredients at home thus allowing for customers to cook a complete meal.
Sketches and Design Studio
We began our design process with quick low-fidelity sketches to get as many ideas on paper as possible, then as a team dot-voted on the ideas we deemed best. Then, we re-incorporated said design ideas into a second version of our sketches. These sketches had what appeared to be a simple UI, incorporated standard app features users would be likely to understand and would not be hard to learn how to use.
Develop.
How might we help John more effectively use the food he has so as to minimize the waste of both his food and money?
Persona
“I think food waste is awful. But I think it’s awful because it’s like throwing away my money. And I care more about my own money than the environmental or social impacts of food waste."
Frustrations
-
He has to throw out food that goes bad.
-
Money is wasted when he has to throw things out.
Motivations
-
Would rather save money by not throwing out food.
-
Money he saves is money that he can use to buy something else.
- John, 35 years old
- Teacher
- Conscious about money wasted​
Goals
-
Use all food in his kitchen
-
Spend little time figuring out what to cook
A Solution
How do we intercept all that food before it reaches the trash? Again, food goes bad, people overbuy, and people don’t know what to make with the odds and ends they already have.
After brainstorming and dot-voting, the solution that would most likely be used by more people was a food pantry awareness app. It would allow you to keep track of the food at home from anywhere and provide produce recommendations that could be used to make existing Trader Joe’s recipes for the items you already have. Also, it would include a shopping list screen to keep track of what you need to buy for any given recipe. By using this app to keep track of produce at home and purchase remaining ingredients needed to make a TJ's recipe, it would prevent food from spoiling, save customers money and thereby getting at their main concern when it comes to food waste.
Issue
Not all UX Designers agree on a path to a solution.
A UX Designer in the group was not convinced that the global food waste problem would be fixed by the concept of this app.
Solution: We discussed this idea as a group and decided to go back to the data points and facts we had from the survey and user interviews to validate our direction. By doing this we would ground our idea in research, and would be addressing global food waste at a micro-level and make an impact at the individual level. Since 35 out of 40 people all threw out food whether they tried to prevent food waste or not, by intercepting before food is thrown away, we would be directly impacting and addressing our users' food waste issue.
Wireframes
We created mid-fidelity wireframes in Sketch app to bring our concept to life and to use for usability testing. We had 3 iterations of wireframes when we landed on our high-fidelity wireframe and prototype.
Based on our cumulative research, below are issues users had with wasting food, and features we came up with to address them:
-
Can't remember ingredients at home: Added a pantry section where they can see what they already had.
-
Don't know what to cook: Included a Trader Joe's recipes section.
-
Don't know what's needed to cook a recipe with what they have: Included a "percentage in your pantry" feature where they can see how close they are to having all ingredients needed to make a recipe.
Issue
Intricate features bloat the app.
As part of our original solution, we had developed an intricate feature where the app automatically added ingredients to the pantry section of the app. This feature received emailed receipts from Trader Joe's and added items to your pantry automatically. During a design critique, this feature seemed to confuse everyone.
Solution: Instead of using this intricate system of automatically adding ingredients to the "your pantry" section, we realized that going simple was best. We decided that giving users a way to take a picture of their grocery receipt to add ingredients in addition to being able to manually doing it, was less confusing.
User Interface
We created a distraction-free interface using the primary colors of their brand: red and white. We opted to lighten the cognitive load from people by using white as the background color and using red to highlight tab bar sections, pages, features and buttons.
What We Did
We ran tests with six people (both males and females) between the ages of 24-51. This round's goal was to test for previous issues to refine the design.
What We Asked
SCENARIO
You’re leaving work when you remember something in your fridge may spoil soon.
TASK
Open the TJ Pantry app, locate the oldest item and find a recipe that will allow you to cook it before it goes bad.
TASK
End by populating your grocery list with ingredients you will need to cook it and save the recipe for later.
What We Found
-
6 of 6 users clicked on an ingredient on the “your pantry” page successfully to complete the task.
-
6 of 6 users understood the sort/order feature on the recipe page
-
People were confused by the sorting of the types of recipes shown
What We Changed After Test
-
We made the recipe page default to sorting recipes by the most ingredients already in the user's pantry at home.
Usability Testing
"I wish I could select an ingredient on the pantry screen so that I could see recipes that include that ingredient."
- User
The recipes help because sometimes I feel like I have a bunch of random things and don't know what to do with them."
- User
"I love the idea of a shopping list based on the pantry!"
- User
After two rounds of testing, we ironed out major issues from having too little context and information, to having too much. We landed on the happy medium where users were able to successfully not just understand the purpose of the app but also complete tasks given to them successfully with great reviews on the app's functionality.
"Oh wow, I see that tapping this ingredient takes me to recipes I can make with it! Super cool!"
- User
"I see a list of things that are in my pantry. I like that it tells me how long ago I bought them."
- User
"Oh, is that how many ingredients I already have in my pantry? That's helpful."
- User
Testing Round 1
What We Did
We ran tests with five people (both males and females) between the ages of 28-58. Our main objective was to test for general usability and comprehension.
What We Asked
SCENARIO
You’re leaving work when you remember something in your fridge may spoil soon.
TASK
Open the TJ Pantry app, locate the oldest item and find a recipe that will allow you to cook it before it goes bad.
TASK
End by saving the recipe and populating your grocery list.
What We Found
-
5 of 6 users wanted to click on an ingredient on the “your pantry” page when it was not clickable.
-
3 of 6 users confused by sort/order when going to the recipe page
What We Changed After Test
-
We added the functionality to view recipes when an ingredient was clicked. We added ingredient tags as a way to show the user that the recipes page was filtered with the ingredient option they had selected. We also gave them the option to add other ingredients they had at home.
-
We attempted to lessen the confusion on the recipes page by adding a "filter by items in your pantry" option where a user can add ingredients and see recipes that include those items. Additionally, we added a general "sort by" option where people could sort recipes in other ways: time to cook, difficulty level, etc.
Testing Round 2
Results.
"This app is so useful. If I could share this with my husband it would be amazing."
- Usability Tester
What We've Learned
To the average person, wasting money is the driving force behind wanting to prevent food waste.
Next Steps
-
Add a feature to share app info with household members “I wish I could share this list with my husband so that if one of us is close to the grocery store we know what to buy.”
-
Test additional features such as viewing scanned receipts, reminders and adding items directly on the shopping list screen.
