4 minutes read

Aiming to revolutionise the way travellers plan and book their journeys.

Timeline

Dec’ 22 - Mar’ 23

For

Cleartrip

Tools Used

Figma, Principle

In today's digital world, booking international flights should be a seamless and stress-free process. However, many airline websites and mobile applications fall short of providing a user-friendly experience.

This design case study aims to explore the process of redesigning the international flight booking experience, taking inspiration from successful UX redesigns in the airline industry. From analyzing current booking metrics to revamping the UX of the booking journey, this case study will provide insights into how a user-centered approach can improve the customer experience and build a competitive advantage for airlines.

Tools Used

I was accountable for user flows, explorations, interactions, visuals, and prototyping. Conducted user research alongside my PM using methods such as user interviews, and online study to address both user behavior and attitudes.

Collaborators

1 x Design Manager 1 x Product Manager 6 x Engineers

Cleartrip is a website or app that makes it easy for travellers to plan and book their trips. It's like a digital travel agent that helps you find and book flights tickets, hotel, and bus rides. It's a convenient way to organize your travel all in one place.

Collaborators

Booking an international flight is a bit like reserving a seat on an airplane for a trip to another country, and you can do it online. You start by telling a travel website or app where you're leaving from and where you want to go, usually to another country. Then, you pick the day you want to fly. The website or app shows you all the available flights for that day, like different choices for your trip. These flights are offered by different airlines and come at different times and prices. Once you find a flight that matches when you want to go and what you're willing to spend, you choose it and pay online, just like when you buy something from the internet. After you pay, they send you an email with all the important details about your flight, like when it's happening and where you'll leave from and arrive.

The current design for international flight book ing poses several usability challenges. Firstly, crucial information is easily overlooked, leading to potential gaps in understanding travel details. The use of non-intuitive icons adds to the confusion, making navigation less user-friendly. Moreover, important information is missing, leaving users without complete details for their travel plans. The high scroll length within the app and website further compounds the issue, making it time-consuming for users to find the information they need. Additionally, the overall journey mental model is unclear, making the international flight booking experience on Cleartrip less straightforward and more complex for users.

1

The departure, arrival, and duration times are easily confused as all three numbers appear similar and can be easily overlooked.

2

Users find it challenging to intuitively understand Airport codes

3

Unfamiliar icons were challenging for users to grasp and understand.

4

Crucial information is tucked away in the details page, and accessing it involves excessive scrolling due to the length of the page.

5

The arrangement and depth of filters make it challenging to easily navigate and comprehend.

6

Users find it difficult to grasp the sorting options due to lack of intuitiveness & visibility.

Goal

The primary goal is to empower users to easily find the best flight options in a shorter amount of time, ensuring a more intuitive and efficient booking journey.

Success Metrics

1

Reduce time spend on tasks

Reduce the time users spend on each task by streamlining the booking process and eliminating unnecessary steps

2

Improve international booking conversion

Improving conversion rates by identifying and addressing specific bottlenecks in the user journey.

3

Optimize pricing strategies to align with user preferences and market demands, thereby increasing the overall GMV.

4

Provide filters and sorting options to allow users to quickly find their choices based on price, duration, or airline

The solution is designed to revolutionize the user experience by focusing on multiple key facets. The intuitive user interface ensures a visually appealing and easy-to-navigate platform, while a smart search and navigation system.

1

The departure & arrival times are shown side by side, and the duration is clearly visible with information on where flights have layovers.

2

Icons are accompanied by text, making it simpler for users to grasp and understand.

3

Sort options to arrange flight sequences, making it much easier for comprehension.

4

The primary filters are displayed upfront, and the selected filters are easily visible, making it simple for users to add or remove them

5

The search page displays the final amount users will receive after applying the coupon.

6

Displays flights with similar prices, but they may vary in stops or duration.

Frontstage: What We Can See

When we observe people booking flights, we notice unpleasant side effects and interesting user hacks.

Searching for the right flight is extremely stressful. High prices, limited availability, artificial scarcity, a plenitude of options, as well as an ingrained penchant for cost traps and loopholes.

The flight gets more expensive with every search. Opaque pricing and the feeling of being on the airline’s hook make travelers suspicious of cookies and tracking.

Flights are like looking for a needle in a haystack. Alone, the route from Frankfurt to Honolulu offers 8,777 different flight combinations. To get a handle on what’s on offer, travelers turn to third-party providers like skyscanners to combine different routes or Google to find offers from the surrounding area and many more.

