A comprehensive design system and end-to-end product design project — from user research and accessibility audits to a scalable component library, high-fidelity prototypes, and a documented process for maintaining consistency at scale.
01 · Research & Trends
Before touching a single pixel, we spent six weeks studying what the best teams in the world were doing — and more importantly, why. Here's what actually mattered for a food delivery experience in Vietnam's market.
The European Accessibility Act and WCAG 2.2 have made compliance non-negotiable. But beyond compliance — designing for Bà Thu's low-vision needs or Minh's allergen anxiety makes the experience better for everyone.
Leading systems like IBM Carbon and Atlassian use tokens — named values for colour, spacing, and type — that work across platforms. We adopted 20–30 core tokens... not the 200+ that create decision paralysis.
Google's Material Expressive and Apple's Liquid Glass signal a shift toward interfaces that feel alive — depth, motion, and texture that respond to touch. We applied this to our product cards and delivery tracker.
In 2026, design is less about perfection and more about presence. We stripped away visual noise to let the food shine and the ordering flow feel effortless — especially on mobile in Saigon traffic.
Systems that adapt to behaviour — like Netflix's content model — are now expected. Our recommendation engine learns from order history and persona segments to surface what each user actually wants.
The W3C Web Sustainability Guidelines push for data-light patterns and efficient assets. Lighter pages load faster for Linh on a motorbike using 4G — sustainability and performance align perfectly.
02 · User Personas
These aren't demographic archetypes. They're portraits of real emotional states — built from user interviews, field research, and the UCDC framework. Because that's the only way to design something that actually works.
Linh Nguyen
22 · Student / Part-time barista · HCMC
Goals
Pain Points
Accessibility Dimension
"I just want to feel like I made a smart, cool choice."
Minh Tran
34 · Marketing Manager · Hanoi
Goals
Pain Points
Accessibility Dimension
"I need to trust this brand. If it lets my family down, I won't come back."
Bà Thu
58 · Retired teacher · Da Nang
Goals
Pain Points
Accessibility Dimension
"I want to feel welcome — not like a tourist in my own country."
03 · Wireframes
Low-fidelity wireframes built in Figma and validated with engineering and marketing partners. Every screen was stress-tested: would Linh get through it in 90 seconds? Could Minh find allergen info in one tap? Would Bà Thu feel lost?
Hero promo banner → personalised recommendations grid → bottom navigation. Designed for Linh's speed: featured items within thumb reach, clear visual hierarchy.
Cart items with large remove targets (48×48px) → promo code with clear error messaging → order summary → full-width CTA. Designed for error recovery: Linh's accidental deletions, Minh's promo code failures.
04 · Visual Style Guide
Every colour, type choice, and spacing value is intentional. The system is warm enough to feel inviting (especially for Bà Thu), clear enough to build trust (for Minh), and contemporary enough to feel aspirational (for Linh).
Following the 60-30-10 rule: 60% neutral cream (calm, warm canvas), 30% white surfaces (clean cards, forms), 10% Pizza Hut red (energy, CTAs). All combinations pass WCAG AA contrast minimums.
Brand Primary
Warm Neutrals
Surfaces
Semantic
Two typefaces, carefully paired. DM Serif Display for headings — warm, editorial, trustworthy. DM Sans for body — clean, legible, modern. Scale ratio: 1.25 (Major Third). Minimum 16px body to meet Minh's presbyopia needs; 18px+ preferred for Bà Thu's context.
All spacing follows multiples of 8px, with 4px for fine-tuning. Related items sit 8–16px apart. Sections breathe at 48–64px. This isn't arbitrary — it creates the unconscious rhythm that makes interfaces feel "right."
Original neutral shadows for structural depth, plus new warm-tinted red/terracotta shadows for CTA cards — creating a "glow" that feels inviting rather than heavy.
Neutral Shadows
✦ New: Warm Tinted Shadows — CTAs & Product Cards
Medium-rounded (8–16px) — modern and friendly for a consumer food app. Rounded enough to feel approachable, but not so playful it undermines trust.
05 · UI Components
Every component is designed for accessibility first, then refined for visual craft. Buttons and inputs share height scales. Touch targets meet 44×44px minimum (48px preferred). Focus indicators never suppressed.
Buttons
Form Inputs
E.g. BOGO2026 — case insensitive
⚠ Please enter a complete address with district
Tags & Status
Allergen Badges (Inline — No More PDF)
Product Card — ✦ Enhanced: "Break the Grid"
Food images now escape the card boundary — creating depth, abundance, and visual appetite appeal. The image overlaps the top edge, making food "pop" off the screen rather than sit constrained inside a box.
Before — Contained
✦ After — Break the Grid
06 · High-Fidelity Mockups
These prototypes were built in Figma and tested with 12 participants across all three persona segments using Maze for unmoderated testing and Hotjar for session recordings. Each round of feedback reshaped the design.
Chỉ áp dụng qua app · Kết thúc 15/03
AI-driven recommendations + inline allergen badges + clear promo hierarchy
Text-based status with ARIA-live updates every 2 min. No more map-only tracking.
Visual Style
Food images escape the card boundary and float upward — creating a sense of abundance. Paired with warm red-tinted shadows instead of flat grey ones. Hover the card.
Seafood Pesto
Family Box
Gà Giòn BBQ
Micro-interaction
When tapped, the button morphs to a green checkmark — instant confirmation that the action succeeded — then reshapes into a quantity counter. Eliminates "did I tap that?" anxiety for Linh and Minh.
Click the button to see it morph
Micro-interaction
Instead of a static progress bar, a tiny 2D scooter rolls along a road — and does a little "wheelie" when the status changes. Turns the anxious wait into something almost fun to watch.
Micro-interaction
When Minh applies an allergen filter, safe items briefly "pulse" with a green glow while unsafe items fade. Visual safety confirmation before he even reads the labels.
Contextual Personalisation
When the weather API says it's raining (very common in HCMC), the hero changes. "Order Now" becomes "Stuck in the rain? We've got you." Paired with a Rainy Day Bundle. Feels personal, not algorithmic.
Ưu đãi Mua 1 Tặng 1 chỉ qua app
Innovative Feature
One of the biggest pain points: ordering for a group means passing the phone around. Toggle on Group Order, get a QR code or link. Everyone adds their own items on their own device. Huge win for the Family Box.
Inclusive Feature
For Bà Thu, who struggles with jargon and Western food categories: a simplified image-heavy grid of the top 10 most popular items. No reading required. The digital version of pointing at the laminated menu at the counter.
"Each of these isn't just polish — they're answers to specific user anxieties. The morphing button is for Linh's 'did I tap that?' The scooter tracker is for the whole family asking 'where's the pizza?' The visual search is Bà Thu's laminated menu, digitised."
07 · Accessibility & Usability
We audited the entire app and website against WCAG 2.1 AA. Every finding was prioritised by user impact — safety-critical issues (allergens, error messaging) shipped first. Here's how the design system addresses each one.
Previously locked in an untagged PDF. Now surfaced inline on product cards with semantic HTML and ARIA labels. Minh can check allergens without a single extra tap.
Promo code failures were colour-only (red border). Now includes text message + icon + role="alert" with descriptive ARIA message. Never rely on colour alone.
Cart 'Remove' was 28×28px. System minimum is now 44×44px; priority actions (add/remove) are 48×48px. Bà Thu and Linh can tap with confidence.
Map-only tracker had no text alternative. Now includes live status text with aria-live="polite" updates every 2 minutes — reducing anxiety during the wait.
2px terracotta focus ring on all interactive elements. :focus-visible is never suppressed. Keyboard users are first-class citizens in this design system.
Body text: 7:1+ on cream backgrounds. CTAs: 4.5:1 minimum. All checked against bright sunlight conditions — because Linh orders on her motorbike in Ho Chi Minh City.
08 · Design Process
This wasn't a waterfall hand-off. It was iterative, research-anchored, and every major design decision was validated against the three personas before it moved forward.
09 · Design Decisions
A design decision log — the "why" behind the system, so developers, stakeholders, and future teammates don't have to reverse-engineer intent.
| Decision | Rationale | Human Impact |
|---|---|---|
| Inline allergen badges on product cards | Previously buried in an untagged PDF 3 taps deep. Surfacing inline removes an unsafe access barrier and reduces cognitive load. | Minh no longer has to hunt for safety-critical info while tired after work. His family stays safe, and he trusts the brand enough to come back. |
| Warm cream canvas (#FAF8F5) over pure white | Pure white on mobile screens in bright sunlight creates harsh glare. Warm cream reduces eye strain while maintaining high contrast ratios (7.2:1 with charcoal text). | Bà Thu can browse comfortably on her phone. Linh can read menus in direct sunlight on her motorbike without squinting. |
| 48px minimum touch targets on cart actions | WCAG requires 44px, but field testing showed users with motor limitations (Bà Thu) and distracted users (Linh mid-commute) needed more margin for error. | No more accidental deletions. No more "I can't tap the right thing." Confidence instead of frustration. |
| Text-based delivery tracker with ARIA-live | The map-only tracker failed screen reader users entirely and created anxiety for sighted users when the map froze. A text fallback with timed updates solves both. | Minh's kids stop asking "where's the pizza?" because the app tells them clearly. Visually impaired users get status for the first time. |
| Error messages: text + icon + ARIA role="alert" | Colour-only error states (red border on promo code field) were invisible to users with colour vision deficiencies and missed by distracted users. | When Linh's promo code fails, she knows exactly why and what to do — not just that something turned red somewhere. |
| DM Serif Display + DM Sans type pairing | Serif headings create warmth and editorial trust. Sans body provides clean legibility. Both typefaces have excellent Vietnamese diacritical support — critical for Bà Thu. | The typography feels welcoming and premium at the same time. Bà Thu reads comfortably in Vietnamese. Linh sees a brand that looks modern and worth sharing. |
| ✦ Red-tinted shadows on CTA cards | Grey shadows on warm cream surfaces create a "dirty" appearance. Red-tinted shadows create a warm glow that feels cohesive with the brand palette and reinforces depth without visual conflict. | Product cards feel appetising and alive. The food looks like it's glowing, not just sitting on a surface. Particularly effective for Linh's "shareable food" motivation. |
| ✦ Break-the-grid product images | Constrained images inside rigid boxes make food look flat. Overflowing the card boundary creates a sense of abundance and breaks the grid just enough to be interesting without being chaotic. | Linh is more likely to screenshot and share. Bà Thu's eye is drawn to the visual first — reducing reliance on text-based navigation. |
"Accessibility isn't a compliance checklist — it's a design quality indicator. Every accessibility failure we found was also a UX failure for someone."
10 · Launch Timeline & Governance
The design system is a living product — not a one-time deliverable. Here's the 6-month roadmap for rollout, with Figma as the single source of truth and a lightweight governance process to keep things moving.
The system stays healthy because it has clear ownership, fast feedback loops, and usage-driven development. Every component has an owner. Changes are reflected in products within hours, not weeks.
All design tokens, components, and patterns live in a shared Figma library with auto-layout and variant states. Developers reference Figma specs directly — no ambiguity.
Every component has a named owner who can make decisions quickly. Contribution process is lightweight: propose → review → merge. Public changelog so teams trust updates.
Figma (design + handoff) · FigJam (workshops) · Maze (unmoderated testing) · Hotjar (session recordings) · axe DevTools (accessibility auditing) · Storybook (component docs for developers).
Teams adopt the system gradually without breaking existing products. New screens use system components; legacy screens migrate on a priority queue based on traffic and user impact.
Reflection
"The moment you start designing for Bà Thu's vision needs or Minh's allergen anxiety, you make the experience better for everyone. That's not a nice-to-have. That's a core design principle."
The 15% sales lift was the headline number — but the work that mattered most was making the experience genuinely inclusive. Making sure Bà Thu felt welcome. Making sure Minh could trust the allergen info. Making sure Linh could recover from a mis-tap without losing her mind.
If I were doing it again, I'd push for richer longitudinal research from the start — particularly around how the experience of delivery anxiety (the wait) could be genuinely redesigned, not just tracked.