Problem
For consumers with dietary restrictions, fitness goals, or ethical boundaries, grocery shopping is often a high-stakes task fraught with Information Asymmetry. Despite legal labeling requirements, manufacturers frequently use deceptive marketing and complex chemical jargon to mask ingredients, leading to 'Label Fatigue.'
In high-distraction environments, this cognitive load doesn't just waste time—it hinders consumer confidence and introduces physical risk. There is a critical need for a high-utility, minimalist interface that provides instant transparency, returning peace of mind and decision-making power to the shopper.
Design Methodology
In building Unmasked, I adopted a "Design Technologist" mindset, integrating GenAI into every stage of the Double Diamond.
Discovery (Synthetic Research): I used Large Language Models (LLMs) to simulate diverse user profiles—ranging from anaphylactic peanut allergy sufferers to competitive bodybuilders—to identify niche "red flag" ingredients that traditional databases might miss.
Ideation (Rapid Prototyping): Leveraging AI wireframing tools allowed me to "vibe code" and iterate on the layout in hours rather than days, ensuring the user interface was ergonomically appropriate for a user interacting with one hand.
Execution (Data Interpretation): The core product value lies in its integration with AI translation layer. I designed a logic flow where the AI scours verified databases to translate industrial chemicals and ingredients into plain-English definitions, providing users with instant clarity and peace of mind.
Solution
Semantic Severity Scale: To bridge the "Confidence Gap" found in traditional labeling, I developed a rating scale that categorizes ingredients on a nuanced 1–10 scale. This moves the user experience away from binary "Safe/Unsafe" alerts—which often lead to unnecessary anxiety—and toward a model of informed autonomy.
Levels 8–10 (Critical): Triggers high-contrast 🚫 Red UI states and heavy haptic feedback for immediate medical or ethical stops.
Levels 4–7 (Caution): Acts as a mindfulness tool, utilizing ⚠️Yellow UI states to signal ingredients that are technically safe but may have long-term health implications or represent ultra-processed additives.
Level 1-3 (Safe): Verifies product as safe for consumption, showing ✅Green UI states to provide shoppers the peace of mind of knowing that what they are consuming does not have negative impact to their overall wellbeing.
The use of these variables ensure the app remains a lifestyle companion for the health-conscious as much as a lifesaver for those with anaphylactic allergies.
Designing for Physical Context
Understanding that the primary use case occurs in a high-distraction, high-mobility environment, I prioritized One-Handed Ergonomics. Grocery shoppers are frequently multitasking—holding a basket, a child, or a list—rendering traditional top-heavy mobile layouts ineffective.
I implemented a "Bottom-Heavy" Information Architecture, anchoring the camera viewfinder, result drawers, and navigation within the natural posture of the human hand. The detail drawer slides up from the bottom of the screen, allowing users to toggle between a 1–10 verdict and deep-dive ingredient definitions without repositioning their grip. This ensures the app is accessible and efficient in not only fast-paced retail environments but also in the comfort of shopper's homes.
Information Architecture
Rather than treating Artificial Intelligence as a supplementary feature, I integrated GenAI as a core infrastructure element to solve the problem of information density. The use of GenAI acts as a translator, mapping thousands of obscure chemical derivatives and industrial synonyms to the semantic severity scale in real-time.
Beyond mere identification, the LLM-driven back-end provides Plain-Language Translations, stripping away any clinical jargon to offer a more human-centric insight as to why an ingredient is flagged. Finally, the use of GenAI powers a Proactive Alternative Engine; if a product triggers a "Red" critical verdict, the system instantly cross-references for safe "Green" alternative, transforming a point of cognitive fatigue into a moment of peaceful resolution.
Research and Discovery
Before moving into design, I conducted a mix of Secondary Market Analysis and Primary User Inquiries to validate the necessity of a real-time ingredient interpreter. My goal was to understand the psychological friction points that occur between seeing a label and making a decision on whether to purchase.
Clean Label Shift
64% of consumers report that short, recognizable ingredient lists are the primary source of trust in a brand. (IFIC)
Label Fatigue
Shoppers spend an average of 6-10 seconds looking at a product's nutritional information before making a decision. (PMC, NLM)
Jargon Barriers
70% of shoppers are wary of ingredients they cannot pronounce, even if they are medically safe. (Ingredient Communications)
Secondary Research
I analyzed existing literature on the Clean Label movement and Label Fatigue phenomenon, aligning it with consumer psychology in retail environments.
Based on the secondary research conducted, I identified the following key themes and insights that would validate some of my design assumptions.
Primary Research
To dive deeper, I utilized a hybrid research approach, combining traditional user interviews with AI-Augmented Persona Simulation. This allowed me to gather deep emotional insights from real humans while using AI to pressure-test thousands of data-heavy edge cases that would be impossible to cover in traditional user interviews.
I conducted semi-structured interviews and contextual inquiries with 6 participants via Google Meets. My target demographic consisted of parents with children with allergies, fitness enthusiasts, and ethical lifestyle shoppers.
Traditional User Interviews
Prior to the interview process, I observed participants in a typical grocery shop to observe their physical interactions with products. The behavioural patterns showed that 100% of participants struggled to hold their phone, a grocery basket, and a product simultaneously. This physical constraint directly dictated my design focus of a Bottom-Heavy Information Architecture.
Participants expressed the highest level of anxiety around vague ingredient terminology like "Natural Flavours" or "Spices", often putting products back because they couldn't verify the sub-ingredients.
Synthetic User Personas
To bridge the gap between emotional pain points and technical ingredient data, I leveraged GenAI to simulate high-contextual personas. This allowed me to stress-test the Semantic Severity Engine against 150+ obscure ingredients across different dietary restrictions.
To ensure the results were as accurate and realistic as possible, I didn't just prompt GenAI to "act like a user." I used High-Context Role-Play Prompts to ensure the feedback was grounded in realistic constraints. Here are two example prompts that I used for two distinct personas, showcasing that this is more than just a niche medical tool but rather a versatile lifestyle platform:
"Act as Sarah, a 34-year-old mother of a child with a Grade 4 anaphylactic Tree Nut allergy. You are in a crowded, brightly lit grocery store with a fussy toddler. You are holding a package of granola bars. I will provide an ingredient list, which based off of, answer the following questions:"
Identify which ingredients trigger an immediate 'Stop' response pertaining to allergens.
Describe the emotional 'friction' you feel when you see an 'unknown' ingredient without a source specified.
Rank your confidence in purchasing this product on a scale of 1-10.
"Act as Marcus, a 28-year-old competitive bodybuilder 4 weeks out from a show. Your diet is extremely strict. You are currently at your local supplement store with a bunch of different supplements on hand. You are looking for an 'all natural' protein bar amidst the wide selection. I will provide an ingredient list, which based off of, answer the following questions:"
Identify which ingredients that, while 'Safe,' would be 'Red Flags' for your specific health and inflammation goals.
How does the presence of 'artificial sweeteners' and 'additives' affect your purchase decision?
What would make you 'Trust' this brand more?
Synthetic Simulation Results
By running high-contextual simulations for both the allergy prone and fitness enthusiast, I was able to observe how two vastly different mental models interacted with the same data.
The prompt didn't just flag ingredients; it simulated the psychological friction of the shopping experience. Using GenAI for behavioural stress-testing allowed me to identify friction points early in the wireframing stage. Instead of guessing how a parent or a bodybuilder might feel, I was able to quantify their doubt and design an interface that proactively solves for it.
This hybrid approach ensured that the final design of Unmasked was grounded in both physical ergonomics and deep psychological empathy.
Anxiety Loop
The longer users spent reading a label, their trust in the brand plummeted by over 50%.
'Why' Demand
Users wanted a rationale for the score on the scale to justify their purchasing decisions.
Contextual Urgency
Environmental factors made fine print in the ingredients lists a major accessibility barrier.
User Persona - "The Vigilant Protector"
Sarah Jenkins
Stay-at-Home Parent & Senior's Home Volunteer
"Every grocery trip feels like there is a greater risk than reward. I’m staring at labels trying to figure out what certain ingredients mean and if it is safe to consume for my child. I just want to shop without the constant fear of the fine print."
Pain Points
Ambiguous ingredient terminology that don't explicitly state their source.
Struggle to read microscopic text while managing a distracted child.
Skepticism towards deceptive marketing tactics used to hide ingredient risks.
Cognitive fatigue from spending excessive time reading ingredients list.
Goals
Achieve a safety verdict on a product in real-time.
Reduce mental load of memorizing chemical synonyms for allgerens.
Discover new brands and products without hesitation.
Shop quickly while physically multitasking.
Behaviours
Sticks to list of curated brands to avoid the risk from scanning new products.
Reads entire ingredient list multiple times even for reputable products.
Uses secondary browser to search if ingredient is safe for allergens.
Acts as primary filter for all household consumption.
User Persona - "The Performance Optimizer"
Marcus Bradley
Competitive Bodybuilder & Fitness Coach
"Brands love to slap 'high protein' on everything nowadays, but that doesn't always mean its healthy. I’m tired of getting bloated from hidden fillers and inflammatory seed oils just because a label deceived me. I need the truth, not all the marketing fluff."
Pain Points
Products marketed as healthier alternatives are often loaded with inflammatory additives.
Artificial sweeteners cause insulin spikes and ruin diet plan.
Thickener agents cause digestive distress and inflammation.
Lack of explanation for why specific additives are harmful.
Goals
Ensure every calorie consumed supports metabolic health and muscle recovery.
Avoid seed oils and artificial additives that hinder progress.
Build knowledge of ingredients and their effects on the body.
Find safe alternatives that don't compromise diet.
Behaviours
Use nutrition trackers to accurately log every macro and micro-nutrient.
Goes straight to the nutrition facts and ingredients list,
Engages in fitness content and research to stay updated on food-industry trends.
Purchases whole, single-ingredient foods to avoid label fatigue.
User Task Flow
I designed a linear task flow that prioritizes speed and actionable data. The goal was to minimize the time spent deciding if a product was safe for consumption and transform a moment of friction into a win.
I organized the task flow into four distinct stages that showcase the user's journey from discover to resolution:
Personalized Entry: A streamlined splash screen handles background data syncing prior to instructing the user on filling in their login credentials to access their profile. The user lands on a personalized, data-driven home screen that summarizes their recent activity, reinforcing the value the app provides before they even interact with it.
Scan Interaction: The user taps the primary "Scan" CTA positioned in the "Primary Thumb Zone" for one-handed use, which prompts the camera interface to pop-up. Once a barcode is scanned, the AI-driven database cross-references the ingredients against the user's customized dietary preferences. Based on this information, a high-contrast verdict appears, highlighting any ingredients that are flagged.
Alternative Pivot: Rather than leaving the user at a dead end, the user has the option of viewing "safer alternatives" that initiates a resolution path. Once clicked, a curated list of products are presented that fit in the same category and match the user's safety profile. The user can then select a product to view a nutritional highlight comparison, providing a clear visual contrast between both products.
Final Resolution: With one tap, the user can save the "safer alternative" to their profile, building a personalized library of "frequent safes" for future purchasing trips. To close the loop, the user can also access a localized map and retailer list, showing exactly which nearby stores have the product in stock, with prices and distance away from their location.
Design System
I decided to approach this project using a Minimalist High-Utility design philosophy to ensure that information hierarchy was prioritized above all else. Every pixel was crafted to ensure it served a purpose in an often over stimulating, fast-paced shopping environment.
Typography
Since users are often scanning labels while moving, I chose SF Pro Display (San Francisco) as the primary typeface. As the native iOS font, it provides immediate familiarity and exceptional legibility across various weights.
Colour Palette
The palette is divided into two categories: Brand Identity and Functional Feedback. I utilized a "Traffic Light" system for the severity engine, but softened the hues to ensure they didn't feel unnecessarily alarmist.
Prototyping Workflow
In a shift away from traditional static wireframing, I utilized Google Stitch and GenAI to move directly from structural logic into high-fidelity functional prototyping. This allowed me to iterate on behaviour and system logic in real-time.
Rather than manually sketching the experience, I defined the app's foundation through three core product requirements that would guide the AI's generative output:
Ergonomic Constraints
Every primary action the user performed had to be within the touchpoint boundaries established in the bottom of the screen (Primary Thumb Zone).
Information Hierarchy
The prioritization of information was first the results screen (Severity Verdict), followed by the "Why" (Flagged Ingredients List), and finally the "How" (Safe Alternatives).
Feedback Loop
The system was prompted to provide immediate tactile feedback through haptics and visual transitions that mirrored the urgency of the scan result.
Key Takeaways
From Manual to Automation
I learned that when the manual part of design such as sketching and wireframing is handled by GenAI, my role as a designer shifts toward High-Level Orchestration. My value was no longer in how I designed a component in the design system, but in why the component existed in the first place and how it served the specific psychological needs of the users.
Prompting as a Design Skill
Learning how to provide high-level contextual prompting is essentially User Requirements Documentation in a new language. To get a high-fidelity prototype to function accordingly, I had to be incredibly precise about accessibility, ergonomics, and hierarchy. If the prompt lacked clarity, the product suffered with it, proving that my domain knowledge is more important than ever.
Fail Fast, Fix Faster
The speed of GenAI prototyping is a superpower and often times undervalued. By bypassing weeks of low-fidelity sketching and wireframing, I was able to spend more time on Behavioural Testing and Semantic Logic. This workflow allows for a "Fail Fast, Fix Faster" mentality that traditional design cycles struggle to match.
The Human Filter
While GenAI can generate the rationale behind the product, I had to provide the human aspect to it. GenAI can map an ingredient list, but it cannot understand the deep, emotional relief a user might experience when using the app for their dietary and lifestyle choices. Maintaining a Empathy-Driven design philosophy is what bridges the disconnect of a product feeling like just a tool and one that actually understands and relates.