Long waiting times are nerve-wracking. Prices are recalculated, and availability is checked for every search query. In our test, a query usually takes 10 seconds. This always leads to long waiting times in the observed search behavior.

The quest for the best flight deal. The most important decision criterion for a flight is still the price. But every search parameter influences it. The lack of price communication reinforces the feeling of intransparency.

The feeling of having paid too much for the flight. When it comes to flights, most travelers are confronted with “from” prices. However, these are only available on certain flights and in limited numbers. What if such flights are not available? This leads to negative anchoring: what seemed affordable at the beginning now seems all the more expensive.

Backstage: What We Don’t See

It takes a look behind the curtain to find out that there are numerous technical and business constraints that have an enormous impact on flight search. Rather than years of usability engineering, the search experience is largely determined by third-party booking systems, dynamic pricing, and cost-per-request mechanics.

3rd Party Booking System. Behind most flight searches is a reservation system running called Amadeus. This is where millions of customers purchase their tickets. Amadeus is mostly responsible for which data points are available and how the interface is designed. Airlines use those systems and can only exert limited influence on a better solution.

Dynamic Pricing. Dynamic pricing is used to set the price of a product based on current market conditions. Prices fluctuate in real-time based on current data. This includes data on customer booking behavior, competitor airline prices, popular events, and a variety of other factors that affect product demand and necessitate price adjustments.

Cost per request. In most cases, searches are charged per request. To keep costs down, airlines want to reduce search requests. This leads to avoiding both pre-emptive and iterative queries.

Reframing The Problem

Flight searches are structured in such a way that it is highly unlikely that a customer can find a suitable flight straight away because it presupposes that the traveler has entered all price-relevant information before submitting the search query.

The dilemma: this price-relevant information affects availability, travel time, and service. At the same time, they are factors for the traveler that can be changed depending on the result and personal preferences and flexibility. As a result, travelers develop their own user hacks to compare different search parameters and weigh the trade-off between price and convenience.

How can we give travelers a better flight search experience? Our pitch is The Balancing Act: a guided dialogue between traveler and airline. Strap in — we’re taking a deep dive.

The Flight Search Redesign: Introducing The “Balancing Act”

What makes a search successful? It’s an increasingly important question in the age of global travel and its limitless possibilities. We focus on finding your personal solution. It puts the traveler, their occasion, and their budget at the center of the interaction and looks at how well the flight offer fits. To do this, we fundamentally change the tailoring of the interaction with travelers. We break down the search form into individual tasks and change the sequence of interactions. This allows a more balanced approach between friction and progress.

Task

The task is to find a suitable flight. We see that this usually takes several attempts and is achieved with the help of different search platforms and flight brokers. This shows that we are clearly in a weighing phase when searching for a flight. Different flights, routes, and times are weighed against travel planning criteria as well as personal preferences and limiting factors of the traveler.

Intention of use

The intention of use is a key determinant of interaction. The better we tailor our interface to the intention of use, the higher the probability that the interaction will be successful. Research findings show that usage intentions for digital applications can be assigned to three categories: “Act,” “Understand,” and “Explore.” In our case, we can clearly attribute the flight search to the “Act” usage intention: users have a specific task and want to make progress in completing that task as quickly as possible. Flight search is characterized by a clear goal. Travelers want to get an overview of the available flights to find the best option for their specific solution space. They take a structured approach and selectively change search parameters to uncover inconsistencies and explore the limits of what is available.

User Interviews

To improve International booking conversion by 200- 300 bps (relative) from SRP → Charged led us to conduct 20+ interviews with different type of travellers to find out what’s wrong and how we can do better.

1

Flight Search Platforms and Preferences

Explore preferences for flight search platforms e.g., Skyscanner, Google Flights, MakeMyTripS.

Understand criteria like cost, flexibility, and UI design influencing platform choices.

2

Booking Process and Collaboration

Analyze collaborative aspects in the booking process e.g., sharing details, comparing prices.

Investigate how collaboration impacts decision-making during flight booking.

3

Desktop vs. Mobile Usage Trends:

Identify user preferences regarding desktop or mobile usage.

Understand factors influencing choices, such as real estate and user interface.

4

Vacation Patterns and Planning

Explore diverse vacation patterns and planning approaches.

