Design a new way to track and consume home grocery inventory.

UX Design
Role
UX designer
Timeline
11 weeks
Deliverables
Hi-Fidelity Prototype
Contributors
Kevin Chou
Chang Zeng
Yuheng Zhong
Let's start with a quick glance.
Overview
Problem
Food waste is a long unsolved issue. It is estimated that Americans waste up to 40% of edible food every year. This problem has worsened due to the pandemic, where people are cooking more for themselves or for a small number of people, utilizing less ingredients than they would’ve if they were cooking for a big group.
Outcome
Collaborated with two designers in the Information School of UW, I designed an inventory management app that helps people track and consume groceries in an efficient way.
"How can we build an app helping people consume ingredients efficiently and eliminate food waste?"
Initial User Research.
Before rushing into the design studio and firing up softwares like Miro and Figma, we first interviewed people around us and handed out surveys to collect people's opinions toward the food waste situation and home grocery management app on the market.

We realized although most people thought food waste is a serious problem, they are sometimes not able to finish up everything in their fridge and have the experience of throwing large amounts of unused but expired foods or ingredients. Since none of our interviewees were using the grocery trackers/inventory manager, we wanted to find what were the problems current solutions have.
Market Research.
We downloaded some of the most popular home inventory management apps. After one week of experience, we noticed number of pain points these current solutions have.

Most apps in the market require users to manually input ingredients into the app. After using a certain amount of ingredients, users need to record the usage. These can be inconvenient for users. Also, there is no indication on how to efficiently consume the ingredient.

With all of these problems in mind, we aimed to focus on better usabilities and proper guidance and planning on grocery usage.
Identify a Solution.
We visioned two solutions to improve the grocery-adding experience and inventory plannings: bar code scanning and recipe recommendations.

By collaborating with local grocery stores, we wanted to introduce a universal bar-code witch contain food information. And the recipe recommendation function would help user consume their inventory efficiently.
"That's enough talking. Let's design something."
Completing the preparation works, we had gain a clear understanding of the pain points existing solutions had, the functions our target users were expecting, and the potential solutions to fix all of those problems.

Now, it's time to jump into the studio and start drawing some dots and lines on the white board!
Wave the Flow.
Before touching on the screens, we started by designing a user flow map with all of the key features included. This helped us identify the logical connections between functions. During future works, whenever we encountered questions about adding/deleting feature screens, we always come back to this map to test the suitability of the new changes.
Click to enlarge image
Bring concepts into Prototypes.
Having a guild in hand when building prototypes is always good. Following the logic presented in the user flow, we could design wireframes with low fidelities. These Lo-fi prototypes gave us a direct view of the layout of the elements without losing the flexibility to make design changes.
Click to enlarge image
Usability Test.
After completing the Low-fidelity prototypes, it's time to bring our designs to users again. We printed the wireframes on cards and bring the cards to testers for mockup runs. By observing users interaction with the prototype and operating interviews after the test, we gathered precious ideas and advices.
Tool bar
We find users were having trouble going back to the home page, so we rearranged the tool bar and added a home button for users to jump back to home page.
Recipe suggestion
At the right end of each recipe card, the percentage match score turned out to be confusing, so we optimized it in to number of additional ingredients required.
Scanning
Some testers mentioned that not all groceries came for stores that provide barcodes. To add individual items, we added a object recognition scanning.
Going to High Fidelity.
As the key features and element layouts were decided, we finally entered the stage to design the visuals of our app. We developed a UI pattern with Mint Green as the primary color and neomorphic UI style. We also named our app "Carrot" following the slogan "Care About All" and trying to encourage our users to consume all groceries in time and eliminate food waste.
The building of High-Fidelity prototype run smoothly with the referrence of the revised user flow and Lo-fi prototypes. But we were not treating the wireframe as the unbreakable golden rule when we working on the Hi-fi screens. There were several layout and connection problems that could only be noticed in the High-Fidelity environment.

We kept optimizing the layout of each screen and tested on the Lo-fi wireframes. After, I forgot howmany iterations, all screens were confirmed and bring us to our High-Fidelity prototypes.
See all high-fidelity screens in the design spec
But just having static screens is not enough. To make the prototype interactive, we, once again, take reference to the user flow. We did some interaction diagrams in the Lo-fi stage. However, the actual interaction diagram was a "little bit" more complicated than we expected:
what we imagined
what we actually have
If you are interested in more detail, you are more than welcome to check the design specification and interactive prototype provided below.
Download the design spec and interactive prototype here.
Go to the design spec►
Go to the prototype►
Reflection and Future.
Within the timeframe, our team did a wonderful job during the entire design process. From identifying problems to recording demo video, from doing initial research to final wrapping up, the team remains creative and cooperative.

We come up with a high-fidelity interactive prototype and a full design specification aimed to help eliminate food waste issues by introducing a new way to manage home inventory.

However, since ordinary receipts do not have barcodes that contain specific details, such as expiration dates, we would have to form partnerships with grocery stores and ask them to include unique barcodes that record item information on the receipt. Although this move would attract more app users to visit the store, it would be complicated to convince large grocery chain stores to collaborate. Introducing a univeral barcode standard that allow stores to include food information easily would be the way we want to expore in the future.
Thank you for reading to the end.
Catch you on the next trip!
❮ Back to home page