02 Selected work · Website design & build
Centre for Social Justice.
A new website for one of the UK's most-cited policy think tanks — faster, more discoverable, and built around the report library that does the work.
Before & after
The same content, a very different read.
The brief
A policy library, not a brochure.
The Centre for Social Justice publishes some of the most influential policy research in the UK — reports that shape welfare, housing, education and family policy. The previous site treated those reports as an afterthought, buried two clicks deep behind generic "About us" navigation.
The brief was to invert the architecture: the reports lead, the organisation supports. Every page should make it obvious what the CSJ does, what they've published, and how to cite it.
The constraint
Authority and accessibility, at the same time.
Policy think tanks have to balance two audiences who don't read the same way. Civil servants, journalists and parliamentarians want to find a specific figure, fast. The public — students, campaigners, the press — want to understand what the research means. The site needed to serve both without compromising either.
A second constraint was performance: policy press queries spike unpredictably. When a report is cited on Today or in the FT, traffic climbs 40× in minutes. The site had to hold up on a budget hosting plan without falling over.
The approach
Five passes, in order.
We worked the architecture before the design, and the design before the build. Each pass with a sign-off so the cost of changing your mind went up over time, not down.
-
Discovery
Interviews with the comms team, policy leads, and three external users (a parliamentary researcher, an FT correspondent, a postgrad). We watched them try to find specific things on the old site — that was the brief.
-
Information architecture
A new top-level structure with reports as a first-class citizen. Topic-based navigation that maps to the way policy is talked about, not the way the organisation is structured.
-
Content model
Custom WordPress post types for reports, commentary, and events. Every report has structured fields for citation, authors, embargo dates, and downloadable PDFs — all managed by the comms team, not us.
-
Design
Editorial-led, type-first. Real magazine hierarchy — deck, headline, standfirst, body — rather than the default WordPress shape. Image use specific to the year's stories, not generic stock.
-
Build & measurement
Custom block theme on WordPress. No page builders, no bloated plugins. Performance budget set at the start and held to. Schema.org markup on every page so reports show up in rich-result surfaces when journalists Google them.
How a report-detail page works
Six things the page does that the old one didn't.
01 · Sticky utility bar
Breadcrumb, share, download, cite. Stays available as you scroll a 80-page report.
02 · Editorial hierarchy
Eyebrow, headline, deck, standfirst. Real magazine shape so the page reads, not just renders.
03 · Pull-quotes for press
Lifted from the report, formatted to be copy-pasted into an article. Journalists love this.
04 · Chapter nav
Anchored, deep-linkable, with a quiet reading-progress thread on the left.
05 · Citation block
One-click copy. Harvard, MLA, BibTeX. Removes the ‘how do I cite this?’ email.
06 · PDF download
Server-generated from the same content model. No double-keying, no version drift.
The work
Editorial in the front, editor-owned in the back.
The new site is a custom WordPress block theme — no page builders, no bloated plugins. The comms team publishes everything from a single, opinionated editor: drop in a report, fill the structured fields, choose a hero treatment, hit publish. The front-end then does the rest: PDFs generated on demand, citation blocks formatted automatically, Open Graph cards built per page.
Performance budget: under 300 KB total page weight on the report-detail template, under 1 second LCP on a simulated 3G connection. Held throughout the build — not optimised at the end.
Lighthouse, on launch day
The audit, with no asterisks.
In plain English
What the audit actually means.
Real-world numbers, measured before and after launch · not just synthetic scores.
-
0.8s
Was 4.2s on the previous site
Largest Contentful Paint, 3G
Inline critical CSS, deferred fonts, image-format negotiation. Lighthouse 3G simulation throttled at <1 Mbps.
-
280KB
Was 1.2 MB on the previous site
Total homepage page weight
No page builders, no third-party widgets. AVIF images served with WebP fallback for older browsers.
-
AA
Audited externally before launch
WCAG 2.2 conformance
Keyboard, screen-reader, contrast and motion all in scope. Accessibility statement published on the live site.
-
+50%
First 90 days, like-for-like
Organic search sessions
Compared against the same quarter the previous year. Driven by schema markup on every report page.
Credits & scope
What we delivered, and who worked on it.
A single studio team across discovery, design, build, and performance — no hand-offs.
Start something similar →Services
Deliverables
- Site Custom WordPress block theme, fully editor-owned
- Site 14 templates · homepage, reports, topics, commentary, press, search
- Site Server-side PDF generation for every report
- Site Citation block (Harvard / MLA / BibTeX, one-click copy)
- Doc Editorial style guide for the comms team
- Doc Accessibility statement & WCAG 2.2 AA audit
- Doc Performance budget & monitoring runbook
Stack
- CMS WordPress · custom block theme
- Front Vanilla CSS · no framework
- Img AVIF + WebP, served via responsive picture
- Host Managed WordPress · Cloudflare in front
- Search Native WP_Query · faceted by topic + year
Team
- Creative direction · James Hodgson
- Design · Studio team
- WordPress engineering · Studio team
- Accessibility audit · In partnership with external auditor
