CASE STUDY · PLATFORM
Design System
Building a scalable foundation for consistent enterprise products
I created Asite’s first design system from the ground up, defining the foundations, reusable components and governance needed to create a consistent product language across web and mobile.
Role
Lead Product Designer
Ownership
Design system strategy · Foundations · Components · Governance · Adoption
Scope
Platform-wide · Web + Mobile
Focus
Scalability · Accessibility · Consistency · Design QA
The challenge
There was no shared design system across the platform.
When I joined Asite, product interfaces had evolved across different modules, teams and generations of the platform without a single shared design language.
Similar interactions were implemented differently, visual patterns were inconsistent and designers lacked a reusable foundation for creating new experiences.
I saw an opportunity to create Asite’s first design system — not simply as a Figma library, but as a shared framework for how products should look, behave and scale.
0 → 1 DESIGN SYSTEM
I had to define the system before I could standardise the interface.
With no existing design-system foundation to build on, I started by auditing patterns already used across the platform and identifying where common behaviours could be consolidated.
From there, I defined the foundations and component architecture that would support future product design across web and mobile.
Foundations
→ Atoms
→ Molecules
→ Organisms
→ Templates
FOUNDATIONS
Creating a shared visual language.
I defined the core foundations that would underpin the system, including colour, typography, spacing, interaction states and accessibility principles.
Colours
Typography
Spacing/grid
States
SYSTEM ARCHITECTURE
Building reusable patterns from the smallest controls to complete workflows.
Atoms
Icons · Typography · Colour · Inputs
Molecules
Buttons · Selects · Radio groups · Tabs
Organisms
Navigation · Tables · Complex forms
Templates
Form creation · Data-heavy pages · Product layouts
IMPACT
From no design system to 70% adoption across the platform.
70% design-system adoption
The system became the shared foundation for an increasing proportion of Asite’s product experience, improving consistency across design and implementation.
40+
Reusable components and patterns
Web + Mobile
Shared design language
5
Product Designers mentored
DESIGN LEADERSHIP
Scaling the system meant scaling how the team worked.
As the system grew, my role extended beyond designing components. I supported other Product Designers in applying the system, facilitated critique, documented patterns and worked with Engineering to resolve inconsistencies between design and implementation.
I also identified where existing components should evolve and where new patterns were genuinely required, helping avoid unnecessary duplication.
FROM FIGMA TO CODE
The system became a shared source of truth across design and development.
As the design system matured, components were developed and documented in Storybook, creating a closer connection between design specifications and production-ready UI.
This helped designers and engineers review component behaviour, states and variants in a shared environment, improving consistency between Figma and implementation.
Figma
Design foundations, patterns and component specifications
Storybook
Developed component states, variants and behaviour
Design QA
Reviewing implementation and resolving inconsistencies
Reflection
Creating the components was only the beginning. The real challenge was turning a new design system into a shared way of working.
Building Asite’s first design system reinforced that a design system is a product in its own right. Its success depends not only on the quality of the components, but on documentation, adoption, collaboration, governance and how effectively it supports real product delivery.