Designing a Grocery Waste Management App

Photo by Conscious Design on Unsplash

TL;DR

The following project was part of my Udacity UX Nanodegree journey. I decided to create products focusing on sustainability and zero-waste cooking. The design process includes

  • UX research — qualitative and quantitative research
  • Ideation — Interview Synthesis
  • Feature prioritization
  • Prototype — low-fidelity and hi-fidelity
  • User testing
  • Design hand-off

Problem Overview

Home cooking has become part of our lives. Market research by NPD Group Inc. shows that around 80% of Americans prefer home-cooked meals every day. According to the UN Food and Agricultural Organisation( FAO), 30% of global food production is wasted annually. In the process of home-cooking, many people throw out stale items from their refrigerators. The following case study aims to minimize this wastage.

Solution

Based on the obtained insights from user research, the solution is to create a digital app, that allows the users to manage their food wastage — by allowing them to add their grocery purchases and manage them effectively by providing timely recipes and reminders — following which will allow them to empty their inventory when they reach their next purchase cycle.

Users and Audience

The target users of the app are people who prefer home-cooked food, which includes a wide range of participants like home-cooking bachelors, couples, families of four, and even working mothers.

Research Goal

The goal of this study was to learn how home cooks decide upon recipes, understand how they plan their meals, and the major reason for food wastage. These findings helped to refine the requirements for designing a digital product around managing user’s food inventory effectively

Research Methods

For user research, both qualitative and quantitative research methods were undertaken. First, started with a user interview in which 6 participants were recruited who preferred home cooking. After which, around 30 target users were surveyed through google forms.

Research Synthesis

For the ideation and research synthesis, an affinity mapping diagram was created from which a huge amount of data was obtained. The outcome presented three main reasons for food and grocery going stale were over buying groceries, lack of meal planning, and unplanned dine-outs.

Interview Notes from User Research
Interview Synthesis: Affinity Diagram*

*Affinity Diagram: The Affinity Diagram is a method which can help you gather large amounts of data and organise them into groups or themes based on their relationships (Source)

Feature Prioritization

A Complexity Value Matrix was created for prioritizing the feature that is needed for the first MVP.

Complexity Value Matrix
Complexity Value Matrix*

*Complexity value matrix: Value vs. complexity is a prioritization framework that allows a product team to evaluate each initiative according to how much value the initiative will bring, and how difficult or complex it will be to implement (Source)

Rapid prototyping using the crazy-8 method

Crazy-8 Method*

*Crazy-8 method: crazy 8’s is a core Design Sprint method. It is a fast sketching exercise that challenges people to sketch eight distinct ideas in eight minutes. The goal is to push beyond your first idea, frequently the least innovative, and to generate a wide variety of solutions to your challenge (Source)

Refining rapid prototype

To visualize all that information, it was necessary to create wireframes. So using iPad wireframes were sketched to facilitate the layout and structure of the screens. Using the selected hand-sketched prototype, an iteration was done by adding a positive message to the user (check before and after image below), favorite and recommended recipes along with the search.

Before and After Design Sketches

User Flow

A User Flow diagram helps us to describe the steps the user will go through while using the product. This gives the birds-eye view on the task completion and the full scope or picture.

User Flow Diagram using Miro

Low-Fidelity Prototype

Based on the sketches and user flow map the following lo-fi wireframes were created.

Low-Fidelity Prototype

High-Fidelity Prototype

Low-fidelity mockups were converted to high-fidelity designs using material design system guidelines and also a clickable prototype using Figma

Iteration 1 — High-Fidelity Prototype

User Testing

Using the tool Lookback with 5 volunteers, a usability testing session was conducted, which yielded some interesting insights — such as

  • The inventory management screen did not have the information of the percentage of groceries pending or completed
  • The scan the bill screen did not have a button to tap when the user was ready

KPIs

Below are the KPIs that were considered for the final design iteration.

  • KPI 1: After marking completed items, to check the percentage of completion, the user needs to move to the home screen which took more time for the users to complete the task. To reduce the task completion time, the progress or percentage was also added to the inventory screen for instant information.
KPI 1: Before and After Design
  • KPI 2: Users were confused about where to tap on the screen to scan the bill. To increase the task success rate, a new button was added to scan the bill.
KPI 2: Before and After Design

Final Design

The final clickable prototype addresses quick task completion with relevant information and also reduces the time significantly to achieve a task.

Final Design Iteration — High-Fidelity Prototype

Design System

After the final design, created a style guide in Zeplin which included the color palette, typography, and components that were used throughout the app design.

Colour Palette
Typography
Components

Future Improvements

  • Un-marking favorite recipes from the home page
  • Recommended recipes targeting zero-waste cooking
  • Reports on progress showcasing inventory management
  • Gamification — for users to cultivate better habits

Final Thoughts

For this application design, I had an opportunity to learn and follow all the steps in the design phases. Thanks for taking the time to read this post. I enjoyed this whole design process and I’m looking forward do more in the future. If you have any comments or suggestions, please feel free to comment.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store