Home Work About Field Notes Contact
Back to work Design Systems

Efficiencies and speed from
the FreeStyle design system

FreeStyle, FreeAgent's design system reference site, had grown beyond its original architecture. Navigation was flat and hard to use, documentation was inconsistent, and the site couldn't support emerging content types. A full redesign was needed to make it a genuinely useful resource for every team.

Scope Documentation Redesign
Context FreeAgent · FreeStyle
Category Design Systems
Focus Information Architecture · Velocity
freestyle.freeagent.com FOUNDATIONS Colour Typography Spacing Tokens COMPONENTS Button Input Table Date Picker PATTERNS Button Interactive element for triggering actions and navigating the interface. ON THIS PAGE Overview Usage States Accessibility Primary Secondary Ghost FREESTYLE DESIGN SYSTEM · DOCUMENTATION · INFORMATION ARCHITECTURE · VELOCITY
Objective

A central, scalable source of truth

The goal was to create a single, easy-to-navigate reference for the design system — one that reflected updated branding and improved team velocity by making information fast to find and easy to contribute.

The redesign wasn't cosmetic. It was a structural investment in how the team accessed, used, and maintained design knowledge.

Challenges & Goals

A site that had outgrown itself

  • Flat navigation structure made it difficult to find content quickly
  • Documentation lacked consistency or was missing entirely, generating repeated support requests
  • Absence of visual references caused implementation uncertainty across teams
  • Architecture couldn't accommodate emerging content types like patterns and layouts
Solutions

Rebuilt for scale and usability

  • Redesigned information architecture with grouped navigation for components, foundations, and patterns
  • Visual refresh aligned with current brand identity — colour, typography, and iconography updated
  • Added component screenshots for quick identification and state comparison
  • Implemented table of contents with anchor links for fast in-page navigation
  • Introduced UI patterns covering bulk actions, filters, and layout structures
  • Standardised page structure with Notion templates for consistent contribution
Process

End-to-end from audit to launch

1

Audit & Discovery

Full audit of the existing site, cataloguing content gaps, navigation pain points, and structural limitations against team needs.

2

Information Architecture

Redesigned navigation structure in collaboration with engineering, mapping component, foundation, and pattern groupings to support future growth.

3

Template System

Created Notion-based documentation templates standardising every component page: title, purpose, states, behavior, tokens, and accessibility notes.

4

Content Migration

Drafted content using the new templates and migrated to FreeStyle using a custom markdown process developed with engineering.

5

Launch & Enablement

Published the redesigned site with contribution guidelines and ran team onboarding to embed the new workflow.

Results & Impact

Faster, clearer, more confident teams

🔍

Reduced Support Requests

Slack inquiries about component usage dropped noticeably in the months following launch as teams found answers independently.

🚀

Faster Onboarding

New team members could self-serve on component guidance, reducing the time needed to get up to speed.

📋

Increased Documentation Coverage

Structured templates and a clear contribution workflow drove a significant increase in documented components and patterns.

🗂️

Better Discoverability

Improved navigation and anchor links reduced the time teams spent searching, minimising inconsistencies in implementation.

Want to talk through this work?

Get in touch →