TL;DR
30-sec. summary
The goal:
Align Copa Airlines' brand refresh with our digital Design System, ensuring consistency across all platforms and customer touchpoints.
The approach:
I brought together the Brand and Digital Product teams to bridge the gap between their needs, creating a unified design language that balanced the new brand identity with digital accessibility and usability. I took the foundational elements of the brand refresh and expanded them to bring on board best practices around accessibility, color systems and typography. In that process we also evolved in our design maturity by producing a robust design system, with design principles, documentation, tokens and components that were fully aligned with our corporate brand.
What it says about my skills:
This project highlights my ability to lead cross-disciplinary collaboration, mediate disagreements and find compromises between different actors in an organization, and develop comprehensive design documentation that enhance both the user experience and brand consistency.
Take me to the designsWhen we started our UX practice at Copa Airlines around 2018, we developed a design language for our digital products. It wasn’t a full Design System but included a UI Kit, color tokens based on Copa’s brand guidelines, and a typography system. This visual language was used solely for digital products.
The start of the copa.com redesign project coincided with a brand refresh led by the Brand team. This refresh introduced an updated color palette and typography but didn’t fully address digital touchpoints beyond email marketing.
As 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.
Different needs, different perspectives
Our Design System
Copa’s Digital Product Design System was tailored to transactional flows: perfect for forms and itineraries but inadequate for content pages or promotional content, something that would be essential for the new website.
Two examples of our Design language at the time: Traveler Information Form and Copa Airlines’ app homepage.
Copa Airlines’ Brand Refresh
Marketing’s brand refresh focused on print and ads, introducing a friendlier, vibrant style with a new color palette and typeface. Its use of color proved problematic for accessibility and its new typeface was hard to read for smaller text.
Example pieces from the new brandbook. A marketing email and a magazine ad.
Bridging The Gap
Our starting point needed to be establishing a working relationship between the two areas. At the time, Brand and Digital Product teams did not have the smoothest collaboration, so I applied empathy and active listening to understand the Brand teams’ concerns and pain points with regards to collaborating with Digital Product. Once we had figured out questions about ownership and decision-making, I got to work with them to identify overlaps and differences between their needs and those of the Digital Product team, laying the groundwork for a unified design language.
I provided important insights to the Brand and Marketing team on digital accessibility and the nuances of digital vs. print media. By demonstrating the benefits for their email marketing and social media, I gained their support for working on expanding the brandbook.
A new Design System
With both teams aligned, we expanded the brandbook and established a new design system for our digital products, focusing on four areas:
Color
To start, we took the new brandbook’s brand colors as our base colors, replacing the cooler tones we used to have.
Then, we expanded the updated color palette with tints and shades to give us greater flexibility to create accessible, on-brand interfaces.
We incorporated our existing grayscale primitive values into this palette.
We also incorporated “sentiment” colors to help us handle alerts and system states. These were also incorporated into the brandbook, but its usage was limited to digital interactive platforms.
Finally, we also worked extensively in defining valid color pairings to ensure good contrast and aesthetic quality at every moment. We did this following WCAG 2.0 contrast rules.
Typography
The brandbook introduced a new typeface (Gilroy) to the brand. This was a geometric-style typeface, while in Design Systems, our existing typeface was Suisse Int’l, a humanist, helvetica-like font. We found that there were Pros and Cons to each one.
We integrated the new brand typeface, Gilroy, using it for headings and large fonts, while retaining our previously used font Suisse Int’l for smaller font sizes.
This way we combined the friendliness and expression of Gilroy (the new brand’s typeface) with the readability and reliability of Suisse Int’l (our existing typeface for digital products).
This turned out to be a great font pairing, and it allowed us to experiment with some fun layouts.
Shapes
The new brandbook moved our brand towards a more youthful, friendlier style. This is reflected in the use of brighter colors and the introduction of a Gilroy, a geometric typeface. It felt right to adjust our use of shapes to match this vibrant energy.
We decided to emphasize the rounded corners on things like cards and other containers. We also rounded-off UI elements like buttons. These shapes played better with the geometric style of Gilroy.
Shapes
The brandbook also introduced new “pictograms” that could be used to illustrate ideas and situations. We felt these could be useful for our digital products, so we commissioned the expansion of this pictogram library to represent more than 100 concepts, ranging from transactions (check-in, book flight) to common air travel concepts (special assistance, gate, boarding).
Images
The new brandbook provided guidelines for image use, which we applied in the website redesign, something that we didn’t have in our previous design guidelines for digital products. This allowed us to make bold usage of images in new promotional layouts for our website.
One way in which we did use images in the past was with “Destination Badges”, an element we used to identify a specific destination. During this work we evolved the Destination Badges to make them usable in more places.
Outcomes
Although this was a short project within a larger scope, its impact was significant across the company, furthering our design maturity. This alignment between Brand and Design Systems allowed us to:
- Create a comprehensive design system for Copa Airlines, supporting transactional, communicational, and promotional use cases.
- Develop a brandbook that incorporates digital accessibility best practices.
- Achieve visual alignment across all customer touchpoints.
- Redesign our website with a new, exciting visual identity.