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.

  • rate this
    0

    Comment number 6.

    I love a dissection of an evolution. Thanks for sharing your process in such detail and exposing the creative workings of this project. I'm a great advocate of defining vision and principles early in the process to enable all stakeholders to understand how the component parts are shaped and structured to provide a great user experience. Most of the contextual design and optimisation challenges you mentioned are often the most difficult to coherently address and I'm looking forward to trying it out for myself.

    Bonus points for so passionately extolling the virtues of user testing. I don't expect you would ever leave that out, but it is worth stating just how critical it is in understanding user intents and behaviours and how that helps validate your design hypotheses, if I can say that out loud, which I think I just did.

  • rate this
    0

    Comment number 7.

    Gonna end up just having the Olympics permantently playing on my laptop now with this much going on! But kudos it all looks awesome and agree with the comments above.

    Oh and the splash screen is superb and needs to become a proper wallpaper :) make it happen!

  • Comment number 8.

    All this user's posts have been removed.Why?

  • rate this
    0

    Comment number 9.

    @roline The BBC Sport app will not be released until after the Olympics. However our Olympics app is now available in iTunes and Google Play and there's a shortcut available for Blackberry too. You can find it by searching for BBC Olympics. There's a blog post about the Olympics app here too: http://www.bbc.co.uk/blogs/bbcinternet/2012/07/olympic_app_android_iphone.html

  • rate this
    0

    Comment number 10.

    What TVs are deemed as "Connected TVs" for the BBC apps. There is a wealth of TVs out there today that claim that they are both smart and connected. Which brands and models will be supported by the apps and services mentioned in this article?

  • rate this
    0

    Comment number 11.

    The app quality looks really poor on the ipad.
    Not sure who tested that, they could not have said it was nice to look at on a tablet
    You should have a seperate app for tablets, they are very different beasts.

  • rate this
    0

    Comment number 12.

    A truly difficult project I am sure. I am sorry to see the horrible flashing and twitching carousel on the Olympics homepage. I had hoped the very negative reaction to the BBC Homepage might have stopped you reusing that failed design. I think the way you use a computer must be very different to me if you can tolerate trying to look at a navigation object that twitches left and right and flashes popups constantly.

  • rate this
    0

    Comment number 13.

    Nick - I asked the question over on Roger Mosey's blog about Connected TV and it appears only some Sony and Samsung TVs will carry the games.

  • rate this
    0

    Comment number 14.

    I have to agree with lettice above... just tried the app on the ipad and it doesn't look great. (Not to say that a lot has not been taken into consideration in terms of the design as you detail in your post but I still think the end product could be much slicker)

    Anna

  • rate this
    0

    Comment number 15.

    My error. I complained about the carousel. It is only on the BBC London 2012 site, not on the BBC Sport Olympics 2012 site. I had not realised they are different. Only today did I find all the content described in this blog, why is the link from the BBC London 2012 site to the BBC Sport Olympic 2012 site so hidden? Why are there two separate sites for the same event? Totally confused me. I like the sport site so much more, because it is usable, unlike the BBC London 2012 site which has the carousel with its flashing images, text all over the place and wobble. Will the link become more apparent when the games are live? Do you guys ever read any of this? Does it make any difference? Certainly it did not with the BBC Homepage.

  • rate this
    0

    Comment number 16.

    I'm sorry to raise this issue once more but, given the massive number of negative posts on the multiple threads about the new site, your comments about testing the site are scary:
    "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."

    So just 12 participants were sufficient to ruin the previously superb BBC Sport website & are responsible for what we now have??
    The feedback of just 12 people were enough to turn it yellow & black & light blue with such an awful layout?
    The BBC never fully answered any of the threads & as for Ben Gallop's promises to come back to users, well is he still there..........?
    Such a shame this was never tested properly, can you imagine Sky using only 12 users & launching a product then so poorly received & sticking with it?

  • rate this
    0

    Comment number 17.

    @16 It doesn't say that only 12 people tested the site.

  • rate this
    0

    Comment number 18.

    @17 - Semantics perhaps, ok perhaps not 12 overall.
    It is however specific when it says 'test each time with 12 participants'.
    You therefore apparently suggest that a group of 12 is a sufficiently sized group to be a viable sample upon which to introduce such massive changes which were then, shall we say, not in the main 'well received' on any of the numerous rapidly closed 'blogs' (given that we are talking about a website attracting millions of hits & their massively varying requirements)?
    Sadly this will never be known as, there's been a total lack of response from the BBC regarding providing results of their own survey for feedback on the new site & a total lack of subsequent engagement, despite promised replies, by the BBC Mr Gallop et al (unless you know better?)?
    This is not subject to FOI requests either.
    Perhaps you could enlighten us all please, or could the elusive Mr Gallop possibly do so?

  • rate this
    0

    Comment number 19.

    @Interrossiter Nick has another job now, so I’ll pick up the questions on the user testing.

    The Olympic and sport service went through many rounds of testing during its design and development. Each round of testing was focused on specific features and pages of the Olympic service. The aim being to find any usability issues by watching the users interactions and then interviewing them to gain an understanding of why they interacted with it in that way.

    In each round a sample size of 12 sport site users took part. In most cases it only took 5 or 6 users to find most issues with a features being tested. Subsequent users often repeated the same issues or where shown slightly altered versions of the feature based on the feedback of the earlier users.

    This pattern has been reported in many usability studies, so a small sample size of under 12 is the industry standard.

    To understand how changes to the visual design of the site are perceived by users, much larger quantitative studies were conducted with sample sizes of up to 2000 users used in each round.

  • rate this
    0

    Comment number 20.

    @Interrossiter - Jakob Nielsen's oft-cited blog post[1] from 2000 goes into detail as to why testing with 5 users at a time, and iterating subsequent tests with a different similar-sized set of users is the "best" approach for usability testing. This is what's regarded as the "industry standard", in fact the post itself is the third result on a Google search for "Usability testing" for me.

    The Wikipedia page for usability testing[2] goes into more detail explaining some of the criticisms against this approach, but concluding that it's still valid.

    [1] http://www.useit.com/alertbox/20000319.html
    [2] http://en.wikipedia.org/wiki/Usability_testing

 

Page 1 of 2

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