← Back

Architecture & Construction · 2025

Transforming Fragmented Enterprise Workflows into a seamless ecosystem with a Unified Design System

Designed and implemented a scalable enterprise-grade design system for a construction and infrastructure organisation to unify UX across multiple internal platforms. The solution streamlined design and development workflows, reduced UI inconsistencies, and enabled faster product delivery through reusable components and standardised interaction patterns.

⚠ NDADesign SystemsEnterprise UXData VisualisationScalable ComponentsUX GovernanceAccessibility
RoleLead UX Designer
Timeline8 months · 2025
PlatformWeb · Desktop
Team3 Designers, 6 Engineers, 1 PM,

Project Overview

Challenge
Six disconnected internal tools created constant friction across product teams, no shared design language, no single source of truth, and significant duplication of effort.
Objective
Unify the product ecosystem under one scalable design system, with governance and adoption as primary success criteria alongside the artefacts themselves.
Solution
A three-tier token system, 100+ component library, documentation site, and a structured contribution model, built collaboratively with engineering from day one.
Outcome
38% improvement in task success rate, 52% reduction in support tickets, and SUS score uplift from 4.0 to 8.1 across all products.

The Challenge

Understanding the problem

The organisation had grown through acquisition, leaving behind a patchwork of interfaces each built with different tools, conventions, and design philosophies. Product teams were duplicating effort, users were context-switching constantly, and there was no agreed source of truth. A design audit across all platforms revealed over 200 unique button variants. A symptom, not the disease.

Research & Discovery

What we uncovered

Stakeholder interviewsHeuristic audit (all platforms)Designer & engineer workshopsWorkflow analysisCompetitive system review

Key Findings

Teams spent 40% of sprint time rebuilding UI patterns that already existed elsewhere in the organisation
No shared token vocabulary made design-to-dev handoff inconsistent. The same colour had seven different names across codebases
Accessibility compliance varied widely: two products failed basic WCAG 2.1 AA colour contrast requirements entirely

Strategy & Approach

Design principles

Consistency
A single visual language across all products, enforced through tokens and documented patterns. Not through policing.
Scalability
Architecture built for teams to extend without breaking. A contribution model baked in from the start so the system grows with the organisation.
Accessibility
WCAG 2.1 AA compliance as a baseline, not an afterthought. Validated through automated and manual testing on every component.
Adoption
Success measured by usage, not delivery. A champion network and regular office hours built adoption into the operating model.

Process

How we got there

01
Discovery
Stakeholder interviews, full heuristic audit, competitive system review
02
Definition
Token architecture, contribution model draft, governance framework proposal
03
Design
Core component library, Figma token structure, documentation templates
04
Validation
Usability testing with engineering teams, accessibility audit, adoption readiness review
05
Rollout
Phased product-by-product migration, champion network, fortnightly office hours

Solution

What we built

Design Token Architecture

Design Token Architecture

A three-tier token system (primitive, semantic, and component) gave teams a shared vocabulary while allowing product-level customisation without fracturing the system. Tokens were the single source of truth, synced between Figma and code.

Component Library

Component Library

Over 100 production-ready components built collaboratively with engineering, each accessibility-audited and paired with documented usage guidelines, interaction specs, and documented anti-patterns.

Governance & Contribution Model

Governance & Contribution Model

A structured four-stage contribution process (propose, draft, review, publish) let any team add to the system while maintaining quality. Governance was lightweight by design: a rotating review panel, not a centralised gatekeeper.

My Role

Contributions & ownership

Research
  • Stakeholder interviews
  • Heuristic audits
  • Workshop facilitation
  • Adoption research
Design
  • Token architecture
  • Component library
  • Documentation system
  • Figma structure
Strategy
  • Governance model
  • Contribution process
  • Adoption roadmap
  • Success metrics
Collaboration
  • Engineering pairing
  • Champion network
  • Office hours
  • Team enablement

Outcomes & Impact

Results that speak

40%
Reduction in UI inconsistencies
2×
Faster design delivery
100+
Reusable components
5+
Products unified

Reflection

What I learned

The hardest part wasn't the design. It was adoption. A system nobody uses is just a side project with good documentation. Investing as much in the community and governance model as in the components was what made it stick. I'd do one thing differently: involve engineering earlier in the token architecture decisions, before the first component is drawn.

01
Systems need governance just as much as they need well-crafted components. One without the other fails
02
Adoption happens through relationships and momentum, not documentation alone
03
Research before architecture saves months of rework; the audit findings redirected the entire token strategy