Designing a Grocery Waste Management App
A Udacity Nanodegree project
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
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.
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.
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
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.
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.
*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)
A Complexity Value Matrix was created for prioritizing the feature that is needed for the first MVP.
*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’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.
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.
Based on the sketches and user flow map the following lo-fi wireframes were created.
Low-fidelity mockups were converted to high-fidelity designs using material design system guidelines and also a clickable prototype using Figma
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
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 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.
The final clickable prototype addresses quick task completion with relevant information and also reduces the time significantly to achieve a task.
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.
- 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
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.