Home Work About Field Notes Contact
Back to work Design Systems

Creating systematic impact
and design system value

When I joined FreeAgent, a design system existed only conceptually. There was no shared UI kit, component library, tokens, or documentation. Product designers recreated components from scratch, engineers built inconsistently across teams, and product teams lacked a shared foundation. I saw an opportunity to fundamentally change how design and engineering collaborated.

Scope Design System Strategy
Context FreeAgent
Category Leadership · Systems
Focus Infrastructure · Adoption · Impact
Design System UI Kit Tokens Documentation Components Patterns Colour Typography Guidelines FreeStyle DESIGN SYSTEM LEADERSHIP · FREEAGENT · INFRASTRUCTURE · ADOPTION · IMPACT
Objective

Positioning design systems as critical infrastructure

I positioned the design system as a strategic priority rather than a side project — emphasising faster delivery, reduced tech debt, and business value at scale.

Design systems sit at the intersection of design quality, engineering efficiency, and business value. This role allowed me to create solutions that scale across the entire product, improving workflows for designers, engineers, and PMs while reducing long-term complexity.

Challenges & Goals

Starting from zero

  • No UI kit in Figma — every team designed buttons, tables, modals, and layouts differently
  • Absence of tokens — consistency and theming were extremely difficult
  • Nonexistent documentation — varying interpretations of components and patterns across teams
  • One-off engineering implementations — increased maintenance costs significantly
  • Fragmented problem-solving — teams addressed similar issues differently, creating a fractured user experience
  • Cross-functional delays — dependencies between design, engineering, and product caused rework
Solutions

Building the foundations end-to-end

  • Established FreeAgent's first Figma UI kit for consistent, reliable design
  • Introduced design tokens for a consistent language and future theming capability
  • Created foundational documentation and guidelines across all components and patterns
  • Designed the FreeStyle reference website for quick resource access across teams
  • Delivered core UX improvements: tables, reports, date pickers, and bulk actions
  • Reduced design and engineering rework through reusable, well-documented components
Process

A phased, strategic approach

1

Build the Business Case

Positioned the system as critical infrastructure, securing leadership buy-in by emphasising faster delivery, reduced tech debt, and measurable business value.

2

Establish Foundations

Created colour, typography, spacing, and token structures before touching components — giving every surface a consistent base.

3

Deliver Core Components

Built the UI kit in Figma with modern component architecture, variants, and properties. Rolled out foundational patterns across the product.

4

Enable Cross-Functional Teams

Ran onboarding sessions, produced documentation on FreeStyle, and established contribution guidelines so teams could adopt and give back.

5

Measure & Iterate

Tracked adoption, gathered feedback, and iterated on components and documentation based on real usage across product teams.

Results & Impact

Systematic impact across the business

🏗️

First Design System at FreeAgent

Built the organisation's design system from scratch — UI kit, tokens, docs, and reference site — creating a shared foundation for all product teams.

⚡

Reduced Rework

Reusable components and shared standards significantly reduced design and engineering rework across the organisation.

🤝

Stronger Collaboration

Shared language and documentation reduced friction between design, engineering, and product — improving delivery confidence.

📈

Higher Quality at Scale

Unified patterns and documentation enabled teams to deliver with higher confidence and consistency across every product surface.

Want to talk through this work?

Get in touch →