Understand considerations like leaves, budget, and destination preferences in international travel plans.

Explore the conversation and unearthed insights from our research aimed at gaining a deeper understanding of international flight users and the potential benefits these findings could offer us.

I"m in the process of evaluating the key segment that requires primary attention for funnel improvement, and I"m identifying the initial priority to enhance conversion rates specifically within the international flight booking funnel.

Here, we prioritized "Needs changes" based on research and current statistics, indicating it's where the maximum drop in the funnel occurs. Our initial focus in the first phase is to address and work on this aspect.

I've thoroughly studied key competitors and leading players in the international flight booking sector to analyze the information they include in their data sets. This investigation aims to extract valuable insights regarding the type of data they prioritize and discern key takeaways that can inform and enhance our approach.

We aim to understand their design, functionality, and user experience to gain insights for optimizing our own SRP. By examining content, layout, and features, we seek to identify best practices and areas for improvement to enhance our users' booking journey.

We're aiming to make important information clear at the tuple level for users. In our brainstorming session, we discussed what details should be primary (must-see) and what can be secondary. This helps us design with the user in mind, especially considering information from providers like Amadeus.

Information at the segment level that needs to be displayed is crucial for users to choose the right flight.

Airline name

Airline number

Aircraft name

Aircraft information

Airline operated by

Class

Departure time

Arrival time

Departure city

Arrival city

Arrival city

layover information

Terminal number

Airport name

Total price

Total duration

Layover duration

Terminal change

Airport change

Transit Visa

Nearby Airport

Baggage information

Same price element

Type of refund options

Time zone

Distance from nearby airport

offer visibility

Seat left

Price cut

In our discussions, we engaged with various stakeholders, including product managers, business representatives for visibility insights, and developers, to understand the information available from Amadeus, our service provider for airline data.

In tuples

Primary Decision- making data point

Secondary Decision- making data point

Total Price/ Coupon callout

Departure time/ Arrival time and date

Departure / Arrival airport

No. of layovers

Type of layover

Airline Name

Total duration

Seatleft callout

Layover airport(s)

No baggage

Travel visa requirement

Terminal change

Airport change

Refund type

More options of same price

Price breakup

In expanded tuples

It is crucial to emphasize the reiteration of the expanded section or the ability to view detailed information on a tuple. In the case of international flights, transparency is vital for users to choose the right ticket confidently. Unfortunately, clicking on "view details" was causing a problem by increasing page depth, making it challenging for users to compare flights and contributing to a drop-off in user engagement.

Segment’s airline name

Segment’s airline logo

Departure airport name(code)

Departure time

Leg duration

Arrival time, day

Arrival airport name(code)

Stopover information

Stopover duration

Stopover airport name(code)

Terminal change

Airport change

Travel visa requirement

Nearby airport callout

Baggage checkin/cabin

cancellation and amendment info

The previous tuple design posed challenges in user understanding. Departure, arrival, and duration times were easily confused due to their similarity, potentially leading to oversight. Users also found it challenging to intuitively grasp airport codes. Additionally, unfamiliar icons in the design were a hurdle for users, making it difficult for them to comprehend and navigate seamlessly.

I initiated the iteration process to address various use cases effectively.

The first step involved collaborating with stakeholders, where I presented and discussed potential ideas. This presentation showcased my approach to tackling the problem, and through constructive dialogue, we gained approvals on the preferred direction to proceed.

Subsequently, I collaborated with the design team to delve into the details of 3-4 selected tuples. The goal was to choose a design that not only resolved the current challenges but also demonstrated scalability for application in domestic booking scenarios. This collaborative session aimed to ensure that the selected tuple design aligned with both immediate needs and future requirements.

Over the course of two days, I delved into over 10 iterations of tuples, putting a lot of thought into crafting a user-friendly design. My goal was to not only solve various use cases but also to fine-tune how information is presented. Throughout this process, my focus was on making sure the design would seamlessly work across all platforms, ensuring a pleasant experience for users. It was important for me to not just address current challenges but also to set up the design for easy adaptability in the future across different devices.

In reaching the final design of tuples, I implemented several improvements based on valuable insights gathered from earlier considerations:

Time Clarity: To enhance user understanding, departure and arrival times were strategically positioned side by side. Additionally, the duration of flights was made more prominent, providing users with clear information on layovers.

