Happy Fridge

App Design • 2020

Happy Fridge

Summary

An app to help users monitor and make full use of the contents of their fridge, and to encourage wise grocery shopping.

My Role

User Research

User Interview

Paper Testing

Wireframing

Prototyping

Visual Design

Tools

Sketch

Principle

Photoshop

Illustrator

Team

Solo project

Time

2020

01

Introduction

Opening the fridge and realising that food has expired is not a good moment. In fact, according to British IME (2013), around 30% to 50% of all food produced might never get eaten.

The Covid-19 pandemic changes many things. Consumers are finding it necessary to do less frequent but larger supermarket shops. This produces a need to keep track of the many expiry dates of perishable goods in their fridge.

I believe there is an opportunity here for designers and developers to help consumers do more with the contents of their fridge, so that they can save money and avoid waste.

Goals

An easy-to-use fridge tracking system
An easy-to-use fridge tracking system

Users monitor and modify the items without confusion.

A comprehensive user journey
A comprehensive user journey

From tracking to cooking, the app offers a natural interaction experience.

A coherent in-app experience

Different features interact with each other harmoniously.

Supporting features

To enrich the experience and enhance user viscosity.

Process

Guided by the Design Thinking model proposed by the Hasso-Plattner Institute of Design at Stanford, I approached the solution via an iterative cycle. I conducted informal and formal interviews and market research to define the problem. I explored different scenarios and converged on a solution for my target group via paper testing. The initial ideas were iterated until they satisfied the major user needs and corresponded with aesthetics and industrial standards.

Empathise
Empathise

Background (Covid-19)

Recognize problem

Research
Research

Define problem

Target user needs

Ideate
Ideate

Brainstorm

Test ideas

Prototyping
Prototyping

Design experience

Design interface

Testing
Testing

Usability

Improve design

*Iterative cycle

02

Research

Qualitative interviews

Paper testing

Persona

Competitor analysis

Information architecture

User journey

With great enthusiasm, I talked with some friends about this idea and immediately started brainstorming. It wasn’t a surprise to find that food waste caused by losing track of expiry dates is an issue for every one. But some friends questioned: “Would it be too difficult to use the app?”

Qualitative Interviews

I interviewed four people in order to target the “pain-point” of grocery shopping. I approached friends of friends and strangers on facebook to minimise bias. I selected those who did grocery shopping one or two times a week and who complained that they wasted food before their next visit to the supermarket.

Key findings
  1. Almost everyone admitted they didn’t plan for grocery shopping. They believed that planning was a good idea, but it took too much time.
  2. The biggest reason for food waste was a lack of awareness.
  3. Faced with expiring food, people felt forced to cook it but were sometimes in need of inspiration and knowledge.
  4. The most significant concern about a fridge-tracking app was the potential difficulty and inconvenience of using it.

Competitor Analysis

A careful competitor analysis provided me insight into the current market. There are several competitors on the Android and Apple platforms but none of them succeed in dominating the market. Overall I think there is an undeniable market vacuum.

Magic Fridge, My Kitchen and Kitchenpal are three of the strongest competitors in my opinion. I read through their reviews and tested their products. Besides the main interaction (adding and tracking items), a lot of users complained about their incomplete databases. This made me realise that working with the local supermarket could be attractive to users.

One good side of Kitchenpal is that it aims to provide a thorough experience for the users which connects shopping and cooking.

As a designer, I think their interface still has room to improve. The interaction could be more natural and more direct, rather than just laying all the features out on one screen. These reflections helped me to brainstorm my design for Happy Fridge.

Key findings

1. Working with a local supermarket could be a way to complete in-app database. This collaboration could be one of the monetisation methods.

2. A natural experience which connects shopping, tracking and cooking together would give Happy Fridge an outstanding advantage.

Persona

Based on my research I created two personas with diverse needs. Their profiles depict my target groups and are generated by two main motives: budget control and environmentally friendly living. I imagined their behaviour patterns and how Happy Fridge would fit into their lives.

Information Architecture

Based on my previous research, I came to the conclusion that a smooth user experience was very important for this project. This requires different elements to work together. I created and modified the information architecture of the model, and worked on the connection between different parts. Finally I digitalised the outcome and used it to guide my later design.

03

Ideate

