Building and scaling the first design system at Officeworks

Impact at a glance

What this system delivered

92.7%¹

Improvement in prototype-to-build accuracy

90%²

Reduction in inconsistent tertiary button styles

51³

Reusable components adopted across squads

Context

The situation

As UX Lead on the B2B digital replatforming program at Officeworks, I identified a critical gap: the absence of a design system. Without a shared foundation, teams made independent decisions, resulting in a fragmented product experience, accessibility issues, and significant rework between design and engineering. Given the scale of the program, this risk required immediate attention.

The gap

No design system existed. Design and implementation needed to progress alongside project delivery to avoid large-scale inconsistency.

My Role

What I was responsible for

I established a scalable design system with the squad based on accessibility, atomic design principles, and close collaboration with engineering, while continuing to deliver on the replatforming program.

Partnered with product, engineering, and design teams to define design tokens, reusable components, and interaction patterns aligned with accessibility standards
Facilitated cross-functional collaboration and embedded the system into Figma and development workflows
Developed clear documentation and review criteria, and contributed to governance to support adoption and consistent usage across teams
Advocated for systems thinking, influencing stakeholders on the value of scalability, accessibility, and efficiency

Approach

How I built it

Circular process diagram showing six stages: lay the foundation, set the scope, plan and prioritise, build Figma components, sync design and dev, govern and scale — The six stages of building and scaling the system, from foundations through to governance

1. Lay the foundation

I led the team in establishing a robust design token framework covering colours, typography, and spacing, with accessibility guidelines integrated into each component from the outset. This created scalable rules for consistency and provided teams with a shared language across design and code.

Design foundations covering colours, typography, spacing, grid, icons, and logo lockups

2. Set the scope

With no existing system, I worked with product owners to identify areas where consistency was most critical. I mapped required component categories, defined system boundaries, and set realistic delivery expectations with stakeholders.

Scope table listing shared components between B2B and B2C in My Account with refresh decisions — Scope table for shared components between B2B and B2C in My Account

3. Plan and prioritise

I partnered with Product Owners and the Tech Lead to prioritise component gaps based on delivery needs, usage frequency, and accessibility risk. This ensured the system was immediately useful while supporting long-term scalability.

4. Build Figma components

While working alongside the replatforming project, I led the team in designing, refining, and documenting 51 UI components and interaction patterns, ensuring quality, WCAG AA accessibility compliance, and cross-platform readiness. I streamlined Figma workflows with design library and plugins to improve versioning and reduce friction.

Confluence documentation page for the alert messages component showing usage principles, alert statuses, alert types, and component anatomy — Alert messages documented in Confluence with usage principles, statuses, and anatomy

Figma component library using change log plugin with components marked as dev ready — Using change log plugin and ensuring components are dev ready with Figma

5. Sync design and development

I worked closely with engineers and QA to ensure seamless implementation in Storybook and front-end builds, running weekly design and developer sessions and showcases to align teams and accelerate delivery.

Component status labels including to be done, in review, in progress, ready to merge, implemented in global UI, completed, and deprecated — Component status labels used to keep design and development aligned on delivery state

6. Govern and scale

With other designers, I produced clear documentation and defined the review criteria for components. I took part in the regular governance meeting, where the Tech Lead led contribution workflow discussions, to support consistent use across squads and reduce friction as the system scaled.

Design system diagram alongside backlog tickets for planned component improvements — Showing design system diagram and backlog tickets for component improvements

Workflow diagram showing how designer, developer, and QA roles sync during design and dev delivery — Showing workflows between roles to sync design and dev delivery

Results

Detailed outcomes

Consistency

90% reduction in inconsistent tertiary button styles²
Single source of truth established for designers and engineers across squads
Accessibility compliance lifted to WCAG AA across core customer journeys

Design-to-development efficiency

Implemented tokenisation, documentation, and optimised Figma workflows to streamline the design-to-development handoff.
Developer clarification requests decrease once a component is documented in Storybook, and mostly come from new components or edge cases

Scale

51 reusable components now adopted across multiple squads³
Governance workflows in place to support long-term scalability and adoption
Embedded a design system mindset, fostering a culture of continuous improvement and best practice

Figma comments from colleagues working on the B2B UI Kit showing collaborative feedback on components — Showing comments from colleagues working on the B2B UI Kit

Method

How the numbers were measured

1Compared prototype-to-build accuracy of a single page without and with the B2B UI Kit.
2Compared tertiary button styles before and after the B2B UI Kit.
3Count of documented, reviewed components in the Figma library and Storybook.

Learnings

What I would carry forward

Key learning

Building a design system alongside live delivery is challenging. The key was making it immediately useful while ensuring long-term scalability. Early stakeholder buy-in, achieved through evidence and education, enabled successful adoption.