Awin Design System
Building a scalable, token-based design system for a global B2B SaaS platform, aligning design and engineering while supporting complex, data-heavy interfaces.
Role
Senior UX/UI Designer
The Challenge
Awin is a global B2B SaaS platform for affiliate marketing, serving over 25,000 clients worldwide across multiple plans, feature tiers, and seven languages. As the product grew, its UI became increasingly fragmented—components were inconsistently implemented, accessibility standards were not met, and the existing visual language struggled to scale across complex dashboards, reports, and configuration-heavy interfaces.
The challenge was to create and introduce a new design system and design language that could support a wide variety of components, data-dense interfaces, and global use cases—while enabling fast, iterative delivery across distributed teams.
Objectives
- Improve accessibility and readability by addressing color contrast and typography issues across the UI
- Increase component reusability and consistency across dashboards, reports, and navigation patterns
- Introduce a semantic token system to support responsive behavior and device-specific variants
- Establish a scalable design system architecture with clear standards that maintain quality as the product grows
Approach
1. Interface Audit & Usability Baseline
We began with a comprehensive audit of key dashboards and reports, combining behavioral analytics (Amplitude and Hotjar), heuristic evaluation, and accessibility and responsiveness audits using Lighthouse. This allowed us to identify high-impact usability issues, component inconsistencies, accessibility gaps, and patterns of user friction in real-world usage rather than relying solely on visual critique.
2. Design System Scoping & Prioritization
To define the system's scope, we mapped all existing UI components across the platform using a component-to-page matrix. This revealed which components appeared most frequently, where inconsistencies existed, and which elements would deliver the highest impact if standardized.
In parallel, I introduced a prioritization framework to select pilot areas based on reuse potential, complexity, traffic, and implementation feasibility. High-traffic dashboards and navigation patterns became the initial proving ground for the new system.
3. Foundation Research & System Definition
I led foundational research across typography, color, spacing, and layout—combining competitor audits, accessibility standards, and real UI testing.
Key foundation decisions included:
- Introducing a neutral, highly readable product typeface optimized for UI and multilingual support
- Rebuilding the color system using perceptually uniform color models to achieve WCAG compliance and support data visualization
- Defining an 8pt-based spacing system with semantic spacing roles to support multiple density levels
- Establishing a token taxonomy (primitive, semantic, component) to enable scalable theming and responsive variants
These foundations were validated through dashboard and reporting prototypes, ensuring the system worked in real, complex interfaces—not just isolated components.
Solution
A Scalable, Accessible Design System
The result was a new component-based design system built for scale, accessibility, and long-term maintainability. It provides a shared language across design and engineering, reduces duplication, and enables consistent experiences across the Awin platform.
Key outcomes:
- Fully accessible color palettes and typography optimized for data-heavy UIs
- A semantic token system supporting responsive and device-specific variants
- Standardized components with clear interaction states, validation, and usage rules
- Improved UI consistency across dashboards, reports, and navigation patterns
- Comprehensive documentation supporting adoption and long-term evolution
Design Guidelines & Specifications
The design system guidelines are structured using the Atomic Design principle, organizing the system into Foundation, Atoms, Molecules, and Organisms. This layered structure establishes clear levels of abstraction, making components easier to scale, maintain, and evolve as product needs grow.
The guidelines go beyond component anatomy and basic usage, covering interaction behavior, responsive rules, spacing in context, accessibility requirements, and content standards. Rather than documenting isolated UI elements, the system defines components as part of a cohesive whole—ensuring consistency, usability, and predictability across complex workflows.
See documentation examples: Typography | Color | Input
Impact
The Awin Design System created a unified, accessible foundation for a complex, data-driven B2B platform used by teams and clients globally. By introducing a WCAG-compliant color system, a highly legible product typeface, and a token-based architecture, the system significantly reduced design and implementation friction, accelerating delivery across distributed engineering teams in Europe. As a result, teams shipped features faster and more consistently, while maintaining high standards of accessibility, visual coherence, and scalability as the product continued to grow.
Screens
