Your Kitchen At Your Fingertips
Pantry Partner: A Case Study in Mobile Application UX Research and Design
Project Overview
The Problem:
To create a mobile application that allows users to catalogue their groceries and their expiration dates in order to alert them when food items are about to expire. The goals of this application are to reduce food waste as well as cognitive load by seamlessly integrating into the users’ grocery shopping routine.
Project Type: High Fidelity Prototype of a mobile application
Project Scope: UX research, UX Design, brand development
Client: Sage Putnam
Timeline: September-October 2023
My Role: Sole UX researcher and designer
Mentors: Danielle Martin, Natalie Magee
Audience: Adults aged 25-45 who manage their household groceries.
The Solution:
A High Fidelity clickable prototype of the application that includes Shopping List and Household features to allow for personalization and flexibility in the way the app is used, allowing it to integrate into the everyday lives of its users.
Project Development
Client Requirements
Allow users to enter expiration dates manually, via scanner, and through automatic generation.
Make soon to expire foods visible and easily accessible and allow users to customize their expiration notification settings.
Create multiple options for adding food items to the household to ensure that the user can integrate the app at whatever stage of grocery shopping fits their routine best.
User Research
User Surveys
Surveys were deployed with 17 questions relating to grocery shopping habits, food waste trends, and demographics.
Target Audience
77% of respondents were aged 25-45, and 83% identified as female.
88% of respondents have households of 1-3 people.
22% of respondents reported being diagnosed with or identifying as having ADHD.
Survey Insights:
-49.2% of users grocery shop once per week, so making an app that is easy to integrate into that routine is highly important.
-76.3% of users report that produce most often goes bad before they can use it, indicating a need for a generated expiration date to alert users of their produce’s freshness.
-44.1% of users report that using all of their ingredients before they expire is a top priority to them.
User Interviews
Interviews were conducted with 5 individuals within the target audience demographics who gave me insight on their grocery shopping habits, food storage, and the waste patterns in their households.
Interview Insights:
-Users identified that the grocery shopping process is easy for them as long as they have a list to rely on. Integrating a shopping list function to the application will help with overall app integration into everyday life.
-Users identified that push notifications can be helpful in reminding them of things, but that they need to be persistent in order to make them harder to dismiss and forget about.
User Pain Points
When storing groceries, not everything can be up front, leading to an ‘out of sight, out of mind’ issue where items in the back are often forgotten.
Produce does not have expiration dates on it, and is therefore the most difficult to keep track of in terms of overall freshness.
Users shop best when they have a list, but lists can often be left behind or in multiple places, making them less effective overall at times.
Competitive Analysis
Competitive analysis was conducted on four other food tracking applications that have similar uses to those desired in ours.
-Fridgely, Kitche, Kiff, Best Before
-All Direct Competitors
-The chart to the right showcases the features that research suggests this app might require, and highlights whether or not each competitor possesses that feature.
Competitor Strengths:
-All four apps send push notifications to remind users of expiring food.
-Best Before and Kitche have import or memory functions that make adding items that have been added in the past quick and easy.
Competitor Weaknesses:
-Kiff and Kitche both lack individual food storage spaces for users to organize their food into.
-None of the competitors are universally available in the US on both iOS and Android.
Competitor Opportunities:
-There are very few apps currently on the market that have these functionalities and work well as intended.
-There is a social shift happening that places emphasis on reducing food waste.
Competitor Threats:
-People have established grocery routines that they may not want to interrupt to put information into an app.
-Some people prefer physical reminders of expiration dates.
Mid Fidelity Prototype Development
Personas
Julie represents the majority of the survey respondents in our research. She is 28 and has a household of 2. She is motivated mainly by reducing household food waste to save money.
Kevin represents another group of respondents who are older, have a larger household, and who are concerned about tracking what ingredients they have in addition to their expiration dates.
User Stories
Main User Flow
This user flow was created to take users from the landing page, through the login or sign up process, and into the main app.
From here, the flow shows how a user can add an item to their household by first selecting the icon for the space where it will be stored. The user is then prompted to input information for the item such as name, quantity and units, category, and expiration date.
This function is the basic way that a user can add items, however other flows have been created to use the Shopping List as the main method of adding items to the household.
Wireframes
Sketches
Digital Wireframes
Low Fidelity Prototype Usability Testing
Scope: To test the overall usability of the main features of the app and uncover any major usability issues.
Users: 17 users who performed unmoderated tests of the prototype and 3 users who performed moderated tests.
Tasks:
-Task 1: From the landing page, sign up for an account as a new user and go through the onboarding process.
-Task 2: Add an item to your pantry
-Task 3: View your list of expiring foods.
-Task 4: Use the grapes that are about to expire and add more to your grocery list.
-Task 5: Go to your recently added items and input the expiration date for Zucchini.
-17% of users were able to successfully complete the onboarding process.
-36% of users were unable to add an item to the pantry
-100% of users were able to view their expiring items, using a variety of paths
-90% of users were able to use the grapes and add more to their shopping list
-89% of users were able to input an expiration date for the zucchini.
Results
“I think the onboarding should have a next and back button because I was a little confused with what I should have done when I was tapping on a different area of the screen and not where the text is.”
Using the rubric shown, the flows tested were assigned levels of concern. These showcase what flows require the most improvement and allow me to prioritize what changes should be made first.
Insights
Users want more control over the onboarding process as a whole, including being able to move forward and backward through it or skip it altogether.
Users quickly forgot what each button did, so adding small labels under icons should help with overall navigation ease.
Users expressed the desire for the app to remember items that have been previously input and autofill some of the information about the item when adding it to a list or to the household.
Next Steps
Utilizing the insights from this round of usability testing, the mid fidelity prototype was improved in the following ways:
Added navigational arrows and a skip option to the Onboarding process
Added labels underneath main navigational icons
Emphasized the ‘Add’ button within the storage space pages with higher contrast to make it more apparent to users.
Brand Development
Brand Characteristics
This is an application all about freshness and reducing food waste. It was important to make it friendly and inviting, while also evoking a sense of brightness and peace. One large goal of this project was to make an application that was seamlessly integrative into the everyday lives of the average person. This meant that from the basics of the design, the app needed to feel welcoming and calming and not cause eye strain or cognitive overload.
For this app, a monochromatic color palette and simple lineless graphics were chosen to help achieve these goals and create a modern, fresh application that feels both new and familiar.
Brand Moodboard
Since the target audience identified for this application is generally more waste conscious and concerned about the freshness of their produce, the overall mood of the application needed to reflect freshness and style. A monochromatic green color palette and lineless art were chosen to give the app a modern feel while invoking the ideal pantry experience for users.
Logo Development
Using the chosen monochromatic green color palette and the lineless art style, a logo was developed for the application. Using the visuals of a pantry, this logo seeks to show off a simple and enticing version of what the user could achieve in their own kitchen.
In addition, a condensed version of the logo was created for areas in the application where the more detailed version would not translate well.
Icons were also developed for the main navigation bar of the application, utilizing the same monochromatic color palette and lineless art to create a seamless brand experience.
Color Palette
For this project, a simple monochromatic green color palette was chosen in order to maintain a fresh and healthy mood for users.
In areas where alerts are needed, such as the list of expiring foods, a rich red was used. A darker shade of the complementary color to the main green was decided on because it caused less eye strain for the user and was friendlier to those with red-green deficiencies.
Typography
For this project, a pairing of two sans serif fonts were chosen. For the headings and other large bolded text, the application uses Ubuntu, a stylized, yet easy to read font that has a modern feel to it.
For body text, DM Sans was used. This is a very rounded and clear text that decreases the reading difficulties of people with text processing challenges like dyslexia.
Style Guide
Combining all of the elements above, this style guide was created for the brand of the application. This allowed me to quickly pull assets and colors over into the project as I worked on the high-fidelity prototype.
High Fidelity Prototype Development
Hi-fi Prototype
The first High Fidelity prototype for Pantry Partner was created with all of the pages required for the main user flows and to allow us to test all of the main functionalities that will be included in the MVP.
The style tile developed was used to create consistent branding throughout the project and gives a basis for what the final project will look like.
Next Steps
Usability Testing
The next step in development of this project is to conduct moderated usability tests on the high fidelity prototype. These tests will focus on uncovering pain points and successes in the functionality and usability of the main features of the app. These tests will look to uncover any major issues before fine tuning the next iteration of the high fidelity prototype. After iterations, additional usability testing will need to be completed to continue to uncover even small issues that might impact the use of the app upon launch.
Heuristics Audit
In conjunction with usability testing, the high fidelity prototype will need to go through a heuristics audit to ensure that it adheres to the heuristics standards set forth for design. Accessibility is an incredibly important part of any project, and this is no exception. While accessibility has been considered at every step of the project, this is the point where it will need to be tested more thoroughly with tools such as screen readers and alternate mobility aids. Doing so will ensure that the application is accessible to as many people as possible.
Development Hand-off
After more rounds of usability and heuristics testing and iterations, the prototype will be made into pixel perfect mockups. All of the assets will be exported as high quality SVG files and handed off to a developer, along with the prototype and additional interaction notes. I will work alongside the developer throughout the development process to ensure that design decisions are carried through faithfully and that accessibility remains a number one priority throughout.