App Design • 2020
An app to help users monitor and make full use of the contents of their fridge, and to encourage wise grocery shopping.
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.
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.
Target user needs
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?”
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.
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
If the user account is associated with his/her local supermarket account, the grocery data can be batch imported from the shopping history.
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.
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.
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.
The size of main icons is 24×24 px. Inactive icons are in grey, whereas the active ones are in light blue.
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.
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!).
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.
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?