Food Saver App and Responsive Website
UX/UI Design / Research / Branding / Wireframing / Prototyping
03/2023
Project Overview
The Product
Food Saver is an app focused on food sustainability. The society 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.
Chalenge
30% of food goes to waste per year in Morocco. The research has identified a lack of general knowledge about food waste and a limited understanding of personal impact as crucial drivers for continued food waste.
Goal
My goal was to design an accessible and inclusive app that will improve education on the topic of food waste and help people manage their food waste.
My Role
UX Designer designing an app for my basket from conception to delivery
Responsibilities
Conducting interviews , paper and digital wireframing low and high-fidelity prototyping conducting usability studies accounting for accessibility and iterating on design​
User research : summary
Understanding the user
​
I conducted interviews and created empathy maps to understand the users I am designing for and their needs. 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
​
User Personas
Persona 1 : Mohammed
Problem statement :
​
Mohammed is a working student who needs reminders, suggestions, and coaching to cook more often with fresh ingredients because he likes to cook and wants to make it a part of his routine.
Persona 2 : Aya
Problem statement :
​
Aya is a working caregiver who needs exciting new recipes that make tasty, easily reheated leftovers because most of the food she's throwing out is old food that she lost track of.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps . My focus was specifically on waste tracking and simple recipe features.
Starting the design
​
​
Digital wireframes
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.
The top half of the home screen acts like a food coach by providing personalized recommendations for users
Easy access to app features from global navigation
Low-fidelity prototype
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: parameters
​​
-
Study type : Unmoderated usability study
-
Location : Rabat , remote
-
Participants: 7 participants
-
Length: 30-60 minutes
Usability study: findings
Refining the design
​These were the main findings uncovered by the usability study:
​
-
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 Dates : 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”.
Additional design changes included adding an option to “Add new item” to the “My Food” page, and providing a clearer indication of how many days were left before an item expired.
Before usability study
After usability study
Before usability study
After usability study
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
​
Accessibility considerations
-
Clear labels for interactive elements that can be read by screen readers
-
Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.
Responsive Design
Sitemap
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 Design
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Mobile Website
Tablet
Desktop
Takeaways
- Impact:
​
Users shared that the app made food waste seem like something they could actually help reduce. One quote from peer feedback was that “the Food Saver app helps bring caring about the environment to a personal level in a way that’s easy and engaging.”
​
- What I learned:
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
Next steps
