PRESERV

Mobile App (UX Design)

WHO

  • Jason Cairati
    Lead Designer, Researcher

WHAT

  • PRESERV is a mobile app for helping to limit food waste by utlitizing proper storage techniques and learn where to donate excess food.

WHEN

  • August 2022 to September 2022

WHY

  • Users need an easy way to keep track of when food will expire and how to properly store it. 
A hero image of the GalleryScan being used on an iphone
THE GOAL

Create an easy to follow system that helps users learn food storage techniques, how to know when an item is expired, and learn how to cut down on food waste. 
THE PROCESS
‍
First, it was important to understand who the primary users would be. Initial research and a competitive audit of existing apps/websites helped gain an understanding of different user groups. Personas were developed around this research into the two user groups listed below.  


PROBLEM STATEMENT

Nadine is a teacher and mother who needs a quick way to know how long her groceries will last because she wants to make sure they are safe for her and her family.

PERSONA - NADINE

a profile image of a woman with dark hair facing forward and smiling

Age: 44
Education: Bachelor's
Hometown: Albuquerque, NM
Family: Married, 2 kids
Occupation: Part-time teacher
‍

“I want to know how to better preserve my groceries to help save money on food.”

GOALS

Provide fresh food for her family 

Cut down on grocery costs by knowing expiration dates and best grocery practices

‍

FRUSTRATIONS

Unsure of how long food should last in different places (counter, fridge, freezer) 

Takes time to know all specific details
‍


PROBLEM STATEMENT

Jonathan is an avid outdoorsman and busy professional who is very environmentally conscious and wants to know how to best preserve and store his food.

PERSONA - JONATHAN


Age: 28
Education: Undergrad
Hometown: Denver, CO
Family: Single, no kids
Occupation: Outdoor Photographer
‍

“I want to be more environmentally conscious by limiting food waste and also saving money.”

GOALS

Cut down food waste to help environment 

Properly store fruits and veggies
‍

FRUSTRATIONS

Lack of knowledge on preservation techniques

Overwhelmed by search engine results when looking for specific info 

‍
IDEATION
Designing a clear and functional main screen was a top priority. Determining the layout to best facilitate smooth navigation.
It was important to determine what is the most needed information for the user when first interacting with the app or website. What is the primary function and how can we limit the screens needed to access information?
STARTING THE DESIGN
After initial research it was time to move into creating wireframes and prototypes as well as a sitemap to figure out the best layout for the app and the accompanying website. In what ways can their design compliment each other and serve different primary purposes?
DIGITAL WIREFRAMES

The initial design was based around 2 main categories, ‘My Kitchen’ and ‘Browse’. This kept clear distinctions between viewing items currently in your kitchen and browsing for items to add.
LOW FIDELITY PROTOTYPE
For the first round of usability testing, a low-fidelity prototype was utilized. It showcased the main user flow of selecting a food item and browsing storage options.

USABILITY STUDIES

INFORMATION 
ORGANIZATION

Some of the initial ways the information was organized did not make sense to some users
‍

ADDING ITEMS

Users needed a simpler way than having to manually input every item

BROWSING

Users desired a more streamlined browsing experience
REFINING THE DESIGN
After reviewing the data, a new improved design was created that better addressed the user's primary goals. It was important to make the design accessible and easy to understand regardless of a person's tech proficiency. A series of high-fidelity mockups and prototypes were created.

BEFORE USABILITY STUDY
‍

AFTER USABILITY STUDY
‍

A receipt scanning function was implemented as well as clearer information on food products in the user’s kitchen. 

BEFORE USABILITY STUDY
‍

AFTER USABILITY STUDY
‍

Browsing selection felt overwhelming and needed less initial options. Categories were created with the option to view all for each category
‍
FINAL DESIGN
A high-fidelity design followed the same main user flow but utilized the addition of colors, icons, and status bars to help guide users. 
DESIGNING FOR ACCESSIBILITY
‍

Initial color scheme did not pass accessibility standards and were changed for better readability and stronger color contrast
‍

Food information for both storage and browsing used both images and text

Headings were grouped and categorized in a way that would be easy for screen readers to use
FINAL THOUGHTS

IMPACT

The use of an app for food preservation seemed a worthwhile product for those that need ways to keep track of the food in their homes and learn more about food preservation. 

Reduced search time by 70% and reduce number of clicks by over 50%

‍

WHAT I LEARNED

I learned that it is often better to limit choices to create a better user experience. It’s important to know what is most important to a user base and how can we highlight this in the design? What features are truly necessary and how might we better understand a users ways of interacting with a product?

MORE WORK

GalleryScan
Mobile App (UX/UI)
2nd design iteration lowered user error by 26%
Rahma Beauty
Responsive Web Design (UX/UI)
Increased engagement by 42% through SEO Optimization.
LINKEDINEMAIL
a link to my email address