Redesigning Copa Airlines’ Online Booking Site
Delivering a complex product in record time through a lean, pragmatic approach to design.
RoleDesign Lead, UX researcher, UI Designer
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)
When we set out to rebuild this online shopping flow, we found ourselves dealing with difficult constraints early on:
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.
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:
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.
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.
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.
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.
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.
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.
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!).
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.