We were tasked with redesigning a nationally acclaimed airlines' mobile app, used by millions of travelers, which hadn't been significantly updated since 2018. Our analysis revealed critical usability failures: 64% of user complaints centered on the booking flow, accessibility violations excluded users with disabilities, and essential features forced awkward handoffs to web interfaces.
Using eye-tracking research, heuristic evaluation, and competitive analysis, we redesigned the booking experience to meet WCAG 2.2 accessibility standards, reduce cognitive load through page restructuring, and explored the constraints of adopting new technologies into our application.
Redesigning a Top Airline's Booking Flow
Return Home
Role
UX/UI Designer
Data Analyst
Timeline
October 2025 - Present
Team
Product Manager
UI/UX Designers
Development Team
Artificial Intelligence Team
Business Analytics Team
Airline's Product Team
Tools
LookerStudio
Google sheets
Claude.AI
Framer
Figma
Research
Data Analysis
The booking flow accounted for 64% of all user issues
10.6% of users cited poor layout and interface design.
Users cited accessibility barriers, including small buttons, excessive brightness, and poor contrast.
Analyzing Apple App Store reviews significantly helped us understand patterns in user feedback. What we found helped us determine which sections of the app to prioritize and which features needed immediate attention.
Usability Testing & Heuristic Evaluations
User's revealed difficulties in choosing flight times and voicing discomfort from lack of system status visibility.
In one of the three user interviews, the participant had difficulty understanding that both departure and return dates needed to be selected within the same frame. This issue stemmed from poor system status visibility, including the lack of color changes or feedback indicating that the user was in the date-selection state. As a result, the participant exited the flow after not seeing the outcome of their actions.
Key features were not synchronized between web & mobile design.
Many features such as "buy more miles" or "purchase extra luggage" transferred users to the web interface. This created friction in the user's journey.
Existing application wireframes; UI concealed for confidentiality.
Competitive Analysis & Business Audit
Mobile-first customer behavior
Members increasingly prefer mobile applications
-> Informs us to synchronize all mobile and web functions instead of directing users to one or the other.
Technological Adoption
Our client recently reported that their goals for 2025 involve becoming a 5 star airlines, integrating technology into their business, specifically Artificial Intelligence.
-> Informs us to research current AI adoption for airlines and design these models into our current application
Competing Airlines have
intuitive application flows and emerging technologies
Competitive analysis revealed that Singapore Airlines and Emirates distribute booking selections across 2-3 dedicated screens (flight time selection, cabin class, sub-cabin class), whereas our client consolidates all inputs (date, time, cabin class, sub-cabin class) into a single densely populated page.
Singapore Airlines and Emirates also have structured information architecture and AI-powered features including trip planning, automated booking assistance, and personalized recommendations in the application.
The Solution
Information Architecture & Interaction Design
Key Information Architecture & Interaction Design changes
Navigation
Change
Before
After
Why
Home, Book Flights, Check-In, Frequent Flyer Page
Home, Book Flights, My flights, More
Task-frequency priority and Business goals
Booking flow
1 screen (Cabin class, seat class, date and time)
2 screens
(Date, time, and cabin class in first screen; seat class in next screen)
Reduce cognitive load per page and help users focus on important sections.
Button size & component spacing
Minimum button size: 10x10 px; Minimum spacing: 5 px
Minimum button size: 24 x 24px; Minimum spacing: 8 px with 14 px away from phone border
WCAG 2.2 Compliance and Accessibility testing results
Navigation Access
Swiping gestures, buttons with no descriptions
Predominantly clickable components, AI powered suggestions, aria labels and tags.
Discoverability and Accessibility friendly design.
Feature audit
Unnecessary buttons, web interface directed services
Removed redundant components; optimized for mobile.
End-to-end mobile flow & Reduce cognitive load
We audited the app's information architecture and interaction design using WCAG 2.2 AA standards, Nielsen's heuristics, and competitive analysis of Singapore Airlines and Emirates.
We restructured the content to focus on two main things: accessibility (bigger buttons, larger spacing, screen reader support), and reduced cognitive load (split booking from 1 screen to 2, removed redundant features, ).
Accessibility
Accessibility was central to the redesign, with eye-tracking and VoiceOver testing used to optimize user comfort.
The Problem: Our prototypes were built in Figma, but eye-tracking and VoiceOver testing required HTML to properly support focus and screen-reader navigation.
The Solution: Moving the prototype to Framer allowed us to test ARIA labels, tagging, and focus behavior more realistically.
Key Findings
Aria labels and Tags
The snap to element feature for eye tracking was more effective with text components than with elements that only had aria labels and tags.
Button size and spacing
Optimal spacing for buttons and interactive content were at least 14px apart. Button size at 20x20 was efficient for eye tracking interaction. Spacing from screen edge was most important with elements spaced less than 20px apart being hard to interact with.
Motions and personalization
We designed the application to favor clickable components and mitigate scrolling motions. AI in every page was visualized to help users easily cut down their cognitive load and make optimal, assisted decisions.
Notes: We conducted the testing with myself and two other designers. We used an iPhone 14 Pro Max positioned approximately 50 cm from the face, directly in front of the user, to maintain consistent eye-tracking conditions. The smoothness setting was kept at 80%, and the “snap to element” feature was enabled throughout the test.
The Deliverables
Click-through wireframes
Flow 1 - Booking screens
Flow 3 - Home AI
Highlighted Lotus AI features for price tracking, flight comparison, and personalized recommendations.
This click-through wireframe maps the complete booking flow, showing content hierarchy and component sizing across each screen.
Flow 2 - Saved flights function
This showcased personalized content and AI chatbot functionality on the home screen and integrated partner features, including
hotel bookings, to demonstrate the application’s expected reach.
Outcomes & Reflections
Outcomes
Reflections
Presented to VNPAY stakeholders December 2025
Next Steps
Research and accessibility findings were incorporated into the final UI. The artificial intelligence features are being evaluated for technical feasibility and resource requirements.
Moving our prototypes from Figma to Framer for VoiceOver testing made me realize that design constraints aren't just creative limitations, they're technical realities. I learned that understanding technology is essential to building products that are both helpful and sustainable. This project also taught me that designing for accessibility benefits everyone, not just users who need assistive technology.
Advocating for accessible features within business constraints showed me that good design requires knowing when to push back and when to adapt.
Future work includes expanded accessibility research across more groups of users, A/B testing, and an evaluation of AI content scope and feasibility.
Go back up