The first year: How Cathay Pacific is prioritizing user experience and saving time with zeroheight

Cathay Pacific, the flagship airline of Hong Kong, is known for offering a premium flying experience. Lush seats, a wide range of in-flight entertainment, and delicious meal offerings helped the company attract consumers looking for an elevated in-flight experience.

But when air travel ground to a halt in 2020, the company was forced to rethink their strategy.

Ernest Hui, Head of UX/UI Design at Cathay Pacific explains, “The expectations of customers changed. The way they consumed content and the way they interacted with digital touchpoints all matured drastically over the past three years.”

To respond to the abrupt change in consumer behavior, the airline decided that they would focus on user experience. Ernest continues, “We needed to be able to set ourselves apart and hold user experience as one of the pillars moving forward to an extent that was never before attempted.”

And for Cathay Pacific, dramatically improving user experience started with changing the way the product team works, including creating a design system. Less than a year into starting HORIZONS, the company’s design system, the team has already increased the amount of time they can spend thinking about user experiences, started documenting reusable code, and made inroads toward a more consistent, accessible product.

Making room to think about user experiences

When making the shift to create better digital experiences, the team at Cathay Pacific knew they’d need to give designers more time to focus on conducting user interviews and engaging in deep thought around user flows.

And, of course, that extra time needed to come from somewhere. The design system was heralded as the perfect way to help designers reuse their work, giving them the time they needed to understand user experience.

When the team started working on their design system, they used the atomic design method to start with documenting atoms, like buttons, and move toward more complex documentation, like a full page.

Ernest details the new approach, “Designers don’t have less to do but more time to focus on the more fun aspects of design where they can think about solutions, figure out flows, and conduct research versus drawing a circle for the millionth time.”

The team is only six months into documenting with zeroheight, and the design team at Cathay Pacific already has more time to think about delighting users.

A place for reusable code

Cathay Pacific has added documentation in the design system as an essential part of the release process. Like other companies, new features and products start with designers. From there, developers go about coding the new experience. And once the new feature is checked for quality assurance, it’s released to the company’s users.

But for Cathay Pacific, the process doesn’t end with releasing new functionality to users. After release, any new component or template created as part of the release is added to the design system, using a quick submission process.

Documentation on the style of a button component

Code documentation for the button component

Housing reusable code in a design system saves quite a bit of time. Ernest recalled the time before the company adopted a design system, “we spent a lot of time trying to figure out why [components] were coded in a certain way which added unnecessary overhead.”

Now, each component includes a tab that includes documentation on style, usage and behavior, code, and accessibility which allows developers to understand the full context without taking hours, or even days, to decipher the decisions of their colleagues.

There’s another benefit to documenting code, too. Onboarding is a whole lot faster! Ernest furthers, “In the future, we’ll be able to drop people into teams and have them start working quicker.”

Creating an accessible, consistent product

Part of Cathay Pacific’s shift post-pandemic has included a renewed focus on consistency and accessibility. The design system helps with both.

In a company like Cathay Pacific, where teams work across multiple countries and time zones, maintaining a consistent product can be a real challenge. After all, product teams can’t lean over and ask questions to get information about design and development decisions. But, product inconsistency has lessened since the team adopted HORIZONS. Ernest recounts, “With a design system in place, there’s a place to start from, and we expect deviation to be less chaotic.”

An overview of accessibility at Cathay Pacific

As for accessibility concerns, the team finally has a single place to document upcoming improvements. Ernest notes, “We are documenting any accessibility issues and accessibility concerns.” With proper documentation around how the product can improve, there’s finally a checklist the team can use to better serve users.

The skies ahead

The first year of HORIZONS has been an eventful one, with multiple product teams across different countries adopting the design system. But, it doesn’t stop there. When thinking about the future, Ernest remarks, “I would foresee that we’re going to see exponential gains as we move forward and the people and the businesses start getting more comfortable with the design system itself, they can focus on the real questions.”

No doubt, allowing the company to focus on the “real questions” will create amazing experiences for travelers and cement Cathay Pacific’s transformation into an airline catering to the modern consumer.