Have you ever had to toss out weeks-old lettuce from the back of your fridge? In my household, it certainly feels like we could be doing a better job at preventing waste.
Here's how we designed a food management app to address consumer-level food waste.
Purpose
Group project for CSC318 The Design of Interactive Computational Media course
Team members
Alex Waddell, Faiyaz Huq, Georgia Bains, Mohammad Ettouhami, Isabella Kuo
Duration
4 months
Stakeholders
Course instructor, TA, and the rest of the class
Each team hosted 8 stakeholder presentations throughout the course to get feedback and buy-in.
11 million tons of edible food go to waste, costing 17 billion dollars in Canada. 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.
With this in mind, we determined a problem statement:
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 carried out a questionnaire with primary stakeholders and interviewed both primary and secondary stakeholders.
Georgia and I highlighted patterns and insights across 64 responses.
Key insight 1: Most common reasons for waste 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 identified an opportunity for us — better food planning and management techniques may be beneficial for our users.
Key insight 2: I found that food management strategies could be split into 3 types: logistical, preventative, and active. This helped us identify which stage of the food management process we wanted to focus on.
Key insight 3: 42% of our participants reported wasting green groceries and vegetables the most. This prompted us to think about why certain food groups are more susceptible to waste, and how our solution can adapt to this pain point.
A key behavior was that our participants focus on core ingredients that can be used in multiple recipes. There may be an opportunity to provide alternative recipes in our solution so ingredients can be used up.
Alex connected us to the North York Harvest Food Bank, as we wanted to explore how waste plays a role in the operations of a food bank. We found that bruised product or dented canned food items are thrown out regularly, but are still edible.
We could use this as an educational opportunity for our users.
We also spoke to the co-founder of a grassroots mutual air project that delivers free meals and grocery bundles within the Greater Toronto Area, since they source food and distribute them differently from food banks. We found that many individuals weren't aware that they accepted donations.
Knowledge of donation places can alleviate food waste, giving us a potential feature in our solution.
For our next phase of designing, we created actionable artefacts based on the research we conducted to help our business stakeholders (aka course instructors and classmates) understand our next steps.
Alex wrote job stories to help us define what our users do, including the causalities, anxieties, and motivations that come with their behavior.
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.
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.
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.
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.
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.
I created the persona ‘Phud Waister’ to encapsulate the pain points, habits, and goals that we have discovered from our users. This helped us generated buy-in from our stakeholders (aka course instructors).
Now that our problem space was refined and we have stakeholder buy-in, we were ready to begin defining the functionality of a potential digital solution.
Following our formative studies, we had a good idea of what was required of our solution to solve our users’ pain points.
Food bank / donation finder
Reminders for expiring items
Recipes for leftovers
Ease of data entry
Grocery list
We sketched concepts and evaluated them on how well they met our job stories and design requirements. We chose to move forward with Faiyaz, Alex, and my sketches.
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
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
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.
We combined features of each design into a refined flow, 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!)
Since our solution is a complex app with new design patterns and interactions, we wanted to conduct 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.
We found two recurring issues:
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 color codes weren't obvious as a category-grouping method for food (e.g. vegetables, meat, dairy).
We asked 4 different 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 prioritized 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
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.
After iterating on our design concepts and getting approval from our stakeholders, we were ready to go digital and create our prototype on Figma.
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.
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!
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.
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.
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.
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.
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!
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.
Future Isabella
This is where a design system would've come in handy! Despite our best attempts, since the 5 of us designed different screens and components, there were UI elements that we neglected to standardize. Our time constraints prevented us from familiarizing ourselves with the tools at our disposal. Since this was our first time using Figma, we weren’t aware of best practices.
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.
After carrying out all the proposed changes based on our summative evaluation, we have our final prototype!
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
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:
How to prioritize design choices and understand what's technically possible.
Alex’s concept of having an interactive inventory graphic (e.g. clicking the fridge would show users their fridge inventory) was incredibly creative, but difficult to execute design-wise and engineering-wise.
While we didn't implement it, 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 used a green color scheme for our environment-related theme, which was problematic with any use of red. This was the start of my advocacy for high-contrast ratios and accessible user experiences!
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 would have been hard to discover.
Through our user testing, I was made aware of inconsistencies across our UI (e.g. corner radius of cards, sentence-cases). A design system would have come in handy if the team used reusable components!
There were also moments where we brainstormed a 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 our biases influence a user-centric approach.
I often sought out guidance from the computer science instructors on what's possible for engineering teams to create (e.g. the interactive inventory graphic). It would’ve been 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?
This was a project that I really enjoyed working on. Partly because the work itself was intriguing, but also because I had talented team mates who were diligent and communicative. Thank you to Alex, Faiyaz, Georgia, and Mohammad!
And that’s a wrap! If you have any questions or feedback, please don't hesitate to contact me.
Or, view another project:
Alleviating loneliness in older adults
