Phil Swan / BBC

Responsive design for the BBC

Consultancy work for the BBC’s User Experience and Design team involving exploration into how global site components such as Comments, Tweets, Blogs and the iVote module could be redesigned to work well 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 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.

The BBC UX&D team approached Erskine 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 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.

Comments module screenshots at large and small sizes
Comments module
Twitter module screenshots at large and small sizes
Twitter module
Responsive blog screenshots
Blog templates

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.

Prototype produced for testing and documentation purposes
Mockups showing design details
Excerpt from the style guide documentation

“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 News

More projects