top of page
Fridgee!.png

Helping American Households Tackle Food Waste Through

UX Research & Experience and Interface Design

 Part 2 - Prototype & Validation 

PASSION PROJECT

Role: Research & UX UI

Timeline: October - December 2019

hand-min (2).png
fridgee logo
Fridgee!.png

Fridgee! is an iOS mobile application that helps busy individuals and families efficiently manage their food inventory through an inventory scanner, auto-generated shopping lists, and recipe suggestions based on their inventory and preferences

Area of Focus

This page is Part 2 of Fridgee!'s whole design process, which covers the prototype, user tests, and validation. 

Snapshot

One day, after tossing away several bags of rotten vegetables again, I felt so guilty and reminded myself, "This needs to stop. "

food waste-min.png

The average U.S. household wasted 31.9% of its food. The total annual cost of the wasted food was estimated to be $1,866 per household.

--

Environmental Protection Agency | Food Waste in America

in 2019

Discovered Problem

People want to reduce food waste at home, but so often without proper management and knowledge, they find themselves throwing away produce that's spoiled or expired, ultimately wasting food and money. 

 

How might I help people manage food at home more efficiently so as to reduce waste?

Product Vision

A food management app allowing people to fight food waste at home by keeping track of their fridges, shop smartly, and have a more diverse meal plan.

Long term goal: less waste, less hunger, and a more honest commitment to the kind of world we want to create every day.

Outcome

Designed a mobile app MVP and a marketing website to learn how the target users of the product experience and respond to the app’s core features and business purposes.

My Roles

UX Design

Visual Design

Brand & Identity

Usability Test

User Interview

*received weekly remote design critiques from a senior UX mentor

Deliverables

Wireframes (Low-High)

Mood-board & Style Guide

Hi-Fi Prototypes

Interactive Prototype

Usability Test Analysis

Specifications

Part 2 Timeline: 3 weeks

Software & Tool

Figma

Photoshop

Sketch

Whimsical

Skype

Pen & Paper

Design Process

The MVP solution was built in 6 weeks by following  IDEO's Human-Centered Design Process to make sure my design would be based on research and user feedback. 

IDEO's human-centered design process

IDEO's human-centered design process

continued from "Fridgee! Case Study (Part 1)"...

Wireframes

After the quick sketching, I hopped into Whimscal to map out the MVP solutions of the app. I conducted 3 in-person usability tests and interviews.

  •  Onboarding Process

sean.png
effie.png

1.1.2 Main screen

Sean: "Can I see all the items I have instead of tapping each category?"

1.1.2 Main screen

Effie: "The warning sign tells me something is expiring...I wish I could know the exact item without opening the category."

Wireframes of onboarding process

Wireframes of onboarding process for new users and returning users

  • Add Items to Inventory

sean.png
effie.png

2.0 Empty Inventory

Sean: "Use "+" to add...OK...It's not very eye catching, but I found it."

2.3 Add Manually

Effie: "I don't think I will use manual add if I have a bunch of produces without barcode. It's too much work to do."

Wireframes for adding an item to inventory

Wireframes for adding an item to inventory

  • Recipe Inspirations

sean.png
effie.png

4. Recipe Tab

Sean: "I like having options to cook with my ingredients...so I won't waste the leftover I used for other recipes."

4.2 Recipe Details

Effie: "I can put the ingredients on the shopping list...so I don't need to switch back to the shopping list to add."

Wireframes for recipe inspirations

Wireframes for recipe inspirations

  • Family Account

effie.png

Effie: "Shopping list and inventory update are no longer just my thing...Everyone in my family can edit them!"

Wireframes for family sharing account

Wireframes for family sharing account

Usability Tests

The problems were mainly in the inventory screen: The participants got lost when viewing a large amount of inventory. The manual add method was still tedious. 

The users' satisfaction chart after finishing the tasks

The users' satisfaction chart after finishing the tasks

  • Iteration 1: Inventory Screen

Iteration before of inventory screen
Iteration after of inventory screen

Iteration of inventory screen based on the usability test finding.

  • Iteration 2: Manually Add an Item to Inventory

Iteration before 2
iteration after 2

Iteration of "Add Manually" based on the usability test finding.

idea.png

TAKEAWAYS

icon-tired-min.png

The last thing users want to see is "manual work". 

Manual work is where some food management apps also stuck. My users helped me realize that the more automatic the process is, the more chances I can attract users. 

icon-database.jpg

Building a database? 

Adding items from the food library is quite a lifesaver; however, it could be a lot of work at the early stage. I'm curious to know if the online user community can play a big role in building up the database, and how to monitor the quality and safety of their uploads in the further steps.

icon-interview.png

Interviewing users after the tests inspired me! 

