Traditional recipe platforms are cluttered with ads and lack inspiring cultural exploration or reliable dietary filtering.
A culinary discovery platform combining interactive geographic map exploration with an accessible structured grid, instant dietary filters, and automated grocery list aggregation.
Designed an accessible discovery experience audited against WCAG 2.2 AA guidelines with keyboard and screen reader fallbacks.
Project Overview & Context
Global Recipes connects food lovers with authentic global cuisines through interactive geographical navigation and structured dietary filters.
Map interaction design, accessible alternative navigation grid, recipe detail layout, unit conversion logic, and dietary taxonomy.
The Problem & Core Friction
Home cooks exploring international cuisines and individuals with specific dietary constraints.
Users struggle to discover authentic regional dishes without sifting through long introductory blog posts and ad popups.
Standard recipe search relies solely on rigid text queries rather than intuitive cultural or geographic exploration.
Leads to repetitive meal planning and frustration when trying to filter out allergen ingredients.
Research Methodology & Discovery
Explore visual recipe discovery patterns and accessibility requirements for map-based interfaces.
Secondary UX research, accessibility audit, and competitive culinary platform review.
Concept project based on secondary UX research & web accessibility benchmarks.
Primary usability interviews were not conducted; project is framed as a UX concept & accessibility research blueprint.
How do users browse for new meal ideas when they don't know exact dish names?
What accessibility barriers do map-only interfaces present for keyboard or screen reader users?
How do cooks handle ingredient unit conversions (Metric vs Imperial)?
Evidence Synthesis & Key Findings
01. Regional Curiosity in Meal Discovery
Users frequently express interest in cooking by country or continent but lack visual tools to do so.
Build an interactive world map highlighting authentic regional dishes.
02. Accessibility Gap in Map Interfaces
Map-only web elements exclude users who rely on screen readers or keyboard navigation.
Provide a 1-tap accessible structured grid alternative that mirror all map pin data.
03. Dietary Filter Confidence
Users with severe allergies need clear visual warnings before opening detailed recipe pages.
Incorporate prominent allergen indicators (Gluten-Free, Vegan, Nut-Free) on all recipe cards.
User Flow & Decision Architecture
Discover an international dish, scale ingredient quantities, and generate a grocery shopping list.
Interactive World Map / Accessible Country Grid.
Ingredients exported to dynamic grocery checklist.
Design Decisions & Interface Solutions
Dual Discovery Mode (Map + Accessible Grid)
Visual maps provide delight, but structured grids guarantee accessibility compliance.
Offered a seamless toggle between interactive geographic map pins and accessible semantic card grids.
Dynamic Unit & Serving Converter
Cooks get confused when translating recipes from international measuring systems.
Added real-time Metric/Imperial unit scaling directly inside the ingredients checklist.
High-Fidelity Interface Showcase
Usability Validation & Iteration
Accessibility Audit Protocol (WCAG 2.2 AA Checklist)
Concept blueprint audited against WCAG 2.2 AA standards (keyboard navigation and ARIA live announcements verified).
Map pin hover states were unannounced by screen reader tools in early draft.
Added semantic ARIA live regions and aria-describedby labels for all geographic recipe nodes.
Outcome, Learnings & Next Steps
Proved how visual, map-based product discovery can align with web accessibility standards. Concept project with no live analytics.
Designing accessibility fallbacks upfront enhances usability for all users, not just those with assistive technologies.
Test automated meal planning calendar integrations.
