Creating responsive components for the BBC

In 2012 the BBC’s User Experience and Design team began drafting recommendations for making their GEL design guidelines responsive. They asked us to help them design responsive components that work together across their online network including Sport, News, Learning, TV and Radio.

The results

  • Detailed designs for responsive components including the Comments module, Blog templates and Twitter module.
  • A responsive iVote module, now used by millions of people to collect votes for events such as Strictly Come Dancing & The Voice.
BBC comments module
Documenting the design and implementation of the comments section that could be integrated across BBC projects

What they said

The Erskine design team were resourceful, and responded well to feedback. Their experience with responsive design, and open approach to the problem was vital for what we wanted to achieve.

Kai En Ong, Creative Director, BBC

Designing the guidelines

Our first project working alongside the internal team at the BBC was focused on creating guidelines for specific components such as the comments section, a Twitter component and the design of the Blog pages. The primary goal here was to redesign these modules in a responsive, future-friendly manner and then document them with prototypes, pattern libraries and design guidelines for the BBC’s developers to experiment with.

One of the key challenges we faced was making sure these modules could harmoniously scale across the multitude of browsers and vast number of devices that access the BBC site everyday. This led us to take a mobile-first approach with the design, focusing on all of the problems that small screens brought to the table beforehand. Here, we could consider how performance affects usability, as well as producing the initial foundations for tap targets, content structure and legibility.

During this process we found that concentrating our efforts on mobile devices left us with the most effective foundation to build upon, rather than developing these components on desktop devices and then shrinking the design down. It also encouraged our designers and developers to work closely with the team at the BBC, frequently discussing the best solutions to the problems at hand.

Twitter module
Responsive Twitter module showing the design changes from mobile to desktop.

Although these responsive changes across devices are often small, sometimes there are much larger consequences in terms of layout and positioning. When we designed the various integrated Blog components we had to create a system by which they could scale and flex across the screen and still maintain the right hierarchy for content. Below, our guidelines illustrate these complex changes between screens, allowing for effective management by development teams. With these guidelines, building components is consequently faster and more efficient in the future.

Responsive blog prototype
Outlining the grid system on the Blog templates, taking into consideration the current GEL guidelines.

The iVote design and prototype

In the second project we worked with the user experience and design team to create the iVote user interface. This is the voting engine used by millions of people as they watch live programmes such as the highly popular Strictly Come Dancing series.

They intelligently questioned aspects of the brief, and took a solid approach to understanding what the challenges were. I didn’t feel I needed to micro-manage this project…

Kai En Ong Creative, Director, BBC

At the beginning of this project we decided to create interactive prototypes in order to aid the communication process. Thankfully these prototypes proved to be more insightful than a static mockup could ever be, since the BBC’s designers and developers were able to stress-test the design in detail. By allowing their team to experiment across mobile, tablet and desktop devices in this way, we helped them to truly understand how our designs worked in practice.

iVote module
The responsive iVote prototype in action, showing how developers might implement these features internally.