The Guardian UX Teardown: Color-Coded Stories and a $12 Ask at Both Ends of the Visit

The Guardian let us read a whole story signed out, so instead of a paywall it asks. On the signed-out journey we captured on 29 September 2026 — Technology front, one article read to the end, then over to Culture and Books — the same number turns up at both ends of the visit: $12 a month, in the strip above the masthead on each page we opened and as the preselected answer in the appeal at the bottom of the story. Between those two asks is a reading product with a color system worth copying and a couple of rough edges.

The capture is a 1440×900 desktop session in the International edition, signed out, with optional cookies declined. Headlines and photos were live that afternoon and will have changed since. We stopped before sign-in, search, sharing, comments and any payment.

Five pillars, and a color for each

The header carries five pillars in large serif type — News, Opinion, Sport, Culture, Lifestyle — with a colored rule under the active one: red under News on the Technology front, a tan rule under Culture once you switch. A second row of plain links under the pillars changes with them. Under News it runs World, US politics, UK, Climate crisis and on to Tech, Business and Obituaries. Under Culture it becomes Books, Music, TV & radio, Art & design, Film, Games, Classical, Stage.

The same colors turn up on the kickers, the small labels above each headline. On the Technology front the news kickers are red ("Anthropic", "OpenAI", "Facial recognition", "Review"). On the Books front they are a darker tan ("Politics books", "Book of the day", "Fiction"), and so are the reviewers' names.

The Technology grid shows it best.

One card in that grid is an opinion column, and it does not take Technology's red. Its quotation-mark glyph and the columnist's name are orange, the same orange as the "Opinion" kicker in the list under the lead, even though the piece is filed on a News front. A reader scanning the grid can tell the argued piece from the reported ones before reading a headline. Color coding works when it repeats the text label and stays consistent (NN/g), and here the card's orange matches the "Opinion" kicker's label on the same front.

The Technology front repeats two of its own stories

Below the lead and its six-card grid, a heavy full-width rule opens an "AI" row of four cards. Two of the four are stories already linked one screen up, in the list under the lead: the OpenAI model that was pulled before release and Meta's AI agent sharing a user's address. A reader who skimmed the top of the page meets them again, with photos this time, as if they were new.

This is probably automation doing what it was told — the AI row looks like a tag-driven collection, and both stories carry the tag. From the reader's side it costs half of a row that was supposed to take them deeper into the topic.

The article page clears out, then hands over to the appeal

Opening the lead story keeps the full header and the News subnavigation, with Tech still bold. The page moves the story's kicker into the left column above the byline, timestamp and two buttons, Share and "Prefer the Guardian on Google". A "Most viewed" rail on the right offers five stories from across the site, none of them technology.

Scroll into the body and that right rail runs out. What's left is a single column of about 620 pixels with red underlined links into earlier reporting and wide paragraph spacing. Nothing competes with the text for most of the scroll.

Then the reading column turns gray.

The support block opens with a yellow top border and the heading "An incredible self-own". It tells the 1936 story of John Scott handing the paper to the Scott Trust, gives three numbered reasons to pay, and closes on a sentence highlighted in yellow: support the Guardian on a monthly basis. Seven blocks of copy, the last of which addresses "readers like you from Brazil" — the copy knows the reader's country and quotes the price in US dollars.

The third reason says giving "takes less time than it took to read this message". Below the copy are two options in the capture: $5 a month, unselected, and $12 a month, already selected, with an "Intro offer" badge. The first benefit listed under the $12 tier is "Far fewer asks for support". The frame ends there, so any further options lower down are outside the evidence.

The preselected $12 matches the "$12 per month" in the masthead strip on every page we opened, so the number a reader has seen at the top of each page is the number already filled in when the form appears. It works as an anchor. Then there is the benefit line: the thing the paid tier sells first is relief from this block and the strip above the masthead.

Culture swaps the subnavigation and the layout

Back at the top, clicking Culture moves the rule under the pillar and replaces the subnavigation with the eight Culture categories. The front itself changes shape. The Technology front led with text and a single large photo; Culture leads with two equal photo-led features, headlines set in white over the images, one carrying a two-star review rating.

Books, picked from that subnavigation, goes back to the text-and-photo lead with review cards beneath, and the Culture pillar stays underlined while Books goes bold in the row below.

The only visible "Search" is a jobs link

The yellow circle beside the pillars opens a full-width menu.

Five columns repeat the pillars with every section under each, a sixth unlabeled column holds products and utilities (the app, podcasts, crosswords, corrections), and a search field sits at the top of the right-hand area above a stack of large links: Search jobs, Holidays, Digital Archive, Guardian Licensing, Live events, About Us. It is a thorough mega menu of the kind NN/g finds works well for large sites with clear categories (NN/g).

The issue is what the closed header shows. With the menu shut, the only word "Search" on the screen is the "Search jobs" link in the top strip, between "Print subscriptions" and "Sign in". There is no magnifying glass beside the pillars. A reader looking for the site's article search sees "Search" in the utility strip attached to a jobs link, while the real search field sits one click away behind the yellow menu button.

What this means for your product

Tie color to the type of content, not to the area it's filed in, and keep it attached when the content moves. The Guardian's orange opinion card on a red news front tells the reader what kind of piece it is before the headline does.

If a paid tier's lead benefit is fewer prompts, then prompt frequency is a pricing lever, and it should be decided as one. Count how many times a signed-out visit meets the ask.

Read your closed header as a list of words and check where each one goes. On the Guardian, the one visible "Search" belongs to "Search jobs".

Take it further

The lens behind this teardown — can a reader tell what kind of thing they're looking at, and where to find the next one, from layout and color alone — is part of the UX Clarity framework, the same one we apply in a Full UX Audit. For how that scoring turns into prioritized fixes, read what a real UX audit looks like.

Sources: NN/g — Using Color to Enhance Your Design · NN/g — Mega Menus Work Well for Site Navigation.

Ready to find out what your navigation is saying that your labels aren't? Apply for a Full UX Audit →