Case study GOV.UK Publishing Design Guide

Consolidating fragmented design guidance into a single source of truth for GOV.UK web and publishing teams

While GOV.UK has a mature Design System, guidance for editorial design and publishing tools was fragmented across documents, wikis, and team-owned resources. This fragmentation slowed teams down, caused inconsistency, and made onboarding new designers unnecessarily difficult.

There was an opportunity to consolidate this knowledge into a single source of truth: the GOV.UK Publishing Design Guide.

Two devices showing the GOV.UK Publishing Design Guide website, with details on frontend templates and Lego-like illustrations.
Left: GOV.UK Publishing Design Guide's homepage on a mobile device. Right: Overview page of Frontend Templates on a laptop.

Design judgment

With just myself, a service designer, a tight fiscal quarter, and a fragmented mess of docs to consolidate, I prioritized adoption over completeness, solving a real frustration: designers spending hours hunting for guidance that should have been easy to find.

Design decisions

Lean validation

Started with a shared Google Doc to consolidate existing knowledge, align contributors, and validate structure before committing to a technical solution.

Screenshot of a Google Docs document titled "Gov.uk design library," detailing the purpose and contribution guidelines.
Early prototype of Publishing Design Guide was created in Google Docs.

Design through delivery

With a single fiscal quarter to ship, I skipped high-fidelity Figma mocks and built directly in 11ty. Every day spent designing in Figma was a day we couldn't spend validating with real users, so I built first and iterated fast.

Planned for extensibility

Scoped the initial release tightly while laying foundations for future component references, Figma embeds, and code snippets.

Webpage screenshot of GOV.UK Publishing Design Guide on breadcrumbs with a Figma embed of the component.
A component page in the Publishing Design Guide that supports Figma embeds and code snippets as the system evolves.

Intentional visual clarity

Introduced a small set of Lego-inspired illustrations to support conceptual clarity and differentiate the guide without compromising GOV.UK's utilitarian design principles. The illustrations demonstrate the difference between components, patterns, and frontend templates through visual storytelling.

Figure 1A set of colorful building blocks with explanatory text about reusable components.
Figure 2A set of colorful building blocks with explanatory text about reusable patterns.
Figure 3A set of colorful building blocks with explanatory text about frontend templates.
Examples of the Lego-inspired illustrations to explain to users the difference between Components (Figure 1), Patterns (Figure 2), and Frontend Templates (Figure 3).

Impact

Figure 4Screenshot of a Figma file showcasing: accordion, icon, and input format building blocks from the GOV.UK Design System.
Figure 5Screenshot of a Figma file showcasing: accordion, breadcrumbs, back link, button, and character count components from the GOV.UK Design System.
Version 2 of the GOV.UK Design System Figma UI Kit. Screenshots of the Building Blocks page (Figure 4), and the Components page (Figure 5) within the Figma file.