Building a robust Design System for an airline ecosystem
About the Client
Duration:
4 months
Services:
Design System
My Role:
Senior Product Designer
✍️ Overview
As the product designer leading this project, my primary responsibility was to establish a unified design system for the client’s growing suite of digital products. The client’s teams were working in silos with inconsistent style libraries, disconnected components, and limited adoption of design tools, which led to inefficiencies, duplicated work, and slower product releases. Our challenge was to create a scalable, accessible, and well-documented design system that enabled consistency across multiple products and supported multilingual requirements including right-to-left (RTL) languages like Arabic.
🧩 Phase 1: Foundation & Component Standardization
Step 1: Prioritization & Audit
We started by working closely with the client’s team lead to identify critical product flows and prioritize which components and experiences would benefit most from systematization. Once aligned, we conducted a comprehensive audit of existing design assets.
During this audit, we discovered:
The existing style library was outdated and rarely used.
Designers were relying on their own sets of colors, text styles, and layouts.
No consistent grid, spacing, or elevation guidelines were in place.
Step 2: Workshops & Data Gathering
To address these gaps, we conducted multiple workshops with the client’s cross-functional teams. Our goal was to understand real-world usage, pain points, and variations in patterns across products. This collaborative step helped ensure that the resulting system would reflect the team’s workflow rather than being abstract or top-down.
Step 3: System Fundamentals & Variable Creations
From these inputs, we defined the foundational elements:
Color palettes — accessible and standardized across use cases.
Typography — structured text scales for heading, body, and caption levels.
Spacing & grid — consistent layouts for adaptive and scalable UI.
Elevation/shadows — guidelines for depth and hierarchy
We then established a systematic framework of variables for colors, typography, spacing, grids, and elevations
Step 4: Component Development
We then prioritized components from the earlier audit and started building them systematically in Figma. Each component was designed with variations and properties that allowed flexibility while enforcing consistency.
Throughout this phase, we maintained a feedback loop with the client, sharing progress iteratively so they could test new components in real workflows. Since the team was new to Figma, part of our role included onboarding them to the tool itself, which initially caused some delays but crucially built their confidence in adopting the system.
To address these gaps, we conducted multiple workshops with the client’s cross-functional teams. Our goal was to understand real-world usage, pain points, and variations in patterns across products. This collaborative step helped ensure that the resulting system would reflect the team’s workflow rather than being abstract or top-down.
Step 5: Technical Integration
In parallel, we integrated Token Studio for design token management and collaborated with developers. This process required additional refinements such as renaming tokens and restructuring taxonomy to ensure smooth handoff and implementation.
📈 Phase 2: Scaling Across Products & Languages
With the identified core components in place, Phase 2 focused on scaling the system to handle the client’s broader ecosystem needs.
Key Challenges Addressed:
Multi-product scenarios with varying brand contexts.
Multilingual support, including Arabic (RTL), which demanded layout adjustments and theming strategies.
Solutions Implemented:
Created theming architecture to adapt the same core components across different products and brands.
Developed RTL-compatible components and layout variations.
Delivered page templates to give teams a starting point for building consistent product screens.
Produced system documentation covering guidelines, usage principles, and maintenance practices for long-term adoption.
Finally, we hosted hands-on workshops with the client team to train them on:
How to use the system as a single source of truth.
Adapting one design screen across multiple products or languages.
Best practices for updating and maintaining the design system.
🚀 Outcomes
The project delivered a fully functional, scalable design system that transformed the client’s design and development process:
Reduced design & shipping time: Teams no longer duplicated efforts across products.
Improved collaboration: Shared components and tokens created a stronger alignment between designers and developers.
Higher product consistency: A unified look and feel improved usability across all digital products.
Future-ready workflows: The design system allowed faster iteration for new features, products, and languages.
By the end of the engagement, the client’s team was well-equipped to maintain and evolve the system themselves. The migration to Figma was smooth, and with documentation and training in place, they gained the ability to scale their design operations efficiently.
"I had the pleasure of working with Tanu on implementing our design system, and her contribution was truly invaluable. She brought a clear vision and deep expertise to our brand principles, transforming them into scalable components, design tokens, and intuitive guidelines that will greatly improve consistency across our digital products."
