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 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 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 by addressing color contrast and typography issues across the UI
- Give engineers a reliable source of truth, so components weren't being rebuilt from scratch or diverging across features
- Introduce a semantic token system so that platform-wide changes could be made in one place and propagate consistently across the entire product
- Set a shared quality bar across design, engineering, and branding — one that could hold as the team and product scaled
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 open-source product typeface optimised for UI and multilingual support — eliminating licensing costs, reducing load times, and improving legibility
- Rebuilding the color system using perceptually uniform color models to achieve WCAG AA compliance and support data visualization
- Defining an 8pt-based spacing system with semantic spacing roles to support multiple density levels
- Establishing a 3 tier token taxonomy 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 raised the accessibility baseline across a platform serving 30,000 clients in seven languages, 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, built not just for components, but for long-term coherence as the product continues to grow.
Screens
