Helping households manage food waste (Best Presentation)

In this course, we had to apply user-centered design to a problem space and design a solution for people within that space. After evaluating the merits of different problems within project constraints, our team decided to tackle the issue of food waste in households for young adults.

Project details

Problem

What's the recipe for reducing food waste?

Have you ever had to toss out weeks-old lettuce that's been chilling in the back of your fridge?

In my household, it certainly feels like we could be doing a better job at preventing food waste. Here's how we designed a food management app to address this issue.

In Canada alone, 11 million tons of edible food go to waste, costing 17 billion dollars. This is a problem at the individual level. 14% of food waste is generated in households, such that food fit for consumption is discarded, which can be caused by factors such as food spoilage or lack of visibility in fridges. (Research conducted by Alex and Faiyaz.)

‍Young adults have been shown to waste more food compared to other age groups and few have high awareness or knowledge about food waste. (Research conducted by me.) This may be due to lack of knowledge about food waste and food management.

With this in mind, we determined a problem statement to explore:

I am trying to learn about my food consumption and cooking habits, because I want to find out about my food waste in order to understand how I can save time and money.

We identified our primary and secondary stakeholders to make informed decisions about who will be involved in our design process.

Questionnaire

What are our users doing and thinking?

Our goal is to find out about user habits and preferences in terms of food management, as well as attitudes towards food waste. Target participants included anyone 16+ who is involved in household groceries, either by buying, cooking, and/or eating.

The questionnaire was piloted and distributed through our personal social networks and different online platforms.

See our final questionnaire (click to expand):

Data collection & analysis

Georgia and I highlighted interesting patterns and insights across 64 responses.

Our participants reported a wide range of reasons for their personal food waste. The most common reasons were that fridges were too full and blocked their vision of certain foods (47%), they buy too much food (39%), and don’t plan their meals (30%). This identifies an opportunity for us to solve the problem of food waste — better food planning and management techniques may be beneficial for our users.

I found that food management strategies could largely be split into three categories: logistical, preventative, and active. This helped us identify which stage of the food management process we could narrow our focus on.

Notably, 42% of our participants reported wasting green groceries and vegetables the most, which prompted us to think about why certain food groups are more susceptible to waste, and how our solution can adapt to this pain point.

Interviews

What else can we find out about our users?

Our goal is to understand user practices in better detail and identify perspectives of secondary stakeholders. We conducted interviews with 2 primary stakeholders (both questionnaire participants that indicated they were open to follow-up questions) and 3 secondary stakeholders.

Interview questions were written by Mohammad and I. I was the interviewer for 3/5 interviews and the note-taker for 1/5.

Interviewing primary stakeholders

We noted some similarities in our participants' habits and behaviors, such as buying frozen vegetables out of fear that it'll go bad. This aligns with our questionnaire findings, which showed that vegetables get wasted most often.

The participants also like to maximize reusability of food items by focusing on core ingredients so that they can use the same food in multiple recipe. There may be a benefit in providing information on alternative recipes so ingredients can be used up.

We identified three pain points:

1. Certain foods lack visibility when there’s a full fridge, which leads to food expiring without an individual noticing.

2. Items that come in bulk can lead to waste if the individual is unable to finish all portions.

3. Meal plans are difficult to execute with these young adults’ tight schedules.

This insight provides us with opportunities to tackle specific issues with our solution.

Intervewing secondary stakeholders

Data Management & Operation System Coordinator at North York Harvest Food Bank

Alex used her connections from her volunteering days at the North York Harvest Food Bank for this interview. Since our questionnaire revealed that food banks were part of some individuals’ food waste management, we wanted to learn more about how waste plays a role in the operations of a food bank. We found out that:

• Bruised produce or dented canned food items are thrown out regularly, but are still edible.

• People don’t donate to food banks as much during the summer months.

This insight helps us understand more about food donation towards food banks and general waste habits. We could use this knowledge to encourage donations in summer months, or educate users on what’s still edible.

Deli worker at a grocery store

Georgia secured an interview with a deli worker at a supermarket chain, as we wanted to learn more about consumer purchasing behavior. We found out that:

• As soon as a sale is announced, shelves get emptied very quickly.

• March and April are “dead zones”, when consumers prefer not to shop for too many food items.

If we extrapolate our questionnaire results, this may mean that a fraction of sale items end up getting wasted as items get closer to their expiry date, because cheaper food is deemed “less worthy” of saving. We could also explore why consumers shop lightly during dead zones to encourage the same behavior during other months.

Co-Founder of The People’s Pantry

I heard about The People's Pantry (TPP) in the news and reached out via social media for an interview. TPP is a grassroots mutual aid project that has delivered over 11,000 free meals and 15,000 free grocery bundles to people in the GTA. TPP sources food and distributes it differently from food banks, so we wanted to learn more about this distinction. We found out that:

