Olympics: User Experience and Design
Post categories: ´óÏó´«Ã½ Sport,Ìýuser experience & design
| 15:00 UK time, Monday, 9 July 2012
The same Olympic content appearing across different devices
I'm Nick Haley, the Head of User Experience and Design for Sport & London 2012 at ´óÏó´«Ã½ 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 ´óÏó´«Ã½ 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 ´óÏó´«Ã½ 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 ´óÏó´«Ã½ 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
The live interactive video player displaying a sport guide, which can be found in the extras panel
My colleagues have already blogged about the ´óÏó´«Ã½'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 ´óÏó´«Ã½ 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.
Ìý
The Olympic homepage live landing page showing all available video during the games
links through to live video and our live text page
Ìý
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!
The "more video" panel in the Interactive Video Player, allowing easy switching between up to 24 live streams at any time
The homescreen of the ´óÏó´«Ã½ 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 ´óÏó´«Ã½ page. This promotional slot allows the 2012 portal site to be permanently featured, reflecting the series of events taking place during 2012.
The global toolbar, shown here on the ´óÏó´«Ã½ homepage with the Olympic area prominently displayed.
´óÏó´«Ã½ 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.
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 and Information Architecture challenge, one of the team describing it as like trying to play 3D chess!
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.
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.
Early sketches of the 100m page.
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 ´óÏó´«Ã½ 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.
Early prototyping of the "games time" look footer
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.
The splash screen shown on the ´óÏó´«Ã½ 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, ´óÏó´«Ã½ Future Media
Update: minor corrections to some captions 10 Jul 10:49
Comment number 1.
At 9th Jul 2012, Briantist wrote:Looks world-class, as we might expect from Auntie.
I would book the best tables at any relevant awards ceremonies right now!
Complain about this comment (Comment number 1)
Comment number 2.
At 9th Jul 2012, smorgasbord wrote: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 ´óÏó´«Ã½ 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 ´óÏó´«Ã½. 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 ´óÏó´«Ã½ are capable of.
Complain about this comment (Comment number 2)
Comment number 3.
At 10th Jul 2012, roline wrote:I can't find a ´óÏó´«Ã½ 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?
Complain about this comment (Comment number 3)
Comment number 4.
At 11th Jul 2012, Julia Whitney wrote:Hi smorgasbord, I head up UX&D at the ´óÏó´«Ã½ and I just wanted to say, on behalf of our team here, thanks for your kind words!
Complain about this comment (Comment number 4)
Comment number 5.
At 11th Jul 2012, Brekkie wrote:Ironic the London 2012 menu option doesn't appear on this page.
There are many things I have and I could criticise about the ´óÏó´«Ã½'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 ´óÏó´«Ã½ Sport Player online be genuinely full screen for the Olympics - at the moment it isn't.
Complain about this comment (Comment number 5)
Comment number 6.
At 12th Jul 2012, Tim Caynes wrote: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.
Complain about this comment (Comment number 6)
Comment number 7.
At 12th Jul 2012, Josh wrote: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!
Complain about this comment (Comment number 7)
Comment number 8.
At 13th Jul 2012, AndyyMurray wrote:All this user's posts have been removed.Why?
Complain about this comment (Comment number 8)
Comment number 9.
At 13th Jul 2012, luciemclean wrote:@roline The ´óÏó´«Ã½ 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 ´óÏó´«Ã½ Olympics. There's a blog post about the Olympics app here too: /blogs/bbcinternet/2012/07/olympic_app_android_iphone.html
Complain about this comment (Comment number 9)
Comment number 10.
At 13th Jul 2012, Nick Sakellariou wrote:What TVs are deemed as "Connected TVs" for the ´óÏó´«Ã½ 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?
Complain about this comment (Comment number 10)
Comment number 11.
At 13th Jul 2012, lettice wrote: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.
Complain about this comment (Comment number 11)
Comment number 12.
At 16th Jul 2012, Webbswonder wrote: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 ´óÏó´«Ã½ 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.
Complain about this comment (Comment number 12)
Comment number 13.
At 16th Jul 2012, Brekkie wrote: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.
Complain about this comment (Comment number 13)
Comment number 14.
At 20th Jul 2012, Anna Sempe wrote: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
Complain about this comment (Comment number 14)
Comment number 15.
At 23rd Jul 2012, Webbswonder wrote:My error. I complained about the carousel. It is only on the ´óÏó´«Ã½ London 2012 site, not on the ´óÏó´«Ã½ 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 ´óÏó´«Ã½ London 2012 site to the ´óÏó´«Ã½ 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 ´óÏó´«Ã½ 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 ´óÏó´«Ã½ Homepage.
Complain about this comment (Comment number 15)
Comment number 16.
At 28th Jul 2012, Interrossiter wrote: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 ´óÏó´«Ã½ 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 ´óÏó´«Ã½ 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?
Complain about this comment (Comment number 16)
Comment number 17.
At 29th Jul 2012, DBOne wrote:@16 It doesn't say that only 12 people tested the site.
Complain about this comment (Comment number 17)
Comment number 18.
At 29th Jul 2012, Interrossiter wrote:@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 ´óÏó´«Ã½ regarding providing results of their own survey for feedback on the new site & a total lack of subsequent engagement, despite promised replies, by the ´óÏó´«Ã½ 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?
Complain about this comment (Comment number 18)
Comment number 19.
At 31st Jul 2012, Scott Byrne-Fraser wrote:@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.
Complain about this comment (Comment number 19)
Comment number 20.
At 1st Aug 2012, Gareth Adams wrote:@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]
[2]
Complain about this comment (Comment number 20)
Comment number 21.
At 5th Aug 2012, Interrossiter wrote:@ 19 & 20:
Many thanks for the responses, interesting information indeed.
The ´óÏó´«Ã½ Olympic site has proven considerably more 'user friendly' in layout & thoughtful in design than the new standard ´óÏó´«Ã½ Sport site at which my criticism was mainly levelled - seems pretty evident your 12 user sample weren't from there at its introduction?
Shame the ever elusive Mr Gallop never felt able to reply to reply as promised & support his product in the way you have, but looking at previous threads/blogs in which he was involved that seems to be a pattern.
I'm really generally satisfied with the Olympic content as a stand alone product overall, it works on most levels for web & mobile users.
Could you now please become involved in carrying this product forward & making the main ´óÏó´«Ã½ Sport site carry the torch to make it again become the amazingly useful & user friendly site it previously was which it is all we critics requested following the re-launch?
Complain about this comment (Comment number 21)
Comment number 22.
At 12th Aug 2012, Neil wrote:Whilst the scope of the project is huge and impressive, and the execution generally good, there are simple and obvious problems that fell through the cracks. My favourite (and a showstopper for me using the iPhone apps) is that instead of displaying the country mnemonic by the competitor's name, countries are identified by tiny flag graphics which are a) tiny and b) require me to be good at geography, both of which are severe usability failures which should have been stopped at the first round of QA. This actually stopped me using the iPhone apps since half the time I had no idea where the competitors were from.
Complain about this comment (Comment number 22)
Comment number 23.
At 13th Aug 2012, Gab Scali wrote:Overall a nice effort, I love the player and other bits, however the experience is often frustrating, mainly because of poor IA.
1) every single page is way overcrowded and makes it difficult to find anything. There is a 'junkyard effect': a user lands and finds her or himself surrounded by dozens of pieces of information all competing with each other for attention, some missing, some double and even triple, in a pseudo random order where it's not clear where the 2/3 obviously important things are. There is often a distinctive lack of logic in the way info are presented... Almost feels as the IAs never watched a sporting event in their life/
2) the whole experience is designed *only for Brits*. For non British viewers is way more difficult to find what they want: wrong in all kind of ways.
3) the IA of the whole schedule and results is way below par. The journey to drill down to find and watch an event is lacking some key information at every step.
"Final of men's 69 kgs".... oh what..? you, viewer, actually wanted to know *who* features in the final in the title?? *Before* committing to click and load another page...? Tough. Results are also riddled with the same problems.
Complain about this comment (Comment number 23)
Comment number 24.
At 30th Aug 2012, Diegoalsan wrote:Amazing four-screen UX. Thanks a lot for the work.
I've seen this video where someone from the ´óÏó´«Ã½ presents all this work.
Does anybody know if there is any other video, better quality, to know more about all the olympic staff?
Thank you!
Complain about this comment (Comment number 24)