The Guardian - responsive website

Redesign and re-platforming of the world's second most popular English-language newspaper website.
D&AD - Graphite Pencil: Creative Excellence in Graphic Design
The Net Awards: Redesign of the year
World Digital Media Awards: Best News Website

A new responsive look and feel, a wholesale replatforming and new editing tools for the newsroom. My role was design lead on the fronts team (hub pages) as well as Design Director across the site.

UX sketches

Scaling up mobile

A separate mobile site already existed for the Guardian, this is what we were scaling up to eventually replace all breakpoints.

User testing

We undertook extensive quantitative and qualitative testing throughout the project. The Guardian has a sophisticated in-house lab for user testing and interviews. The UX team held panel studies and intercept surveys. New features were A/B tested (sometimes A/B/C/D!),  Product managers would broadcast developments on the current site, with an open comments section for feedback. There was an analytics team deciphering data and we had Ophan, an in-house analytics platform that everyone had access to.

The bespoke creep problem

As content lists were being defined and pages being developed, we were in danger of an ever growing and unmanageable array of bespoke layout patterns. Over 3 days, I mapped out a holistic system of patterns designed to meet editorial needs as a user experience, so we could manage the scope of build, and choreograph pages effectively. The result is the 'container framework and library'.

The container frameworK

The holistic framework for the content - a flexible dynamic system that empowers editors to provide the best content experience.

With a library of containers designed for a variety of editorial needs, we were able to choreograph the fronts across the site. By checking the data, we can always try new things. Should a story list be slower, faster, more image driven.. is the page too long, too short... and so on.

Related work

The Guardian

Digital brand design and UI

The guardian

Twitter Avatars