The application has the potential to improve user experience when grocery shopping. Users hope to have full oversight of their food stock so that they can make better decisions at the supermarket. To focus on the user need, I think the app should be able to communicate with users in three scenarios: fridge, kitchen and supermarket. Starting from the research, I sketched my ideas and tested them with a potential user. The findings of the test were used to guide the design.

Paper Testing

I invited one potential user from my 4 interviewees for a preliminary paper user testing. He was given two tasks: to add an item in the fridge and to delete it.

The test was successful, which showed my design was clear enough to understand. However, the interview afterwards provided two pieces of useful feedback:

1. “Is it necessary to type in all my groceries?”

2. “I was worried I might press the wrong button.”

Optimising the process to add an item

In order to minimise the trouble of inputting data into the app, I optimised the user journey. As shown in the diagram below, the user will have three choices to input the data. The app will provide the details of the item based on the user’s input and propose an expiry date according to the database. The user will have a chance to review the information and modify it if needed.

Optimising the interface design

In the iterative design process, I optimised the interface layout. The design motif of the pop-up card was introduced as an aesthetic way to make interesting interactions which indicate the hierarchy between different interfaces. Different features are organised on different cards to improve their readability.

draft 1.0

draft 2.0

final

Wireframe

At this stage I tried to construct the framework of the app. I tested my ideas by arranging desired elements and functions on the interface. In order to achieve a clear and simple visual language which enabled proper functions, I explored possible solutions by iterating the design – keeping what was working and adjusting the rest.

Style guide

Colour palette

The main colours are two blues of different shades. This selection tries to associate the app with the feeling of ‘cool’, ‘fresh’ and ‘calm’ that blue can deliver. Besides this, the app uses a wide range of greys and red to enhance readability.

Icons

The size of main icons is 24×24 px. Inactive icons are in grey, whereas the active ones are in light blue.

Typography

Rockwell is used for the large title with great moderation. It’s playful and identifiable, giving the app a personal touch.

The general typeface is SF compact, which is easy to read and timeless in style.

04

Prototyping

So far, I have introduced parts of the final design along with explaining my research and design process. I would like to emphasise the idea of creating a system that connects different parts of the user journey. In this way the app has great potential to blend in with our daily life, either during the Corona crisis or the time after (hopefully it is around the corner!).

User Journey

The app has the potential to become a part of the user’s daily life with regards to their grocery shopping. The user journey maps out how Happy Fridge interacts with users.

Manage fridge items

The fridge manage system is designed with rigour and simplicity. The items are arranged by their expiry dates, which encourages users to use what they have in time. The dashboard provides shortcut gestures to manage the item, and allows users to delete expired items directly from the main interface.

Single item review

Different views are offered to manage the fridge in a better way. For single item review, the pop-up card conveys the main information and basic interaction buttons while another card of recommended recipes can be pulled up from the bottom. Different features are thus smoothly connected.

From recipe to shopping list

Users are allowed to choose what they miss in the recipe to add to their shopping list. After visiting the supermarket, users can add what they bought to the fridge with just one click. The interaction design emphasises the most recently added items.

05

Retrospective

The importance of usability testing

In the design phase, I conducted simple paper testing with one of my interviewees. He was also informed of my later design. Through his feedback I was able to notice certain things I missed in the first place. I reflected on the result and his response, and modified the design. I think overall this process helped the app to more precisely answer the user needs – to hit the nail on the head. A small pity for this project was, during the high-fidelity phase I ran out of time to conduct another user test. It has taught me to conduct more tests in future projects.

Next step: profile setting function and cooperation with supermarkets

This edition of the design aimed at sketching an overview of the key functions of the application. But as you can see from my research, there are still some ideas worth developing: the structure of the profile setting and details of cooperation with supermarkets would be among the next challenges I would like to tackle.

Reflection on accessibility

I started to get very interested in accessibility design after watching this video on how visually impaired users interact with the iPhone. I was absolutely touched by it and realised how important it was in the digital world. In my architectural experience I have always paid attention to the accessibility in the design, driven by laws and morals, such as hallways having enough width to allow people in a wheelchair to turn around. At this moment I am following the course “Accessibility: How to Design for All” on Interaction Design Foundation. I hope I can contribute more in this field with my future designs.

Wanna say hi?

If you would like to work with me, or just grab a coffee together, feel free to drop me a line: [email protected]