Home

The Guardian Header

Nice to
meet you

Skills used

The fifth most read news website in the world; over ten million people a day visit the Guardian. Whether they type the url into their browser or tap a link on Twitter, the first thing they see is the header. The first thing they actually see is a cookie compliance acceptance message (also my handywork), then a massive advertisement

The Guardian website The Guardian website with the navigation open
The header at its widest breakpoint

The header performs a tonne of roles. It introduces the brand and establishes trust, provides navigational context and generates revenue. It helps Harpreet financially contribute to the Guardian, and Duarte find a recipe for the perfect veggie burger.

A tweet reading: Very @guardian - they have a mobile hamburger menu icon with the class veggie-burger
I reflected the Guardian's liberal values down to the smallest details

First impressions

Showcasing sections effectively could be the difference between a reader hitting 'back' and watching a youtube video, or staying and moving on to another page. On smaller devices where space is limited, conveying the breadth of the Guardian's content is particularly challenging.

The old Guardian mobile header The new Guardian mobile header
Readers shown the first screen assumed the Guardian was a football website

Conversely at larger breakpoints the header provided a little too much of an indication of the Guardian's editorial offering. This resulted in a hard to digest and overwhelming number of navigational options.

An article on the old Guardian website An article on the new Guardian website

Working closely with a senior engineer, UX researcher and a product manager, my challenge was to simplify the header — without damaging the distribution of traffic across the website. This also doubled up as an opportunity to introduce the re-designed Guardian brand to readers.

The information surfaced at different breakpoints is carefully considered

The new design needed to highlight the breadth of the Guardian's coverage and improve brand understanding for users both new and old. It needed to give a warm welcome to first-time visitors, while not confusing or alienating regular readers.

“It looks cheap and nasty, like an NHS leaflet about Chlamydia”—Alienated
regular reader

Boy did we test! Through the time frame of around a year I designed, developed, and prototyped iterative versions of the header. We AB tested on the live website, interviewed readers in our dedicated UX lab, and harassed tired commuters at train stations — bribing them with Guardian branded pens.

A slim version of the Guardian mobile header
For certain pages, site structure is sacrificed for a more immersive experience

Mo' money,
less problems

The new design has been a huge success. A simplified navigation both hierarchically and graphically. It's become an important income stream, generating over twice the revenue of the previous design.