A design system foundation in 6 weeks
Highlights
- Delivered in 6 weeks: A scalable, tokenized design system built and validated to unify global design and development workflows.
- Backend-agnostic architecture: Components decoupled from business logic, supporting both Java and .NET micro-frontends.
- Empowered internal teams: Governance model and training enabled independent system maintenance and long-term scalability.
Summary
As Avinode's business expanded, so did the impact a scalable design system could have in unifying their growing suite of products and global design and development practices. By establishing reusable foundations, connected workflows, and a new governance model, we helped set their teams up with the foundations to deliver consistent, high-quality user experiences more efficiently. This initiative not only streamlined operations but also positioned Avinode to support sustainable growth and remain at the forefront of digital innovation in their industry.
Introduction
Avinode is a global leader in the business aviation industry. As their business grew, so did their teams and the complexity of their platform and product ecosystem. To maintain their competitive edge, Avinode sought a more scalable and cohesive approach to unify their design and development workflows, improve team efficiency, and deliver consistent, high-quality user experiences across their ecosystem.
The opportunity
As Avinode scaled its business, several opportunities emerged to enhance efficiency and collaboration:
- Streamlining component libraries: Consolidating various different libraries presented a chance to improve consistency.
- Harmonizing a micro-frontend architecture: Avinode’s use of both Java and .NET created an exciting opportunity to align components and design systems across platforms.
- Upskilling teams: The varied experience levels across design and development teams highlighted potential for knowledge-sharing and sharing best practices and learnings across products.
Avinode’s vision was to develop a unified design system that could seize these opportunities, accelerate product development, and provide a solid foundation for their long-term growth.
Our approach
The goal was to create a design system that was not only effective but also empowered the client’s teams to manage and evolve it independently.
Key elements of our approach included:
- Unified governance and processes: Establishing a governance model and structured processes for a cross-functional core team.
- Leveraging past efforts: Learning from the client’s earlier design system to identify what worked and what needed to be adjusted.
- Upskilling teams: Empowering designers and developers with training on best practices to align their workflows and skill levels.
- Scalable and backend-agnostic solutions: Planning a consolidated front-end component library decoupled from business logic and backend stack.
- Collaborative tools: Implementing tools and workflows that bridged geographical and technical divides to align teams.
Discovery
We began with a two-week discovery phase, identifying key opportunities for improvement through stakeholder interviews and audits of workflows, tools, and assets. This revealed:
- The need for centralized design tokens to establish consistency.
- Opportunities to streamline collaboration by connecting design and development tools.
- Inefficiencies caused by product-specific logic embedded in components, limiting reusability.
By addressing these, we aligned stakeholders on a clear vision for the design system and created a roadmap for success.
Establishing the foundation
We prioritized a scalable and reusable foundation that aligned design and development from the beginning.
Core primitives and semantic tokens
We prioritized establishing reusable, scalable design primitives and semantic tokens:
- Centralized tokens: We used Token Tango, our open-source Figma plugin, to establish a single source of truth for tokens like colours, typography, and spacing across Figma and GitHub.
- Semantic mapping: Tokens were mapped to functional roles (e.g., "primary-action") for consistency and scalability.
Connected workflows
- Consolidated libraries: We created a centralized component library using a monorepo to co-locate all design-system resources.
- Storybook for collaboration: Teams utilized Storybook as both a development environment and dynamic documentation. Integrated Chromatic for automated visual regression testing minimized QA efforts and aligned designers and developers on component validation.
- Styling via CSS modules: To complement Avinode’s current use of SASS, we used CSS modules, improving performance and isolation.
Scalable architecture
- Micro-frontend ready: Components were designed to function independently of business logic and backend stack, supporting Java and .NET architectures.
- Radix-UI recommendations: Provided guidance on leveraging Radix-UI for accessible, standard controls and widgets, reducing development time.
Figma foundations
We created a Figma environment for the design system, including:
- Foundational libraries (i.e., Core, Web Foundation, Web UI Kit).
- A component creation process template to streamline designer workflows.
We also established a naming convention for tokens, ensuring clarity and consistency across teams.
Governance and upskilling
- Structured governance model: Established phased feedback loops and alignment workshops to ensure long-term sustainability.
- Upskilling initiatives: Delivered targeted training to standardize practices across teams, bridging gaps in skills and processes.
Validating the design system
We validated the design system with a reusable accordion component as a proof of concept. This demonstrated:
- Effective tokenization.
- Component separation from product logic.
- Compatibility across legacy and modern platforms.
Additionally, a "kitchen sink" demo application showcased how components adapt to different back-ends and business contexts while maintaining consistency, providing teams with a tangible example of scalability.
Results
Rangle provided a tailored solution to enhance Avinode’s digital capabilities:
- Centralized design tokens and semantic layers: Simplified updates, reduced errors, and aligned design and development.
- Accelerated development: Consolidated workflows and automated testing improved development velocity and time-to-market.
- Empowered teams: Training and governance structures equipped Avinode’s core teams to maintain and evolve the system independently.
These changes are paving the way for faster product cycles, improved team efficiency, and more consistent, high-quality user experiences – strengthening Avinode’s position as an industry leader.
Conclusion
In just six weeks, we delivered a scalable design system foundation that unifies workflows, empowers teams, and fosters long-term innovation. By addressing global collaboration needs, leveraging past efforts, and focusing on sustainable practices, Avinode is now equipped to support their growth and maintain their competitive edge in the evolving business aviation industry.