Designing the Connected Red Button

Friday 22 February 2013, 09:00

Robin Gibson Robin Gibson Senior UX Designer

Tagged with:

Hi I'm Robin Gibson, a senior user experience designer in BBC Future Media and worked on BBC Connected Red Button.

Connected Red Button reinvents traditional Red Button bringing BBC online to the living room.

The service launched on Virgin TiVo platforms in December 2012 and the BBC will be rolling it out to other connected TVs during 2013.

We thought now would be a good time to share some of the thinking behind the design approach.

crb-live-service-1024.jpg The live service


The project began in mid 2011 when the design team received the brief for a reimagining of the Red Button service for connected TVs.

The vision was to provide the foundation for interactivity around the BBC’s television channels and to set the benchmark for delivering internet driven content across broadcast.

The brief was to be both progressive yet instantly familiar, continuing to embrace the features that make traditional Red Button a successful service today.


Background

With the brief in hand we began a period of research into audience needs whilst examining existing products and interaction patterns on TV.

We obviously knew a great deal about current Red Button usage, but what did users expect from a future service?

Commissioning audience research enabled us to define core principles that sit at the very heart of Connected Red Button.

These are:

• Radical simplicity

• Seamless, satisfying journeys between broadcast and on demand services

• A shared, safe experience

• Exploratory

• Personal

These principles would act as our design compass, helping to keep the team on track throughout the project as we strove to match then exceed audience expectations.

A product vision, a whole batch of research, design principles, mood boards, personas and user requirements meant we where ready to start design exploration.

Whilst the current suite of BBC iPTV applications (BBC iPlayer, News and Sport) certainly gave us a great foundation for the Connected Red Button service, the challenge before us was how could we offer users a gateway between these apps and bring the world of BBC iPTV under one umbrella?


Retaining the broadcast

Very loose sketches (or scamps) of layouts where thrown around, sticky notes and paper prototypes littered desks and walls. Ideas where dismissed as quickly as they where drawn up.

crb-uxd-design-wall.jpg Finding space on the design wall was a challenge in itself


The decision to retain the full screen broadcast in the background of the UI (User Interface) rather than a more conventional quarter screen view (where the broadcast is minimized into a small box) informed every aspect of the design.

The positioning of the content stream, the synopsis rollover and even colour pallete where all informed by this decision.

The retention of full-screen broadcast meant the UI needed to not distract from the background video, presenting the team with a number of challenges.

This left us with a precarious balancing act of trying to reserve as much real estate on the screen as possible for the broadcast whilst still trying to display the Red Button UI in a highly visible manner.

No easy task when minimum font sizes are double those found online.


Global Navigation

Early on in the project we knew the desire of the BBC’s One Service strategy was to maintain the BBC global navigation across mobile and desktop devices and transfer it to the television experience.

This means that regardless of the device being used to access BBC content a product will feel inherently familiar to the user.

This led us to divide the UI into two paradigms: global and contextual.

crb-global.jpg Simplicity remains at the core of Connected Red Button navigation


Global Navigation would sit at the top of the screen while contextual navigation is displayed in a single stream of content at the bottom displayed as selectable images. A large portion of the screen is thereby reserved for broadcast.

At the left of each stream of content we have a menu block that took inspiration from the visual language of smart phone applications.

These menus included ‘launcher’ items that load dedicated BBC full-screen applications (including iPlayer, News and Sport) enabling users to discover a range of additional content.


Efficient design

Constraints are the foundations of great design and having such a relatively small portion of the screen to deliver content forced us to be efficient in a way that might not have been the case had we had the luxury of a full screen interface.

Navigation itself, restricted to the directional buttons of a standard TV remote control (we ruled out the use of colour keys) meant that every journey needed to be purposeful.

Font sizes on television need to be much larger than on other devices and combined with limited screen real estate this meant every bit of space mattered.

Initial explorations emphasized that to fit a meaningful amount of additional content onscreen required us to truncate titles and headlines, even before considering what would happen to the programme synopsis.

We had an aspiration to have the synopsis at the top layer but this was proving problematic. This is because we always felt this information could help inform the users journey, especially as they could potentially be moving away from a programme that they are currently watching.

We therefore decided to scale the highlighted item and use this enlarged area to present the synopsis.

This improved the users focus, provided enough screen real estate to display full titles for the vast majority of content and gave us an opportunity to reveal the synopsis over the image whilst not infringing too much onto the underlying broadcast.

crb-graham.jpg The synopsis rollover was to become one of the defining features of the Connected Red Button


Test, test and test again

Test early, test often is a widely used UX principle. Observing people interacting with your interface is invaluable and also means that issues become apparent very quickly and enable designs to be rapidly redrafted in response.

The prototypes we tested were designed and built to simulate the true experience of using the software on the target device, representing frame-rates and loading times.

The sessions themselves took place in a mock living room with a high fidelity prototype running on a TV. All users interacted with the TV in the normal way using a remote control.

Test participants were matched to a range of profiles representative of our audience mix.

