The process of selecting flight tickets is a core workflow. To ensure the accuracy of design adjustments, we conducted multiple rounds of A/B testing and evaluated the results using the following data metrics:

Page Conversion Rate (Key metric): Start from departure flight selection page to fare selection page, to validate whether the design adjustments have a positive impact on the conversion between pages.

Order Conversion Rate (Key metric): Start from departure flight selection page to complete payment, to verify whether the design adjustments have a positive impact on order conversion.

Flight Select Duration (Key metric): To verify whether the design adjustments have improved the efficiency of users selecting flight tickets.

Return Page Backward Rate (Key metric): To verify whether the 3/7 split-screen design positively meets the users' needs for selecting and modifying flight ticket options.

Profit Per UV (Reference metric): To verify whether the redesign of the flights selection process has indirectly increased revenue.

Since Trip serves multiple languages and markets and we want to use a single design to cover all core processes across these markets, we need to monitor data across multiple regions. This can be roughly divided into the Asia Core 8 markets (Hong Kong, Korea, Thailand, Japan, Taiwan, Singapore, Malaysia, Australia), Europe Core 5 markets (United Kingdom, France, Spain, Germany, Italy), and the US market.

💡 My Impact here: led designer to review data metrics and analyze data weekly in the A/B system, and communicate design detail adjustments promptly with the product manager.

The following is the design process after receiving the requirement

Issue 4: Header Color and Functions Are Too Bold

Please see the image below. The header on the flight selection page uses Trip's brand blue. While this contributes to brand identity, the heavy use of blue affects the user's ability to view flight information. Additionally, the header contains information and functions such as the calendar, title, filters, and sorting, occupying 30% of the screen height, which also impacts the efficiency of viewing flight information.

Through competitive analysis, we can see that mainstream in western Countries typically involves (1) selecting a combination of departure and return flights, with some, offering (2) separate selections for round-trip flight (Same as Trip.com). The Chinese version of Trip.com (Ctrip) uses a (3) split-screen approach.

However, based on past iteration experiences, we have tried the combination flight selection method, and the performance data varies across different countries and markets. The data for the European markets does show none significant improvement compared to the separate selection model, while the data for the US and Asian markets actually declined.

I also contacted the Design Lead at Skyscanner (which was acquired by Trip and has a connection with us). He informed me that Skyscanner previously used a separate selection model for round-trip tickets. When they designed the combination model, they conducted A/B tests and found no significant difference in the data between the two models. However, Skyscanner wanted to establish a recommendation algorithm to provide user-satisfactory results and streamline the process, and since Europe is their primary market, they decided to retain only the combination model. This approach is somewhat different from Trip’s current strategy, as we aim to offer more flexible options for users, with our primary users being in Asia. Ultimately, we decided to abandon the combination model design.

💡 My Impact here: I provided experience and data from past projects and communicated with Skyscanner (cross-functional cooperation) to guide the design direction.

After completing the problem analysis and competitive analysis, our design ideas became more concrete. We provided the following three design proposals and, through continuous refinement and usability test before developing, arrived at what we believe is the best solution.

The following is the process of refining and finalizing the design solution:

Concept 1: Half - Half

Our initial idea was to split the screen in half, displaying the departure flight list on the left side and the return flight list on the right side. This way, users could avoid switching between two pages and could flexibly combine departure and return flights. However, as shown in the image below, we encountered issues with multilingual languages. While the English layout had no significant problems, switching to Vietnamese resulted in overlapping price and labels. We did attempt to adjust the font size and position of the prices, but this did not effectively resolve the multilingual issue. Due to the poor flexibility and scalability of this solution, we decided to eliminate it.

Concept 2: 7/3 - 3/7

This is the design used by Ctrip, where both departure and return flights are displayed on the same page, also addressing the issue of users having to switch between two pages. Unlike Concept 1, we can ensure that this solution supports multiple languages. However, this design introduces a more complex interaction switching logic, which we are concerned overseas users might find difficult to understand. Therefore, we kept this design and conducted a usability test alongside Concept 3.

Concept 3: 1 - 3/7

To ensure page stability and ease of use, we still use a separate page to select the departure flight, and with a transition animation to switch to the return flight selection. The difference is that on the return flight page, users can simultaneously modify the departure flight and select the return flight. This solution effectively addresses the issue of navigating back between pages.

Due to a divergence of opinions between Concept 1 and Concept 3, we conducted usability testing before proceeding with development to fully validate the feasibility of the solutions and reduce future development costs. The goal was to assess users' acceptance of the two concepts and understand their reasons for choosing one over the other. Since Trip's users are global, we used the Usability Hub online testing tool and selected 30 users from Germany, the UK, Spain, the US, Thailand, South Korea, Hong Kong, Japan and other Countries for the test, which lasted one day. The test results are as follows:

Based on the Usability Testing results, we can see that the majority of testers preferred Concept 3. The reasons they provided align with our design intent: the ability to modify the departure flight without returning to the previous page, and a process that is easy to understand. They found the interaction design of Concept 2 somewhat confusing, making it easy to lose track of the current step and what needs to be done next, among other concerns.

Based on the Usability Testing, we are clear that we will proceed with Concept 3 and refine the wireframe and logic annotations. Tool: Figma.

Comparison between Old Version and New Version.

The Project Itself

In this project, we made multiple hypotheses and validations. As the Design Lead, I guided the designer and communicate with the Product Manager team in a timely manner to ensure that the design process was not delayed. Additionally, during the competitive analysis phase, I effectively communicated with the Design Lead of Skyscanner across companies. By integrating Trip's own business attributes, we avoided retracing our steps.

This project further strengthened my cross-functional collaboration skills.

Report to Higher Managers

Our design solution differed significantly from our competitors, which presented some challenges when reporting to higher managers. We needed to clarify why we didn't follow the same approach as our competitors, what the differences were, and where our advantages lay. However, by presenting our iterative data and past experience, we convinced the higher managers and achieved strong results.

Feedback

After the project launch, on one hand, we followed up on the data through A/B testing to ensure the accuracy of the design direction. On the other hand, we received positive feedback from the Overseas Teams.