Patagonia's AI Agent
Conversational B2C interface shaped by the brand's personality and values.
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 30,000 enterprise clients worldwide. As the product grew, its UI began to break at scale — components were inconsistently implemented, accessibility standards were not met, and the existing visual language failed to scale across complex dashboards, reports, and data-heavy interfaces.
In practice, the team had a Figma library and CSS standards, but components still drifted from the source with every implementation. Maintaining the platform, let alone rebranding it, meant updating hundreds of components individually instead of changing a single token.
Objectives
- Improve accessibility and readability
- Provide a reliable source of truth for engineers
- Enable platform-wide changes through a semantic token system
- Establish a shared quality bar across design, engineering, and branding
Approach
1. Interface Audit & Usability Baseline
I 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, I 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 pages based on component coverage, technical independence and complexity. Highly complex dashboards and reports were intentionally excluded from the pilot due to scope risk, and instead explored through high-fidelity mockups to align stakeholders on the system vision. The pilot focused on a simpler page with high component coverage, allowing the system to be validated under real conditions while remaining feasible to implement.
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:
- Introduce a scalable UI pattern structure (Atomic Design principles)
- Establish a 3-tier token taxonomy
- Rebuild the color system (WCAG AA compliance, data visualisation support)
- Define an 8pt spacing system (semantic roles, multiple density levels)
- Introduce an open-source product typeface (reduce cost, improve performance and legibility)
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, creating a scalable model that supports maintenance and evolution as product complexity grows.
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 predictable behaviour across complex workflows.
See documentation examples: Typography | Color | Input
Impact
The Awin Design System raised the accessibility baseline, and established the single source of truth that had been missing — so future changes to the product or brand could be made at the token level rather than component by component. By moving to open-source typography, it also reduced licensing overhead and improved cross-device legibility across complex, data-heavy interfaces. The result is a shared language between design and engineering, aligned to a single source of truth, reducing handover friction and narrowing the gap between design intent and implementation as the product continues to scale.
Screens
