Designing the first fully responsive news site in the UK

Channel 4 have some of the richest resources for news in the world. This is the story of how a small design team permanently changed the way news is presented to the world.

James Box
We’re in the news room, in the centre of all the activity, watching the team capture, edit, and share events from all over the world. It's fast-moving, iterative and downright exciting. In that moment, I realised that we could also design in a way that harnesses that same excitement.

James Box, UX Director, Team Lead

The challenge for the Channel 4 News Room

To cater for the general public, news channels serve up stories in a way that the general public can easily digest and understand. At the time of working with Channel 4 there was an opportunity to allow people to go much deeper, to discover the news and opinion 'behind the news'. There was an opportunity for Channel 4 to hold up a lens to the details, and offer deeper information, stories and opinion to those that may have already 'heard' the news that day.

The Clearleft team had worked with Channel 4 News before, but this was the biggest challenge yet. We needed to find tiny ways to make big changes to a vast eco-system of content production. Not only did the new website need to adapt to many devices and screen sizes, it needed to adapt to the fast-paced way the news itself gets produced.

Channel 4 and ITN work together to deliver the news, which means there are lots of people involved at each stage. They have an enormous responsibility to the public but their online strategy didn't reflect the many ways in which news is captured and consumed.

Go straight to results ↓
The Channel 4 News team.
the channel 4 news team. Image courtesy of ITN News

So how do you work together to understand your users?

The Clearleft team kicked off with a collaborative workshop in our Brighton studio to dig deeper into the needs and expectations of the news audience. Channel 4 News took us through their audience archetypes, which was a great starting point for us.

For good design to work, everyone involved needs to be in agreement on the priorities of the project. By getting everyone in a room together, there was a great sense of collaboration and co-creation between Clearleft, Channel 4, and ITN.

By getting everyone together we also learned that some users want bite size news and other people want in-depth reporting on newsworthy topics. So how do you provide for these varying needs?

I remember a really good sense of collaboration. There were a lot of moving parts—us at Clearleft, the team at Channel 4, but also the team at ITN. I think we had a really good working relationship between all of those people.

James Bates
Rough wireframes and sketches of channel 4 bio pages

How do you cater for different user needs on such a large range of devices?

During the process, we plotted out the rhythm of the news — where it begins, and how it can grow and change over time. The website needed to be flexible enough to accommodate ephemeral flashes of news, but also the type of slow-burning stories that simmer for weeks or months.

For in-depth reporting on newsworthy topics from around the world we devised a section on the website ‘Fact Check’ to highlight the long-form news.

We designed a ‘live from the news room’ feed to slake the thirst for snackable content ‘updates’ (This turned out to be very empowering for the journalists too).

One of the ways we reached collective agreement on prioritisation was by demo-ing designs with real devices. When the content needs to fit in the palm of your hand, you really need to test it and figure out what matters most.

Throughout the process, we checked our assumptions. Even if we only had a quickly-made prototype, we made sure to test it.

A mobile mock up of the channel 4 website

"This is a fantastic way of combining the lively social media activity of our team with the brilliant journalism they produce in a live, dynamic feed."

Anna Doble, Head of online
Channel 4 website screen shots

How do you conduct the visual design with such a strong existing brand?

Once we’d prioritised the content, we set about creating a visual design to support it. Some of the site’s visual direction was influenced by the design of the news studio itself. We created more white space, bolder typography, and Channel 4 inspired iconography to showcase the journalism.

In addition to our responsive overhaul, Channel 4 was also keen to to refresh the design of the site. Since our initial engagement, the show’s identity had been successfully updated and the new visual language was incorporated into the relaunch. The departure from the strong, solid colouring towards a more restrained, subtle palette employing generous white-space was designed to provide a simple canvas that allows the content to take centre stage.

Channel 4 home page Channel 4 bottom of home page
John Snow didn't tweet or blog before this. Because of the site redesign, the team started thinking about news in a new way.
James Box
A close up of the channel 4 news team

The Results

Change in behaviour.

Channel 4 news team now know that their viewers are connecting directly with the personalities who deliver the news. We've also learned that journalists, including John Snow, felt empowered by being able to offer a 'live from the news room' feed.

Rise in mobile traffic.

From the off, the analytics showed a marked increase in mobile traffic. The new designs meant that content was accessible on every device.

A big first and a trend-setter.

This was the first fully responsive news site in the UK, and a leader in the trend of asking newsroom journalists to tweet, blog and share insights from the floor of the newsroom.

Wellcome Trust Wellcome
Evo car magazine app Evo Magazine