BBC 2012 Olympics Interactive Video Player

 

Role: Senior Designer
Launched: July 2012

Awards: Laureus Sports Website: BBC London 2012 + D&AD Digital Design Winner 2013

The BBC was the sole rights' holder for the Olympics in the UK and were able to offer users 24 different streams of live sporting action at any one time, from every venue on every day of the Games. We wanted to take the opportunity to build a video player that would offer the best possible desktop video viewing experience to do justice to the incredible breadth of live content and also provide a lasting legacy to BBC Online and our audiences in the years to come.

This meant making the video available in high definition and then enhancing it with some extra functionality that in terms of added choice, this rivals anything our audiences would have ever experienced while watching sport on their TV. 

Some of the key features in the new player were: every sport available live and on demand in HD quality on every day of the Games. Easy switching between up to 24 live streams at any time, the ability to pause and rewind live video or jump straight to key moments you may have missed by using chapter markers (eg the Men's 100m final), extra facts and information on the sports and competitors you are while also simultaneously watching the Games.

 
 
 

Live Video Landing Page Sketches + Wireframes

 

The live video landing page primarily serves to provide an entry point into content. The page has a role to educate the audience about the service and also provide onward journeys to supporting content.  Below are some layout explorations I sketched. The explorations had to account for the BBC Global Experience Language and existing Sport Olympic modules.

 
IVP_Sketches.png
 
 

Live Video Landing Page Visual Design

IVP Landing Page.jpeg
 
 

Event Switcher Life-cycle modeling

 

The event switcher feature within the Interactive Video Player allowed the user to switch between up to 24 live streams at any time, and see what was coming up or catch up on events that had been missed. Using data from the previous Olympics (Beijing, 2008), I was able to visualise how the interface would change throughout the day, and throughout the duration of the games. 

 
Lifecyle
 
 

Event Switcher Visual Design

8pm (Lots of LIVE events)

8pm (Lots of LIVE events)

2pm (The day's warming up)

2pm (The day's warming up)

5pm (LIVE + Catch up)

5pm (LIVE + Catch up)

5pm (LIVE + Catch up)

5pm (LIVE + Catch up)

 
 
 

Icon Design

 

New icons were needed to support the Event Switcher.  To provide synergy with the existing BBC GEL icon set, angles have to be in multiples of 15 degrees. They also needed to be simple, unambiguous and where possible, unique to the BBC. 

 
Icon sketches

Icon sketches

Visual explorations

Visual explorations

1. Event Switcher 2. Olympics LIVE 3. Athletes 4. Sports Guide 5. Stats

1. Event Switcher 2. Olympics LIVE 3. Athletes 4. Sports Guide 5. Stats

 
 

Final Implementation + Delivery

IVP mock.png
 

Screenshots of IVP in action