A mobile application designed to help users reduce their personal food waste by providing them with more effective grocery shopping planning tools and resources to better understand expiration labels.
Initial research
I began the design process by conducting secondary research to support the idea that people waste a proportion of groceries they buy. I also conducted semi-structured interviews with individuals who fit the app’s presumed target audience of college-aged students and young professionals who buy groceries and cook for themselves. The goal was to assess the audience's grocery shopping and cooking habits as well as their sustainability efforts in order to inform whether they would find a new app that helps manage personal food waste beneficial.
Problem statement
The majority of food waste in America comes from people’s homes, and most Americans discard perfectly good, consumable food simply because they misunderstand expiration labels.
Understanding users
In order to identify opportunities for my design intervention, I created an experience map, based on learnings from my interviews, of someone engaging in the activities of meal planning, grocery shopping, cooking, and managing leftover food.
Persona
Combining my insights to this point, I created a persona—someone to design this app for. The persona’s summarized core needs and frustrations influenced the visual design, functionality, and overall purpose of the Wasteless app.
User scenarios
With the persona in mind, I crafted two user scenarios regarding problem manifestation and app intervention. The scenarios portrayed actions users may take before opening the app and while using the app in the context of a potential everyday occurrence.
Wireframing a solution
Based on the problems identified and the possible opportunities for design intervention, I wireframed an app that addresses my persona’s needs, motivations, and pain points. The app has four main functions: an e-pantry, recipe book, grocery shopping list, and expiration info hub. I created both low- and high-fidelity mockups for each function and prototyped them in Figma.
E-pantry
The e-pantry feature of the app helps users keep track of what groceries they have in their fridge or pantry as well as indicate to them what items are close to expiring and what items are safe to consume. The e-pantry is automatically populated as the user checks off the items they purchase from their in-app grocery shopping list.
Recipe book
The recipe book serves as a resource for users looking to use up any groceries that may be close to expiring. Users can scroll through the most popular recipes or they can search and filter by certain ingredients to find recipes that include them. Each recipe includes prep time, cook time, cooking skill level, an ingredient list, and directions to cook. The ingredient list is pre-checked for items already in user's e-pantry.
Grocery shopping list
The grocery shopping list is essentially an in-app notebook and checklist that allows users to enter what they need to purchase and stay organized before going grocery shopping. The intention is that users would write down the items they still need to buy in order to complete a recipe they found in the app. Ticking the box next to each item in the list would populate the e-pantry.
Expiration info hub
The expiration info hub tackles the issue of people disposing food because they misunderstand the expiration label. This tab provides some background information to educate users on why food waste is such a prevalent issue in the US. Users can also search for certain produce to learn more about how long items stay fresh, in what conditions, storage tips, and more. The camera icon in the search bar leads to an AR feature where users can point their phone camera at an expiration label, and the app will indicate whether that item is safe to consume based on the correct interpretation of the label and today’s date. Clicking on the “see recipes” button on the info pages will also direct users to recipes filtered by that ingredient, so they can try to use it soon and prevent its waste.
UI considerations
Visually, the Wasteless app is designed to be informational and intuitive—an app that brings value to people’s everyday lives. The colors allude to the theme of environmental sustainability and are familiar within the food/grocery industry. Shades of green and red are used in the text fields and iconography to differentiate positive versus negative information. Bright imagery supplements heavy text areas. And buttons and iconography provide clear direction for actions to take as well as extra clarification when paired with text. Below is the UI kit for the app.
Testing and iteration
After creating a working high-fidelity prototype for the app, I conducted moderated usability tests, guided by the following questions.
Are the navigation menu icons understandable? Can users accurately predict what kind of content they will reach?
Are the four main functions useful? Should any be omitted? Should any be reordered to better align with a user flow?
Is there too much text/reading on the expiration info tab? Would infographic style content be more digestible?
Should anything be added to provide more clarification on the purpose of the app?
Findings and iterations
There were four primary findings that led to design iterations of the app. As it was not obvious to users that the shelf icon in the navigation menu leads to the e-pantry, I changed it to a more detailed and identifiable icon. Users did not understand why they open the app to the recipe book, so the recipe book and e-pantry tabs were switched to mimic a more logical flow. The "expiring soon" and "safe to consume" sections were not differentiable enough, so I added colored backgrounds behind the headings to correspond with their icons. And users found there to be too much text in the expiration info tab, so I reduced the wordiness and made the main facts more prominent.
Final prototype
The final prototype of the Wasteless app allows users to interact between the interfaces I designed to complete the primary user flow detailed above. It was rewarding to hear positive feedback from those who tested the app. Users commented on how they see the benefits of the app and would incorporate it into their grocery shopping process if it were to be developed fully.
%20Problem%20Definition%2C%20Persona%20%2B%20User%20Scenarios_Page_4.jpg)
