Content design systems — 7 lenses from GOV.UK

Hi, I’m Rik Williams 🤓󰗞

Rik Williams Senior Information Architect Government Digital Service linkedin.com/in/rikwilliams

Information Architecture 🤓 User Research Inclusive Design

2007 City, University of London University College London Raleigh International Alzheimer’s Society Moorfields Eye Hospital GDS 2025

Session structure

GOV.UK context — 10min 7 lenses (design tradeoffs) — 20min Chat — 5min

GOV.UK context

GDS is the digital centre of the British government.

We serve the public, central government departments and the wider public sector.

And we design, build and deliver its user experience.

GDS GOV.UK GOV.UK 1993 2010 2025

Replaced over 1,800 separate domains

Over Over Over 830k 830k 830k bespoke pages bespoke pages bespoke pages

  1. Google 2. YouTube 3. BBC 4. Facebook 5. Amazon 6. Wikipedia 7. GOV.UK 8. Reddit 9. Bing 10. Instagram Source: Top websites in the United Kingdom (All Industries), Semrush, March 2025

s rs m k 0 x in m 0 3 e s U 3 Source: GA4 Users, GOV.UK Web, average Saturday PM, May 2025

90km Users ins ; 30m Source: GA4 Users, GOV.UK Web, average weekday PM, June 2025

GDS GOV.UK GOV.UK 1993 17 years 2010 15 years 2025

Genesis GOV.UK 1993 Web 2010 Mobile Web 2025 Brexit Covid AI Gen Alpha

Design System (UI) Content types 1,800 domains 1993 GOV.UK 2010 2025

“We want to grow GOV.UK to reach people when and where they need government information […and] evolve to match user expectations for new technologies” GDS Strategy

GOV.UK Web passive, designer-led content Chat active, user-led content App personalised content 2025

Epic scale (3m Users / day) Single channel (not multi) Page-based (custom content) UI design system (mature) Content types (simple)

On design systems…

“A collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” Jina Anne

Accessible Adaptable Consistent Cohesive Efficient Modular Multichannel Robust Scalable

Content design systems (not content design in design systems)

Source: Atlassian

Source: Gitlab

Adapted from: Factor Firm By permission of Bram Wessel, Factor

UI design system(s) (packaging) In — content design system (user value) — code design system(s) (scaffolding) e nc rie pe Ex — ye la n io at m r fo r o ol hn ye la c Te gy r ye la Adapted from: Bram Wessel, Factor

Front-end design e nc rie pe Ex ye la n io at m r fo In — systemised content informs r o ol hn ye la c Te gy Back-end design r ye la Adapted from: Bram Wessel, Factor

Full-stack design Front-end(s) UI 🤝 Back-end(s) Content 🤝 Code

Source: Figma, June 2025

Content Design Spectrum Back-end(s) Front-end(s) What’s available? What’s needed? Where it goes? What’s said? How packaged? Content Model Content Type Content Format Content Design UI Design Objects, Relations, CTAs, Attributes Required content attributes Specific content structure Words + Media Interaction Semantic structure Logical structure Organisational structure Rhetorical structure Behavioural structure

e nc rie pe Ex r ye la

Component: Header Component: Breadcrumb Style: Heading 1 Style: Colour Component: Panel Style: Typeface Component: Table Style: Paragraph

e nc rie pe Ex r ye la

✍style: inverted pyramid ✍style: front-load ✍style: range evaluation ✍style: plain English

fo In n io at m r ye la

Object: Answer Object: Tax Object: Tax rate

Tax: Acronym Tax rate: Name Tax rate: Amount Tax rate: Description Tax: Date

Answer Title Body

Answer Guide Person Speech Org News Role Statistic Manual Policy …

✍ Content Type Title Body Topic

Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body 830k+ pages… Body Body Body …⬆269/day Body Body Body Body Body

We need full-stack design systems to deliver multichannel service at scale.

7 design lenses

es ki C oo 4. e Fl ke s fla no w <> s

h ar m al l m S ig < 1.Body<>head(s) 5. b p< el 6. Slow<>fast H e l itt r >b e< bl xi 3.Bottom-up<>top-down

IA

“There are no solutions — there are only tradeoffs.” Thomas Sowell

Lens 1 Body vs Head(s) Decouple what users need from its packaging and representation.

