Rebuilding Air India’s web booking experience
Rebuilding Air India’s web booking experience
Rebuilding Air India’s web booking experience
Modernizing the end‑to‑end web booking journey for India’s national carrier across devices, aligned with a new API platform.
Modernizing the end‑to‑end web booking journey for India’s national carrier across devices, aligned with a new API platform.
Role
Co -lead | Product designer
Scope
End - to - end experience
Time line
Dec 24 - Dec 25
Contributions
Contributions
Co-led the end-to-end web booking redesign, owning flight listing and fare selection
Partnered with BA and engineering for implementation and conducted visual QA
Contributed components to the design system and project-specific builds
This is the story of a legacy airline on a
journey to prove itself, once again.
This is the story of a legacy airline on a journey to prove itself, once again.
The ask for a new platform
The ask for a new platform
When Air India began its transformation under Tata Group, the website got a visual refresh, but the booking journey still relied on legacy systems, reliable, yet inflexible. The DAPI platform’s API-driven architecture made it possible to rethink the entire flow, improving both user experience and operational efficiency.
When Air India began its transformation under Tata Group, the website got a visual refresh, but the booking journey still relied on legacy systems, reliable, yet inflexible. The DAPI platform’s API-driven architecture made it possible to rethink the entire flow, improving both user experience and operational efficiency.
Where did the current platform fail?
Where did the current platform fail?
As part of the brand transformation, the booking experience needed to evolve alongside the new identity. However, these systems limited scalability and constrained UX improvements.The flow was difficult to scan, required unnecessary scrolling, and made comparing flights hard.
Misaligned Experience
Hard to evolve and support new features.
The booking flow required excessive scrolling, less intuitive, and did not reflect Air India’s new brand identity, resulting in a disconnect between the refreshed brand user experience.
Limited Scalability
Didn’t reflect the new brand
The existing system architecture restricted the ability to scale, making it difficult to introduce new features or support the growing demands of the platform.
How did users feel?
How did users feel?
Working with a third-party research agency, we interviewed frequent flyers familiar with OTAs and airline websites. Users found the experience cluttered, with repeated information often overshadowing key details. Many also struggled to track their progress through the journey, leading to uncertainty. The core issue was decision friction.
Working with a third-party research agency, we interviewed frequent flight bookers familiar with OTAs, airline websites, and the Air India booking flow. Users found the experience cluttered, with distracting promotions and repeated information often overshadowing key details. Many also struggled to track their progress through the journey, leading to uncertainty and reduced confidence while booking.
Trip summary took up 1/3rd space
Unplanned marketing took up space
Only 1 flight fits in the initial viewport
First-view space compromised by unplanned banners and non-actionable offers
Distracting promotions 
U2
U3
U4
U5Hover on avatars to see how users felt
What did we, the team want?
What did we, the team want?
We first defined a set of principles to guide the redesign and keep the experience focused.
We first defined a set of principles to guide the redesign and keep the experience focused.
Enhanced faster
decisions
Reflect the new brand
experience
Balance user and
business need
Information revealed
progressively
What would this include?
What would this include?
The redesign covered the entire booking journey, from flight discovery to payment confirmation. The goal was to simplify each step while ensuring the process remained intuitive.
The redesign covered the entire booking journey, from flight discovery to payment confirmation. The goal was to simplify each step while ensuring the process remained intuitive.
Where would we focus?
Where would we focus?
Every section had to have a purpose and it had to be designed to make the experience intuitive.
Every section had to have a purpose and it had to be designed to make the experience intuitive.
Easier flight comparison
The layout was redesigned to show more flights in the first viewport, allowing users to compare schedules and fares faster.
Reduced repetition
Fare cards were redesigned to focus on differences between fare families, helping users quickly understand across options.
Design for info density
Key information is prioritized upfront, with secondary details accessible through tooltips and progressive disclosure.
A place for everything, and everything in its place
A place for everything, and everything in its place
A place for everything, and everything in its place
Flight listing
Flight listing
The make or break of booking
The make or break of booking
The constraints that came along the way
The constraints that came along the way
Airline booking systems involve complex business logic and large volumes of information.
Some key constraints included:
•Dependency on backend APIs for real-time data
• An evolving design system being built in parallel
• Large volumes of mandatory booking information that cannot be removed
Airline booking systems involve complex business logic and large volumes of information.
Some key constraints included:
•Dependency on backend APIs for real-time data
• An evolving design system being built in parallel
• Large volumes of mandatory booking information that cannot be removed
Trip Summary & Air Calendar
Trip Summary & Air Calendar
A heavy trip summary and intrusive marketing placements occupied a lot of vertical real estate.
A heavy trip summary and intrusive marketing placements occupied a lot of vertical real estate.
Old booking
New Booking | Condensed Trip Summary | Air Calendar to be ± 3 days instead
Delight in an information heavy page
Delight in an information heavy page
Delight in an information heavy page
The cabin card changes into the associated colour, adding to brand recall. This ensured the page stayed clean and could still incorporate desired colours.
The cabin card changes into the associated colour, adding to brand recall. This ensured the page stayed clean and could still incorporate desired colours.
Different variations of the flight card
Different variations of the flight card
Fare selection
Fare selection
Choosing a cabin leads into the more nuanced decision — selecting the right fare.
The challenge lies in making differences between options instantly clear.
The experience brings fares into immediate focus and structures information for quick comparison. Common features are grouped, while fare cards emphasise only what changes, helping users make confident decisions. The layout also introduces cabin imagery to add context and depth to the choice.
Choosing a cabin leads into the more nuanced decision — selecting the right fare.
The challenge lies in making differences between options instantly clear.
The experience brings fares into immediate focus and structures information for quick comparison. Common features are grouped, while fare cards emphasise only what changes, helping users make confident decisions. The layout also introduces cabin imagery to add context and depth to the choice.
Old website interface
New website interface | Reduced scroll | Enhanced visual appeal
Improvements across the journey
Improvements across the journey
Beyond flight selection, several other stages of the booking flow were refined.
Beyond flight selection, several other stages of the booking flow were refined.
Passenger details
• Preserved information for logged-in users
• Clearer form hierarchy and validation
• Improved contact addition flow
Passenger details
• Preserved information for logged-in users
• Clearer form hierarchy and validation
• Improved contact addition flow
Seat selection
• Integrated existing seat map experience into the redesigned flow
Seat selection
• Integrated existing seat map experience into the redesigned flow
Ancillary purchases
• Redesigned add-on selection using illustrated cards
• Clear visual states for selected and recommended items
• Redesigned inside pages for all
Ancillary purchases
• Redesigned add-on selection using illustrated cards
• Clear visual states for selected and recommended items
• Redesigned inside pages for all
Review and pay and Confirmation
• Redesigned entire page and flow
Review and pay and Confirmation
• Redesigned entire page and flow
Collaboration and implementation
Collaboration and implementation
Designing the booking flow involved close collaboration with engineering and business teams. Since many decisions depended on backend APIs and airline logic, regular design reviews helped balance feasibility with user experience and visual quality.
Designing the booking flow involved close collaboration with engineering and business teams. Since many decisions depended on backend APIs and airline logic, regular design reviews helped balance feasibility with user experience and visual quality.
The project was recognized internally for cross-team collaboration, receiving the Dream Team Award, and I was honored with the High Flyer Award for my contributions to the initiative.
The project was recognized internally for cross-team collaboration, receiving the Dream Team Award, and I was honored with the High Flyer Award for my contributions to the initiative.
Impact
Impact
Business metrics
Specific figures are confidential, but the redesign delivered measurable improvements across key conversion stages. Progression through passenger details increased notably following form hierarchy changes, and ancillary attachment rates improved after the add-on selection was redesigned with illustrated cards and clearer state differentiation.
Experience metrics
Qualitative testing showed faster flight comparison, with users able to evaluate more options within the first viewport. Fare selection confusion dropped after common features were grouped separately from differentiating ones.
Qualitative signals
Dream Team Award for cross-functional collaboration
High Flyer Award for individual contribution
Redesigned flow phased into production, replacing the legacy system across the live website
Business metrics
Specific figures are confidential, but the redesign delivered measurable improvements across key conversion stages. Progression through passenger details increased notably following form hierarchy changes, and ancillary attachment rates improved after the add-on selection was redesigned with illustrated cards and clearer state differentiation.
Experience metrics
Qualitative testing showed faster flight comparison, with users able to evaluate more options within the first viewport. Fare selection confusion dropped after common features were grouped separately from differentiating ones.
Qualitative signals
Dream Team Award for cross-functional collaboration
High Flyer Award for individual contribution
Redesigned flow phased into production, replacing the legacy system across the live website
Reflection
Reflection
What began as a design contribution gradually expanded into leading developer collaboration. Since this was one of the first large initiatives on the new platform, many decisions were being defined as we went. As related experiences like Manage My Booking evolved, we incorporated learnings back into the booking journey to create a more consistent experience across the product.
I got to step into greater ownership of the product. What began as a design contribution gradually expanded into leading developer collaboration. Since this was one of the first large initiatives on the new platform, many patterns and decisions were being defined as we went. As related experiences like Manage My Booking evolved, we incorporated learnings back into the booking journey to create a more consistent experience across the product.
Seeing the redesigned booking flow gradually replace the legacy system across the website was especially rewarding, knowing the work would impact millions of travellers.
Seeing the redesigned booking flow gradually replace the legacy system across the website was especially rewarding, knowing the work would impact millions of travellers.