Keep It Fresh — Reducing Food Waste, One Scan At A Time

Lianne Yun
Fluxyeah
Published in
8 min readAug 18, 2017

In America, we waste 40% of the food we produce.

Let that sink in. It’s a bit challenging to visualize this, so I’ll break it down into something we’re a little more used to: money.

$160 billion worth of produce is thrown away annually (that’s equal to ~60 million tons)

That’s so much money, I think even Kim Kardashian would weep at that statistic. As humans, I don’t think we purposefully try to throw our money down the drain. So then, how do we end up wasting so much money on food that we buy with our hard-earned dollars? This leads to an even bigger problem, which is misinformation.

EMPATHIZE

What do I mean by that? Let’s imagine we’re walking down the aisle in a grocery story. You pick up a can of beans, and see the “Use By” date printed on the side of it. Next, you see a loaf of bread that has a “Best Before” date printed on the packaging. You continue down your grocery list until you realize you have food items with different date labels on them — use by, sell by, best by — the list goes on! Alrighty then, what’s the significance in differentiating between all of them? According to my research, no one knows (my pool of interviews even included a fitness trainer and a health nutritionist). So, you can see why I wasn’t surprised in the slightest when I stumbled across this statistic:

>90% of Americans ditch food too early because they misinterpret food labels

No wonder we’re wasting so much food! The date labels aren’t regulated by the FDA, so manufacturers are able to be as ambiguous as they want to be — perhaps even using the confusion to their advantage. It became obvious that we need to prioritize clearing up the confusion surrounding expiration dates as soon as possible.

DEFINE

During my time at Ironhack’s bootcamp, we were given the task of choosing an existing website or mobile app to work on while we learned the ins and outs of UX/UI design. After some scouring, I came across Foodsafety.gov. It’s a website that’s run by the U.S. Department of Health & Human Services (didn’t even know that existed…) and is dedicated to educating consumers about all things food related. According to the Key Findings of the Food Safety Working Group:

“The federal government will enhance www.foodsafety.gov to better communicate information to the public and include an improved individual alert system allowing consumers to receive food safety information, such as notification of recalls.”

This is great and all, but who in the world would actually use this site? The site itself has poor information architecture, confusing user flows, and needed a rework in its UI design. I assumed that most people would just do a quick Google search instead of bookmarking this specific resource.

Thanks to Google’s featured snippets, it’s now easier than ever to find info quickly.

Turns out, my user research proved my assumptions to be correct. None of the 47 people I surveyed had heard of/used Foodsafety.gov before. And when asked how they usually obtain information related to recalls or expiration dates, the response was overwhelmingly pointed towards Google searches. From my survey, I also found that 100% use their smartphone the most out of all their electronics. This finding was the basis for why I decided to design a mobile app instead of a website. When I interviewed people about their info-searching habits, I found that nearly everyone went directly to Google on their smartphones and typed in whatever they were looking for. To me, it wasn’t worth designing a web platform that no one would come across — thus, the decision to undertake a mobile app.

I also found that 76% of my users considered the expiration date before purchasing food items. That means the vast majority rely on the expiration date for their purchases — expiration dates that are typically misleading. See the problem now?

Based on findings from my survey and interviews, I adopted Jeff Gothelf’s Lean UX Canvas to create a framework of my project.

Implementing a barcode scanning feature was a no-brainer for me. There are so many apps out there that take advantage of it already, and it’s very fast and easy to use. Food items are classified by GS1 Databar barcodes, which has information such as manufacturing company, batch number, manufacturing date, etc all embedded in it. Using that information, the app would return the actual expiration date to the user based on information from EatByDate (for now). In addition to providing some clarifying definitions of commonly misinterpreted terms, the site “offers information to educate consumers on how long food really lasts, past its printed date while providing answers and analysis related to food shelf life, food safety, food storage, food substitutions and many other food related questions.”

I went on to create user personas, which reflected the pain points that came up during my research.

A few of the user personas I created

IDEATE

I hate to give an excuse like “the dog ate my homework,” but here I am, tail between my legs, telling you that the sketches I did for this were ruined by my main vice: coffee. You’re just going to have to trust me on this one, but my sketches looked similar to what I have below for my wireframe:

The biggest problem I ran into during ideation was what my landing page was going to look like. I didn’t know if I wanted it to open directly to the camera, à la Snapchat, or if I wanted there to be a menu grid of CTA (call to action) buttons. As you’ll see from the prototype below, I found a happy medium where the app opens to the camera, but I have a tab bar navigation at the top to guide users to the other features of the app.

PROTOTYPE

Moodboard

I wanted the app to be fresh and clean — just how users’ groceries should be. So I created a moodboard that reflected the atmosphere and styles I wanted to play around with for this app. I took a lot of inspiration from Teavana’s website, with their minimalistic yet appealing style. I was also set on incorporating a natural wood pattern, giving off the perfect summer picnic vibe. I wanted to use a sans-serif font to modernize the platform, and use a vivid color scheme.

From my moodboard, I narrowed it down to create my style tile. Here, I finally settled on my color palette and my fonts for headers, subtitles, and body text. As you can see below, I chose an easy-to-read rounded font for the title font, and used a rounded version of Helvetica, which is a commonly used font family. I wanted the body text to be a bit thinner than the others, and I found Geomanist, which has honestly become one of my favorite fonts of all time. I also included the emoji faces that I would be using in the app to signify whether the food was expired or not (shoutout to The Noun Project for being my go-to icon resource).

Style Tile

I wanted one of my most prominent colors to be some shade of green. Little did I know how excruciatingly painful that process of finding “the perfect shade” would be. Whenever I thought I was set on a color palette, I’d find something wrong with one of the colors and it’d throw off all the others. Thankfully, I found Coolers.co which is an online color palette generator that uses its own algorithm to create palettes based on colors you select.

TEST

I realized after a few iterations of tests, that there needed to be a way for users to keep track of everything they’ve scanned thus far. It would be tedious and annoying to have to re-scan a food item each time they didn’t remember the exact expiration date. Additionally, I garnered feedback that users “wouldn’t remember what the app had told them.” Taking this, I implemented an alert feature. So now, users can choose to set an alert (or two if they’re really forgetful) for items they’ve searched. Then, all the alerts you’ve set are easily accessible from the landing page of the app, so you’re always just one tap away from seeing when your groceries expire. After those changes and some additional tests, I was satisfied with my final prototype.

FINAL PROTOTYPE

FINAL THOUGHTS

This project started off as a redesign of an existing app, but evolved to be something much more meaningful to me. As someone who’s grown up in a family restaurant business, I’ve seen firsthand how much food can be wasted in a single day. Thankfully, we have little to no waste, but I know that is not the case at other establishments or households. Food waste is such an undermined issue in our society, but its an issue that can be addressed by simply becoming aware. Hopefully, we can start to combat it as a society — one scan at a time.

--

--