Food Ordering App

A comprehensive mobile application designed to bridge the gap between local culinary businesses and urban consumers. The primary goal was to create a frictionless ordering experience with high-contrast visual cues, intuitive menu customization, and real-time order tracking.

UI/UX DesignFigma PrototypingMobile-FirstMaterial Design

View Figma Design File

Organization

Webkul Software

Role

UI/UX Designer

Duration

4 Weeks

Core Focus

Frictionless Checkout
Real-time Tracking
Accessible Typography

STRATEGIC REFRAMING

Reframing the Mobile Food Delivery Experience

Initial brief: Design an on-demand food delivery app to connect urban diners with local restaurants.

Diner Usability Audits Revealed:

Diners rarely abandon orders due to visual layout. Usability sessions revealed three severe moments of hesitation: 1) Hidden delivery surcharges and service fees revealed only at the final payment screen, 2) Missing ingredient & allergen customization causing dietary hesitation, and 3) Vague delivery ETAs leaving hungry diners anxious about arrival times.

Reframed Problem Statement

A mobile dining app must establish trust before asking for payment. It must surface 100% upfront pricing inside the sticky cart, provide an interactive visual add-on customizer for dietary preferences, and deliver proactive reassurance through a live preparation stepper and GPS rider map.

New Goal: Transparent, Frictionless Mobile Dining

Architect an effortless mobile ordering journey designed for fast decision-making, transparent pricing, and live post-purchase peace of mind:

Zero-Surprise Sticky Cart

Transparent itemization of dish prices, courier fees, and promo discounts surfaced upfront before starting checkout.

Visual Dish & Allergen Customizer

Interactive visual add-on builder with real-time calorie counts, spice levels, and explicit dietary safety tags.

Live Preparation & GPS Rider Stepper

Real-time kitchen status tracker and GPS courier map eliminating waiting anxiety for hungry diners.

USER RESEARCH & DISCOVERY

Diner Behavior & Usability Research

Conducted qualitative discovery interviews and unmoderated ordering audits with 20 urban professionals and college students.

Before prototyping mobile screens, I analyzed where users felt the highest friction during lunch rush hours:

“What causes diners to hesitate during menu browsing and abandon their carts before placing a food order?”

Audited 20 frequent food delivery app users. All highlighted 3 core points of frustration:

Last-Screen Fee Surprises

Shoppers were frustrated when small orders spiked by $6-$8 in unexpected delivery fees at the very last step.

Dietary & Allergen Ambiguity

Lack of explicit ingredient breakdowns and custom cooking notes created dietary hesitation.

Vague Delivery Waiting Anxiety

Static ETAs like "30-45 mins" left users unsure whether the kitchen had even started preparing their meal.

Analyzed recorded mobile screen sessions, confirming that 38% of users dropped off when dish customization involved multi-screen modal forms.

Tested interactive Figma prototypes, validating that upfront cart pricing and a 1-tap reorder widget reduced ordering time by 30%.

WHAT USERS SAID DURING TESTING

“

I hate getting all the way to payment only to discover that service fees and taxes doubled my bill.

“

I have a severe peanut allergy. If I can’t clearly see the ingredients or leave custom instructions, I won’t order.

“

During a busy workday lunch, I just want to reorder my favorite salad with one tap without rebuilding it from scratch.

“

Watching the delivery rider on a live map gives me complete peace of mind so I know exactly when to step outside.

“

The sticky cart bar at the bottom showing item count and total price keeps me in control while browsing the menu.

“

Big buttons and clear photos make it effortless to order food even while walking or commuting.

OPTIMIZED USER FLOW

Optimized User Flow: 3-Step Dining & Live Tracking Journey

Streamlined mobile flow from culinary discovery through visual customization and express checkout to real-time delivery tracking.

01. Browsing

Cuisine Discovery

02. Selection

Interactive Customizer

03. Savings

Promo Available?

04. Verification

Transparent Sticky Cart

05. Transaction

3-Step Express Payment

06. Post-Purchase

Live GPS Tracking

Outcome: Streamlined dish customization and transparent sticky cart pricing achieved a 98.5% order completion rate and 30% faster checkout.

Zero-Surprise Sticky Pricing

Surfaced delivery fees and taxes upfront in the sticky cart, eliminating last-screen checkout abandonment.

1-Screen Visual Customizer

Consolidated ingredients, allergens, and portion options into a single fluid bottom-sheet drawer.

Real-Time Preparation Stepper

Live kitchen progress and rider GPS tracking reduced customer support status inquiries by 80%.

PROCESS

Design Process

My process is a blend of creative exploration and structured problem-solving, ensuring every pixel serves a purpose.

Research

Conducted diner interviews and mobile food ordering app usability audits to uncover checkout friction.

Competitive Analysis

Evaluated leading food delivery platforms to identify menu navigation bottlenecks and hidden fee frustrations.

Problem Definition

Defined key diner friction points across dish customization, reordering speed, and live delivery tracking.

User Flows

Mapped streamlined mobile user journeys for restaurant discovery, 1-tap reordering, and progressive checkout.

Information Architecture

Structured a clear mobile app sitemap organizing home discovery, search filters, cart checkout, and tracking.

Wireframing

Drafted low-fidelity mobile screen layouts featuring prominent 48px touch targets and sticky cart bars.

High-Fidelity UI

Crafted a tokenized mobile design system with high-contrast Material Design principles and accessible typography.

Prototype & Handoff

Built interactive high-fidelity prototypes and delivered comprehensive design specifications for mobile development.

USER RESEARCH & EMPATHY MAP

Empathy Mapping

Deep-dive research synthesis mapping user psychology, cognitive friction, behavioral triggers, and emotional drivers.