Even though the users can successfully finish a task doesn't mean there is no room for improvement. 

4 Prototype

Branding &

Visual Design

According to my user research, the users would prefer a brand that is built around simplicity and smartness, with an injection of fun.

fridgee moodboard

Moodboard created by using Figma

Logo ideas

Sketching logo ideas with pencil & paper

I developed a component library in Figma by following my style guide and Apple's Human Interface Guidelines. 

The style guide of Fridgee!

The style guide of Fridgee!

Dill
Group Copy 3.png

Hi-Fi Prototype

By using Figma, I added personality to the revised wireframes and created high-fidelity clickable prototypes.

sean.png

Sean's onboarding

Sean chooses to use social media login for the first time use.

Fridgee!'s onboarding process

Fridgee!'s onboarding process

effie.png
sean.png

Effie and Sean add an item to inventory

They first try to add by scanning barcodes; For items without barcodes, they search and add by using the food library. 

The process of adding an item to inventory

The process of adding an item to inventory

effie.png
sean.png

Effie and Sean search for recipes that match existing ingredients

They can also use filters to narrow down the results.

47% of the sheltering-in-place people reported

negative mental health effects.

--

KFF Health Tracking Poll | March 2020 in the U.S. with the sample of 1,216 adults ages 18 and older

The process of cooking with my ingredients

The process of cooking with my ingredients

effie.png

Effie sets up the family account

Effie goes to the setting and shares the account data by sending an invitation via text message. After downloading the app, her family can also track the inventory and add items to the shopping list.

Fridgee!: Barcode scanner and food library

Fridgee!: Barcode scanner and food library

sean.png

Marketing Website of Fridgee!

effie.png
Preview of the marketing website

Preview of the marketing website

Dill
Group Copy 4.png
5 Validate

TITLE OF THE CALLOUT BLOCK

Usability Test

Round 2

I performed 6 in-person user testings. One user pointed out a blind spot: "How do I know the storage time of an item without a barcode or packaging?"

The users' satisfaction chart

The users' satisfaction chart after finishing the tasks

Before

iteration round 2 before

Thinking of the Solution:

The storage times are not hard-and-fast rules to be added automatically, because the storage times will vary depending on the growing conditions, transportation and etc.

 

Hence, I'm looking for a one-stop location where users can check some useful guidelines about storage time and storage environment.

I reviewed some food storage apps in Apple Store, and some inspirations came from USDA FoodKeeper.

After

iteration round 2 after
iteration round 2 after

Iteration of adding FoodTimer to the inventory screen

idea.png

TAKEAWAYS

icon-food-min.png

Food management: more than staying organized

User 5's feedback helped me realize that good food safety practices are also important for users. Even though sometimes people call it "common sense", but according to research and feedback, they are not. It only becomes common sense when people have acquired some knowledge of how to store and consume food safely.

icon-thinking-min (1).png

Should I include FoodKeeper in Version 1.0?

I like the idea of FoodTimer, and that is why I hopped directly into designing the screens. I do believe the search engine will bring more stress to development, which also doesn't follow my MVP. In the next step. I would like to do further research about people's needs in this part. 

Conclusion

Conclusion

Outcomes

Deliverables

  • In 6 weeks, I designed and prototyped MVP screens illustrating the concept of Fridgee! and tested with 6 users.


Values

  • I hope Fridgee!'s concept can help American families save money and reduce the amount of food going to landfills. 

What I would do differently

  • At the second usability test, one user made me realize that lacking knowledge of food safety is also a cause of wasting food. I felt my initial field research wasn't sufficient to understand the whole picture. As a result, I didn't have clear foresight regarding the direction the product would take. 

    If I could move back to the beginning, I would make sure that research is ongoing. I would conduct deeper follow-up research regarding people's pain points of using food.

  • Instead of guessing, I wish I could invite a developer into project discussions from the start so that he/she can sniff out the feasibility of my solution

What I learned

  • Research is ongoing. Be sure to explore every possibility and don’t stop trying until I get a crystal clear direction. 

  • Even though the users can successfully finish a task doesn't mean there is no room for improvement. By observing users' movements, facial expressions, and even mumbles, I was able to know how satisfied they are with the solutions. Many of the iterations came from the follow-up discussions with the users.  

What's next

  • In a later version, I would like to research users' interests in pop-up tips for managing food, reminders to update inventory after consumptions, and deals nearby to improve product stickiness.

--------- Thanks for reading. 💚 ---------

cover homepage-min.png

Next...

Kure Journal

A journal app to help people relieve negative emotions and be mindful of their mental health​

  • User Research

  • Market Research

  • User Persona

  • User Story

  • User Flow

  • Sitemap

  • Sketches

footer cover v3.png

Thanks for visiting! Like what you see?

Let's chat.

bottom of page