CLEAR LABELS, BETTER CHOICES!
Helping Grocery Shoppers Find Safer
Foods with AR
Overview
Grocery Store App:
Shopping for groceries should be simple, but for many customers—especially those with dietary restrictions, allergies, or limited language proficiency—it can be overwhelming and risky.
At Andina, I led the end-to-end UX/UI design of an AR-powered mobile app that breaks language barriers, simplifies complex food labels, and guides users to the freshest produce. Rooted in ethnographic research and iterative testing, this inclusive solution empowers shoppers to make faster, safer, and more confident decisions independently.
Challenges
Diverse customers—especially those with allergies or limited English proficiency—face long, confusing grocery trips trying to decode product labels. This leads to uncertainty, longer shopping times, and potential health risks.
Labels not understood—shoppers struggle to understand food packaging written in a language they don’t speak.
Allergy and ingredient information is hard to scan, making it difficult for people with health conditions or dietary restrictions to quickly identify safe products.
Some shoppers don’t know how to judge ripeness, often leading to poor choices and food waste.
Project Goals
Breaks language barriers through real-time product translation, empowering users to shop independently without relying on store staff.
Makes product labels easier to understand, helping customers with allergies or sensitivities shop with confidence.
Guides produce selections so shoppers no longer need to rely on online searches to determine which fruits and vegetables meet their needs.
Overcoming customers’ challenges
Scan the shelf → AR overlays products in the user’s language
Breaks language barriers through real-time product translation, empowering users to shop independently without relying on store staff.
Apply dietary filters → Only safe options are shown
An AR navigation feature provides real-time product recommendations based on user-defined filters like allergens, dietary needs, or language preferences.
View ripeness rings → Pick the freshest item instantly
The AR-based ripeness scanner guides produce selection by analyzing freshness in real time and suggesting the best time for consumption.
Research & Discovery
ETNOGRAPHIC FIELDWORK:
5 store visits observing real customer behavior and frustrations
Shoppers delay decisions waiting for employee help.
Users fear choosing unsafe products due to misunderstood labels
Uncertainty in produce selection leads many shoppers to search online, risking poor choices and wasted food
INTERVIEWS:
7 interviews with users from diverse dietary, linguistic, and occupational backgrounds.
INSIGHTS FROM EXISTING RESEARCH:
Secondary research on food labeling, nutrition literacy, and inclusive retail
Design Process Highlights
Before & After (UI Redesign)
USABILITY TESTING & ITERATION
The Figma interactive prototype was tested with 4 users through remote moderated sessions. Screen recordings and a think-aloud protocol were used.
Participants included bilingual users, shoppers with dietary restrictions, and first-time AR app users.
First Prototype
Redesign
Key improvements included:
-
Use high contrast between the background and label cards, along with bold text, to make item names more legible.
-
Reinforce Button Feedback: Use distinct colors for Cancel and OK.
-
Enlarge slightly and add labels to “Add to Cart.”
First Prototype
Redesign
Key improvements included:
-
Display the number of active filters on the Filter button when applied
-
Implement a bottom sheet for product details to improve usability and visual continuity in the AR
First Prototype
Redesign
Key improvements included:
-
Add instruction: “Tap a fruit to check its ripeness.”
-
Replace “Yes/No” with “Search / Cancel” for clearer intent.
-
Add brief helper text: “Good for eating in 1–2 days.”
-
Centering the bottom action buttons to place them within the thumb-friendly zone, making them easily accessible for both right- and left-handed users.
Expected Outcome
Next Steps
Key Takeaways
-
Inclusive design is not just about accessibility—it enhances clarity and trust and reduces dependence on store staff, empowering shoppers of all backgrounds.
-
AR can be used responsibly to support real-world decision-making, not just for novelty.
-
Testing early and often helps de-risk assumptions and refine small but powerful UX details.