Responsive design for the BBC

Consultancy work for the BBC’s User Experience and Design team, exploring how global website components could be redesigned to work across all devices.

My role: Design lead
Interaction design, user interface design

2012  2013

Product teams at the BBC were transitioning from separate desktop and mobile experiences to working with responsive layouts. At the time, this was still relatively new ground with different product teams tackling responsive design in a variety of ways. This presented issues when integrating modules across all products. The BBC UX&D team had started drafting guidelines for a responsive Global Experience Language (GEL) and were beginning to test an early version of a responsive grid.

Web modules

The BBC UX&D team approached Erskine Design to help them explore the implications of this transition. The brief included the Comments module, the Twitter module and the templates used for all BBC blogs.

I designed the look and behaviour of the modules across various screen resolutions, from mobile phones to desktop computers. I also provided feedback on the drafted responsive GEL guidelines.

This involved analysing the current implementations of each module, making sure that the requirements and constraints were fully understood, and considering how to adapt the design and behaviour of the modules for different circumstances, taking a mobile-first approach. Tap targets and interactions, legibility, and content structure were particular considerations.

Screenshot of the BBC Hackney Weekend website showing the Twitter module in context
Excerpt from the documentation provided to the BBC team showing the Twitter module at various sizes
Screenshot of the BBC News website showing the Comments module in context
Excerpt from the documentation provided to the BBC team showing the Comments module in various states and sizes
Blog templates at different viewport widths with overlayed grid

iVote

We were later asked to help design a new version of iVote: the system used throughout the BBC network to gather opinions and feedback from their users online. This was being redeveloped to handle more traffic and collect votes for prime time TV shows such as Strictly Come Dancing and The Voice. It was my job to turn the existing user flows and documentation (produced by the UX&D team) into detailed designs that could then be taken into production. Key considerations were ensuring that the iVote module would look good and function well no matter where it featured on the page, the number of questions or amount of content.

Outcomes

A smooth handover was achieved through close collaboration. This included:

  • detailed designs for responsive website components
  • prototypes to demonstrate behaviour to stakeholders
  • feedback and support with new responsive GEL guidelines

iVote has now been used by millions of television viewers to submit votes for shows including Strictly Come Dancing and The Voice.

Strictly Come Dancing contestants awaiting results of the public vote

Phil’s work on the iVote project was, simply put, outstanding. Phil showed initiative, great understanding of the details of the project – and above all, great craft in putting together a varied and complex system of interdependent elements to form a functional, elegant and responsive whole. As the person overlooking the project, I can only recommend Phil, as he is both able, quick to grasp the complexities of a project and effective and timely in his delivery.

Ulrik Hogrebe
Creative Director, BBC