fribo inside cover 2-01.png

Overview

This app is created for the future of refrigerators that will work in tandem with users in storing and organizing one's food in the refrigerator, as well as providing informational updates on expiration dates and grocery quantities.

Timeline

10/2020 - 12/2020

Tools

Figma

Adobe Illustrator

Google Forms

Individual Project

My Role

UX Designer

UX Researcher

Problem

Doing refrigerator inventory can be troublesome to households.

 

Common problems in organizing refrigerator:

unnamed.png

(1) Large number of food items make inventory difficult

spoiled-canned-food-spoiled-canned-food-
low quantity.png

(2) Not knowing food items expiration dates or when one is running low in quantity

Where's my milk???

man-in-fridge.jpg

(3) Having troubles locating items

How could we effectively document food in the refrigerator to help people achieve a more organized refrigerator?

 

Solution

How about a mobile app working with the smart refrigerator?

fingerprint-resistant-stainless-steel-sa

+

螢幕快照 2020-12-08 上午2.17.27.png

=

42775095-stock-vector-fridge-full-of-foo
 
new user - guide 拷貝.png
new user - categories.png
new user - scan refrigerator.png

New User Tasks & Guides

FriBo begins your journey by introducing itself to you and help you use your refrigerator to the best potential.

Fridge

- Graphical display on inside view of the refrigerator

- Zoom in and out to view each food category for detailed information

refrigerator.png
refrigerator-fridge.png
food - orange.png
new user - guide.png
food 拷貝.png
food 拷貝.png

Food

- Allows users to view food information as a list

- FriBo will receive updated information on food going into the refrigerator 

Remind

- Reminders on foods about to expired and low in quantity 

- Calendar and settings can be easily accessed on all feature pages

settings 拷貝.png
calendar 9.png
reminder.png
plan-recipe.png
plan-eating plan.png
plan-grocery list.png

Plan

- FriBo can suggest grocery lists, eating plans, and recipes depending on your preferences and groceries available

- Plans can be created or edited

Check-in drawer

FirBo offers automatic information documentation for foods enter the refrigerator. This concept was inspired by how vending machines; instead retrieving products, the refrigerator helps record and correctly store your groceries. 

The option for text entry or to scan barcodes to record food item information is also available.

Auto Check-in

checkin auto (1).gif

Manual Check-in

checkin manual (1).gif

Research

Existing Solutions

fresh-box.png

Fresh Box

ezgif-1-ab0e24588e96.jpg

Best Before

1280px-Samsung_Logo.svg.png

Smart Refrigerator

freshbox-app.png
ezgif-1-9e25e2cefc8e.jpg
887276192352_08042413.jpg

Smart control panel

Record food information manually:

- upload pictures

- enter name, expiration date etc.

- set expiration alarms

Barcode scanner detects food items and records information

Devices (digital camera etc.) are embedded for obtaining status inside fridge.

- Smart control panel

Identify User Needs

To better understand different user scenarios using a refrigerator inventory, a two-staged study was conducted with semi-structured interviews (n=6), and online surveys (n=62).

Interview

Participants were categorized into two groups based on different behaviors: people singularly using one refrigerator and people sharing the use of one refrigerator.

 

The participants have discussed their grocery organization and shopping habits. Most importantly, they identified shared issues and proposed potential solutions.

Survey

Survey questions were developed based on the findings from interviews.

interview + survey.png

Problems

Potential Solutions

Interviewees identified

•    Foods spoilage (ex. grow mold, bad smell)


•    Problem locating food easily


•    Unaware of the quantity of foods

•    Two or more people in the household buy the same product together not knowing if someone else in the group had already bought it (sharing refrigerator).
...

Interviewees identified

•    Reminders on foods expiring or running low

•    Record food item's information (name, quantity, potential expiration date, location in refrigerator...)


•    Suggest suitable refrigerator organizational plan 

•    Suggest grocery lists based on foods in your refrigerator

...

Survey takers selected (TOP 3)

1.   Forgeting about food at the back


2.   Unaware of the quantity of foods and food spoilages


3.   Problem locating food easily (sharing refrigerator)

     

      Some foods' smell mixed with others due to

      improper placing (use alone)

Survey takers selected (TOP 3)

1.   Reminders on foods expiring or running low


2.   Record food item's information


3.   Suggest grocery lists (sharing refrigerator)

     

      Suggest eating plan based on food shelf life

      (use alone)

Persona

african_american_student.jpg

Name: Isaac


Age: 20


Occupation:

