Overview
Grocery shopping should be simple—but for people with allergies or dietary restrictions, or when packages are in another language, it often feels overwhelming and unsafe.
At Andina, a grocery store with many imported products, 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 toward the freshest produce. Grounded in ethnographic research and iterative testing, this inclusive solution empowers shoppers to make faster, safer, and more confident decisions—independently.
Project Goal
Empower customers with tools to access personalized product information independently—reducing reliance on staff
Enhance staff efficiency by minimizing repetitive tasks, thereby freeing up time for high-value interactions.
Empowering customers and streamlining staff workloads can improve store operations, ensure consistent, high-quality service, increase customer satisfaction, and drive sales growth.
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:
I conducted 7 interviews with users from diverse dietary, linguistic, and occupational backgrounds.
“Struggles to read food labels that are not in his native language and feels anxious about making the wrong purchase.”
“Must carefully check every ingredient due to allergies or medical conditions.”
“Unsure how to pick fresh produce or prepare meals, often relying on guesswork.”
INSIGHTS FROM EXISTING RESEARCH:
Secondary research on food labeling, nutrition literacy, and inclusive retail
User Pain Points
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.
Ingredient information is often difficult to read or interpret, making it challenging for people with health conditions or dietary restrictions to quickly spot safe products.
Some shoppers don’t know how to judge ripeness, often leading to poor choices and food waste.
The Challenge
How might we break language barriers so all customers can understand product labels?
How might we simplify complex product information into clear, personalized guidance for customers with allergies or sensitivities?
How might we help customers feel confident when selecting unfamiliar fruits and vegetables?
Feature Selection
-
Real-time translation of labels into user’s preferred language.
-
Clear icons for quick comprehension.
-
Allergen & dietary restriction detection.
-
Personalized safety alerts (e.g., “contains nuts,” “gluten-free”).
-
Camera-based freshness recognition to identify fruits/vegetables.
-
Tips for ripeness, storage, and preparation.
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.
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.
Before Usability Study
Redesign Key improvements
-
Language Selector: Popup was small & generic.
-
Shelf View: Crowded labels and bright boxes created visual noise
-
Product card: Tall card blocked view & icons were tiny.
Contextual Language Selector
Now provides visuals and guidance, making it easier to choose the right language.
Clean Overlay System
Labels blend into shelves without clutter, reducing visual noise.
Readable Product Cards
Better proportions, larger icons, and improved text hierarchy.
Before Usability Study
Redesign Key improvements
Bigger Tap Targets
Enlarged buttons for easier selection.
One-Click Add/Remove
Filters toggle instantly, making active filters obvious.
Improved Allergen & Ingredient View
Clear hierarchy highlights allergens first.
-
Filters too small & tightly packed → hard to tap
-
No visibility of how many filters were active
-
Allergen/ingredient info appeared flat, no clear hierarchy
Redesign Key improvements
Before Usability Study
Redesign Key improvements
Step-by-Step Guidance
small, clear steps: identify the fruit → confirm selection → tap to scan → view ripeness result.
Immediate Feedback with Visual Cues
The animated ripeness ring (green → yellow → orange → red) gives real-time progress while scanning.
Actionable Results
Results explain how many days until it’s ready, with contextual tips that support decision-making.
-
The confirmation step for selecting the product was confusing and unclear.
-
After identifying the fruit there was no clear instruction on what users should do next.
-
The ripeness result used vague terms.
Accessibility Best Practices
Language Inclusivity
The language selector includes contextual explanations and previews of translated labels, ensuring non-English speakers understand how the feature affects the interface.
Readable Text and Contrast
Font sizes have been set to 12 or larger, and color choices meet WCAG contrast requirements, supporting users with low vision and ensuring legibility across various lighting conditions.
Reduced Visual Noise
Overlays and labels are simplified and spaced appropriately, reducing clutter and helping users focus on the core information.
-
Guided Interactions
Contextual prompts provide step-by-step guidance, supporting first-time users and reducing cognitive load.
-
Icon Support
Icons were designed to be large and intuitive, giving additional visual cues for users who may struggle with text or language barriers.
-
Clear Call-to-Actions
Primary and secondary buttons are distinguished in size, color, and weight, making it easier for users to identify the intended action and reducing decision friction.
Impact
-
Confidence & Independence
Shoppers can make informed choices without relying on staff for translations, allergen checks, or produce selection.
-
Inclusive Access
Multilingual support and visual guidance tools help non-native speakers, novice cooks, and users with dietary restrictions.
-
Less Food Waste
The ripeness scanner and storage tips guide users to choose fresh produce and store it properly, reducing spoilage.
-
Improved Efficiency
Staff spend less time on repetitive tasks like translations, allergen checks, and ripeness guidance—freeing them to focus on higher-value customer interactions.
-
Reduced Bottlenecks
Fewer delays and misunderstandings create a smoother shopping flow and faster assistance.
-
Enhanced Customer Experience
A smoother, more personalized shopping journey strengthens loyalty and builds trust in the Andina brand.
-
Sales Growth Opportunities
Improved accessibility and usability widen the customer base and encourage shoppers to explore and purchase more products.
-
Market Differentiation
Positions Andina as a leader in inclusive, tech-driven retail experiences.
-
Confidence & Independence
Shoppers can make informed choices without relying on staff for translations, allergen checks, or produce selection.
-
Inclusive Access
Multilingual support and visual guidance tools help non-native speakers, novice cooks, and users with dietary restrictions.
-
Less Food Waste
The ripeness scanner and storage tips guide users to choose fresh produce and store it properly, reducing spoilage.
-
Improved Efficiency
Staff spend less time on repetitive tasks like translations, allergen checks, and ripeness guidance—freeing them to focus on higher-value customer interactions.
-
Reduced Bottlenecks
Fewer delays and misunderstandings create a smoother shopping flow and faster assistance.
-
Enhanced Customer Experience
A smoother, more personalized shopping journey strengthens loyalty and builds trust in the Andina brand.
-
Sales Growth Opportunities
Improved accessibility and usability widen the customer base and encourage shoppers to explore and purchase more products.
-
Market Differentiation
Positions Andina as a leader in inclusive, tech-driven retail experiences.
Next Steps
What I learned
This project taught me the value of designing with empathy and inclusivity at the core. Working with non-native speakers, shoppers with dietary restrictions, and novice cooks revealed how small barriers—like unclear labels or unfamiliar produce—can significantly impact confidence while shopping.
Through usability testing, I learned how translating frustrations into design decisions mattered: simplifying overlays, improving contrast, and adjusting icon sizes weren’t just visual tweaks, but essential tools to reduce cognitive load and make the experience more intuitive.
I also discovered the importance of balancing user and business needs. While the app empowered customers to shop independently, it also reduced staff workload and streamlined store operations—creating value on both sides.
Most importantly, I realized that inclusive design isn’t only about accessibility—it’s about building independence and trust, reshaping how people experience something as fundamental as buying food.