MenuSafe

PROJECT

DURATION

Feb 2025-present

ROLE

Lead Product Designer

TOOL

Figma

TEAM

1 Product Manager

1 Product Designer

4 Developers

Overview

About MenuSafe

MenuSafe is a mobile consumer-tech solution designed to take the anxiety out of dining out for individuals with food allergies and intolerances. The platform leverages AI-driven menu analysis, and provides real-time, person-specific safety guidance for every item on a restaurant menu.

My role

As the primary designer for MenuSafe, I led the end-to-end product strategy and interface design, focusing on translating complex AI processing into a high-trust, human-centered experience. My responsibilities spanned from initial research to high-fidelity prototyping and system logic definition.

Problem

For people with allergies, a restaurant menu brings anxiety, not excitement. The normal process of dining requires an element of risk where the diner must remember everything, inquire thoroughly from the staff, and ensure that there were no mistakes in the preparation process. No existing tool solved this problem effectively — which is why MenuSafe exists.

Goal

The ultimate goal of MenuSafe is to turn the highly stressful act of dining as someone who suffers from allergies into an efficient and informed procedure, based on the following objectives:

Boosting User Confidence: Offer color-coded safety information about each menu item in order to eliminate "ordering anxiety" and unintended allergen ingestion.
Allowing for Multi-User Security: Letting groups use their respective dietary profiles at once to ensure that none of the participants' limitations goes unnoticed during their shared dining time
Removing Barriers to Effective Conversation: Offering precise modifications proposals suggested by AI
Increasing Efficiency: By reducing any friction caused by the scanning process and letting users carry out important actions, such as tagging the restaurant, during the menu data processing.
Ensuring Information Continuity: Allowing users to take advantage of their previously done scans by offering the possibility of running old menus against newly created profile combinations.
Transparency of Logic: To build trust, the app distinguishes between ingredients explicitly listed on the menu and those inferred by AI based on the dish name and description.

Research

Insights & Analysis

Food allergy management involves heightened awareness and decision-making weariness. It is estimated that up to 31% of adults and 13% of children experience food allergies when eating at restaurants.

Speed at the Table

Diners don't want to spend 5 minutes configuring profiles while sitting with friends. Onboarding must be completed in under 60 seconds with instant dietary preset selections.

High-Contrast Urgency

In dimly lit restaurant environments, subtle visual cues fail. Allergen warnings require high-contrast visual hierarchy (red/amber flags) with explicit AI breakdowns to prevent accidental ingestion.

Camera-First Interaction

The web MVP required manual text entry. Research showed users preferred a camera-first OCR (Optical Character Recognition) workflow where they simply point their camera at a menu page.

Competitive Analysis

We evaluated the primary tools currently used by the community to identify gaps in the "dining out" user journey.

The MenuSafe Advantage

MenuSafe bridges the gap between discovery and real-time verification:

Physical Menu Scanning: Unlike Fig or Spokin, MenuSafe uses OCR and AI to analyze the physical menu in front of you, not just a database of "known" items.
Multi-Profile Interaction: While Fig allows multiple profiles, MenuSafe’s UI is built specifically for a "Table View," attributing safety results to specific people (e.g., "Safe for Mom, Avoid for Sophie") in a single scan.
AI-Inferred Logic: MenuSafe provides transparency by labeling whether a result is from listed ingredients or inferred by AI, a layer of safety reasoning missing from competitors.

User Personas

To better understand how MenuSafe serves its users, I have developed three distinct personas based on the target audience breakdown. These personas represent the core users who rely on the app to navigate the complexities of dining out safely.

Ideation

The Solution: AI-Powered Safety Results

MenuSafe was created to empower users to dine with confidence by digitizing and analyzing menus through a simple camera scan.

Multi-Profile Analysis: Users can select multiple saved profiles to see how a menu affects everyone at the table at once.
Intelligent Categorization: The app automatically sorts dishes into four clear states: Safe, Modify, or Avoid.
Granular Attribution: Every result specifies exactly who is affected and which allergen was detected (e.g., "Contains peanuts, Sophie").
Efficiency: The processing happens in the background while the user tags their location, ensuring the flow of the meal isn't interrupted by technical delays.

Why It Matters

Apart from being a tool for detection, Menusafe helps facilitate communication. Users get recommendations on how to modify the food and reminders on verifying items with the help of staff members, thus making the hazardous guesswork into a more effective form of dialogue. The app’s history tracking feature enables its users to return to their favorite places and run their menus again against different profiles.

User Journey Map

User Journey Map: Onboarding → Core Scan Flow

The user flow of MenuSafe is designed to integrate seamlessly into the dining experience, transforming a physical menu into a personalized safety report in four main stages.

Design Evolution

This section showcases the some of the foundational user interface designs for MenuSafe as conceived in February-April 2025. These early iterations were critical for establishing core user flows and validating the initial feature set. Since this stage, the product has undergone significant strategic pivots regarding its visual identity, platform, and scope.

