DESIGN SYSTEMS · 2024
One System, 14 Sites
Led a federated design system for BC's Provincial Health Services Authority across 14 government health properties.
THE CHALLENGE
The Challenge
A system fractured across 14 organizations
PHSA's 14 provincial health programs each operated their own web presence — inconsistent in design, non-compliant with accessibility standards, and costly to maintain. With millions of British Columbians relying on these sites for critical health information, the fragmented experience had measurable consequences: high drop-off rates, poor wayfinding, and duplicated development effort across every program. Any solution would need to serve 14 distinct brands without creating 14 silos.
THE APPROACH
The Approach
A federated architecture, built for scale
I proposed and led a federated design system: a shared foundation with program-level customization designed in from the start. Rather than a monolith that enforced uniformity, the federated model gave each program creative autonomy within a governed structure. I drove the architecture decisions — token system, naming conventions, component API — while coordinating alignment across 3 PMs, a tech lead, 5 developers, a creative director, and stakeholders from all 14 organizations.
The Process
Discover
Conducted a full component audit across all 14 PHSA sites to identify shared patterns, redundancies, and program-specific needs. Mapped three distinct user types — designers, content editors, and business owners — each with different requirements from the system.
Define
Established the federated architecture: shared design tokens, typography, and core components as the foundation; program-level colour palettes, brand shapes, and identity moments as the customization layer. Collaborated with the tech lead to integrate Figma's new variables and modes into the development workflow from the start.
Design
Built the component library using atomic design principles. Created 3 documented landing page templates (global hub, section parent, deep child pages) with explicit variant rationale. Chose Noto Sans as the system typeface — selected specifically for its support of the indigenous languages spoken across British Columbia's population.
Deliver
Launched the pilot with BCMHSUS, then extended the system to BC Children's Hospital, BC Cancer, and BC Centre for Disease Control — applying program-specific colour palettes and branded identity treatments within the shared component architecture. Wrote full system documentation and established naming and governance conventions for ongoing use by the agency team.
The Outcome
This project taught me that design system work at scale is fundamentally a people problem. The technical decisions — token architecture, Figma variables, naming conventions — were hard but solvable. The harder work was keeping 14 stakeholder organizations, 5 developers, and multiple PMs aligned on a system none of them had worked with before. What I'd do differently: establish a contribution model and a dedicated documentation platform before the first component ships. Adoption isn't a Figma problem — it's a governance problem.
