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
Users monitor and modify the items without confusion.
A comprehensive user journey
From tracking to cooking, the app offers a natural interaction experience.
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
Background (Covid-19)
Recognize problem
Research
Define problem
Target user needs
Ideate
Brainstorm
Test ideas
Prototyping
Design experience
Design interface
Testing
Usability
Improve design
*Iterative cycle
02
Research
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
- Almost everyone admitted they didnât plan for grocery shopping. They believed that planning was a good idea, but it took too much time.
- The biggest reason for food waste was a lack of awareness.
- Faced with expiring food, people felt forced to cook it but were sometimes in need of inspiration and knowledge.
- 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.
Step 1
Add button sits in the main navigation bar, which is accessible at all times. In the pop-up card, the user gets to choose one of three modes for adding an item.
Step 2a
The user can choose the items recommended or enter a keyword to search for an item in the database. In case of special items, the user can choose to log in the data manually by tapping the button on the bottom-left corner.
Step 2b
By scanning the item/barcode/QR code, the user can easily add an item. The app has a basic database which records only elemental information. It can also access the database of a local supermarket, which offers more detailed information.
Step 2c
If the user account is associated with his/her local supermarket account, the grocery data can be batch imported from the shopping history.
Step 3
The user can correct the data after the previous step, or manually log it in from the beginning.
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?