Nobin, Home Food Manager
Role
UX/UI Designer
UX Researcher
Duration
80 hours
Tools
Figma, Zoom
Overview
This is a student project to design a lifestyle MVP. The idea for this mobile app came from a personal place; I often find myself opening the door to my fridge, clueless. In these cases, I’m hungry, but it’s hard to think of what to make, nevertheless, what to eat. So I wondered, what could I use to help me alleviate my hunger in the most optimal way?
Problem
There is a bigger problem at hand. Households contribute a huge portion to food waste. About 30-40% of foods from households end up in the landfills. We can help reduce food waste by being more mindful about how much food we buy and use.
Yet, food management at home can be complicated:
-
Planning meals is stressful and time-consuming.
-
Food preparation takes too much time.
-
People don’t know what to do with unfamiliar foods.
Project Plan
There are many possible solutions for this problem and to narrow it down, I must first understand who my users will be and what kind of habits they have.
Value Proposition Canvas
I drawn out this chart from the business model canvas to understand the business’ needs. Since I am not working with an actual client, it was good practice to discern a product that benefits both sides of the user and the business.
Research
User Interviews
I interviewed 6 individuals between the ages of 26 to 41, who cook regularly and reside in large metropolitan areas.
Habits They Share
-
5 of 6 users make grocery store list, either mentally or physically.
-
50% of users go through a cycle of recipes that they are familiar with.
-
All users check their fridge and pantry before they go to the store for more groceries.
Roadblocks They Face
-
Planning meals in advance take up time and mental space.
-
Making lists every single time for grocery shopping can be redundant.
-
Food that get thrown away are foods that are forgotten or unliked.
Secondary Research
According to the USDA, individuals who are employed spend less time on meal prep than those who are not employed.
Published by the American Journal of Preventive Medicine, a study shows that there is correlation between food preparation time and dietary health. Those who spend less time on food preparation are less likely to have better diet quality.
In another study, it states that lack of time is connected to poor diet amongst college students.
Competitive Analysis
There are a lot of competitors who share the same sentiment of fighting food waste at home. They express to users that having a food-inventory manager can help save the user money. Similar with this concept usually pair food inventory with related recipes. Even though their features are similar to one another, they stand out by focusing on either food management or recipe discovery.
User Flow
There are many panty management apps out there, and it was clear to me from the user interviews that preparing a grocery list was a very common practice. Additionally, the items on the list were based on what the users planned to make in the near future. So I focused the following tasks: viewing pantry inventory, importing grocery list items to the pantry list and going through recipe cards.
Initial Wireframes
Inventory Page
Essential functions:
-
Adding items into the inventory
-
Viewing what is available
-
Images of items for accessibility
-
Writing item into shopping list
Grocery Shopping List -> Inventory List
Essential functions:
-
Input form for adding items
-
Radio buttons for checking off items
-
Main CTA button to transfer quantity from one list to the other
Recipe Cards
Essential functions:
-
Recipes stacked on top of one another (slide deck)
-
Icons to indicated total cook and prep time and number of ingredients available from pantry
-
Remove items when recipes is made
Usability Test
Key Insights
Essential functions:
-
5 participants, ages 24-31
-
There was a lot of confusion with the shopping list page, onboarding process and recipe card.
-
Participants understood the concept of the app but missed intended points for the “Grocery List” and “Recipe” pages.
Branding
-
Associated words: fresh and fun
-
Brand name: “nobin” for no bin, no waste
-
Icon: a kitchen staple, a leafy green vegetable
iOS Icon
Color Palette
Splash Page with Logo
Typography
End Product
Pantry Inventory
The inventory is the first page the user lands on when they open the app. A search bar was added to help the user locate an item quickly. Items can be added by text, voice and camera.
Shopping List
The term “grocery list” was changed to “shopping list” to simplify its meaning. The main revision for this page was to focus the call-to-action on using this list to update the pantry-inventory (importing quantity from one list to another list). Other actions, such as add/remove and check to complete, were toned down and placed in its own location in “Edit.”
Recipe Cards
The recipe card’s content were rearranged for easier viewing, as well as clearer indication of what ingredient the user has and doesn’t has.
Conclusion
I had so many ideas for this app, but with the time constraint, I focused on setting the foundation, which were the pantry inventory and shopping list. With a strong foundation, I know this app could be scaled upwards for more success. For the next steps, I plan to expand on the meal planning feature that would work side-by-side with the recipe cards.
I became more aware of how I purchase groceries and plan meals (which is not is not planning) because I want to be more conscious of how my choices affect the planet's health. I hope to spread this knowledge to others, so that, together, our small steps work to decrease food waste.
Takeaways
This project reminded me to check my bias. That what makes sense to me does not always make sense to someone else, and that is why the usability test is a crucial part of this design process. Going forward, I will remind myself that I must keep open-minded to execute better solutions.
