Building the Right Design System — A Catalyst in our Arsenal

By Naveen S R

The Decision: Why Have a Design System?

Having a design system enables the company to create a superior and unique user experience. It is the catalyst to our arsenal of capabilities. When we started our journey as part of the airasia.com 3.0 we were scaling teams and creating new lines of business (LOB aka Vertical). Our LOBs grew from three to twenty in less than a year and therefore having a design system made a lot of sense. We managed to secure the buy-in of the leadership team, which was an important first step to ensuring continued budget and focus.

The Inception

Our inception of the design system started with deep collaboration with product, UX designers, and the development team. We looked at our Figma designs and reviewed our product roadmap for tactical and strategic goals. We then calibrated the data points with our product roadmap from other lines of business. Following the Atom Design Pattern, we derived a high-level mapping of design tokens, components, widgets, templates, and generators.

The Development

Initially, we started the development process with a core team who was tasked to churn the core design tokens and components. Over time, the process evolved and we moved to a federated model with the core team as gatekeepers for quality and opened up the code base so that all lines of business could contribute. To onboard teams, we spent time creating usage guidelines, onboarding video logs, organised socialization sessions, and built a Guild across teams to share best practices.

Our design system was built to be technology agnostic. We use this across our legacy path and forward-looking micro front ends. We use semantic versioning and encourage eventual consistency to overcome lockstep releases.

The Benefits

At its core, a design system brings in the practice of thinking beyond a team and looking into re-usability. The coding quality is superior. The components are gated for performance budgets and quality budgets. All of the components are marked for accessibility and support theming from the ground up.

The Challenges

It is airasia.com culture to have healthy debates, which has helped us overcome innumerable challenges along the way.

The product team’s primary goal is to deliver value to the business at the lowest cost possible. Making the components reusable would incur additional development cost and we had to sensitise our product team about this.

The middle ground approach was to look at an acceptable amount of tech debt and provide teams to move to the central design system from the local design over a while. Local design system is the team-specific design system that prioritises business rules and needs over re-usability.

Understanding what goes into the design system is a critical aspect. Case studies of payment methods are not advocated to be in the design system since the team who owns it would generally be the only consumers of the components. These are ideal candidates for the local design system for the team.

Any component in the design system must be open and re-evaluated from time-to-time for relevance and feature parity across teams. It is important to note that if patterns of new versions of the component evolve tightly coupled to a team, it makes sense to move that to the local design system of the team.

Trust across teams and deep collaboration is a challenge to accomplish. Building the guild and ensuring knowledge management is a key aspect to ensure the success of the design system.

Having a regularly maintained style guide and constant deep collaboration across product and UX across all lines of business is a critical aspect as well for continued success of the design system.

Other positive ripples include a uniform user experience across different funnels and the ability to have the capability to re-brand quickly.

The Impact

The seeding of the design system and getting the first consumer of our homepage out cost about six sprint cycles. Subsequent iterations to use and build on top of it have been seamless and efficient.

The initial cost that we invested to build the core aspects of the design system has resulted in an overall shorter cycle time — other lines of business are now able to churn their requirements in only a few days.