Case Study 01 · E-Commerce · UX & Accessibility
A research-first redesign of Pizza Hut Vietnam's digital ordering experience — built from real personas, emotional journey mapping, and a rigorous accessibility audit.
+15%
Sales Lift
3
Inclusive Personas Built
12
Accessibility Issues Found
96%
User Satisfaction (Protected)
The Problem
When I joined Pizza Hut Vietnam, the headline metric looked great. But dig a little deeper and you'd find frustration quietly eroding the experience for entire segments of their customer base — a student with ADHD struggling to recover from a mis-tap, a father who couldn't find allergen info for his wife's dietary restriction, a grandmother whose grandkids had introduced her to the app but who found it culturally alienating.
The brief was simple: optimize the digital ordering flow. But the real brief — the one that mattered — was this: design an experience that actually sees every Vietnamese customer.
"I just want to feel like I made a smart, cool choice — not that I wasted money or sold out."
That line came from a real user interview. It shaped every decision we made for the next eighteen months.
User Research
Built from user data and field research, these weren't demographic archetypes. They were portraits of real emotional states — because that's the only way to design something that actually works.
Linh Nguyen
22 · Student / Part-time barista · HCMC
Goals
Pain Points
A11y Dimension
"I just want to feel like I made a smart, cool choice."
Minh Tran
34 · Marketing Manager · Hanoi
Goals
Pain Points
A11y 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
A11y Dimension
"I want to feel welcome — not like a tourist in my own country."
Experience Mapping
We mapped Minh's ordering journey in detail — because his needs (allergen checks, family trust, value math) created the highest emotional stakes. The journey map became our shared language with the engineering and marketing teams.
| Stage | User's Thought | Emotional State | Accessibility Friction |
|---|---|---|---|
Awareness Sees BOGO promo |
"Is this actually a good deal or just marketing?" | 🤔 Curious | WCAG 1.4.3 Banner text contrast on image backgrounds |
Discovery Browses menu |
"Where are the allergen details? I need to check for wheat." | 😐 Interested → Anxious | WCAG 1.1.1 Allergen info locked in PDF — screen readers fail |
Ordering Applies promo, pays |
"Why did my promo code disappear when I changed the size?" | 😤 Frustrated | WCAG 3.3.1 Error messages colour-only (red flash, no text) |
Wait Tracks delivery |
"The map hasn't moved in 10 mins. Kids are getting impatient." | 😬 Tense / Peak Anxiety | WCAG 2.4.3 Live tracker has no accessible text alternative |
Post-Order Checks rewards |
"How do I actually redeem these points next time?" | 😊 Satisfied → Confused | WCAG 2.4.6 Rewards section lacks descriptive headings |
Accessibility Audit
We ran a full WCAG 2.1 audit against all three personas' contexts — bright sunlight, motor limitations, screen readers in Vietnamese. What we found weren't edge cases. They were moments of real failure for a significant chunk of users.
Allergen info inaccessible to screen readers
Stored as an untagged PDF with no text alternative. Users who need allergen data for medical reasons — like Minh — couldn't get it reliably. This is a safety issue, not just a UX issue.
→ Fix: Surface allergen tags inline on product cards with ARIA labels. Remove PDF dependency.
Error feedback is colour-only (promo code failures)
When a promo code failed, a red border appeared. No text message, no icon, no ARIA live region. Users with colour vision deficiencies missed errors entirely and resubmitted repeatedly.
→ Fix: Add specific error text + icon + ARIA role="alert" with descriptive message.
Touch targets below 44×44px on key actions
The 'Remove item' button in the cart was 28×28px. For Bà Thu — using one finger and reading glasses — this was near-impossible. For Linh mid-commute, it led to accidental deletions.
→ Fix: Minimum 44×44px all interactive elements. Priority items (add/remove): 48×48px.
Delivery tracker has no text alternative
The live map with driver location had no text fallback. Users relying on screen readers — or those with low contrast perception — had no indication of order status during the highest-anxiety phase of the journey.
→ Fix: Add live status text with ARIA-live="polite" updates every 2 minutes.
Focus indicators missing on custom components
Keyboard users navigating the menu carousel had no visible focus ring. Not a showstopper — but it quietly signals "this wasn't designed for you" to power users and assistive tech users.
→ Fix: 2px terracotta focus ring on all interactive elements. Never suppress :focus-visible.
My Process
We ran an iterative, research-anchored process — not a waterfall hand-off. Every major design decision was validated against the three personas before it moved forward.
User Research & UCDC Analysis
Conducted user interviews and synthesised against the User-Centered Design Canvas. Three core user segments emerged — each with distinct accessibility dimensions and emotional stakes.
Persona Development + Emotional Mapping
Built three accessibility-aware personas. Mapped Minh's journey in full — identifying the exact moments where the experience earned or destroyed trust.
WCAG 2.1 Accessibility Audit
Audited app and website against WCAG 2.1 AA criteria. Prioritised findings by user impact — safety-critical issues (allergens, error messaging) were fixed first.
Prototyping & Stakeholder Alignment
Rapid wireframes in Figma, validated with engineering and marketing partners. Used data from customer feedback loops to justify each proposed change.
Personalisation + Optimisation
Implemented product recommendation engine tailored to user history and persona segment. Optimised button placement, image selection, and promo code UX. Continuously iterated based on real feedback.
Outcomes
The 15% sales lift was the headline — 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.
+15%
Sales Increase
Personalised product recommendations + streamlined ordering flow drove measurable revenue growth for the business.
12
Accessibility Issues Resolved
From safety-critical allergen accessibility to keyboard navigation polish — all 12 audit findings shipped with fixes.
96%
Satisfaction Score Protected
The high satisfaction baseline was maintained while addressing previously invisible pain points for underserved user segments.
3
User Segments Now Seen
Linh, Minh, and Bà Thu each had design decisions made explicitly in their favour. Not as a nice-to-have — as a core requirement.
Reflection
The most important lesson from this project was that accessibility isn't a compliance checklist — it's a design quality indicator. Every accessibility failure we found was also a UX failure for someone. The moment you start designing for Bà Thu's vision needs or Minh's allergen anxiety, you make the experience better for everyone.
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.