How can we provide users a consistent booking experience regardless of airline fare type?

Hub Uy

May 7, 2020·4 min read

Background

At Tripadvisor Flights, when users shop for flights, they are eventually funneled through a modal experience called ‘2nd Click’. The goal of ‘2nd Click’ is to provide users detailed fare information upfront and enable them to compare fare types across providers. This experience helps users make sense of complicated (and oftentimes confusing) airline information and be more likely to convert down the funnel.

Problem

At Tripadvisor, we strive to provide users with the best possible user experience while at the same time, balance it with our core value of ‘Speed Wins.’ The cost of ‘Speed Wins’ is sometimes having an inconsistent experience when you add features in an iterative manner.

Through the years, as we grew our portfolio of offerings, so did the different fare types that and ultimately, versions of ‘2nd Click’ reflecting the new fare types added. We have 3 major 2nd Click fare types:

Standard Fare

• The most common fare type
• Shows booking options from our partner booking sites
• Usually with other Online Travel Agencies (OTA) but will have options directly from Airlines if the airline is not a sponsor

Branded Fare

• Shows booking options from a sponsored airline
• Most major airlines are on Branded Fare

Combo Fare

• Combines two one-way fares that creates cheaper value deal that users may not find on other sites.
• Require two separate bookings

Evidence in user research show that the inconsistent UI from the various fare types confuse users who tend to browse multiple fare types before booking. Furthermore, instead of 2nd Click helping users digest information, a lot of users are overwhelmed with the dense information.

We believe that if we created a consistent experience across all fare types on 2nd Click, users will be more likely to become loyal flight searchers.

Success Metrics

• +2% Meta clicks (+$100K Annualized impact) across all fare types

Solution

We came up with the following solution:

• Reevaluate the information hierarchy that users truly care about.
• Simplify, simplify, simplify!
• Expose fare insights to help users compare
• Redesign UI components and apply consistently across all fare types.

Reevaluating Information Hierarchy

Based on user feedback and data from filter engagement, we realized that users care about the following the most:

1. Number of stops
2. Flightime
3. The Airline
4. Flight duration
5. Price

We made sure to highlight these key information in the new UI.

Simplify, simplify, simplify

Since the objective of 2nd Click is to help users digest complex information, we wanted to simplify by reducing the content displayed the itinerary to prevent cognitive overload evidenced in user testing.

Exposing Fare Insights

We also wanted to help users compare fare options easily, without having to read a huge chunk of text or muddle through the airline’s website. We introduced a table called Fare Insights that compares fare options in a summarized table.

Redesign UI components

The final step was to ensure that we button up all UI components, ensuring that typography, spacing, modal size, and button size is consistent with Tripadvisor’s design system and across all fare types.

Results

We exceeded our goal of increasing Meta clicks by 2%:

• +3.5% Meta clicks
• +6.53% Meta revenue per user
• +$320K annualized impact

Final Designs