top of page
AUGUST 2021
UX CASE STUDY
FOOD SAVER APP & RESPONSIVE WEB
Food Saver App & Responsive Web
FOOD SAVER
App & Responsive Website
Responsive Website User Experience 2021
Untitled design (13).png
Untitled design (14).png
Project Overview :
Food Saver is a Charleston-based organization focused on food sustainability. The organization needs a tool that helps people learn about and manage their food waste. Food Savers’ primary target users include college students and adults who are concerned with the amount of food they waste and would like to learn more about what they can do to reduce waste.
Project Duration :
August 2021 to September 2021
The Problem :
30% of food goes to waste per year in the United States. The strategy team at Food Saver has identified a lack of general knowledge about food waste and limited understanding about personal impact as crucial drivers for continued food waste.
The Goal :
Design an app that will improve education on the topic of food waste and help people manage their own food waste. 
My Role :
UX designer leading the app and responsive website design from conception to delivery.
Responsibilities :
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
User Research Summary :
I used Food Saver’s data on food waste to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling badly about food waste, but they didn’t actively try to reduce their own food waste. The feedback received through research made it very clear that users would be open and willing to work towards eliminating food waste if they had access to an easy-to-use tool to help guide them.
Persona : Thierry
Project new 3.png
Problem Statement :
Thierry is a working student who needs reminders, suggestions, and coaching to cook more often with fresh ingredients because they like to cook and want to make it a part of their routine.
Persona : Cam
Project 3.png
Problem Statement :
Cam is a working caregiver who needs exciting new GF recipes that make tasty, easily reheated leftovers, because most of the food they’re throwing out is old food that they lost track of.
Competitive Audit :
Picture1.png
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Food Saver app.
Ideation :
WhatsApp Image 2021-09-06 at 12.47.22 PM (1).jpeg
WhatsApp Image 2021-09-06 at 12.47.22 PM (2).jpeg
WhatsApp Image 2021-09-06 at 12.47.22 PM.jpeg
WhatsApp Image 2021-09-06 at 12.47.22 PM (3).jpeg
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on waste tracking and simple recipe features.
Digital Wireframe :
After ideating and drafting some paper wireframes, I created the initial designs for the Food Saver app. These designs focused on delivering personalized guidance to users to help manage their food.
Picture3_edited.png
Top half of home screen acts like a food coach by providing personalized recommendations for users
Easy access to app features from global navigation
Low Fidelity Prototype :
Screenshot (13)_edited.jpg

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing an item about to expire and using it in a recipe.

Usability Study : Findings
Recipes
People want easy access to recipes that specifically use the food they already own.
Add Food
People had difficulty adding new food items to the app.
Expiration Date
People preferred clear indications of when food items would expire.
Mockups :
Based on the insights from the usability studies, I applied design changes like providing a clear section from the home screen to browse recipes that specifically use items available in “My Food”.
Before Usability Study
After Usability Study
Untitled design (17).png
Untitled design (15).png
Mockups : Original Screen Size
3.png
7.png
8.png
6.png
5.png
High -  Fidelity Prototype :
Screenshot (14)_edited.jpg

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

View the Food Saver high-fidelity prototype

Sitemap :
sitemap.png
With the app designs completed, I started work on designing the responsive website. I used the Food Saver sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive Designs :

Mobile Website

My Food - Mockup (1).png

Tablet Website

tablet mckup.png

Desktop Website

My Food - Desktop.png
Takeaways :

Impact:

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

What I learned:

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

bottom of page