• Many individuals weren't aware that TPP accepted donations from regular cosumers.

• The co-founder reiterated an ethos of not giving vulnerable individuals any garbage, leftover food, or bad meals.

Knowledge of donation places can be a contributor to food waste. Their ethos also shines light on a pain point of bad donations, as we see the current sentiment is to give away undesirable items.

Revisiting our problem statement

With the data collected from our primary and secondary stakeholders, we revised our problem statement from “I am trying to learn about my food consumption and cooking habits because I want to find out about my food waste in order to understand how I can reduce it” to:

I am trying to learn about my food management as a young adult who is primarily responsible for the food I consume, because I want to find out what logistical strategies, preventative methods, and active solutions I currently use or could be using in order to understand how I could reduce food waste and be more mindful about my food habits.

Experience map

How do people manage their household food?

Georgia created this experience map that centers around domestic food management, chronicling the phases of planning a trip to the grocery store, the actual act of buying food, storing food items once arriving home, using items as part of larger recipes, and finally, disposing of any unused items.

Job stories

What are our user tasks?

Alex wrote job stories to help us define what our users do, including the causalities, anxieties, and motivations that come with their behavior.

1. When I am planning which groceries to buy, I want to know that I am buying just the right amount of food, so I do not have to return to the grocery store or waste food.

2. When I am deciding what to eat before a meal, I want to know the ingredients that I already have, so I can incorporate these ingredients (and leftovers) into a satisfying meal.

3. When I am cooking a recipe for myself, I want to know whether or not I can eat a food that has gone bad, so I can continue my recipe as planned.

4. When I am cleaning my fridge or about to throw out food, I want to know if there are other options I can consider, so I can get better use of my food.

5. When I have collected unused food items, I want to find the nearest donation site, so I can feel comfortable that my food is going to be utilized for good.

Persona

What would a typical user look like?

I then created the persona ‘Phud Waister’ to encapsulate the pain points, habits, and goals that we have discovered from our users.

Design requirements

What demands must our solution satisfy?

Following careful analysis from our formative studies, we have a good idea of what is required of our solution in order to solve our users’ pain points.

Sketching

Which design concept should we choose?

We sketched design concepts that could meet our job stories and design requirements, and evaluated the pros and cons of each concept. We chose to move forward with Faiyaz, Alex, and my sketches as our design concepts.

My design concept

Pros

• Allows user to sort based on ‘type’ of food, corresponding to the information architecture of online grocery stores

• Allows for flexibility of different user needs/cuisines with detailed edit page

• Storage method when adding items to inventory is useful to combat pain point of food configuration preventing visibility of items

• Expiry date is necessary element, also allows for purchase date if item doesn’t have any best before or expiry dates (e.g. produce)

Cons

• Link to the edit page may become tedious - could switch to a slide to edit/delete setup

• Dense with information, could lead to cognitive overload

• Scanning barcode is not optimal for automatic logging, could change to taking photos of receipts

• Completely manual entry does not meet ease of entry requirement

• Notifications are too wordy, may lead to users dismissing pop-ups easily

Faiyaz's design concept

Pros

• Colour coding cards provides visual aid and reduces cognitive load for users

• Widget-based design, interactive and allows more options without having a long nav bar

• Manual entry and reviewing feature for food input is a good addition

• Recipe card includes difficulty & time, echoing information that you get from search engines

Cons

• Food banks differ in their restrictions

• Could have more options for inventory updates (ex. Finished vs. Thrown out) to track food waste

• Force/hard click isn’t available on all devices

• Donation areas aren’t just food banks - can rename to ‘Donate Your Food!’ to encompass food banks and other places

Alex's design concept

Pros

• Fridge and cupboard graphics are easy to understand and user can “open” their fridge to see what their inventory is

• Progress tracker is useful with financial incentives (e.g. $30 saved) - users get positive reinforcement to continue saving and reducing food waste

• Recipes scanners provide for a better user experience

Cons

• Progress tracker could have more features to make a separate page worth it

• Would have to take into consideration other storage methods, like open spaces (e.g. kitchen counter or island) for fruits etc.

Design iterations

How can we improve our design concepts?

We decided to combine features of each design into a refined concept, such as Faiyaz’s widget-style homepage, Alex’s graphics of the fridge for storage areas, and my list-style inventory page. We also created new sketches + iterations to meet other design requirements. See how we worked through our initial design concept and iterated into different versions (from left to right):

After some final tweaking, we ended up with these refined sketches using tablets and OneNote. Surprisingly, OneNote was a great collaborative workspace for digital sketching!

Usability testing

How does our refined design concept fare with users?

Since our solution is a complex app with new design patterns and interactions, we wanted to use a cognitive walkthrough to evaluate the learnability and usability of our design concept before committing it to a high-fidelity prototype. As our tasks were good candidates for learning about users thoughts on our design, we also conducted a think aloud with a separate set of testers.

