Repo App
I collaborated with two teammates to develop a high-definition prototype for an app addressing common issues faced by college roommates who share a refrigerator: disorganization, spoiled food, and forgotten items. Through this Human-Computer Interaction course project, I gained skills in user research, data analysis, prototyping at various fidelity levels, and design critique. The course covered usability principles, user experience dimensions, and their application in user-centered design. Our final solution merged NFC stickers with a food management app. Check out our design below!
Project Type
App Designed in Figma
Timeline
Fall 2022
Course
INFO 3450 Human-Computer Interaction Design
Figma Link
Design challenge:
How can we improve the experience of individuals who cook at home and share a fridge with multiple roommates, utilizing human-centered design principles?
User Research Process
01
02
03
04
In order to bring our design to life, our group had to first brainstorm the types of questions we needed to ask our user research participants. From there, we created an interview protocol to be used across all interviews members of our group conducted. The interview protocol included an informed consent portion, information about the background of our project, and a set of demographic questions as well as some open ended questions at the end for participants to give additional commentary. We then conducted interviews with potential users of our design in their homes, with one member of our group conducting the interview and one member taking notes. We took photos of participant refrigerators, kitchens, waste areas, etc.
At the end of all our interviews, we took information from the raw data to compile four main conclusions from our user research:
Users do not have consistent or reliable methods of detecting spoiled food before discarding it by throwing it away, and they feel bad about wasting food and money.
Users enjoy cooking and value grocery shopping on their own terms, but their ability to do so is often limited due to their busy schedules and lack of time.
Users want to be able to easily see, access, and remember the food in their refrigerators but often struggle to do so due to overcrowded shared storage and forgetfulness.
Users tend to think critically about and plan their grocery shopping in advance, but they do not like how often they need to shop because they tend to buy fresh foods that go bad quickly.
We used these four insights as the basis of our design, and were able to construct an information architecture diagram to outline the flow of our app based on these pre-determined requirements.
​
Information Architecture
Above is the Information Architecture we created for our app design. Our navigation bar contains four features, three of which we built out. First is "Repo," which acts as the home page. This is where users can view their personal inventory, look up where items are located in their fridge, and see their roommates items. The "Add Items" feature allows the user to add grocery items into their Repo - aka personal inventory - either manually or by taking a photo of a grocery receipt. This is also where our NFC stickers come into play - users can connect near-field communication stickers to items in their fridge, and the app is able to track where in the fridge the item is located based on the connected sticker. The "Freshness Check" feature allows the user to see when their items are going to expire, and communicate with roommates regarding disposing of items. Finally, the "Profile" feature, which we did not build, is meant to include the user's personal profile, store messages, and keep a list of the users' favorited items and grocery stores.
Freshness Detection
I was personally responsible for the "Freshness Detection" page of the app. Users are able to see when perishable items are set to go bad, and through the app they are able to send a message to their roommates asking them to throw the item away if need be, and they can delete the item from their Repo inventory directly from the Freshness Detection page. Click through the images below to see how this portion of our app works.​
1.
User gets a notification on their phone screen that one of their items has expired
2.
After clicking on the notification, user is brought directly to the Freshness Check page in the Repo app
3.
User can click on the message icon for the expired item to send a message to their roommates regarding the item
4.
User can click on the red "X" to remove the item from their inventory
5.
Item is now removed from user inventory via the Freshness Check tab
Final
Deliverable
This 3-minute video is a walk-through of the final iteration of our design after completing all edits and recommendations gathered from user testing of the app.
Repo is complete with...
-
A New User start page

-
A home page depicting all items in a user's fridge inventory

-
A page of favorited items for users to keep frequently purchased items on deck

-
An item locator page for users to see where their items are in their fridge (utilizing NFC stickers)

-
A page to add items to their Repo inventory by either manually inputting items or taking a picture of a grocery receipt

-
Updated instructions for adding items to your Repo and connecting NFC stickers to items for locating purposes

-
A freshness detection feature that keeps track of expiration dates and warns the user when their items are about to expire.