Olympics: User Experience and Design

Monday 9 July 2012, 16:00

Nick Haley Nick Haley Head of UX&D

Tagged with:

Mockups of Olympic pages on four platforms

The same Olympic content appearing across different devices

I'm Nick Haley, the Head of User Experience and Design for Sport & London 2012 at BBC Future Media.

As the final pieces of our four-screen Olympic jigsaw come together, I thought I'd take the opportunity to share some of the design thinking that has gone into delivering this huge sporting event across desktop, tablet, mobile and connected TV.

Our Olympic project started back in 2011 and one of the key aims was to create a family of products across different platforms. During the Games, you will be able to access an incredible range of content via a wide range of devices and it was important that the experience across each was joined up and consistent. So whether you're checking the latest Team GB news in the morning on your phone or looking at rowing results on your computer at lunch, we wanted a sense that they all form part of the same overall experience.

The design team's ambition was to make it easy for you to find and interact with the content you want, when you want to. That meant understanding the different ways people use different devices, as well as getting to grips with an event of the scale of the Olympic Games.

Another aim for 2012 was to build on the foundation established by the BBC Sport website redesign. This meant reusing, where appropriate, the new page layouts and design language that had been created for Sport, but also exploring where we could go further and provide you with richer features and a greater depth of content.

Audience

During the initial research phase of the Sport redesign project, along with the Marketing and Audiences team we had identified an audience profile we call the "Main Eventers". This audience can be described as those for whom sport doesn't play a big part of their everyday life, but who really get interested during sporting events like Wimbledon, football's European Championship and the Olympics.

For 2012, we wanted to design sites and apps that worked really well for our core knowledgeable sport audience, but would also serve the millions of people who will come to site for the first time because they are excited about the Games - and who need to get up to speed really quickly on how the sports work.

Vision

On a project with so many moving parts it was important to have a single unifying idea that could bring focus to the work.

Our vision for 2012 is "Never miss a moment". Originally, this phrase was created for the live Interactive Video Player - however it grew to encompass the entire Olympic proposition.

We think it works not only because the BBC has extensive video rights but also because of the huge breadth of content we are offering, such as a page for every athlete.

This shared vision across the BBC helped us make decisions about what we were designing for the Games and is brought to life not only in the interactions you'll find on the digital products and services we've created, but also across TV and radio.

Live Video

Information about diving, above a dramatic still of an Olympian

The live interactive video player displaying a sport guide, which can be found in the extras panel

My colleagues have already blogged about the BBC's digital coverage of the London Games and how they will be available across four screens and also on Facebook.

From a design perspective, aside from the crafting of the video players themselves, what was important was how we created awareness of live video in a way that is clear and intuitive irrespective of the device or platform used.

Going back to the vision - asking ourselves if you would a miss a moment - helped us validate our designs.

As the same content is also available across multiple platforms, there was an opportunity to design similar ways to navigate through it.

Throughout the redesign of the BBC Sport site our focus was on "Live Beyond Live" and how we could make you more aware of live content.

One of the more obvious changes we made was to use different design treatments - in particular the use of blue to signify live events. These indicators of live, which were initially created just for the desktop sport site, were extended across mobile, smartphone apps and connected TV for the Olympics.

Mock up of Olympic homepage on day 5 of the games

The Olympic homepage live landing page showing all available video during the games
links through to live video and our live text page

Mock up on two mobile phones; the homepage, and a live video tab with navigation buttons at the bottom

The Olympic homepage on mobile and live landing page on the iPhone app, both showing links through to live video

As a way to navigate through video content on desktop and connected TV we settled on a carousel, which allows you to move easily through live and catch-up content.

What's on now is prioritised and displayed first, then a timeline is shown with catch-up content to the left and content coming up on the right.

It was also important that the user experience could be elegantly scaled to accommodate the varying number of events that take place during the Games. For example, on day one there is only one event taking place but on day nine there are 23 happening simultaneously!

A carousel of live video options, showing two just missed and six current videos

The "more video" panel in the Interactive Video Player, allowing easy switching between up to 24 live streams at any time

Screenshot of BBC Sport on IPTV, with yellow Sport branding, medal table, and video options

The homescreen of the BBC Sport app on Connected TV, again allowing easy navigation between up to 24 live streams during the Olympics

Navigation

A big challenge for the Olympic project was navigation, not only within the main Olympic site but also across the many 2012 sites.

