This week we launched new homepages for BBC One, Two, Three and Four. It’s a huge departure from the previous design that was very static in terms of content and didn’t really showcase the breadth of content from the channel.

Last year we identified three key strategic objectives for the TV and iPlayer portfolio:

1. Beyond catch up.

2. Beyond the PC.

3. Beyond the tech savvy.

This relaunch is the first step towards realising these objectives. It provides access to what is currently live on the channel, it’s accessible on tablet and mobile and it’s designed to be simple and accessible.

Design

The new approach enables serendipitous discovery of programmes by using a carousel to display content and it’s been designed responsively so that it scales and presents information appropriately across different screen sizes for mobile, tablet and desktop computers. By creating one website that responds to the device a person is using, eliminates the need for different designs for each specific device on the market.

This was perhaps the toughest challenge as it was the first time that a BBC team had attempted to design and build a responsive website. One of the key challenges from a UX perspective was designing a layout that would scale from a widescreen monitor right down to screens that are only 320×416 pixels while still retaining the integrity and usability of the user experience.

This is an example of the different screen sizes that our design needed to accomodate:

Taking a responsive approach changed the way we typically design and think about our digital products. The layout of content and the interaction design needs to be robust enough to work and make sense to people on a range of devices that include large and small phones/tablets both touch and non-touch. Making one change needs to be considered across different devices.

Our design needed to capture how the interface itself scales and is optimised for different screens and devices. One example is how our nav bar scales.

A large tablet in portrait will get this. Here the spacing and hit state is quite different from what you would get on the desktop version as its optimised for tablet tapping and browsing.

And a mobile phone in portrait will get this:

The scaling also applies to the content in the carousel. This example gives you an idea of how tweets, blog posts and collection’s scale between mobile and tablet.

Having different content types in the carousel is a challenge as it can be potentially confusing to the user. We’ve applied a distinctive look and feel for each type of content which hopefully makes it clear what is video, a tweet, a blog post etc.

We have already started working on how to improve our approach to responsive design, in particular we are trying to stream line the number of breakpoints. Ste Everington, a designer on my team, will soon be posting his thoughts on this.

Curation and the channel brands

One of the key features of the carousel is that it presents content in a timely way. You can see what is currently being broadcast live as well as what is coming up. The editorial team are able to update the carousel with relevant content from across social networks and also with content that is specific for that channel. We took this approach so that while the design of each channel homepage is the same the personality of the brand is still reflected not only through the branding but also the content such as new comedy in the Feed My Funny section on BBC Three and themed collections from the archive on BBC Four.

I think one of the most profound changes is that we have tried to bring together the four BBC channel brands. Previously it wasn’t possible to easily move between BBC One, Two, Three and Four and now it’s possible to switch channels in the navigation bar. Strategically this will hopefully mean that each of the channel brands will see an increase in traffic as what we’ve found through user testing is that our audience is more likely to explore other channels if its easy for them to do so. The other channels are accessed via our new TV Guide, that enables you to go back and see programmes that you’ve missed and play the content if we have it available in iPlayer.

My colleague Dan Taylor talks more about the editorial perspective over at the BBC Internet blog.

Audience insights

User testing was an important part of designing the new channel homepages. We wanted to make sure our multi platform approach worked. Two key insights gave us confidence with the new design. The first was that participants were able to find content easily and also discovered new programmes that they wouldn’t usually watch. The second was that the consistency between different platforms was appreciated. A couple of things that didn’t work so well included content underneath the carousel being missed and the live call to action was not obvious enough. Subsequent releases will fix these issues (and others such as being able to swipe left and right on tablets) and also improve the interface with iterative features.

User testing forms one part of how we gain insights from our audience. The other is through tracking the usage of our digital products. With this new channels launch we will be able to receive stats on which areas of the page are getting clicked including the buttons and filters on the carousel, helping us to understand how well the user experience is performing.

Final thoughts…

It’s been quite a journey to get this far and I’m glad that we’ve been able to deliver what I think is a really great experience for our TV loving audience. I think what this new launch also signifies is how the BBC Online portfolio is evolving. The Global Experience Language (GEL) ties all the of the BBC’s digital products together and it’s expanding and constantly evolving to encompass more design patterns including those for mobile and tablet. The carousel, iconography and type all stem from GEL and help to create a coherent BBC experience. The responsive design approach is also part of the evolution. Consistency across platforms is important and our audience appreciate it. It also creates a new workflow for our teams and encourages innovation, how we make it part of GEL and integrate a responsive approach to the wider BBC online portfolio still needs to be worked out. It’s new territory but this new release of the channel homepages provides a good foundation for the future.