FOODAR is an AR-based retail concept that reduces the cognitive load of grocery shopping through structured navigation and contextual product transparency. As UX/UI Designer, I led the end-to-end UCD process, translating user insights into a validated AR interaction model and scalable design system, with early prototype testing directly shaping key decisions. The result is a user-centered experience combining functional guidance and emotional engagement in a complex physical environment.
Role
UX/UI Designer
Scope
UX Conception, UI Design, UX Evaluation
Platform
Mobile
Duration
4 Months
Team
1 Fellow Student
Tools
Balsamiq
Adobe Illustrator
Adobe Photoshop
Adobe XD
Adobe AfterEffects
Adobe PremierePro
Adobe InDesign
Adobe Illustrator
Adobe Photoshop
Adobe XD
Adobe AfterEffects
Adobe PremierePro
Adobe InDesign
FOODAR promotional film
Context
Grocery shopping requires planning, product comparison, and budget control – often overwhelming for our target group: users who want to eat healthier and more consciously. FOODAR addresses this by connecting inspiration, planning, in-store navigation, product transparency, cost tracking, and cashless payment into one coherent journey. Recipes transform into shopping lists, Augmented Reality (AR) supports product discovery and navigation, and real-time cost visibility enables confident decision-making. The app can be personalized to individual needs such as allergens and intolerances. The project was developed during my Master’s program at TH Ingolstadt.
UCD Approach
We explored user pain points and defined personas representing key behavioral patterns within the target group: a sustainability- and budget-conscious student and an efficiency-driven planner focused on healthy family meals. Each persona was mapped to a concrete usage scenario. Based on these insights, we defined and iteratively refined the information architecture to ensure a clear and intuitive structure throughout the design process.
Persona Chris Curious
Chirs' user story
Persona Stacy Structured
Stacy's user story
Rough information architecture
Refined information architecture
Wireframing & Prototyping
We translated the information architecture into low-fidelity wireframes to define structure, task flows, and interaction logic before making visual decisions. The navigation bar was intentionally reduced to three core elements: Inspiration (pre-shopping activities), AR features, and the Shopping Assistant (in-store guidance), structuring the app into clear usage contexts.
Shortcuts, filters, and bottom overlay context menus were established as consistent interaction patterns to enable efficient access without disrupting flows. In the AR view, compact, expandable cards structured product information to manage cognitive load.
Wireframes
Refined wireframes
Usability Testing
Interactive prototypes allowed early validation of usability, core journeys and navigation logic. We conducted two formative evaluation loops with eight participants and five core tasks, covering configuration, recipe search, AR navigation and scanning, shopping assistance, and payment.
Results & Impact
The first round revealed unclear AR entry points, insufficient navigation feedback, and unclear interaction elements. Participants asked, for example, “How do I stop the navigation?” and “Is a sustainability score of 4 good or bad?” Others expected tags on AR cards to be clickable and wanted to reuse previous shopping lists. These insights led to clearer AR access, improved affordances, stronger confirmation patterns, and refined visual hierarchy. The second loop with an early high-fidelity prototype confirmed more efficient task completion and increased user confidence.
First evaluation lopp with low-fidelity wireframes
Demo of the second evaluation loop with high-fidelity screens
Tasks
Visual Identity & Design System
The visual identity positions FOODAR as a modern, AR-driven retail experience. Logo, wordmark, color system, and gradient establish strong brand recognition, with the logo strategically embedded as a central AR entry point in the navigation. Moodboards informed a structured style guide defining color tokens, typography scales, layout principles, and reusable components. This system ensured visual consistency and enabled efficient iteration.
Various navigation bar variants
Brand design
Logo sketches
Moodboard images
Moodboard designs
Moodboard wording
Styleguide colors & typography
Components and screen layout
Components and screen layout
UI Design
The UI translates structural decisions into a clear, lightweight visual language optimized for decision-making in a retail context. A flat design language with consistent CI colors and gradients ensures clarity and brand recognition.
Usability insights informed key refinements: clearer AR access through onboarding, a persistent cancel icon for navigation control, contextualized sustainability scores, visible cost tracking during assisted shopping, and structured confirmation patterns in the payment flow.
Motion Design
Motion provides functional feedback, making state changes visible and supporting spatial orientation within AR navigation. The scaling side-menu reinforces structural logic, while payment confirmations provide reassurance. Transitions and subtle micro interactions guide scanning, navigation, and item management without disrupting flow.
[MOTION DESIGN VIDEO IN PROGRESS]
Final Concept
FOODAR’s Introduction screens onboard users by explaining the app’s structure and key functions, ensuring they can quickly access features without missing any capabilities.
The Inspiration section provides personalized recipes and food knowledge. It allows users to plan efficiently and create shopping lists from desired recipes.
AR Navigation and Scanning deliver a unique shopping experience by guiding users to products via in-store routing and presenting detailed, interactive product information in AR. Personal settings such as allergens and intolerances are highlighted directly on product cards alongside sustainability, ethical, and health-related information.
The Shopping Assistant provides structured in-store guidance, helping users manage lists, track costs, while also enabling direct use of AR features within the flow.
Finally, the Payment module allows stress-free, cashless checkout, completing the shopping experience without waiting in queues.
Conclusion
FOODAR shows how digital tools can support users in a complex retail environment by reducing cognitive load through clear structure, focused navigation, and personalized information like allergen and intolerance highlights. AR, the core of the concept, functions as an orientation and guidance system, delivering interactive product information directly in context.
A key insight was that AR only creates value when access and interaction logic are intuitive. Early iterative testing directly shaped design decisions to reduce uncertainty. The result is an interface that addresses both pragmatic and hedonic needs, with future potential in product comparison, real-time inventory, and AR-based translation features.