One of the ways we solved this problem was through integrating an Olympic area into the new global toolbar, an element that displays on every online BBC page. This promotional slot allows the 2012 portal site to be permanently featured, reflecting the series of events taking place during 2012.

Screen grab of BBC Homepage with the Olympic area extended at the top and promoting three days of the torch relay.

The global toolbar, shown here on the BBC homepage with the Olympic area prominently displayed.

BBC Homepage on mobile, with Olympics on global toolbar

BBC News Homepage on mobile, with Olympics on global toolbar

On desktop, the toolbar slot also has a pushdown element which indicates the three most significant London 2012 events taking place at any given moment. The promotional slot can be found on our mobile global toolbar as well, the smaller space meaning we use a straight link through to the mobile portal.

While working through the complexities of our Olympic site, we also knew we wanted the navigation to follow the template established with the recently refreshed Sport site.

One of our design principles was to keep the navigation as streamlined as possible so we didn't overload you with options.

Permanent links to Schedule & Results, Medals & Olympic Sports are placed on the right-hand side in order to ensure you can access them at any time. Contextual links on the left-hand side of the navigation give a sense of place within the site and allow you to explore that section in more detail.

On mobile, we again wanted to keep the navigation simple so that as much of the screen is dedicated to content as possible. Three links form the main navigation and links to other areas are found further down the page and in the footer. This system allows you to access the same Schedule, Medal and Sport content quickly from wherever you are.

Our iPhone and Android apps take an even more streamlined approach, removing a lot of the site-wide navigation found on our mobile sites to focus just on the Olympics, optimising familiar header and footer elements to move around.

Screen grabs showing how desktops have a wide header showing major sports; and iOS and Android navigation follows the conventions of those devices.

The Olympic site navigation which can be found on desktop, mobile and our iOS and Android apps

The Olympic Schedule

From our research we knew that, irrespective of device, one of most important things people want during the Olympics is a schedule of events. With the Olympics being a series of 302 competitions within one overall competition, it was a major Interaction Design and Information Architecture challenge, one of the team describing it as like trying to play 3D chess!

A meeting wall full of ideas and potential designs. Two people lean over a third writing in a book.

Initial sketches and concepts from the design of the schedule

    The schedule has many views and slices of content but on desktop and mobile it is optimised to answer two key questions:
  • What's on today and what's happening right now?
  • When is a sport I am interested in taking place?

As well as a destination we also break up and distribute schedule content across the site, which you can see on both sport pages (eg swimming) and on athlete pages.

Olympic schedule for Wed Aug 1

The finished desktop schedule showing a day view during the Games.

During the Games, the schedule on desktop and mobile will first display what's on today while providing links to specific sports from those pages.

On each day you will be able to see editorial "picks", navigate to live content, and see results.

A page for every country, athlete, venue, and medal event

As well as more than 2,500 hours of live video content, we also have a huge range of content on our sport Olympic site.

Enabled by the new dynamic semantic publishing technology introduced earlier in the year, it's been possible to create an incredibly comprehensive site.

We designed an aggregation for each of the 36 sports and 302 medal events with news, stats, key info, schedule information and Twitter feeds being displayed. We also have pages for every country, venue and athlete.

When designing these pages we extended the templates originally created for Sport. The indexes created for pages such as football are what we classify as "high traffic" and can accommodate not only a huge range of content types but also a high volume of articles. However for more niche Olympic events like men's volleyball, and for lesser-known athletes, we needed to design a page that could still work well when a smaller amount of content is created. For our list pages such as countries or venues, we created pages that could accommodate large photography and individual country flags.

Hand drawn concepts on a wall

Early sketches of the 100m page.

Country page for Brazil, leading with a story about Judo fighter Sarah Menezes

An example of a country page

The same range of content is also found on mobile, where our approach was not to limit or reduce the content available on that platform, but design pages that were optimised for the mobile context.

Compared to desktop where we had already templates from the Sport redesign, on mobile we created everything from scratch, including the sport mobile design language.

User Testing

A huge amount of user testing took place during the 2012 project. We did numerous rounds and a typical test would see us set up two days of labs in London, Manchester, and other locations in the UK. This allowed us to test each time with 12 participants to gain an understanding of how useful and usable our products were.

User testing is one of my favourite parts of the UX and design process, as you get to validate your thinking. As well as testing individual products, we were also keen to test cross-product journeys such as from iPlayer to Sport and from the BBC homepage to the Torch Relay site in News.

Testing was crucial in allowing us to get feedback on our designs, as well as understanding typical behaviour on the site during the Games

