Grocery Buddy

Providing nutritional insights and smart recommendations while grocery shopping

Three smartphone screens displaying a grocery tracking app. The first screen shows a barcode scanner overlay on a product package, prompting the user to position the barcode within the frame. The second screen displays product details for Manner Wafers under the category 'Cookies & biscuits,' including a list of ingredients with some marked as 'Tracked.' The third screen presents a comparison between Manner Wafers and Ruger Wafers, showing a recommendation that Manner Wafers has overall lower sugar and sodium levels, along with a button to edit tracked ingredients and a comparison of sugar and sodium content between the two products.

Role

UX Researcher & Designer

Timeline

April 2021 – June 2021

Team

Hannah Chu (UX Researcher & Designer), Ophelia Yang (UX Researcher & Designer), Shirley Tang (UX Researcher & Designer)

Skills

User Interviews, Contextual Inquiry, User Flows, Wireframing, Prototyping, Usability Testing

Tools

Figma, Whimsical

Overview: A Grocery Assistant for Extracting Product Information

In this project, we adopted a highly experimental design approach presented by the UCLA Human-Computer Interaction lab: AI41, designing for one user. We were tasked to identify one person and design an app, service, or device that uses AI to fulfill that person’s needs in some way.

Our solution was Grocery Buddy: an AI-enabled application that can scan product barcodes and extract relevant product information and recommendations based on nutritional facts. We focused the app with the intentions to enhance the grocery shopping process for users who have difficulty reading fine text.

As a UX researcher and designer, I conducted research with one user to design and test an accommodating experience learning about and comparing products.

Illustration of 4 people in a Zoom meeting

User interview conducted on Zoom

DISCOVERY

Identifying a User

‍Shirley's mom
‍In recent years, it has become more difficult for my mom to read smaller sized print. Even with reading glasses, she often does not bring them with her when she goes out and gets frustrated when she is unable to read small labels.

How might we statement: "How might we design an app that helps with increasing the readability of physical text, for example, in the context of food labels?
RESEARCH

Pain Points with Reading Small Text

We interviewed our user and found pain points around:
‍
1. Difficulty reading ingredients on product labels due to narrow line spacing
2. Text of food labels being unreadable due to size or color contrasts
3. Challenges finding expiration dates on products easily
‍
From our interview, we revised our problem statement and narrowed down a few main points of interest around text size, line spacing, highlighting key words (e.g. sodium, sugar, msg), and contrast and coloring.

How might we statement: "How might we design an app that will increase the accessibility and readability of food product labels while providing helpful insight?"
Board with user flow of different scanning modes

User flow outlining interactions with the app's scanning modes

DESIGN

Scanning and Comparing Products

Our first prototype focused on three main functionalities: a bar code scanning mode, expiration date identifier, and nutritional facts comparison feature.

Low-fidelity wireframes of the scanning features

Low-fidelity wireframes of the scanning and information extraction features

I worked on the video scanning mode for expiration dates, as well as settings and interactions for saving items and nutritional facts.

Smartphone mockups of prototype 1 showing the scanning process for product information, expiration dates, and nutritional value comparisons

Mockups from prototype 1

TEST

Unintuitive Interactions

Main takeaways from usability testing the first prototype included:

Settings page with tracked ingredients and suggested ingredient

Missing Call to Action

Upon adding a tracked ingredient, the user was confused where to click due to a missing call-to-action. The “suggestion” pop-up was also ambiguous.
Product information page with nutritional facts

Colors Convey Unclear Meaning

The meaning behind the red and green to express nutritional facts that either surpassed or did not reach recommended levels was lost in context.
Saved scans page with past scanned products

Picture Size is Not Accessible

The user had difficulty reading the product images in the saved scans page as they were hard to differentiate and identify.
Saved scans page with past scanned expiration dates

Past Information Irrelevant to User’s Needs

The first prototype captured a list of all expiration dates that had been scanned, including those from previous grocery trips. The user was puzzled on the presence of this information, and said that expiry dates from previous trips are unnecessary.

Applying Research Findings

We revised colors, font sizes, and calls to action to be more intuitive to the user.

Smartphone mockups of prototype 2 showing the scanning process for product information, expiration dates, and nutritional value comparisons

Applying findings from research to prototype 2

IteratiONS

Improving the Existing Interface

I later revisited this project to challenge myself and improve the UI, starting with mid-fidelity wireframes and slowly making my way up to redesigning components.

Mid-fidelity mockups showing the scanning process for product information, expiration dates, and nutritional value comparisons

Mid-fidelity wireframes of redesign

Final Designs

Mockup of a notification displaying a product name an option to view details or cancel

Scan Product Barcodes

Scan product barcodes to get product information.

Mockup of product details page with product name, category, tracked and not tracked ingredients

Track Product Ingredients

Easily access a list of ingredients and nutritional facts.

Mockup of comparison results displaying two products, ingredient comparisons, and a recommendation between the two products.

Check for Expiration Dates

Scan products and find when a given product is expiring.

Mockup of comparison results displaying two products, ingredient comparisons, and a recommendation between the two products.

Compare Nutritional Facts

Select two products to compare nutritional information.

Food for Thought

Thanks for reading until here..
let's connect!
GoodMaps: Indoor NavigationNaviPathGrocery Buddy