Menu — 01 / 04 Work About Process Contact Start a project
Food & Delivery Mobile App E-Commerce Canada · 2024

Food Cafe — designing a seamless mobile food ordering experience

End-to-end UX for a Canadian food delivery app. The goal was to simplify browsing, customisation and checkout while building a scalable design system for the product team.

Project Type
E-Commerce Mobile App
My Role
UX Researcher, UI Designer
Timeline
2024 · Canada
Tools
Figma, FigJam, Maze
Food Cafe mobile app on desk

Overview

A seamless ordering experience, built from research up

Food Cafe is a mobile food ordering application designed for a Canadian client in 2024. The objective was to create a seamless ordering experience that allows users to discover restaurants, customise meals and complete orders with minimal effort — while maintaining a clean, engaging interface that reflects the brand's personality.

The project covered the full UX spectrum: from initial discovery and competitor research through to a production-ready design system and high-fidelity UI.

Who it's for

01

Busy professionals ordering during work hours who need speed above everything else.

02

Students looking for affordable, quick meals without friction or decision fatigue.

03

Families placing group orders who need clear customisation and a predictable checkout.

Problem

Ordering should feel quick — but it didn't

Many food delivery apps offer a wide range of features, but the ordering experience often feels overwhelming. Users spent unnecessary time browsing menus, searching for items and completing checkout. These friction points led to frustration and abandoned orders.

01

Cognitive overload — too many options and competing UI elements slowed every decision.

02

Excessive customisation steps that broke the ordering flow instead of enhancing it.

03

An unclear checkout process that eroded trust and caused drop-offs at the payment step.

Research findings

Before moving into design, I reviewed competitor products, analysed existing ordering patterns and interviewed users. The research surfaced five consistent insights that shaped every subsequent decision:

Users expect to find their desired meal within a few taps — depth of menu is irrelevant if discovery is slow.
Too many customisation options at once slow decision-making significantly — progressive disclosure is key.
A clear, predictable checkout builds trust and directly reduces payment abandonment.
Personalised recommendations are appreciated when they stay subtle — aggressive surfacing feels intrusive.
Order status should always be visible without requiring extra navigation — uncertainty drives support contacts.

Process

Discovery to high-fidelity in a structured sprint

01 — Research

Competitor audit & user interviews

Reviewed five leading food delivery apps and ran interviews with twelve users across the three target segments to map their mental models and pain points.

02 — Define

Information architecture & user flows

Synthesised research into clear information architecture and user flows for the three core journeys: browse, order and track.

03 — Design

Wireframes → design system → high-fidelity

Lo-fi wireframes validated the structure before building a component-based design system. High-fidelity screens were produced screen by screen in Figma.

04 — Validate

Prototype testing & iteration

Interactive prototypes were tested with real users via Maze. Two rounds of iteration refined the checkout flow and the item customisation screen specifically.

My responsibilities

UX research and competitor analysis
User flow creation and information architecture
Low-fidelity wireframes
UI design and interactive prototyping
Design system creation and documentation
Design validation and iterative refinement

Solution

Five principles guided every screen

01

Simplified navigation for fast discovery

Menu categories are surfaced immediately with clear visual hierarchy. A persistent search bar and smart category chips let users reach any item in two taps.

02

Progressive customisation, not a wall of options

Item customisation is broken into logical steps — base choice, extras, special notes — so users make one decision at a time without feeling overwhelmed.

03

Streamlined cart and one-step checkout

Cart review, payment selection and order confirmation fit on a single scrollable screen. Saved payment methods and addresses remove re-entry friction for returning users.

UI Design

Three core flows — home/discovery, item detail and cart/checkout — designed to work as a seamless sequence rather than three separate screens.

Food Cafe home screen UI design

Visual Design

The visual design system brings together colour psychology, typography, spacing and imagery with a clear visual hierarchy. Every interaction was designed to reduce unnecessary decisions and keep the user focused on completing their order.

Food Cafe visual design overview with annotations

Design System

A scalable, component-based design system ensures every screen stays consistent and future iterations ship faster. Built around reusable tokens covering colour, typography, spacing, elevation and interaction states.

Food Cafe complete design system — all screens

Result

Outcomes & what the work delivered

0Reduction in task-completion time observed in usability testing
0Average satisfaction score across tested user sessions
0Design goals met — delivered on time, client signed off first review

What the final product delivered

A simplified ordering journey that reduced steps between landing and confirming an order.
Improved navigation and content organisation so users reach any item in under three taps.
Reduced friction at checkout through saved methods, clear totals and a single confirmation screen.
A consistent visual language across every screen via a scalable design system.
A modern, brand-aligned interface the client's development team could build directly from.

Future improvements

The current solution meets all core project objectives. Several opportunities remain for future iterations as the product grows:

01AI-powered food recommendations based on order history
02Loyalty rewards and personalised promotional offers
03Real-time courier tracking with live map updates
04Saved favourites and one-tap reordering
05Dark mode and full accessibility improvements
06Multi-language support for a wider audience
07In-app customer reviews and restaurant ratings
08Group ordering with split-payment support
Back to selected work Explore more projects

Got a product that needs clarity?

Let's make the next version the right one.

I take on a small number of projects at a time, so every one gets full attention. Tell me what you're building.