BBC News Responsive Redesign

Evolution on the surface, revolution behind the scenes

Changing the design for the BBC's News site is traditionally a perilous task. As a site that is used and loved by millions upon millions of loyal users who directly pay for the service through their license fee, it is held to a higher standard than most. Yet with mobile devices topping desktop access, with AI scores flagging and with many feeling that the site was starting to feel dated, we knew it was time for a refresh. A refresh that would allow a seamless experience across all devices, that would allow our content to sing and finally, a refresh that would allow us to consolidate our sprawling estate in to something simpler - both in terms of design patterns and code - ultimately bringing us to a place where we could stop maintaining the old and start innovating and focusing on the new.

— A visual refresh —

Given the complexity of the BBC News estate, our approach was to simplify in order to build a base from which we could evolve. Being careful not to design ourselves in to a corner, we tried to “do the most with the least”, and keeping some similarity with the old desktop site - aiding our users in the transition from old to new - even as we were making massive changes behind the scenes to make the site responsive. In the process we stripped back the colour palette, punched out the typography to let headlines and content pop and made use of white space to open up the site while still allowing leaving space for the massive amount of stories BBC News reports on every day.

A brief introduction to the thinking behind the first iteration of the redesign

Although the site feels different at first glance, the first iteration took pains to not deviate too much from the old site in terms of core navigation and general functionality - an approach that paid off as users - even though often disgruntled by the visual changes - still were able to find what they were looking for.

comparison of the old and new site — Evolution not revolution - a comparison of the old (left) and new site at desktop size

— Truly responsive —

The BBC believes everyone should have access to the News, regardless of location, device or connection. As such we built the sites to be truly responsive to our users context, making sure you have an appropriate experience regardless of whether you are on a high-end tablet in a bustling metropolis or on a second-gen feature phone in a remote corner of the earth. As a result, the site is built from a core non-js version, progressively enhancing with browser and device capability as we are sure your device and connection are able to handle the site gracefully.

— 30 sites, 1 code base, 1 pattern library —

One of the key issues we identified when we started the redesign was the amount of duplicate work we were creating as we designed for both BBC News UK, .com and the 28 World Service sites. Each site had custom modules - many of which did the same - and the amount of design patterns and code was exploding. Along with our Product and development teams, we sought to rationalise and simplify, building the site from one set of common components that work responsively, are language and script agnostic - from right-to-left to the long word lengths of some cyrillic languages - and finally, that can be deployed on any site and are controlled centrally from one common pattern library.

Demo of the News pattern library Alpha - showing a pattern from Desktop to mobile, and then to a core non-js version.

This approach allowed us huge efficiencies in terms of man hours spent coding and designing, allowing us to launch quicker and cheaper. Finally the library became a common medium for developers and designers to work in, strengthening knowledge transfer and camaraderie while killing of redundant workflows like red lining and excessive documentation.

— The Team —

Thanking everyone who made this happen across my amazing colleagues in Product, Editorial, development and Design would entail a very long list. I would however like to thank my own team explicity for their support and hard work through the process - Neil Bramah, Patricia Chantada, Dario Ramalho, Weiming Fan, Simon Sinclair, Palma Borsi, Robyn Porter, Adil Hussein and Dan Ogunkoya. The team won a Team of the Year award at the Net Awards, which must be the proudest moment of my career so far. Finally a huge thanks to Tammy Gur, my Head of Design who supported me throughout and let me shine.