Redesigning Copa Airlines’ Online Booking Site

Delivering a complex product in record time through a lean, pragmatic approach to design.

Year: 2020
Company: Copa Airlines
Role: Design Lead, UX researcher, UI Designer
lead

In 2020 I lead the redesign effort for Copa Airlines’ new online booking flow. This online channel accounts for nearly 30% of Copa’s total bookings and thus it was a project of extreme importance for the airline.

(This project was designed in collaboration with Mauricio Rojas, Olga Espinosa, Pablo Pardo and Inés Orillac)

Constraints

When we set out to rebuild this online shopping flow, we found ourselves dealing with difficult constraints early on:

1

From a business POV, the airline was undergoing its biggest crisis in history, due to the COVID-19 pandemic that had shuttered its entire business. This meant that the project had to be delivered on a very tight schedule. We dealt with this issue by adopting a stripped-down approach to our design process, leaning heavily on faster research methods, moving up quickly from low to high-fidelity mockups and by being very pragmatic in our decision-making.

2

The project also presented interesting technological challenges: The backend systems involved in creating a reservation had a complicated orchestration process, with many steps that needed to be performed in a specific order. These challenges presented us with opportunities for thinking outside the box and creating design solutions that balanced creating an excellent user experience and meeting the needs of the backend services that power it.

Figuring Out The User Flow

We got to work quickly first on understanding what the correct shopping flow should be. We started by doing some quick conversational exercises among us simulating a user trying to purchase a flight with Copa. Here we took cues from how users interact with the call center when purchasing flights. This also helped us to begin identifying difficult escenarios and edge cases.

In addition, we did a benchmark of 10 airline booking flows, as well as shopping flows of related industries (hotels, car rentals, OTAs) in order to find common patterns and check our thinking against what people were already using out there.

We took that understanding and mapped it against the technical and business requirements that were laid out for this project, to produce a diagram of the user flow:

Caption

Prioritizing the Right Information

We thought of the shopping process as some kind of planning funnel, where users start with a somewhat-defined but broad plan in their heads and slowly turn it into a more concrete one by moving through the flow. This model wasn’t perfect but it allowed us to have meaningful conversations with stakeholders about what pieces of information were the most relevant for the user at any given step.

Selecting Flights

I dedicated a lot of my efforts in designing the flight selection portion of the flow. Searching and exploring fares constitutes a large chunk of the total interactions with our shopping system, and this was an area we felt had a lot of room for improvement with regards to the old system.

Showing Itineraries

Our main goal here was to show each itinerary as simple as possible, while highlighting the most relevant information for users at this step of their search. We gave departure and arrival times the highest priority, as these are the main differential factors of a flight itinerary. Information such as stops, flight numbers and carriers were placed in the extremes of the card, but still made easily accessible.

Different sizes of cards

Merchandising Copa’s Flight Service

As opposed to other airlines, Copa does not have a cabin-experience-oriented service. Instead, its fares are structured around other distinguishing factors of the travel experience. There are only Economy and Business cabins, and the fares within each cabin are different only in attributes such as bags allowed, exchangeability or refundability. We needed to find a way of displaying fares in the UI that communicated those differences effectively.

We organized fares primarily by Cabin. On each flight card, we show the lowest Economy and Business fares. We had to contend with supporting different currencies, some of which offer prices that run into the 7 digits, and condensing fares in this way helped us deal with that.

...

When the user selects one of the cabins, we display all available fare options just below. The user can then compare and select one. For this interaction, the use of motion and color was crucial for communicating relationships between itinerary, cabin and fares available.

These fare cards are designed to be distinctive, to be easily comparable and to prioritize the most important information. We worked on iconography for each fare type that felt relevant to the attributes of each fare. This particular example has a “Restrictive fare” badge, alerting the user about possible limitations. These are explained in more detail when the user selects the fare.

For mobile we prioritized price comparison over displaying all attributes of each fare. Still, we add a short description of each fare, and in Economy Basic’s case, we also display a warning modal when selecting that fare.

Hunting for Fares

One of the most common behaviors we observed in recorded user sessions was the habit of looking far and wide for fare options: Different hours, different days, even departing or arriving at different nearby airports. We understood that this price hunting habit was crucial to the customer’s experience.

The "Plus-Minus-Three" fare list.

For this, we added a weekly fare view at the top of the results page, showing lowest available fares from 3 days prior and 3 days after the date selected by the passenger. On mobile, this experience was adapted so that this view was horizontally scrollable.

We also ported the old site’s 7x7 flexible search view which has always been popular with shoppers on the site. We adapted it to match the new digital look & feel of the airline and made it responsive.

Flight Summary and Holding a Fare

After users finish selecting their flights, we take them to a very simple page showing a summary of what they just selected. Getting the right itinerary is maybe the most crucial part of the booking process for passengers, and so it’s important that they’re certain of what they're booking, before they move onto more tedious parts of the flow. At this point, the user has the ability to easily return to the flight selection screen and pick a different itinerary.

Another popular feature from the old booking system was the ability to hold a reservation and pay it later. With the Coronavirus situation constantly throwing people’s plans in disarray, it became an ever more critical feature and we put a lot of effort into designing it to be simple to understand and use.

The "Flight Summary" page is a straightforward summary of what the user has just selected and its cost.

Originally, we presented the “Pricelock” functionality as a dichotomy: Pay now or save your fare and pay later. What we liked about this design is that it presented two very clear options for the passenger to move forward. However, by making this an obligatory choice, stakeholders were concerned it would make a customer who would have otherwise converted immediately, second-guess and choose the “pricelock” option.

We changed the design to present the Pricelock option as an “add-on” rather than an obligatory choice. We placed the functionality above the price total. We felt this solved the previously identified issue, but the solution now was more convoluted, requiring users to make several clicks, adding unnecessary friction. Stakeholders also felt it was too prominent.

...

In the end, we redesigned the functionality to appear just below the price breakdown, but above the continue button. This solution makes it easy to select a pricelock option and also avoids forcing the user to make a conscious choice every single time. It is also far more compact. We designed a microinteraction so that users noticed how the price breakdown above would change based on their selection.

Bringing it all home

With the “search” portion of the flow out of the way, it was time to tackle the “fulfillment” part of our booking process. Due to technical constraints, backtracking or wasting too much time could mean that the progress the user has made could be lost, and so our priority for this part of the flow was to guide users quickly and clearly through these steps.

Filling out Passenger Information

We recognized this was one of the most exhausting parts of the flow for users, because of the amount of information they need to fill in about each passenger flying. We made this task less daunting by only showing one passenger form at a time. We used motion to help users move through each passenger form easily.

When the user is done, we show a summary of all passengers with only the most crucial information: Name and date of birth. Getting either of these wrong could result in an annoying call to customer service, and so we let users review the information and correct it if necessary.

...

All Set: Confirmation Page

After going through our payment window (which exists as a separate platform and thus was outside the scope of this project), we show users a final, confirmation screen. We added a little celebratory flare at the top, by including an image of the user’s destination along with an encouraging message. In this page the user can find once more all the information of their reservation, along with their reservation code. From this page, users can jump right into My Trips, Copa Airlines’ booking management tool (for which I have another case study!).

Results

As the coronavirus pandemic has thrown a monkey wrench into the airline industry and consumer behaviors, comparing the new booking flow against the old one is a difficult task. However, there are very encouraging results that tell us the redesign has been received positively by Copa Airlines’ customers.

  • More than 13 million sessions in the last 6 months
  • 60% increase in mobile conversions (vs. 2019)
  • 4% overall increase in conversions (vs. 2019)

The new Copa Airlines booking site was launched in December 2020.