Cutouts for the paper prototype

Conducting our cognitive walkthroughs on Google Slides

Cognitive walkthrough

We asked 5 testers to each complete these 7 steps:

We found two recurring issues across users:

1. The prototype lacked feedback to indicate an action was done successfully in the inventory (”How do I know if an item has been deleted?”)

2. The thin, color-coded bar to the left of each food item wasn't obvious as a category-grouping method for food (e.g. vegetables, meat, dairy).

Think aloud

We asked 4 testers to complete the same tasks while narrating their thoughts out loud.

These were our most significant usability issues:

To address our user testing results from the cognitive walkthrough and think aloud, we decided to prioritize the following changes:

• Improve visibility of system status by adding confirmation pop-up once item has been deleted and increasing color contrast of the active tab on the nav bar

• Remove colors that sorted food items on the inventory screen to reduce cognitive load

• Adding a tooltip for light vs. long press touch interactions to explain different methods of interacting with this page

• Change the "Trash" and "Done" button labes to be more intuitive

Storyboards

How can we help our stakeholders understand our users?

As our stakeholders (aka the course instructors and the rest of the class) were not involved in our usability testing, we created storyboards to show how our users interacted with our design.

I created this storyboard that meets our design requirement for having an interactive grocery list to prevent over-buying. Our formative studies revealed that lack of visibility in a fridge is a huge barrier to reducing food waste, so we created an Inventory which is linked to the interactive grocery list. When users input an item that they already have, but might not have seen, they get an alert.

Storyboards created by Mohammad

Storyboard created by Georgia

This is a narrated walkthrough of tasks that the user can complete in the Inventory, which is the main task flow in our solution:

To address the usability issues that arose from our user testing, these are the most significant changes we made from the initial paper prototype:

‘Trash’ and ‘Done’ was a source of confusion in the low-fidelity prototype, as users didn’t know the distinction between the two terms (i.e. throwing out an item vs. eating it), nor did they know it would generate user insights. We added a pop-up modal for the high-fidelity prototype, using an active first-person voice for the options and further separating the user insights into eating, composting, donating, or throwing away an item.

The coloured bar that indicated which food group an item belonged to was unclear to users. We removed it and instead prioritized the use of color in highlighting items that are close to expiring.

We added help text and documentation to aid with the user’s cognitive load, particularly in the inventory where the screen is more dense with information. Clicking on the warning icon leads to redirection towards Recipes / Donation so that users are encouraged to use up the food item in other ways as it is about to go bad.

As users mentioned that the active tab was not obvious enough, we increased the contrast of the active tab compared to the other tabs. This was done by adding a green line above the active tab, increasing the size of the active icon, and using a deeper green color for the active state.

Performance check

Did we meet our own requirements?

In the design process, it's important to revisit earlier design specifications to make sure we're still on the right track. We identified functional requirements earlier — let's see if we met them!

1. Food bank/donation finder
   We expanded on this requirement and created a dedicated Donation screen for users to find donation sites, which includes not just food banks, but also food drives and community fridges.

2. Reminder for close-to-expiring items
   We created an Inventory for users to log their food. Each input includes data on expiration dates or best before dates, so items that are close to expiring will move up in the user’s inventory in a red background to encourage users to manage the item properly.

3. Recipes for leftovers
   We created a Recipes section for users to browse different recipes that are relevant to their current inventory. Users can also filter difficulty and time to provide more flexibility to the users in their quest to reduce food waste, as our formative studies also showed that convenience was a significant factor in food management.

4. Ease of data entry
   The success of this requirement is subjective. Our efforts to meet this requirement was done by streamlining the process for adding food items and displaying the most relevant options. For example, food group categories include produce, beef, dairy/eggs, and others; the first three categories were the food groups wasted most according to our formative studies.

5. Grocery list
   We created an interactive grocery list that people can use to make sure they are purchasing just enough groceries. This cross references data in the Inventory to warn users against buying items they may already have.

Aside from the fourth requirement being subjective, looks like we met the rest of them!

Summative evaluation

How does our final prototype perform with users?

We wanted to determine whether we were improving our designs, so we conducted a summative evaluation with 5 testers and selected tasks that were essential to our problem statement:

• Log a new food item

• Update the food inventory

• Find ways to handle food items you no longer want to eat

• Find ways to handle food items that you're unsure what to do with

These are our interpretations of the limitations and issues that arose in our evaluation and our proposed changes to the design.

Average efficiency, effectiveness, and satisfaction scores across the tasks