Lighting & Schema

The early designs utilized a strict Light Mode schema with bright backgrounds and high-contrast black text. Through user research and data analysis, I identified that users often prefer dark UI.

Feature Simplification

The conceptual UI demonstrates an ambitious feature list. Following our analysis of the MVP and primary user needs, I alongside the MenuSafe team, lessened the features to focus solely on the most critical user pain points. By stripping away non-essential elements seen in the initial design, we executed of the core functionality, resulting in the more streamlined and intuitive user experience in the final iterations.

Platform Strategy (Web App to Native Live)

These Feb 2025 designs were primarily optimized for a web application experience. A fundamental pivot was made to transition MenuSafe into a true native mobile experience. The current iteration was rebuilt and launched as a live app, now downloadable directly from both the Apple App Store and the Google Play Store, enabling crucial device-specific integrations (like optimized camera scanning) and seamless performance.

Evolution of Design

Despite the emphasis on accurate implementation in the MenuSafe case study, the design methodology itself is underpinned by a logic-first approach for resolving information architecture problems.

Instead of conventional wireframes with low fidelity, the architectural basis of the application was created based on the Core User Flow, taking into account the processing of large amounts of data, such as allergen test results, without overburdening the user when eating.

Information Hierarchy over Aesthetics

The primary goal was ensuring the "Safety State" (Safe, Modify, Avoid) was the most prominent element on the screen, allowing for a "glanceable" experience in low-light restaurant environments.

Managing Wait-Time Anxiety

A key structural decision was placing the Restaurant Identity tagging screen immediately after the camera scan. This "productive wait time" ensures the AI analysis happens in the background while the user is already engaged in a task, creating a perceived instantaneous result.

The "Table View" Layout

Traditional allergy apps focus on a single user. MenuSafe’s architecture was designed to handle multi-profile selection, requiring a layout that could clearly attribute different allergens to different people (e.g., "Contains peanuts, Sophie") within a single result card.

Note on Process: By moving directly into high-fidelity prototyping, I was able to test the effectiveness of color-coding and iconography, elements that are essential to the app's safety utility and cannot be fully validated in grayscale wireframes.

Iteration

Throughout the development of MenuSafe, each key user flow underwent rigorous visual and structural iterations to transform complex data into an effortless mobile experience. By directly contrasting early exploratory wireframes with the finalized, production-ready interfaces, this section charts how I systematically dismantled usability friction across the entire application. From flattening information hierarchies and introducing gesture-driven shortcuts to optimizing real estate for multi-user scalability, these iterative design phases showcase a commitment to reducing cognitive load and elevating user trust at every critical touchpoint.

Onboarding Evolution: Optimizing Profile Creation

In our initial onboarding concept, users selected from a set of predefined vector avatars to distinguish individual profiles. However, as we scaled the multi-user testing flows, we realized that relying strictly on static icons caused visual strain and hampered instant recognition especially in fast-paced dining environments.

To improve scannability, we iterated on the profile architecture to support custom image uploads, enabling immediate, high-fidelity recognition. For users opting out of a photo upload, the system dynamically generates a high-contrast placeholder utilizing the first letter of their nickname layered over an automated, distinct background color. This hybrid approach ensures a highly accessible, personalized interface that maintains clear visual hierarchy even when managing large dining parties.

This fundamental shift in onboarding logic directly influenced the core application interface moving forward. To maintain visual consistency, we systematically overhauled the internal platform UI, updating profile indicators across the entire experience. By translating these personalized, color-coded letter tokens and custom images into the horizontal avatar rows on the results page, we significantly optimized screen real estate, streamlined multi-user menu scans, and established a cohesive, highly scannable design system across the entire application flow.

Homepage Alignment: Extending the Identity System

With the new dynamic avatar logic established, we extended this updated visual language to the application's homepage. We replaced the legacy preset icon tokens with the new personalized profile components to ensure cross-platform consistency. Alongside this systemic update, we made minor UI refinements to the dashboard layout optimizing whitespace, tightening typography, and sharpening card boundaries to elevate the overall visual polish and create a seamless transition into the post-scan experience.

Scan & Post-Scan Evolution: Consolidating Selection & Analysis

Migrating the dynamic avatar system into the core scanning flow allowed us to completely
re-architect how users manage group dynamics. In earlier concepts, profile selection, risk alerts, and menu viewing were fragmented across a multi-step, text-heavy dashboard that generated severe friction. In the final version, we flattened the information hierarchy by merging individual profile tokens directly into a unified menu results view. This unified layout allows users to quickly toggle between diners via a horizontal avatar row, instantly filtering a clean, standardized list of menu items into safe, modifiable, or restricted states without changing screens.

Breakdown of Enhancements: UX Audit & Comparative Analysis

