Ian Rogers
Product & Experience Design

NBC London Olympics

Design & Direction for nbcolympics.com
Featured Project Image
NBC London Olympics homepage on large monitor featuring Hero lead with dramatic picture of Phellps. Mobile and tablet devices to the right, featering sign-on process for mobile and another homepage view for the tablet.

Overview

The London Olympics made history as the first Games where audiences could livestream every event on NBCOlympics.com, while exploring the rich, in-depth content that defined the Olympic experience.

Olympics Central
The site was the central hub for all things Olympics, with coverage spanning pre-game, game-time, and post-game. The experience shifted with each stage, adapting its pages and content to match the moment. Real-time rankings, schedules, and video showcased the core highlights, while athlete profiles, host city coverage, and special feature pages added the human-interest angle.

Digital Touchpoints
Designs extended beyond just the core website pages. Widgets, banner ads, countdown/game-time/count-up clocks, and style guidelines for NBC Affiliate stations drove engagement and anticipation across digital channels. This content would live long after the games were over to encourage repeat viewings of these historic sporting events.

Live Streaming
Video content was a principal focus and selling point. Cable users could access live streams of all sporting events through their MVPD using an easy-to-navigate sign-in process. Desktop, Android, and IOS platforms had support, and a free trial period was also available.

Records & Reach
NBCOlympics.com successfully unified content in a single, accessible hub, connecting viewers to every aspect of the Games. After 17 days, it had streamed 3,500+ hours, set records for concurrent live streams, and became the most-watched TV event in U.S. history.

Homepage

Game Time Version
Full Homepage showcasing key modules

MVPD Sign-In

Tablet View
Three screens showing sign-in process

Supporting Materials

Banners, Affiliate Partner Guide/Assets, Style Guidelines Countdown Clocks
Banner Ads and Cover of Partner Tool Kit
Page Examples of Guidelines and Asset Use

Results & Schedules

Wireframe Example* vs. Final Page (Calendar View)
Olympics Competition Schedule showing event and date
*Prepared by NBCU User Experience Design, for NBC Olympics
Specific Date selected, active sports highlighted with all sports listed

Results & Schedules

List & Grid Views
Three pages featuring Usain Bolt

Media Pages

Slideshow, Athlete Profile, Video
Three pages featuring Usain Bolt

List View & Article Page

Social Sharing, Commenting
Phelps Article