Content design systems — 7 lenses from GOV.UK
A presentation at UXcamp Europe 2025 in June 2025 in Berlin, Germany by Rik Williams
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
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
h m al S he lp <
IA
IA
IA
IA
s< ie ok co ke s fla no w
s ig < 1.body<>head(s) 5. b ar m l
h m al S he lp <
IA
Rik Williams Senior Information Architect Government Digital Service linkedin.com/in/rikwilliams
Discussion
