How I Improved the experience of selecting seats on checkout
B2C
Conversion
Improve added seats rate by 12% on direct booking
I was assigned to work on the checkout process, focusing on revamping the seat map within the checkout flow, as well as overhauling the entire process. After being paused for 3 years due to COVID-19 and the lack of a dedicated product team
The checkout became a mandatory step for completing B2B enhancements. Consequently, the focus broadened to include improvements to the overall checkout process, encompassing leisure direct bookings as well.
Time line
Q3 2023
Team
1 product manager, Director, 1 UX designers, 1 researcher, Front & back end Engineers, cross collaboration with all teams in KAYAK
Role
Product design, UX design, User research
Platform
Web, mobile
The challenge
How might we Improve the low CR observed for users who interact with the seat map checkout flow on KAYAK during the booking process.
The Objective
Enhance the seat selection process with an enriched, informative seat map for KAYAK users, addressing missing updates. Strengthen the Checkout team’s performance while fostering an innovative and forward-thinking environment.
I worked on elevating the of structure of component
Incorporating Gestalt principles, such as uniform Connectedness, Symmetry and Order and Proximity the sketching for this problem offers a clean, user-centered design. A minimalist layout with blocking-based structure enhances focus on key details while promoting an intuitive grasp of content relationships. Additionally, adding icons for seats from the design system library contribute to a cohesive and visually intuitive experience. The KAYAK colour palette, highlighted by vibrant accents, boosts contrast and improves readability.
When discussing "Legal check" in the context of distinguishing between fare types (Economy, Main, and Basic) and collaborating on messaging for exit row seats, here are some additional details that could be expanded upon:
1- Collaboration with Legal Team: The legal team plays a crucial role in reviewing and approving all messaging related to fare differentiation and seat selection, particularly for exit row seats.
2- Collaborate with content designer for the aisle seat: Define message needs to exclusively to KAYAK.
3- Create components: Define Components behaviour and level information displayed
Defined seat amenities behaviour and enriched information to make sure user knows what he is paying for.
At this stage, I created high-fidelity wireframes to define the final structure, visual hierarchy, and interaction patterns across the onboarding and checkout flows. These wireframes closely reflected the intended UI—integrating real content, states, and system feedback—while still allowing for rapid iteration before development.
Outcome
Better IA on mobile while user can check information and select seats with 2 clicks
Jumped to the visual design to distinguish fares by colour codes
During the process of refining the color code, I conducted experiments with various alternative colors. This involved testing different hues to ensure they were visually appealing and met accessibility standards. However, many of the colors I initially considered were too bright or did not provide enough contrast, which could potentially hinder readability or usability for users with visual impairments. After analysing and exploring various options, I initiated design variations based on the existing approach, which aimed to better organise the new information structure. However, these colour codes proved ineffective, as their meanings within the design system did not align with our intent and failed to meet A11Y accessibility standards Perceivable. Ensuring sufficient colour contrast for users with visual impairments.
Conducting 2 rounds of usability tests to check feedback
The ProcessWe opted for remote, unmoderated interviews through UserTesting.com to eliminate product familiarity bias. External participants were recruited, and unmoderated tests ensured fast feedback. The information architecture redesign included these key steps:
Screener Survey1st Tree Test & InterviewStructure Changes2nd usability Test & ImprovementsCreation of Prototype & TestFinal Adjustments
Iteration 2, push more information to traveler
Execution
We tested early design variations with users through scenario-based tasks. Feedback was gathered in real time via UserTesting.com and internal sessions, focusing on how users interpreted dates, prices, and trip summary elements. Small layout and content adjustments were made between rounds based on insights.
Outcome
The iteration helped uncover confusion around date hierarchy and pricing breakdown. After refinement, users were able to scan and validate key trip information faster and with higher confidence, contributing
Seat map: Outcome
The project was designed to be fully responsive and tailored for desktops, tablets, and mobile devices. It emphasised a visual hierarchy to ensure easy access to the essential elements for easing out selecting seats.
Final Design
We resolved problems associated with seatmap.
Final
Designed a clearer flow that keeps users informed and confident while selecting their seat.
Easier flow of being informated and select desired seat
The impact
+12%
▲
(CVR) in added seats during the checkout process
4
▲
Renewed contract with 4 airlines Hawaiian, Alaska, United, AA.
How I Improved the experience of selecting seats on checkout
improve added seats rate by 12% on direct booking
I was assigned to work on the checkout process, focusing on revamping the seat map within the checkout flow, as well as overhauling the entire process. After being paused for 3 years due to COVID-19 and the lack of a dedicated product team
The checkout became a mandatory step for completing B2B enhancements. Consequently, the focus broadened to include improvements to the overall checkout process, encompassing leisure direct bookings as well.
Time line
Q3 2023
Team
1 product manager, Director, 1 UX designers, 1 researcher, Front & back end Engineers, cross collaboration with all teams in KAYAK
Role
Product design, UX design, User research
Platform
Web, mobile
The challenge
How might we Improve the low CR observed for users who interact with the seat map checkout flow on KAYAK during the booking process.
The Objective
Enhance the seat selection process with an enriched, informative seat map for KAYAK users, addressing missing updates. Strengthen the Checkout team’s performance while fostering an innovative and forward-thinking environment.
I worked on elevating the of structure of component
Incorporating Gestalt principles, such as uniform Connectedness, Symmetry and Order and Proximity the sketching for this problem offers a clean, user-centered design. A minimalist layout with blocking-based structure enhances focus on key details while promoting an intuitive grasp of content relationships. Additionally, adding icons for seats from the design system library contribute to a cohesive and visually intuitive experience. The KAYAK colour palette, highlighted by vibrant accents, boosts contrast and improves readability.
When discussing "Legal check" in the context of distinguishing between fare types (Economy, Main, and Basic) and collaborating on messaging for exit row seats, here are some additional details that could be expanded upon:
1- Collaboration with Legal Team: The legal team plays a crucial role in reviewing and approving all messaging related to fare differentiation and seat selection, particularly for exit row seats.
2- Collaborate with content designer for the aisle seat: Define message needs to exclusively to KAYAK.
3- Create components: Define Components behaviour and level information displayed
Defined seat amenities behaviour and enriched information to make sure user knows what he is paying for.
At this stage, I created high-fidelity wireframes to define the final structure, visual hierarchy, and interaction patterns across the onboarding and checkout flows. These wireframes closely reflected the intended UI—integrating real content, states, and system feedback—while still allowing for rapid iteration before development.
Outcome
Better IA on mobile while user can check information and select seats with 2 clicks
Jumped to the visual design to distinguish fares by colour codes
During the process of refining the color code, I conducted experiments with various alternative colors. This involved testing different hues to ensure they were visually appealing and met accessibility standards. However, many of the colors I initially considered were too bright or did not provide enough contrast, which could potentially hinder readability or usability for users with visual impairments. After analysing and exploring various options, I initiated design variations based on the existing approach, which aimed to better organise the new information structure. However, these colour codes proved ineffective, as their meanings within the design system did not align with our intent and failed to meet A11Y accessibility standards Perceivable. Ensuring sufficient colour contrast for users with visual impairments.
Conducting 2 rounds of usability tests to check feedback
The ProcessWe opted for remote, unmoderated interviews through UserTesting.com to eliminate product familiarity bias. External participants were recruited, and unmoderated tests ensured fast feedback. The information architecture redesign included these key steps:
Screener Survey1st Tree Test & InterviewStructure Changes2nd usability Test & ImprovementsCreation of Prototype & TestFinal Adjustments
Phase 2, push more information to traveler
Execution
We tested early design variations with users through scenario-based tasks. Feedback was gathered in real time via UserTesting.com and internal sessions, focusing on how users interpreted dates, prices, and trip summary elements. Small layout and content adjustments were made between rounds based on insights.
Outcome
The iteration helped uncover confusion around date hierarchy and pricing breakdown. After refinement, users were able to scan and validate key trip information faster and with higher confidence, contributing
Seat map: Outcome
The project was designed to be fully responsive and tailored for desktops, tablets, and mobile devices. It emphasised a visual hierarchy to ensure easy access to the essential elements for easing out selecting seats.
Outcome
The iteration helped uncover confusion around date hierarchy and pricing breakdown. After refinement, users were able to scan and validate key trip information faster and with higher confidence, contributing
Final
Designed a clearer flow that keeps users informed and confident while selecting their seat.
Easier flow of being informated and select desired seat
Final Design
Final Design
We resolved problems associated with seatmap.
Let's Connect
Let's Grow Together
Feel free to hit me up, I am looking forward to hearing from you
Let's Connect
Let's Grow Together
Feel free to hit me up, I am looking
forward to hearing from you
Let's Connect