Vietnam Airlines
Website Revamp 2025
A full UX/UI redesign of Vietnam Airlines digital presence β transforming a cluttered, legacy interface into a premium, brand-defining experience worthy of a five-star airline.
Project Snapshot
Project type: Website Revamp
Platform: Desktop & Mobile Responsive
Industry: Aviation / Airlines
Team
UI/UX Design Lead
1 Researcher
5 UI/UX Designers
1 Graphic Designer
Druation
5 months
Design
Leadership
As UI/UX Design Lead, I was responsible for the full arc β from strategy and research to final presentation to the client.
- Organized team into 2 parallel squads
- Defined 6-month design roadmap
- Maintained overall UX quality & consistency
- Presented solutions directly to VNA C-suite
- Led UX workshops & stakeholder interviews
- Designed user survey framework
- Competitor analysis (6 global airlines)
- User persona development
- Concept direction & art direction
- High-fidelity prototypes (desktop + mobile)
- Design system & component library
- Accessibility implementation (WCAG)
- Close coordination with PMs, BAs, engineers
- Ensured feasibility across all solutions
- Design QA during development handoff
- Supported launch preparation
Understanding the
full picture
We combined quantitative data from 919 user surveys with qualitative insights from 40+ stakeholder interviews across 9 departments β including leadership, marketing, digital, and passenger services.
Conducted structured interviews with VNA's Chairman, CEO, Deputy CEOs, 18 department heads, and 20+ specialists. Four key themes emerged: visual direction, content strategy, booking flow, and Lotusmiles loyalty.
Surveyed 919 real Vietnam Airlines customers across three usage frequencies. Participants rated 9 core tasks on usability and provided open-ended feedback. Data revealed a sharp gap between primary booking tasks and secondary functions.
Who uses the
VNA website?
Using SimilarWeb traffic data and Nielsen's "Connected Spenders" research, combined with 30 individual user interviews (ages 25β35), we built a clear picture of VNA's digital audience.
VNA's audience behaves like "Connected Spenders"
Age and income alone don't define VNA's most valuable users. Nielsen's Connected Spenders framework β applied through 30 individual interviews β reveals behavior patterns that directly shaped our design priorities.
of Connected Spenders in Vietnam are aged 25β34 β matching VNA's dominant traffic segment
live in major cities β Hanoi & Ho Chi Minh City account for most VNA digital traffic
research and compare prices before purchasing β demanding clear, trustworthy information
want more options when shopping β expecting add-on services and customizable journeys
share their shopping experiences β word-of-mouth and online reviews heavily influence choices
willing to pay more for modern, premium products and experiences
Three critical
pain points
Across both data streams, the same problems surfaced repeatedly. These became the north star for our design decisions.
Users cited slow page loading speed as their biggest frustration β causing abandonment before the booking flow even began.
PerformanceOver half of users encountered friction within the booking flow β complex steps, unclear fare differences, slow transitions.
Booking UXUsers said the site lacked personalization β content, offers, and suggestions felt generic and disconnected from their needs.
Personalization"Users don't want to see everything β they want to see exactly what's right for them, the moment they land."
Key insight from user surveysEvaluated against
Jakob Nielsen's 10 heuristics
The FPT design team assessed the existing VNA website using Nielsen's 10 Usability Heuristics for User Interface Design β the industry gold standard for UX evaluation.
- Core information is clearly structured and findable
- Brand identity (logo, color, VNA mark) consistently present
- Booking entry point visible on homepage
- Multi-language support (Vietnamese & English)
- Functional flight search with key parameters
- Outdated visual design β fails aesthetic & minimalist heuristic
- Inconsistent UI states across desktop and mobile
- Information not grouped logically β overloads cognitive load
- Poor error messages β unhelpful and technical
- No flexibility for power users β no shortcuts or smart defaults
- Cultural imagery weak β doesn't feel Vietnamese or premium
Loading states, booking progress indicators, and form feedback are present but inconsistent β users sometimes unsure if actions were registered.
Route groupings (e.g. "ΔΓ΄ng BαΊ―c Γ", "ΔΓ΄ng DΖ°Ζ‘ng") use internal jargon unfamiliar to users. Airport codes shown without city names.
No easy way to swap origin/destination. Returning from deep booking steps loses entered data. Users feel trapped in the flow.
UI elements differ between desktop and mobile. Button styles, dropdown behaviors, and navigation patterns are not unified across pages.
Forms allow common mistakes (invalid date combinations, missing required fields) to proceed to the next step before surfacing errors.
Users must remember fare conditions, baggage rules, and promo codes from previous steps. Key information not surfaced contextually.
No shortcuts, no saved preferences, no smart form auto-fill. Repeat users must re-enter the same information every booking.
Too much text, too many competing elements. Homepage lacks visual hierarchy. Design feels dated and inconsistent with a 5-star airline brand.
Error messages are technical and generic. Payment failures offer no clear next step. Incomplete bookings give no recovery guidance.
FAQ and support content exists but is buried deep in navigation. No contextual help tooltips at decision points in the booking flow.
Where the world's best
websites are heading
We researched the most prominent global web design trends of 2025 to ensure the new VNA website is built not just for today, but for the next 3β5 years of digital experience.
WCAG guidelines are now a baseline expectation. Perceivable, Operable, Understandable, Robust β all four pillars must be met for inclusive design.
Must applyLean code, optimized images, and efficient hosting reduce carbon footprint β and directly improve page load speed and Core Web Vitals scores.
Must applyMoving beyond static dropdowns β scroll-triggered reveals, contextual navigation, and progressive disclosure guide users more naturally through content.
Should applyStripping away noise to let core features breathe. E-commerce leaders use this to highlight products β airline sites can use it to surface flights and offers.
Must applyUsers scan, not read. Large display type in headings creates instant visual hierarchy and directs attention to the most important information first.
Must applySmooth transitions, 3D effects, and micro-interactions β hover states, loading animations, tooltips β elevate perceived quality and brand sophistication.
Should applyReducing the number of page-loads keeps users engaged. All key information accessible through intelligent scrolling rather than deep navigation hierarchies.
Should applyLarge color blocks with strong contrast create clear visual sections, improve scannability, and let brand colors do the heavy lifting in page structure.
Must apply- WCAG-compliant components across all 9 design files β content scaling, readable font, high contrast modes
- Performance-first approach β optimized assets, reduced DOM complexity
- Bold Plus Jakarta Sans display type β 800 weight headings create clear visual hierarchy
- High-contrast dark sections (like this one) break the page rhythm and reinforce brand depth
- Minimalist content blocks β one idea per section, clear CTAs at every touchpoint
- Scroll-triggered navigation β progressive disclosure of menu items as users move through content
- Micro-interactions β animated logo on loading, smooth tooltip reveals, fluid form transitions
- 3D motion β cabin class visualizations using WebGL for immersive product storytelling
- One-page destination pages β scroll-driven inspiration journeys replacing static destination listing
A structured approach
to transformation
Four pillars of the redesign
Each solution directly addressed validated problems from research β grounded in user data and aligned with VNA's ambition to achieve 5-star digital status by 2030.
Moved away from cluttered, text-heavy layout towards a modern, refined aesthetic β generous imagery, soft rounded components, and a design system balancing Vietnamese cultural identity with international elegance. Typography shifted to bold, readable display fonts with conversational body copy.
Designed an AI-ready personalization layer β surfacing relevant offers, pre-filling known routes, and adapting content blocks by user segment. The homepage adapts to returning members vs. new visitors, showing contextual promotions and pre-populating frequent routes automatically.
The Lotusmiles member dashboard was rebuilt from scratch β showing miles balance, expiry dates, tier progress, upcoming flights, and contextual perks all above the fold. Members can now track, calculate, and redeem miles without navigating away. Integrated directly into the booking flow so every purchase shows projected miles earned.
Embedded WCAG guidelines throughout the design system. Content scaling, readable font profiles, high-contrast modes, keyboard navigation, and screen reader support β built as first-class features, not afterthoughts. This positions VNA as a leader in inclusive airline UX across ASEAN.
What we delivered
Every page of the new Vietnam Airlines website was designed end-to-end in Figma β from initial wireframe to pixel-perfect handoff, backed by a fully documented design system.
A single source of truth for the entire Vietnam Airlines digital product. Built on atomic design principles β from color tokens and typography scales to fully documented page templates, ensuring consistency across all 9 delivery files and future product expansions.
What I learned
With 40+ internal stakeholders across 9 departments, building shared vision early β through research synthesis workshops and regular show-and-tells β was as important as the design itself.
The pressure to "look like a 5-star airline" sometimes conflicted with clarity. The key was finding moments where premium aesthetics and clean UX patterns reinforced each other β not competed.
We had rich data β 919 surveys, 40+ interviews β but the real value came from continuously returning to that data throughout ideation. Patterns invisible on day one became critical on day 60.