y d o B vs 1 IA ) s ( d a e h

“People don’t care about the containers. They care about the things they contain.” Mike Atherton

“The aim is not to make something look good, but to make it be good.” Richard Saul Wurman

n i a t Con vs 1 IA r e n i a t n co

d o o g e B vs 1 IA d o o g k loo

UI and code systems are a means to an end — content is what humans come for (and machines need).

Source: Carrie Hane, Sanity

Attributes Objects Product Adapted from: Carrie Hane, Sanity

Styles Components Product Adapted from: Carrie Hane, Sanity

Styles Components Product Adapted from: Carrie Hane, Sanity

Design System Composition via UCD Product(s) .Informs. Adapted from: Carrie Hane, Sanity

Source: Carrie Hane, Sanity

➡ ➡ ➡ ➡ ➡ ➡ 󰳕 Web Object ‘Tax’ Metadata ‘Date created’ Content ‘Value-Added Tax’ Adapted from: Carrie Hane, Sanity 📱 App 🤖 Chat

“Be good” “Look good”

Lens 2 Cookies vs Snowflakes Look for content with repeating structure over one-of-a-kind content.

e k a l f w o n s C o o e i k vs 2 IA

Tangible Structure Agnostic Instances Durable Object Purpose

Tangible Agnostic Durable £ Tax

£ Tax 5000BC 1900BC 100 1066 1214 1765 2013

Tangible Agnostic Durable Structure £ Tax Instances Purpose

Structure £ Tax has Content? Title Acronym has nested objects? has Metadata? Rate Publisher ID Topic

Instances Object Instances

Object Instances VAT £ Tax Income Tax Capital Gains Tax

Purpose “As a 🧏User I need to know the rate of VAT for the Goods I’m buying so that I pay the right Tax.” “As a 🧏User I need to know if a Country is safe to travel to so that I don’t void my insurance.” “As a 🧏User I need to Find the Office so that I can attend my Appointment.”

Lens 3 Bottom up vs top down Design ‘many small things’ rather than ‘one big thing’.

s v ⬆ m o t t Bo 3 IA top↓

“Rather than treat content models as monolithic plans, it is more helpful to think of them as behaving like LEGO. They should support the configuration of content in multiple ways.” Michael Andrews

“If you want to build a complex system that works, build a simpler system first, and then improve it over time.” John Gall

… Title Type Get email alerts Tax Description Frequency Start Pension Amount Country Report a problem Visa Email address Risk level Submit Rate Acronym ID Search Statistic Given name Date Sign in Contact Family name Time Feedback Benefit … … …

Tax (has 1-many Rate) ID (e2c44bf…) Title (Value-Added Tax) Acronym (VAT) Description (VAT (Value Added Tax) is a tax added to most…) Rate (has 1 Tax) Title (Standard Rate) Amount (20%) Description (Most goods and services)

Tax (has 1-many Rate) ID (0169ice…) Title (Capital Gains Tax) Acronym (CGT) Description (Capital Gains Tax is a tax on the profit…) Rate (has 1 Tax) Title (Residential Rate) Amount (36%) Description (Gains from residential property)

Pension (has 1-many Rate) ID (a98d-fb…) Title (Basic State Pension) Description (This applies if you reached State Pension age before… Rate (has 1 Pension) Title (Full amount) Amount (£176.45) Frequency (Week)

Address ID (bf10937…) Type (Embassy) Recipient (Consular Section) Building number (70/71) Street (Wilhelmstraße) Town or city (Berlin) Postal code (10117) Country (Germany)

➡ ➡ ➡ ➡ ➡ ➡ 󰳕 Web Object Address Country ‘Germany’ Title ‘British Embassy Berlin’ Adapted from: Carrie Hane, Sanity 📱 App 🤖 Chat

Lens 4 Flexible vs Brittle Prefer adaptability to monolithic.

le t t i br e l ib F x le vs 4 IA

“Don’t build an IKEA product that can’t be disassembled when you need to move.” Michael Andrews

… Title Type Get email alerts Tax Description Frequency Start Pension Amount Country Report a problem Visa Email address Risk level Submit Rate Acronym ID Search Statistic Given name Date Sign in Contact Family name Time Feedback Benefit … … …

Flexible Adaptability brittle

Flexible Adaptability brittle

Flexible Adaptability brittle

tendency to hypertrophy Flexible Adaptability brittle

Address ID (bf10937…) Type (Embassy) Reorder Recipient (Consular Section) Reorder Building number (70/71) Reorder Street (Wilhelmstraße) Reorder Town or city (Berlin) Reorder Postal code (10117) Country (Germany)

Address ID (bf10937…) Type (Embassy) Reorder Recipient (Consular Section) Reorder Street (Wilhelmstraße) Reorder Building number (70/71) Reorder Postal code (10117) Reorder Town or city (Berlin) Country (Germany)

Modular pieces must be easy to connect and disconnect, cognitively and procedurally.

Lens 5 Big vs Small Create the smallest reasonable pieces (but no smaller).

big vs SM 5 IA ALL

“Content that is divided into the smallest reasonable pieces and explicitly organised and classified in order to be understood and used by computers and humans.” Carrie Hane

Smallest reasonable — not smallest possible — pieces.

Phone Body Contact the helpline on 08003285644

Phone Telephone number 0800 328 5644

Phone Area Code Telephone number 0800 3285644

Phone Country Area Telephone number 0044 800 3285644

Phone Country Area Telephone number Ext. 0044 800 3285644 897

Phone Country Area Telephone number Ext. 󰏅 0044 800 3285644 897

Golidlock’s porridge High Delectability 󰢐 Just right 󰣼 Too hot! 󰣼 Too cold! Low Hot Temperature Cold

A modelling Laffer curve High Desirability 󰢐 Just right Low big Size SMALL

Phone Country Telephone number 󰏅 0044 0800 32 85644

“Something is elegant if it is two things at once: unusually simple and surprisingly powerful.” Matthew E May

Lens 6 Slow vs Fast Understand where you’re adding, or removing, friction.

“Friction is not always good or bad. It can be appropriate, it can be annoying, it can be unnecessary, and can be essential. Context is what makes friction good, bad, or ugly.” Zoltan Kollin

Good “Do make me think”—prevent errors by making the process of committing errors longer and harder. After Steve Krug

🧳 Travel Advice Atlantis Safe …

Review 󰢐 󰢐 󰣼 󰳕 Web 🤖 Chat 📱 App Atlantis No travel Atlantis No travel Atlantis Safe

Publish 󰢐 󰢐 󰢐 󰳕 Web 🤖 Chat 📱 App Atlantis No travel Atlantis No travel Atlantis No travel

Bad “Don’t make me think”— milliseconds of re-interpreting a label, every redundant tap, that’s micro-friction. After Steve Krug

↑UX grammar. ↓Friction. Edit Update Change Modify 󰣼 󰢐 Edit

Ugly —tangible minor friction today vs diffuse major friction tomorrow.

Friction<>Outcome High Failure Friction Rejection Workarounds Misuse Low Low Outcome High

Lens 7 Help vs Harm Are there design ethics to consider and balance?

Accessible Adaptable Consistent Cohesive Efficient Modular Multichannel Robust Scalable

GOV.UK Web Body ………….. £Tax ‘value’ ……………

󰳕 󰳕 󰳕 Webpage Webpage GOV.UK Web 🤖 GOV.UK Chat 📱 📱 📱 AppApp App GOV.UK Body Chat Account £Tax ‘20%’ £Tax ‘20%’ £Tax ‘20%’ ……………

󰳕 󰳕 󰳕 Webpage Webpage GOV.UK Web 🤖 GOV.UK Chat 📱 📱 📱 AppApp App GOV.UK Body Chat Account £Tax ‘15%’ £Tax ‘15%’ £Tax ‘15%’ ……………

󰳕 GOV.UK Web 🤖 GOV.UK Chat 📱 GOV.UK App 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15%

󰳕 GOV.UK Web 🤖 GOV.UK Chat 📱 GOV.UK App 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15% 15%

“The standard rate of VAT increased to 20% on 4 January 2011 (from 17.5%).”

“The standard rate of VAT increased to 20% on 4 January 2011 (from 17.5%).”

󰢐 “The standard rate of VAT increased to 15% on 4 January 2011 (from 17.5%).”

󰣼 “The standard rate of VAT increased to 15% on 4 January 2011 (from 17.5%).”

Summary

“With great [content design systems] comes great responsibility.” Voltaire

s< ie ok co ke s fla no w

s ig < 1.body<>head(s) 5. b ar m l

  1. slow<>fast

h m al S he lp <

  1. fle e< bl xi >b tle rit 3.bottom-up<>top-down

IA

IA

IA

IA

s< ie ok co ke s fla no w

s ig < 1.body<>head(s) 5. b ar m l

  1. slow<>fast

h m al S he lp <

  1. fle e< bl xi >b tle rit 3.bottom-up<>top-down

IA

Rik Williams Senior Information Architect Government Digital Service linkedin.com/in/rikwilliams

Discussion