TL;DR
30-sec. summary
The goal:
Redesign Copa Airlines' outdated website, improving user experience, navigation, and performance, while aligning it with modern design standards and the company's other digital platforms.
The approach:
I led a comprehensive UX process involving customer and stakeholder research, information architecture, and usability analysis. We redefined the site’s structure, focused on essential transactions, and created flexible content blocks using a Headless CMS to ensure consistency and adaptability.
What it says about my skills:
This project demonstrates my expertise in leading large-scale redesigns, user-centered problem solving, and collaborative work with cross-functional teams. It highlights my ability to streamline complex systems, prioritize user needs, and integrate branding with digital experiences.
This is a really long case study, therefore I'm leaving here some useful links so you can skip to the area that might be more interesting to you:
In 2022, I led the complete redesign of Copa Airlines’ website. The old website was first launched 10 years ago. The outdated tech stack, slow speed, and subpar user experience lagged behind our other digital platforms like the mobile app and transactional flows such as Web Check-In and booking.
Redesigning this site was no small task. It serves as the main entry point to booking tickets and is where millions of travelers find important information on travel requirements and the status of their flights. This case study highlights the key focus areas of the project and showcases the outcomes of our work.
This project was done in collaboration with the Copa Airlines UX team, Ilógica, and EPAM.
Research Techniques
Quantitative Research
We obtained customer contact data to identify needs of customers that could be solved by improving the website.
User Research
We interviewed customers of the airline (both frequent travelers and regular ones) to understand how they currently use the site and what pain points do they experience.
Stakeholder Interviews
We involved stakeholders in workshops, 1-on-1 interviews and in other kinds of input-gathering activities to capture the needs of the business with regards to our website.
Usability Testing
We tested both the old and new websites against a set of common tasks to evaluate how our redesign affected customers’ experience.
Problem definition
After conducting our research process, we identified the following problem areas:
Poor Content Structure and Navigation
Over the years, content pages were added and removed with no oversight or strategy. This lead to many broken links, navigation loops, and duplicate content, making the site hard to browse.
Another problem was the main navigation was very overwhelming, with more than 30 links in the global menu, organized in categories that made no sense to regular customers.
Our research showed that 30% of customer calls were about information easily accessible on the website, a clear sign that we had lots of room for improvement in making information clearer.
Difficult to Start a Transaction
On the old site, customers struggled to know where to go to do what they came for—book trips, check-in, or modify reservations. The site's navigation did not prioritize these actions.
On the other hand, the site's booking panel, while prominent on the homepage, was buggy and hard to find in pages other than the home.
Rigid in Structure and Hard to Adapt
The site’s rigid technological structure made it hard to change the site’s layout and content. During the Coronavirus pandemic, the company struggled to publish relevant information and keep customers updated, due to the fact that existing content blocks were only suitable for promotions rather than for providing information.
Inconsistent Design Language
The website went through partial redesigns during its existence, meaning that certain pages looked very different than others. The use of colors, iconography, tables and other visual elements varied heavily from page to page, lowering customers trust in the source and quality of the content presented.
A screenshot of the old copa.com website navigation. In a card sorting exercise, we discovered that the categories “Travel”, “Plan” and “Services” did not help users understand where to find the information they were looking for.
A screenshot of the old copa.com homepage. This grid of banners was originally meant only for promotions. Over time it started to be used for informational purposes as well, a task that it did not fulfil well.
A content page on the old website about Business Class. This page was designed when the website was first launched, and its look & feel reflects the digital branding of that time.
The ConnectMiles loyalty program landing page. This content page was designed years later than the previous one, under a different set of visual guidelines.
Unifying our Brand and Design System
The start of the copa.com redesign project coincided with a brand refresh led by the Brand team. In my role as the Lead UX designer I saw an opportunity to bring the Brand and Digital Product teams together to create a cohesive Brandbook and Design System, ensuring consistent communication with our customers across all platforms. You can read here a separate case study going over the details of that work. This step was fundamental in getting us in the right place to continue with this project.
Design Principles for a New copa.com
Once we finalized our research and problem definition, we established three guiding principles for the new website. These principles were tied directly to our findings and shaped our decision-making process:
- Prioritize transactions and self-service: The site should help customers reach their goals quickly and easily, making it simple to access self-service flows.
- Focus on essential information: Content is clear, concise, and purposeful. It is structured to align with users' mental models, offering warm but precise communication and turning complex topics into easy-to-understand explanations.
- Adapt to the user’s context: The site tailors information to the user’s current travel plans and can adapt to changing situations when things don’t go as expected.
Output of a design workshop with our friends from Ilógica where we mapped different facets of the website: Principles, Pain points, concept of the website, voice and tone of the content, etc.
Information Architecture
The first challenge was organizing the site's messy content. We started by inventorying every page, analyzing visit frequency, and mapping how pages were linked.
Next, we held a workshop to sketch a new structure for the site. Using the old structure, research insights, examples from other airlines, and a hefty dose of intuition, we produced a large content tree map. Through the duration of the project we would return many times to this map, to help us make sense of the navigation and to map out our content migration plan.
Our information architecture workshop.
Outcome of that session.
We identified four major content groups: Information When Traveling, Information about our product, ConnectMiles (Loyalty Program), and Customer Service. We also identified less important content groups which we treated with lower priority in the navigation.
Global Navigation
Our guiding principles helped us define how our nav bar should be organized:
Prioritizing transactions first with links to the most important actions users can take (Principle: Prioritize transactions)
Providing a single point of access to any information the user might need, with direct links to the most essential content for them (Principle: Focus on Essential Information)
We encourage customers to find an answer to their questions with a search bar connected to our help center.
Internal Navigation
For some topics, such as baggage, there is an endless amount of information. Presenting all of this in a single page is unsustainable. Therefore we needed to define sub-pages and design ways to navigate between them.
One way we achieved this was by creating “hub” pages, where users can see a list of pages related to a single topic. We tried to make these as simple as possible, so that users can get to their desired information in only a few seconds.
In addition to that, information on one page can naturally flow into information present in other pages. We wanted to encourage the customer’s research process by providing navigation mechanisms within categories. We did this through the use of side navigation and “next page” links.
Content Pages
Once we had figured out the structure, it was time to fill it in with actual content and pages. In this process, we conceived different types of pages: Some informational, others promotional. Some with simple text content, others which required tables, graphics and interactive blocks.
We catalogued these pages and set to work in creating templates and layouts for each kind. Full-width, 2 columns, etc. We sketched some page archetypes, and through these free-form design exercises began to identify what content blocks we needed for the website. We also designed some obvious essential content blocks, such as Markdown Text, Image with caption, Tables and accordions.
For building copa.com, we relied on a Headless CMS to manage the content of the site. We also had to come up with a modeling system to represent the different kinds of content blocks and layouts into the CMS. I was heavily involved in this process. It was one of the more challenging parts of building this website, but in the end we conceived a system that provides flexibility and expandability for new blocks in the future, while also enforcing design consistency. With these building blocks in place, we were able to begin fleshing out different pages of our site.
The result of a late-night brainstorming of trying to figure out the data modeling for the content blocks.
The Homepage
The homepage had some specific requirements we needed to keep in mind:
- Its main focus is to be the main entry point to searching flights. Therefore this action needs to be placed front and center. This is in line with our Transaction principle.
- The homepage also represents an important commercial asset. Its space can be used for marketing campaigns for the airline. For that reason we need to provide ways to showcase different destinations, products and services.
- It should also be available to serve urgent or useful information for customers. And in situations of emergency, it needs to become the first point of information towards our customers and other parties.
The top area of the new website is mostly focused on helping customers book a flight or start other transactions. We also reserved a space to surface very important information in the form of alerts
Homepage Compositions
The idea for Homepage Compositions came from our frustrations with trying to use our old homepage banners for non-marketing purposes. These were rigid in structure, hard to read and we often had to rely on placing text inside images to make the most of them. The need for a more flexible solution became apparent during the Covid pandemic, where we needed to show important information to customers on the homepage. In the end, these Compositions became the way in which we addressed the various needs of users and the business around the homepage.
The old way of creating promotional widgets was to take an image, bake in some text in the image, and put it inside a template that only supported a title, description and a link. We began by decomposing this element and seeing each element as a separate item.
Our idea was not particularly innovative: Instead of just having an image banner, we can create templates that combine images, logos, text and even dynamic data to create a “composed” banner.
Our “Aha!” moment was when we realized that we could not only create marketing compositions, but also informational and transactional compositions.
This example actually combines the two: It explains to customers how to prepare before their flight, and it also lets them input their country of destination to get travel requirements for that country. Compositions blur the line between a banner and an interactive element.
Having compositions built for different purposes would open up the possible use cases for the homepage, making it possible to advertise, inform and start a purchase from these elements.
This approach also made it easier to adjust the layouts to work well with different contents and in different screen sizes.
The compositions would be placed inside a “tiled” layout that can stack infinitely.
Release and outcomes
The new copa.com website was released to customers in early 2023. Some of the achievements we made through the redesign of this website are:
- We updated the site’s look & feel, bringing it up-to-date with our branding and design system.
- We improved the site’s information architecture, navigation and structure, bringing it in line with our customer’s expectations and with the airlines’ needs.
- We created a model for managing our content that is flexible, extendable and helps us enforce design consistency.
- We grew the organization’s design maturity, by implementing systematic ways of iterating, refining and documenting design.
There's many more areas of work I would love to dive into (some examples: Alerts system, more details on content modeling and headless CMSs) but this case study is already too long as it is. Perhaps I will release a 2nd part going over these other aspects. Needless to say, this has been one of the biggest and most challenging projects I've participated in, and it wouldn't have been possible without the guidance, input and help from so many other collaborators at the Copa Airlines digital product team and our partner agencies (y'all know who you are!). The website is now live, go visit it.