We used a range of testing techniques including guerilla tests, formal task-based testing in the lab and wider hall testing (often with several hundred users) in order to determine the value and usability of each design phase.

Typically sessions were broken up into three parts: explore, task completion and reflective feedback ensuring we covered off all usability questions.

The UX team was supported by the BBC Usability and Accessibility team who provided expert assistance in designing task based questionnaires, recruitment, facilitation and delivery of testing sessions. They also audited the product against internal accessibility criteria.

Although extremely positive, the sessions highlighted a major issue with the discovery of the underlying applications that the Connected Red Button links to.

The visual treatment of the application launcher at the beginning of the stream was being mistaken for a heading therefore users didn’t realize this was a clickable item, missing the onward journeys into the applications.

cr5b-early-design.jpg Early designs featured a smart phone esq visual link to the underlying applications


This part of the interface was certainly the most problematic. Numerous versions were tested and failed. This may be because the concept of an app wasn’t as widely understood in a television context as it is in say a smart phone.

We ripped up that section and started afresh, introducing a BBC branded stream heading instead (i.e. BBC iPlayer, BBC Sport etc) alongside a distinct link to the application.

The concept of filtering the stream came out of this approach as user feedback led us to believe that there was a convenience in retaining the background broadcast whilst browsing through content.

The shape of the project evolved and vertical navigation was introduced to enable us to filter the stream by category.

As a team we did have some initial reservations about whether we where adding a layer of complexity to the product that had the potential to confuse our less tech savvy audience, but the beauty of testing allows us to try out such concepts before they see the light of day.


The sessions went remarkably well, better than we anticipated. Users were able to access the underlying apps as well as browsing a large volume of content at the Red Button level.

The design was beginning to function in the way it was intended.

crb-iterating.jpg Documenting and iterating designs based on user research

Beyond Connected Red Button

2013 will see a series of new features being released on Connected Red Button as well as scaling up the service to be available on a wider range of connected TVs.

We are constantly looking to make improvements to the service as well as exploring new concepts such as companion experiences and how we can expand on the foundations of Connected Red Button to bring programmes to life on multiple screens.

The future of Connected Red Button is genuinely very exciting.

Thank you for taking the time to read this blog and I hope you enjoy using the service now and in the future.

Please let us know what you think of the design by leaving a comment below.

Robin Gibson is a senior user experience designer in BBC Future Media. This post is a collaboration between Robin and fellow senior user experience designer Wez Elliot.

Tagged with:

Comments

Jump to comments pagination
 
  • rate this
    +1

    Comment number 1.

    This all sounds very interesting but what concerns me is whether it will be available on my TV. I bought a 40 inch Samsung UE7000D last year partly to use all the red button options such as the additional sports content and Olympics channels. Since then I've seen the red button services diminish markedly and will be somewhat disgruntled if I don't get tham back via the connected red button. I appreciate you need to be forward looking but it's unfair to take away services from people and not replace them. You should try very hard to include as many existing TVs as possible.

  • rate this
    0

    Comment number 2.

    Thanks for the insight - my background is web design, so am always interested to read this sort of stuff. One thing that stood out was the early design with the app like buttons, and how they were not recognised as clickable links.

    My wife is always a good source of feedback, and she initially struggles to find the iPlayer after pressing the red button. Which is arguably even less obvious than the early app icons.

    Its fine once you know where it is, but perhaps it should be added to the options across the top to make it more obvious? As it is, it sits on its own, outwith the context of the main navigation at the top, and is perhaps a bit hidden and low key at the bottom of the current large TV channel banner to the left of the channel highlights across the bottom.

  • rate this
    -1

    Comment number 3.

    Great read Robin, looks nice! Love the design wall...something I need to add in my work!

  • rate this
    -1

    Comment number 4.

    Being able to record the red button on Sky would be a much better option than anything else!
    Especially as the BBC seems to be putting its sports on there rather than on the main channels (World Track Championships - Cycling, is a casing point).

  • rate this
    0

    Comment number 5.

    @1. BRC
    ***" I bought a 40 inch Samsung UE7000D last year partly to use all the red button options such as the additional sports content and Olympics channels. Since then I've seen the red button services diminish markedly and will be somewhat disgruntled if I don't get tham back via the connected red button."***

    Ditto my Samsung SMT-S7800 Freesat box.

 

Comments 5 of 13

 

This entry is now closed for comments

Share this page

More Posts

Previous
BBC Sport app launched on Android

Wednesday 20 February 2013, 07:26

Next
What's on BBC Red Button 23 February - 2 March

Saturday 23 February 2013, 06:00

About this Blog

Staff from the BBC's online and technology teams talk about BBC Online, BBC iPlayer, BBC Red Button and the BBC's digital and mobile services. The blog is reactively moderated. Your host is Nick Reynolds.

Blog Updates

Stay updated with the latest posts from the blog.

Subscribe using:

What are feeds?

Links about BBC Online

BBC Internet blog Archive

owl-plain-112.jpg 2012 ι 2011 ι 2010 ι 2009 ι 2008 ι 2007

Tags for archived posts