Stay Fresh - iOS App Design
Sketch, Flinto, Adobe Illustrator, Whimsical.io, Google Forms
Team Lead (4 team members)
Food Waste Affects The Entire World
A 4-person family loses $1500 a year on wasted food. Saving that would basically be a raise.
If wasted food was a country, it would be the third largest producer of carbon dioxide in the world, after the United States and China.
A European or North American consumer wastes almost 100 kilograms of food annually, which is more than his or her weight. (Source)
As a budget minded shopper with a busy schedule, I often buy food but forget about it and it ends up expiring. I don’t feel good about wasting food and wasting money. I wish there was an easy way to keep track of food in my fridge so I can cook with it before it expires.
Stay Fresh is the Newest App in the War Against Food Waste
Have you ever purchased too much food at the grocery store, only to let that food expire because you were unable to eat it? Have you ever forgotten to eat the leftover meals you have taken home from restaurants? Do you feel bad about wasting money and harming the environment because of this? Introducing Stay Fresh!
With Stay Fresh, users are able to keep track of the food they’ve purchased and receive notifications when food is about to expire!
Users simply scan their grocery store receipts or individual barcodes to add items to their inventory.
By tapping into an extensive database and utilizing machine learning, Stay Fresh automatically suggests expiration dates for food; taking the guesswork out of food storage.
Stay Fresh has statistics tracking to help users quantify money loss and CO2 generation.
Recipe suggestions help users utilize what they already have in their fridge and pantries.
Too much food leftover? Users can find charities that accept food donations for items they don’t eat.
We wanted to see how we could solve a piece of the food waste issue with an app or website. To get ideas and to make sure we weren’t creating something that’s already been done, we dove deep into some competitive analysis. We found apps that help you donate food, apps catered to restaurant waste, and apps that help farmers with excess food.
During our ideation phase, we thought of the idea of scanning grocery store receipts to help track food expiration at the consumer level. The closest app to our idea was Fridgely, which allows users to scan receipts and barcodes to track expiration on food items and look up recipes. If this was going to be our solution as well, we would need to make our app unique to stand out from the crowd.
To reach a wide audience, we sent out a survey using Google Forms to get an idea of how much money people spend on food, how much they throw out, how they feel about it, etc. We received 124 total responses.
We learned pretty much everyone throws out food, they feel bad about it, and almost everyone has a non-technical solution that relies more on sight and smell.
We conducted 6 scheduled user interviews. We chose in person user interviews to get a better understanding of our problem statement, dig deeper into the questions we were asking on the survey, and uncover any additional insights.
The interviews supported our problem statement but did throw a small wrench of doubt into our initial survey findings. Users cited a few different reasons for why they feel bad about wasting food, a question that we did not ask on the initial survey. Our hypothesis was that most people feel bad about food waste because it is harmful to the environment.
To test this hypothesis, we decided to go out on the street (shown below) and interview passersby to quickly determine what is the main reason users feel bad about when wasting food. Was it the environment? Wasted money? World hunger? Something else? This insight could help us pinpoint our target users.
Unfortunately, our small sample size didn’t give us a clear winner in any response. This prompted us to release the 2nd survey.
We received 60 responses to our second survey. We learned that the largest factor for why users felt bad about wasting food was money, which was surprising to us. This shifted our idea from focusing on the environment towards saving users money.
Empathizing With Our Users
Now that our research had been synthesized, we gained some insight as to who our target users might be.
User Journey Map
I created a User Journey Map to help our team understand our user's cyclical touch points and emotions with our app. One interesting discovery is how useful our app is the more it is used. Over the course of a couple months, a user's entire fridge and pantry can be tracked just by scanning receipts. Another essential part of our app I included is manually entering restaurant items, which is something our users reported often letting go to waste.
My teammate Tu got excited and created a storyboard before our research was completed. Let's see how it changed after we concluded our research.
As you can see, we weren't quite sure what emotional pain point we were originally hoping to solve. After conducting our research, it was clear our app needs to be an app that battles food waste with a motivational factor of saving money.
Building The App
Now that we had a good idea of our target users, it was time to build the app!
As cliché as they are helpful, we used an affinity diagram to help us organize all of our app needs into categories to help us with our information architecture.
One of the major takeaways from our research was that users wished they could solve their food waste problem at the shopping level. A big part of our IA is the ability for users to quickly add items to their Shopping List once they have eaten them or if they expired. Users can also see individual stats on food items to find out if they've been buying too much of them allowing users to save more money.
Our app has two main use cases: using it at home to track inventory items and using it at the grocery store to add items from receipts. Our user flow had to take into account these use cases and how they work together such as adding items from a shopping list, using the items, adding them back to a shopping list, or donating them.
Our team sketched out our wireframes together. Sketched wireframes are much easier to iterate on than digital mockups if we need to change anything after testing.
After a round of user testing our sketches, we created the new version of our wireframes digitally using Sketch.
We created an InVision prototype with our digital wireframes and did another round of user testing and iterations before creating the final mock ups.
We had to collaborate on our high fidelity screens from separate locations. In order to keep our design consistent, we created a style guide.
High Fidelity Mockups
Mockups were created in Sketch. We user tested these screens using InVision. You can test our prototype here.
For first time users, we created 3 onboarding screens to walk them through the app and help them understand how everything works together.
Our simple log in screen with our logo and tagline. Users are able to sign up and sign in with Google and Facebook during the flow.
The bread and butter of our app! Scanning a receipt will allow users to quickly enter items into their inventory. They simply take a picture of it with their camera and Stay Fresh does the rest including adding suggested expiration dates.
Scanned Item List
After a user scans a receipt, items will be presented as a list. Items can be edited, removed, and saved. In this case, a user has swiped left on an item that they want to remove.
What about items already inside a user's home? Users can simply scan their barcodes to quickly add them. In the event the item does not have a barcode (restaurant leftovers for example), users can also enter items in manually.
The My Food section doubles as the home screen. This is where users store and organize all their food data into different places such as Fridge, Freezer, etc. The next screen shows what happens when a user clicks Fridge.
Inside an inventory location, food items are displayed as a list. They can be filtered (just vegetables, just meat, etc.) or sorted (alphabetically, expiring soon, etc). The circular timer always lets them know visually when an item is expiring soon such as the eggs and the ham.
Remove, donate, and find recipes
Selecting an item or multiple items will give the user options to remove them from the list, find suggested recipes using those items, or donate them to a nearby charity.
Selecting "Donate" from the items screen will open up a map with nearby donation locations. Not only is it easy to get rid of expiring food in bulk, users will feel much less guilty about having too much food.
Selecting "Recipes" when items are selected will display suggested recipes using the ingredients selected. Recipes are also browsable from the bottom navigation menu.
Expired Food Notification
When an item hits its expiration date, users are displayed this screen. They are informed of the the effect this had on their wallets and the environment to motivate them to avoid this in the future. They have the option to extend the lifespan of the food, say they finished it, or confirm that it expired. Their stats will be automatically updated.
One of our biggest selling points is our statistics screen. This allows users to visually understand how much money they are wasting and the damage they are doing to the environment due to expired food.
Stay Fresh has a big future ahead of it including nutritional information on items and voice assistant integration for easier entry and removal of items!
This project a big task for only 2 weeks. Our deliverables and presentation received high praise, however, I believe we could have executed our process more effectively with better initial survey questions in order to avoid a second round of surveys and guerilla interviewing.
Something that saved me tons of time were advanced Sketch techniques such as nested symbols and various plug-ins which I learned from taking Pablo Stanley's in-person Sketch classes during this project.