To clearly measure the progression from our early validation concepts to the refined product layout, I conducted a comparative UX audit across our post-scan flow. This matrix breaks down the design decisions by core interface components, tracking the technical changes and the structural UX rationale behind them. By directly contrasting these versions, this chart illustrates how targeted layout optimization systematically resolved layout friction, reclaimed valuable screen estate, and accelerated the overall path to safe ordering.

Brand Identity

Developing the visual system for MenuSafe required balancing modern aesthetic appeal with clear health-tech semiotics.

The Color Palette: The team’s initial preference was a traditional green palette. However, we opted for a targeted teal blue to deliberately align with established allergy and advocacy branding, reinforcing an immediate psychological sense of safety and specialized care.

Logo Evolution: Beginning with a preliminary design sketch provided by the team, I developed and refined three distinct identity directions. This iterative exploration allowed us to test form, scalability, and impact, ultimately landing on the third logo option as the definitive brand mark.

Finalized Logo & Submark

Brand Guidelines

To support tthe team's growth, I created a comprehensive brand guidelines deck defining core visual standards. This established a precise visual identity, including our custom logomark structure, the primary teal and neutral color palettes, safety signal color coding, and Nunito Sans typographic hierarchy. This resource brought clarity to our design system, making it easier for the team to maintain a consistent look and feel across all product surfaces.

Design Callouts

Streamlining Complex Data Input

The onboarding journey seeks to turn a dense list of dietary sensitivities into a seamless choice-making process. Using the segmented control to categorize allergies from intolerances, along with tags that allow people to choose which restrictions they have, enables the user to create their profile quickly and efficiently. Visual cues in the form of colors and icons on each tag help show whether or not each restriction has been selected, providing instant feedback that will form the basis of the app’s safety algorithm. Account owners have the option to skip this step but cannot skip when adding optional additional user profiles later in onboarding.

Orchestrating Information Hierarchy

The interface is organized on the basis of hierarchical information structure focused on the fast safety verification process. With the help of visual hierarchy, the design ensures that the high-signaling safety icons occupy the focus point of the interface and that the secondary management tools are hidden inside contextual menus.

Dynamic Allergen Attribution & Collective Risk Assessment

MenuSafe aggregates risk across the entire party, providing a "Everyone" summary for universal dining options. Individual "Profile Alerts" deconstruct results into per-person individual profile sorting. This flags risks upfront, before users even start browsing the menu.

Complete User Flows

Sign Up

Menu Scan

Scan History

Settings

Web Experience — Designer’s Cut

A look at the uncompromised digital vision for MenuSafe. Designed to highlight how the core brand values, mission, and interactive safety tools scale effortlessly from wide monitors down to hand-held devices.

Post-MVP Iterations

Following the initial native launch, user feedback indicated that scanning long lists of mixed items created friction. To address this, we rapidly iterated on the core experience by introducing menu categorization:

We built a dynamic categorization system that automatically adapts to how individual restaurants display their dishes.
The system standardizes categorization for menus that do not explicitly show dish categories, ensuring a consistent browsing experience.
Users can easily jump between course types like appetizers, entrees, desserts, and drinks while keeping their active dietary filters applied, which reduces cognitive load and accelerates the path from restaurant discovery to safe ordering.

App Store & Google Play Previews

With feedback and insight from the MenuSafe team I crafted the App Store and Google Play Store preview images.

Results & Impact

Since launch, MenuSafe has continued to evolve based on real user behavior and technical performance data.

Faster AI Analysis
Menu scan analysis time dropped from 115 seconds to under 20 seconds by pre-populating the AI model with common, popular dishes found across menus — giving it a faster reference point instead of analyzing every item from scratch.

User Testing Uncovered Real Friction
Hands-on testing with real users surfaced issues invisible in design review alone — including analysis speed, camera framing during scans, and image rendering problems caused by cropping when a photo was snapped. Each of these directly shaped follow-up iterations to the scan flow.

Team & Stakeholder Confidence
The MenuSafe team and stakeholders have responded positively to the native launch and the results the app has delivered.

Next Steps

As MenuSafe transitions from its successful native launch to its next major release cycle, our focus remains on deepening user utility, personalization, and community connection. The next planned iterations for the platform include :

In-App Community Forums
Dining with severe allergies or dietary restrictions can feel isolating. We are building a social layer directly into the platform to foster peer-to-peer support.

Integrated Location & GPS Services (Google APIs)
To turn MenuSafe into an end-to-end dining companion, we are integrating native mapping functionality.

Smart Restaurant Discovery: Utilizing Google Maps and Places APIs, users will be able to search for nearby restaurants directly within the app.

Intelligent Appearance Customization
While our pivot to a dark UI schema solved the immediate issue of low-light readability in restaurants, we recognize that user preference is highly personal.

Native Device Mode Matching: We will implement system-level theme detection to automatically match the user’s native OS settings (Light or Dark mode).
Manual Light Mode Toggle: We plan to introduce an optional, optimized Light Mode toggle within the app settings for users who prefer higher contrast in bright environments.