Cathay Pacific

Reimagining the booking process for an international airline

ROLE

Product Designer

DURATION

2 weeks

SKILLS

Product thinking

User research

Visual design

A GIF of the Cathay Pacific website redesign.

Roughly 90,000 flights set out each day

With that many flights, many go through the task of booking their flights. That's a lot of users! However, the airline industry is no tech company or least their focus isn't. Whether it's mobile, tablet, or desktop, users face an overly complicated and stressful booking process.

Airline website serves as a critical platform for users to book flights, manage their reservations, and access important travel information. Therefore, striking the right balance between an attractive design and maintaining efficient navigation and usability can be a significant challenge.

Goal

Create a hassle-free booking experience that's enjoyable yet informative to users without any of the heachache or frustration

A image of the redesigned hero section of Cathay Pacific website.

Redesign

A image of the Cathay Pacific original home screen.

Current Site

Why a redesign?

1) Key site functions take users to a new page rather. 2) Visual hierarchy can be improved. 3) Text and information OVERLOAD!
A image of multiple screens showing the design of the current Cathay Pacific website.

Gathering insight

6 user interviews were conducted with participants who're frequent travelers, ranging from 25-60 years of of age.

What I learned...

From the user interviews I conducted, 3 main insights were found.

best Prices

A main priority amongst users was to find the cheapest flights and find the best deals.

Too many words

Content needs to be concise, easy to read, and accessible, especially for older user.

Save time

Booking and managing flights can be time consuming. Users prefer quicker processes.

Updating the UI

I delivered a UI that felt both revitalized and true to its original design. Introducing new colors to the palette added an element of excitement, resulting in a UI that blended the best of the old and new.

New booking section

I extended the booking section take up the whole screen. I added tabs to improve its usability.

The original design displayed information in a confusing manner. With the new design, I wanted to clearly show what each section represented.

A image of the before and after UI changes to the booking a flight section on the home page.

New cards

I increased the padding and introduced rounded corners. These changes significantly improves the legibility of the cards by reducing visual clutter and creating a more spacious and comfortable layout.

A image of the before and after UI changes to the vertical information cards on the home page.

New cards part 2

In the redesign of the second card, I focused on providing clear CTAs for the user. The card now effectively communicates its intended action or message to the user.

A image of the before and after UI changes to the horizontal information cards on the home page.

New UI element

I created a banner that shows after checkout that is readily accessible to manage user's upcoming flight.

An image of a new UI element. The element is a banner that spans across the entire screen. On the left side, the user's trip destination and date are shown. In the center, the trip's departure and landing time are shown. On the right are three buttons to view, change, and cancel the trip.

Improving on the designs

This user testing phase aimed to evaluate the effectiveness and user-friendliness of the redesigned Cathay Pacific website.

An image showing the design improvements between the landing page iterations. Some mentioned the inconsistency in selected and unselected. They asked why the selected tab was white instead of blue. Most participants encountered confusion with the promo code button. The placement led to uncertainty.An image showing the design improvements between the booking trip screen iterations. Participants expressed a desire for the seat labels to remain visible and sticky when scrolling while choosing a flight. They found it helpful to have constant visibility of seat labels as it allowed them to easily compare and select preferred seats without losing context or having to scroll back and forth. The seat labeling is sticky when scrolling which can be seen in the the prototype.

Putting it all together

A image of the redesigned home screen and book a trip screens.A image of the redesigned home screen and book a trip screens.A image of the redesigned home screen and book a trip screens.

Interactive Prototype

Reflection

As my first capstone project,  I was over-ambitious about my redesign was going to be: Adding many cool gamification features and fancy UI animations. However, it was a great learning experience to remember was UX design is about, which is to meet the user's need.

Next steps

  • Expand on the user experience by creating more comprehensive user flows and designing screens to support them.
  • Continue testing and iterating.

Let's make something together!

LinkedInEmail
Upward facing arrow icon