Our scores indicated that our solution was generally quite efficient, effectiveness, and user satisfaction was higher than the benchmark. To see how we could improve satisfaction, we looked at items with the highest standard deviations, which were "I found the system very cumbersome to use" (SD = 1.79), "I think that I would like to use this system frequently" (SD = 1.64), and "I thought there was too much inconsistency in this system" (SD = 0.55). This suggests that users have varying experiences regarding these aspects of usability, which can indicate areas of strength or weakness in our system.

We can look to our qualitative subjective data to get more insight.

For system cumbersomeness, some users commented on the necessity of the modal asking for the item's food group before the input field. The modal required one click to autofill the food group category, but selecting the food group category in the input screen also only requires one click. Our proposed change based on this is to remove the modal to reduce the number of screens that users have to interact with.

For system inconsistencies, we had a number of UI elements that were not consistent. Our proposed change is to create components and standardize the UI across screens.

To measure the effectiveness of our system, we measured whether users completed a task and whether they made errors. We had a task completion rate of 85%, which is above the benchmark of 78%. Task 2 had the highest error rate, which indicated areas of improvement in the Recipe screen. Users had difficulty locating relevant recipes that matched food they currently had in their inventory. Our proposed change is to add a search function to filter for existing food items.

Task flow of adding a food item to the Inventory (Walkthrough created by Georgia)

Task flow of checking user insights, browsing recipes, and finding a donation site for unwanted food (Walkthrough created by Alex)

I created the following screens and components: navigation bar, input screens for adding an item, and the Inventory. Faiyaz created the Home screen, Alex created the User Profile, Insights, and Grocery List screens, Georgia created the Recipes screens, and Mohammad created the Donation Finder screens.

Screens and components that I created on Figma

Revisiting our problem statement

Can our solution be tied back to the problem?

With the Inventory, the user is able to use the logistical strategy of sorting their food by best before dates, solving the pain point of lacking visibility of certain food items.

The Inventory and Grocery List also let users carry out preventative methods, since having knowledge of what food they have at home prevents over-purchasing.

Users can also engage in active solutions. They can repurpose their soon-to-go-bad food by checking Recipes to use up ingredients they have, or use Donation Finder to give away their food.

Our secondary research and formative studies show that consumers typically don’t know how much food they waste, nor are they aware of how to utilize unwanted or unused food. Since our solution generates user insights, it allows users to be more aware of their food habits and reflect on their behavior.

All in all, our solution solves a number of pain points, which in turn contributes towards the overarching goal of reducing food waste.

Our team was one of few to win Best Presentation in a class of twenty groups! We were commended for our thorough research process, professional and refined high-fidelity prototype, and general creativity in our approach to solving the food waste problem. Being my first UX project, I learned many things that I hope to bring forward in my UX journey:

• Not every feature or function that was brainstormed can be implemented. For example, Alex’s design concept of having an interactive inventory graphic (e.g. clicking the fridge would show users their fridge inventory) was incredibly creative, but difficult to replicate on Figma.
  
  This taught me how to prioritize design choices within specific timeframes and understand what was technically possible. While we ended up scrapping it for the high-fidelity prototype, we still took note of how it was important to allow users to know where their food physically was, so we mediated with the addition of storage categories.

• Accessibility includes color blindness. We chose a green color palette as our problem centered around an environmental issue. However, we were made aware that the red background for expiring items in the inventory would clash against the green for people with red-green color blindness. It would be great to learn more about how and why of accessible UI.

• Help text and documentation can be crucial for the user experience. We originally wanted to implement a hard-press feature to multi-select items in the inventory, but without any help text, it may be hard to discover.

What I would have done differently

Minute details such as the corner radius of cards or sentence-case vs. title-case all affected the user’s perception of the app providing a seamless experience, and this was reflected in our user testing sessions. Now that I’ve gained experience, I am acutely aware of the inconsistency in some of our UI elements. We would have made our lives easier with a design system and benefited from reusable components.

As I was writing this case study, I also figured that there were definitely times where we brainstormed about the solution before defining the problem space. “X feature would be cool to implement” or “My friends said they would enjoy Y” were sentiments that I learned to ignore. As I continue to conduct user research, I will be more aware of not letting my and my team members’ biases influence the user-centric approach that we want to take.

Possible extensions

Since this course was part of the computer science department, I often sought out guidance from our instructors and TAs on what would be technically possible for engineering teams to create (e.g. the interactive inventory graphic). It would’ve been really interesting to flush out these challenges with data and product teams.

For example, how would our solution obtain data for the Donation Finder function? Would this be community contributed data? How do we, as app creators, ensure the safety and reliability of these locations that our users will visit?

Another challenge would be for Recipes — where do we get recipes to display to users? How would the data from the recipes be parsed for our app?

This is a group project that I really enjoyed working on. It was partly because the work itself was intriguing and fun, but also because I had talented group mates who were diligent, supportive, and communicative. Thank you to Alex, Faiyaz, Georgia, and Mohammad!