Forgotten foods
The MVP for an end-to-end application to track groceries and reduce food spoilage in households.
overview
PROJECT BACKGROUND
As someone who loves to cook, eat, and all things food-related, I spend a lot of time thinking about food— What should I make for dinner? When should I go grocery shopping next? What new recipes should I try? etc. The less exciting part— thinking about food that goes to waste. ReFED estimates that approximately 40-50% of food waste happens at the level of the consumer.
By combining two things I am passionate about—food and the environment, I came up with the idea for Forgotten Foods. It is a grocery tracking app aimed at reducing food wastage in households.
problem
The problem is the amount of uneaten food being thrown away. Some waste is inevitable, however, there are simple strategies that can reduce waste. For example, planning meals so there is no overbuying, storing food in the best way so it lasts longer and keeping track of foods and using them before they go bad.
Goal
The goal is to design the MVP of an end-to-end iOS app that helps users keep track of their groceries and reduce food spoilage in households.
01: RESEARCH
OBJECTIVES
Research and learn about food spoilage in US households
Determine the MVP
Design the Forgotten Foods brand
Design an end-to-end app for reducing food waste
COMPETITOR RESEARCH
After my background research on food spoilage in US households, I did competitor research based on similar apps. I looked at what level of food waste they are tackling and what features they have to offer. I wanted to figure out what will set Forgotten Foods apart from similar mobile apps.
USER RESEARCH
PARTICIPANTS
Total participants: 6
All had experience buying groceries regularly
All live in the United States
Age range: 24—42 years
SUMMARY
To better understand my users, I asked interviewees about their grocery habits to identify any challenges. I discovered that everyone I interviewed wastes more food in their households than they would like to. Users throw away Produce most of all groceries. Users equally throw away food before they get a chance to use it and after it is cooked (leftovers).
02: DEFINE
PERSONAs
From the user research, I analyzed the results and created two personas for the app. These personas will be used as a representation of who I’m designing for throughout the design process. Charlotte is a single female with a busy schedule and wants to keep track of her groceries in an orderly manner. Navya is a mother who loves to cook and tends to overbuy groceries. She hates wasting food, so she wants to get better about keeping track of what she has.
I decided to use Charlotte for my primary persona because her story was more relatable to a wider range of people and a good starting point for the MVP. Navya’s wants for the app can be met in future iterations.
UX PRIORITIZATION MATRIX
After creating my personas, I made a prioritization matrix by categorizing features based on levels of importance. I had many feature options that I wanted to include, but I had to narrow it down to what I thought was the most important.
site map
With the features defined, I had to decide which ones to include for the minimum viable product (MVP). I chose to include all the features in the low effort/high impact category. I had many ideas for additional features that could be added in future iterations, but I decided to focus on the key elements for the MVP. I created the site map using Whimsical.
user flows
Using the same tool, I created three flows based on my sitemap. The first flow outlines the login process; Every user needs to create an account to use the app. The second flow shows how to add a leftover to “My Kitchen.” Lastly, the third flow outlines the recipe page—either entering your own or discovering new recipes and saving them.
03: DEsign
Sketches
Using the Procreate app on my iPad, I sketched pages I thought were the most important. My goal while sketching was to fit all the important information on the small screen without making it too busy. I decided not to sketch other versions because I wanted to save time and see how it looked in wireframes.
WIREFRAMES
In Figma, I began to turn my sketches into wireframes. At this stage, I set up a grid, chose my icon sets, typography, and other necessary components. I used most elements from original sketches, but I mocked additional pages.
logo
The next step was to create a brand for Forgotten Foods. I wanted the colors to reflect fresh produce so I chose shades of red, orange, pink, and green as an accent. Using Procreate on my iPad, I began designing the logo. I tried different fruits—strawberry, peach, and lemon. I finally decided to go with an abstract peach.
style tile
Before moving on to the UI, I created a style tile to streamline the design process and make the designs look and perform better.
UI Design
The next step was to apply the UI design to the wireframes. Since I was creating an iOS app, I decided to use Apple UI elements. These elements make interaction with that app feel easy and natural.
In this stage, I decided to create many more pages for the design because I wanted to be able to show complete flows. I made a very detailed MVP.
04: test
USABILITY TESTING
Before user testing, I prototyped the design in Figma. Through testing, I was hoping to see if it was easy for people to navigate and what I needed to iterate on to make for a better user experience.
AFFINITY MAP
I had a total of 5 participants ranging between 24-57 years old. One test was in-person and the other four were remote. I took audio and screen recordings of user testing to refer back to for my notes. I asked the participants to complete three tasks:
Log in and turn off notifications
Change the expiration date for blueberries in “My Kitchen”
Edit cook time, add an ingredient, and change a step in the directions in Pumpkin Soup Recipe under “My Recipes”
PRIORITY MATRIX
The majority of the feedback I received was suggestions for minor changes or features that could be added in the future. For the minor changes, I took into consideration the pain points of users and what they couldn’t find immediately. If it took more than a few seconds, I knew it needed to be changed. Users had the most difficulty with the last task—editing the recipe, so I made iterations to make it more seamless. As for the features that could come later, I added them to the high-impact/high-effort category of the Priory Matrix. My main focus was iterating on features in the high-impact/low-effort category.
final design
Based on user testing, I made the necessary iterations and got the final version of the MVP end-to-end application. I ended up creating 50 pages.
06: NEXT STEPS
CONCLUSION
In this project, I learned about working directly with a client to reach a successful outcome. Because Treatos & Co has a current website from Squarespace, I wanted to keep the aspects that were important to my client but create something unique and compelling. Through the process, I learned how to listen to users, take their feedback, and make the necessary changes to better the design.
Next Steps:
Add the remaining elements from the Priority Matrix
Conduct further usability testing with more participants
Iterate based on the second round of usability testing
Design all pages for tablet and mobile
Discuss the final result with my client