Second-year college student

Current Situations:

Recently he has learned about healthy eating and now likes to buy more fresh vegetables and fruits instead of microwavable foods.

 

Habits:

- Grocery shopping every 2 weeks

- Not cooking regularly

 

Struggles: 

- Finishing fresh foods before they spoil

- More and more grocery items are forgotten and piled up in his refrigerator

- He is finding his new healthy diet difficult to manage without wasting foods

CNRA.jpg

Name: Emma


Age: 35


Occupation:

Nurse

Mom of 2 kids

Current Situations:

She often needs to work outside of normal hours due to job in the hospital.

 

Habits:

- Grocery shopping once a week

- Cooks regrularly

 

Struggles: 

- Her children are often not aware of the contents of the refrigerator and how to prepare them

- Husband needs specific grocery list in order to do shopping

- Controlling the smells of differing foods in the refrigerator

Storyboard

storyboard.png

Design

Design Principles/Guidelines

-   Consistent designs


-   Match system to the real world


-   Consider issues for users: technology literacy, ease of use, clear and responsive to differing situations.
 

-   To always suggest positive choices rather than dictating them.


-   User can modify any errors


-   Customizable and adjustable settings


-   Document information obtained

1_9izT-mwyw7kG-0GSYohAsg.jpeg

Card Sorting

Three potential users did a card sorting activity to help me understand the overall navigation hierarchy and logical locations of features. User input was implemented into the later development of the system.

p1
p1

press to zoom
p2
p2

press to zoom
p3
p3

press to zoom
p1
p1

press to zoom
1/3

Information Architecture

This presents the workflow of FriBo and its contents under four main features: Fridge, Food, Remind, and Plan.

fribo new.png

Wireframes to High-fidelity Prototype

螢幕快照 2020-11-17 上午3.06.57.png
螢幕快照 2020-11-17 上午3.09.51.png
螢幕快照 2020-11-17 上午3.08.02.png
螢幕快照 2020-12-08 上午4.13.04.png
螢幕快照 2020-12-08 上午4.05.51.png
螢幕快照 2020-12-08 上午4.04.22.png
螢幕快照 2020-12-08 上午4.06.52.png
螢幕快照 2020-12-08 上午4.07.09.png
螢幕快照 2020-12-08 上午4.07.09.png

Evaluation

Early Evaluation

Wireframes are presented and clicked through by three participants (potential users). Feedback was taken into account for future development and improvement of the system.

 

Feedback from participants:
•    The layout is simple, clear, and easy to view
•    Eating plan and recipe in ‘Plan’ was hard to find
•    Label unnamed icon button
•    Icons need to be consistant for navigation
•    Settings icon was difficult to locate
•    Like the encouraging phrase use in tasks for new users

evaluation.png

Summative Evaluation

Tasks-based usability tests were conducted to evaluate the usability of the application's main features. Three potential users participated in the test.

 

Changes were made according to users' feedback.

hamburger.png
remind menu.png
remind menu (1).png
nav bar.png
nav bar (1).png
Group 5 (1).png
Group 5.png

•    “Edit” button is carried out from hamburger menu 

•    Order of tabs in navigation bar is rearranged based on priorities of main features

•    Important buttons like “check in” “log out” are changed to dark blue color

plan-grocery list.png
new user - survey 1.png
new user - survey 0.png
new user - shopping.png

•   A short survey for obtaining users’ preferences for system suggestion was moved to the “plan” tab, and it becomes an optional request for users.

Future Improvement & Expansion

-    More features in the system can be developed to customize specific household use; such as when people share a refrigerator and may want to share their groceries in differing ways. 
-    Add
accessibility options
-    Find  ways to
gain a larger audience 

improvements.png

Reflection

Things found to be important in design process


•    Allow users to have voice and input during the entire design process
•    Always
ask for users’ thoughts, because it is possible to be different from developers’
•    The primary purpose of system is to
satisfy user’s needs; therefore, all features should be developed based on user’s needs.
• 
  Reflect users’ priorities
•    Designs should be consistent for systems

reflection.png

Prototype

Interactive Prototype

This is a high fidelity prototype for users to interact with FriBo. One can click through the prototype to experience all the different features of the FriBo app.

 
 
 
 

Explore More Projects...

gtag cover image-03.png

GTag

UX Design

Communicating information on grocery items' packaging to visually impaired and blind people

User Research
hello cover-01.png

HELLO

Gamification

Assisting ASD children to practice social interaction skills and discover personal interests in a safe and fun space

UX Design