Case study Modernizing GOV.UK

Introducing large imagery to GOV.UK while keeping it accessible and scalable for 2,000+ publishers

GOV.UK has maintained a utilitarian design aesthetic since its inception. Underneath the hood it's powered by Whitehall Publisher, a CMS used by 2,000+ publishers across 400+ government bodies. The system was rigid: departments were hiring external agencies, using taxpayer's money, to develop bespoke sites to achieve visual flexibility. I led the design effort to introduce large imagery as a first step toward a modern GOV.UK.

Design judgment

Legibility had to be guaranteed regardless of what image a publisher uploaded, as the outcome has to be accessible to anyone visiting GOV.UK. The solution also had to work at scale: 2,000+ publishers uploading images independently, with little to no developer intervention.

Design decisions

Running two workshops to find direction

I ran a design charrette with developers, researchers, product managers, and product leads across the GOV.UK frontend and Whitehall Publisher teams, followed by a sketching session with content designers from across government. Both groups, independently, surfaced the same themes: flexible layouts, personalisation, embeddable media, and more visual character, which pointed to large imagery as the first step towards modern and flexible GOV.UK.

Figure 1Collage of hand-drawn sketches showing layout and design ideas with notes on flexibility and customization.
Figure 2Group of people at a table engaged in discussion in a conference room.
Figure 1: Samples from the design charrette (workshop 1). Figure 2: Participants from the sketching session (workshop 2).

Audit before ideation

Before opening Figma, I audited how large imagery had already been handled across GOV.UK. Many visually compelling examples failed on closer inspection. For instance: text over images, page titles rendered as imagery, floating text boxes obscuring the image itself. These failures defined the constraints the design had to solve.

Web page audit overview with thumbnails of screenshots from various UK government sites, categorized by projects and years.
Audit of large imagery across GOV.UK.

First principle

It became apparent that text would be in front of a solid colour background, never over an image. On desktop it sits to the left of the image; on mobile, above it, both consistent with GOV.UK's existing reading flow.

Proposed skeletal designs of component, desktop (left) and mobile (right) variations.

I explored the inverse layout but rejected it. It created real barriers for users with motor impairments on mobile and those with limited sight on desktop, a finding confirmed by in-house accessibility specialists.

Built to handle every real-world scenario

I tested the component with photographs, logos, and no imagery. Each variation had to work so publishers could use it with confidence and without developer intervention.

Figure 3Blue panel with GOV.UK logo and text beside a blurred group of people in a meeting setting.
Figure 4Illustration of two cartoon figures with a magnifying glass and question mark on a blue background, accompanied by placeholder text and the GOV.UK logo.
Figure 5Blue banner with GOV.UK logo and placeholder text.
Figure 3: Example with photo. Figure 4: Example with a graphic. Figure 5: Example with no imagery.

Header background colour as department identity

While solving for legibility I identified an opportunity: a customisable background colour would let departments express their visual identity without bespoke sites. Every pairing was drawn from the GOV.UK Design System and tested against AA contrast standards.

Grid of colored variations of the proposed header with "GOV.UK" logo and placeholder text.
All available colour options from the GOV.UK Design System.

Design shaped by developer collaboration

A developer suggested replacing my CSS background image approach with a picture tag, loading the appropriate asset based on the user's viewport and screen density. That led to capping the header at 1024px on desktop and setting a minimum height to prevent awkward cropping on content-light pages.

A webpage display on a smartphone and laptop about the 80th anniversaries of VE Day and VJ Day, with a black-and-white photo of people celebrating.
Component shown on desktop and mobile, with updated width cap and minimum height applied.

On the backend, I separated the upload journey into photograph and logo paths, and worked with a developer on the Whitehall Publisher team to update the cropping tool to preview both desktop and mobile in real time.

Screenshot of the GOV.UK Whitehall Publisher interface displaying image cropping capability.
Updated cropping tool within Whitehall Publisher.

User testing

Publishers tested the full flow via Figma prototypes. The standout finding: participants said if this capability had existed, they wouldn't have considered commissioning a bespoke site. Testing also surfaced appetite for a broader colour palette. This revealed a deeper access and permissions challenge now actively being worked on.

Wireframe of user testing flow for webpage customization involving header and logo image placements.
Prototype used in user testing sessions.

Impact