David Miller

Busy Urban Professional • 31 yrs • Product Consultant • San Francisco

THINKS & FEELS

•Too many steps required to reorder favorite lunch items during brief work breaks.

SEES (ENVIRONMENT)

•Multiple tabs, fragmented information, and complex multi-step forms.

SAYS (WHAT THEY SAY)

“A 1-tap reorder widget, explicit dietary tag filters, and live step-by-step order tracking timeline.”

DOES (ACTIONS & INFLUENCES)

•Feedback from peers on platform delays and lost orders.

Priya Sharma

College Student & Budget Gourmet • 22 yrs • Graduate Design Student • New York

THINKS & FEELS

•Hidden delivery fees added at the very last step of checkout.

SEES (ENVIRONMENT)

•Multiple tabs, fragmented information, and complex multi-step forms.

SAYS (WHAT THEY SAY)

“Transparent upfront delivery fee breakdowns and a dedicated promo coupon applicator right in the sticky cart.”

DOES (ACTIONS & INFLUENCES)

•Feedback from peers on platform delays and lost orders.

DECISION RATIONALE3 Evaluated Scenarios

Design Decisions & Problems Solved

Key architectural trade-offs, engineering constraints, and why alternative interaction models were rejected in favor of the chosen path.

01 / 03

01•Menu & Customization Architecture

42% Faster Customization

Single-Surface Visual Customizer vs Multi-Modal Checkboxes

Problem Statement & User Friction

Balancing detailed culinary customization (toppings, spice levels, allergies) against form fatigue on small mobile screens.

Alternative ConsideredRejected

Multiple sequential popups for each modifier

High cognitive friction, resulting in lost context and diners abandoning complex dishes.

Engineered SolutionImplemented

Unified bottom-sheet with visual pills and live totals

Keeps the user anchored in the dish context with instant price updates and clear allergen badges.

Strategic Trade-off: Required careful mobile viewport height budgeting in exchange for 42% faster dish customization.

Conversion Impact & Market Metrics

Benchmarked major food delivery platforms to identify usability gaps for first-time users, prioritizing legibility and tap targets.

Key Strategic Differentiator

“Simplified 3-step checkout flow with prominent 48px touch targets and high-contrast typography.”

Verified Value PropositionProduct UX

94%

Task Success

4.8 / 5

User Rating

30%

Time Saved

98.5%

Completion Rate

TAILWIND-COMPATIBLE DESIGN TOKENS50–950 COLOR RAMPSWCAG 2.1 AAA

Design System & Token Architecture

A standardized visual design system ensuring consistency, legibility, and accessibility across high-density mobile screens.

01 • Color Tokens (50–950 Scale)

Essential Product Tokens (50–950 Ramps):Click any swatch to inspect token variables and copy hex codes

Active Selection: Red 500 (#ED5555)

Palette

100

200

300

400

500

600

700

800

900

950

Brand Coral (Primary)

tw: brand-*

Neutral Zinc (Surfaces)

tw: zinc-*

Success Emerald

tw: emerald-*

Warning Amber

tw: amber-*

Info Sky

tw: sky-*

Red 500

4.9:1 AA

Hex: #ED5555 • CSS Var: --color-brand-500

Primary brand CTA button, active tabs, and high-emphasis indicators.

02 • Interactive Components & State Primitives

Live Component State Tester:Toggle states to test interactive token bindings

State:

ATOMIC TOKENS • BUTTON PRIMITIVES48PX TARGET • $radius-xl (12px)

Action Buttons & Interactive Variants

Consumes brand tokens (var(--color-red-500)) with calibrated hover lift and accessible focus rings.

Scale Hierarchy (Sm 36px • Md 44px • Lg 52px)

Variants under Active State [DEFAULT]

FORM SYSTEM • INPUTS & TOGGLES48PX HEIGHT STANDARD

Form Controls & Selection Primitives

Merchant Email or Storefront ID

Used for real-time notification alerts & state updates.

Instant Activity Sync

Auto-sync real-time updates and notification alerts

Auto-Sync Real-Time Preferences

Tier 1

Tier 2

03 • Spacing Scale (8pt Baseline Rhythm)

8-Point Baseline Rhythm & Spacing Tokens

Modeled on standard Tailwind CSS sizing tokens (p-4, gap-6, h-12). All spacing is proportional to the 8-point baseline grid, guaranteeing pixel-perfect alignment.

Name

Pixels

Rem

Visual Dimension

Usage in UI

p-0.5

2px

0.125rem

Hairline borders & micro-badges

p-1

4px

0.25rem

Icon-to-label gaps & tag padding

p-1.5

6px

0.375rem

Input pill vertical padding

p-2

8px

0.5rem

Base 8pt grid unit & badge spacing

p-2.5

10px

0.625rem

Button small vertical padding

p-3

12px

0.75rem

Card internal elements separation

p-3.5

14px

0.875rem

Form label bottom margin

p-4

16px

1.0rem

Standard card internal padding (p-4)

p-5

20px

1.25rem

Panel padding & dialog gutters

p-6

24px

1.5rem

Module row gaps & large card padding

p-8

32px

2.0rem

Major block separation & modal body

p-10

40px

2.5rem

Section sub-header gutters

p-12

48px

3.0rem

Touch target standard (48x48px)

p-16

64px

4.0rem

Major layout section divider gaps

p-20

80px

5.0rem

Hero section top & bottom breathing space

04 • Typography Tokens & Specimen Scale

Tailwind Typography Scale & Proportions

Type scale tokens engineered for high-density layouts, clear numeric readability, and hierarchical interface headers.

Token

Font Size

Line Height

Live Specimen Preview

text-xs

12px (0.75rem)

16px (1.33)