Icon and Text Integration: To address the challenge of unfamiliar icons, I opted for an approach where icons were accompanied by descriptive text. This decision aimed at simplifying the user experience by ensuring a better understanding of visual elements.

Transparent Pricing: Aiming for transparency in the booking process, the search page was modified to display the final amount users would receive after applying any available coupons. This provides users with a clear and accurate view of the total cost.

Comparative Display: Recognizing the importance of user-friendly comparisons, the design was refined to showcase flights with similar prices. However, the variations in stops or duration were highlighted, allowing users to make informed decisions based on their preferences.

By incorporating these enhancements, the final design of tuples not only tackled the initial challenges but also prioritized user clarity, transparency, and ease of comparison throughout the flight booking process.

The current state of the system presents challenges for users in terms of filter navigation and comprehension due to the arrangement and depth of filters. Additionally, users encounter difficulty in understanding and utilizing sorting options, citing issues with both intuitiveness and visibility.

In the journey towards the final design of filters and sorting options, I began by addressing user comprehension concerns. Recognizing that users typically think in terms of speed and cost, I implemented sort options that allow users to arrange flight sequences based on factors like fastest and cheapest. This intuitive approach aimed to align the system with users' thought processes before delving into the details.

To enhance usability, I strategically positioned primary filters such as stops, airlines, and time of flight upfront. This decision was informed by research indicating that these filters are the most frequently used by users. The user-centric design also focused on making the selected filters highly visible, ensuring that users can easily identify and manage their choices. This approach streamlines the filtering process, providing a more intuitive and user-friendly experience that addresses both comprehension and visibility concerns expressed in earlier evaluations.

In the previous expanded tuple design, users faced several usability issues. The excessive scrolling required to access information within the in-page expand section made it inconvenient for users to read details and compare two flight options effectively. The airport code proved to be unhelpful for many users in understanding layovers, and the airport names lacked clarity. Additionally, crucial information such as check-in and cabin baggage details, as well as cancellation and amendment policies, were hidden behind multiple clicks, making it non-intuitive for users to access essential information promptly. Overall, the expanded tuple took up considerable space without providing commensurate utility to users, contributing to a less-than-optimal user experience.

In this updated version of the expanded tuple, I aimed to enhance the user experience by introducing a side sheet design. This design allows users to focus entirely on the specific flight they are interested in, providing a seamless transition for users to proceed or go back as needed. The improved hierarchy and layout make it easier for users to scan information efficiently. I also incorporated additional details to aid users in making informed choices, including a clearer presentation of layover information, baggage details placed at the end for better organization, and a dedicated fare rules tab. The inclusion of the fare rules tab enables users to review cancellation and date change policies before navigating to the itinerary page, empowering them to make well-informed decisions.

Final Design

Every element in this screen is important for a user to book a right flight, we've fine-tuned various design elements for better user-friendly experience. We've strategically placed everything from time to icon, and introduced intuitive sorting options. Filters, influenced by user habits, and seamlessly organized for better visibility. The expanded tuple now boasts a side sheet design, inspired by users feedback, allowing users to focus effortlessly on your chosen flight. We've enhanced information scanning, added helpful details like clear layover information and well-placed baggage details. The new dedicated fare rules tab ensures you have all the information on cancellation and date change policies right upfront, empowering you to make informed decisions. Our goal has always been to prioritize your needs, providing a clear, transparent, and easy-to-navigate flight booking experience.

We successfully rolled out the latest version with the redesigned tuples and enhanced user-friendly features. With the design largely settled, I collaborated closely with our dedicated engineering team throughout the implementation phase. Weekly sync-ups with both the engineers and product manager allowed for continuous status updates and addressing any challenges. Despite encountering a few hiccups, I made minor iterations and devised workarounds to ensure a seamless process. The new version, featuring all the anticipated features, was successfully launched by the end of June 2023

Initially, our team wasn't entirely sure about making changes, thinking we were doing well in the international market. However, when we closely looked at how many people were actually completing their bookings, we were in for a surprise. The numbers showed a whopping 200% increase in the total value of international flight bookings! This eye-opening data convinced us that there's a real opportunity to grow in the international market. So, we've decided to invest more in the next quarter, especially in making international flight experiences even better for you. We're excited to bring you more options and improvements based on this great news! Your positive experiences and feedback keep us motivated to keep enhancing our services.

Have an exciting opportunity and would love to collaborate on something cool. Feel free to reach out and say hello!