What we learned from each round was then factored back into our design work, in particular around comprehension of the "live timeline" and "chapter markers" in the video player.

We removed some features and added others. "Sport guides" were not in our original designs but were integrated later into the video player. They allow you to find out more about what you're watching without leaving the video, as well as having guide content available on sport pages.

Our Athlete pages were also modified after user testing, changing the position of additional information. Placing key information at the top of the page makes it faster to find out more about who a competitor is and the sports they compete in, before moving on to news and video content.

The "Stadium UK" look and the TV trail

We launched our "Stadium UK look" on desktop and mobile sport Olympic pages last week. The design takes the concept of "Stadium UK" from the TV trail and applies it to our four-screen digital products.

On the desktop site, we use a combination of animated and static backgrounds, which can be found in the footer area of every Sport Olympic page, linking through to the full TV trail.

Greyscale footer, with a javelin thrower

Early prototyping of the "games time" look footer

Sportsman climbing onto a bridge at the bottom of a page - in animated colour

The finished "Stadium UK" footer for the javelin scene, showing links to replay and click through to the film

On mobile, we went for a more streamlined approach, creating close-ups of the characters from the trail, with a link through to the full film. The same approach was taken on our iOS and Android apps, although here we could also create an Olympic splash screen when the apps first load. On connected TV and Red Button, we also use the splash-screen approach to create consistency across platforms.

BBC Sport logo over the

The splash screen shown on the BBC sport app for connected TVs

And finally

The Olympic project has been a great opportunity to design brand new digital products and services across four screens and I've only really scratched the surface of all the great work that has been done and then launched in the past 18 months. It's been a huge collective effort and I'd like to thank all of those in the 2012 UX&D team who have been involved.

Shaping, structuring and arranging Olympic content for many different contexts and devices was a big challenge but hopefully the end result is an overall experience that feels joined up and cohesive, and most importantly something that you enjoy using. I also hope I've been able to shed some light on the design process involved in the first truly digital Olympics.

If you would like to find out anything more about the work of UX&D please ask below.

Nick Haley is the Head of UX&D for Sport and London 2012, BBC Future Media

Update: minor corrections to some captions 10 Jul 10:49

Tagged with:

Comments

Jump to comments pagination
 
  • rate this
    0

    Comment number 1.

    Looks world-class, as we might expect from Auntie.

    I would book the best tables at any relevant awards ceremonies right now!

  • rate this
    0

    Comment number 2.

    I suspect it will not be long before the detractors comment and assert that this is all an astronomical waste of the license fee and that the BBC has far exceeded its mandate and dominates the digital media landscape in the UK etc. etc.

    And while it's too early to tell as this content isn't entirely live, what I can say on behalf of 'the industry' is that in the world of user experience, there are few places and teams I admire more than the BBC. An organisation that rarely gets things wrong, the attention to detail and the innovation in design and experience is plain to see. It's apparent that a huge volume of time and effort goes in to creating interfaces that work and do so charmingly.

    We experience designers know how much research and testing you undertake to make things as user-centred as possible across an impossibly diverse set of devices and channels; and whilst there will always be the detractors that will look for any opportunity to highlight the flaws, I fully expect this work to represent to the world what we and our beloved BBC are capable of.

  • rate this
    0

    Comment number 3.

    I can't find a BBC Sport app in the Apple App Store, so I presume it's not out yet (or I'm not looking for it under its correct name). Under the circumstances I'm guessing it'll be available in time for the Olympics, but can you either provide a date or let me know what I need to search for to find it?

  • rate this
    0

    Comment number 4.

    Hi smorgasbord, I head up UX&D at the BBC and I just wanted to say, on behalf of our team here, thanks for your kind words!

  • rate this
    0

    Comment number 5.

    Ironic the London 2012 menu option doesn't appear on this page.

    There are many things I have and I could criticise about the BBC's Olympic interactive offerings (notably how the second stream on Freeview offers just 4 hours of live coverage a day!), but heck, that splash screen is gorgeous so I won't - though a shame so many connected devices can't access it.

    Also will the BBC Sport Player online be genuinely full screen for the Olympics - at the moment it isn't.

 

Comments 5 of 24

 

This entry is now closed for comments

Share this page

More Posts

Previous
What's on BBC Red Button 7th - 14th July

Saturday 7 July 2012, 06:00

Next
BBC Online Outage on Wednesday 11th July 2012

Thursday 12 July 2012, 10:38

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