UI Design | Tablet & Desktop Experience

CBSSports Super Bowl XLVII Second Screen Experience

Companion Super Bowl experience for CBSSports.com optimized for tablet and desktop. Set multiple viewership records as the most social telecast ever. Generated 10 million live video streams, up more than 100% from 2012. Despite the fateful power outage in the stadium of this particular year, this event marked CBSSports.com’s largest recorded audience in history.

See it on Mashable for a full recap.

_

Awards: Steeevie Awards (x2)

super-bowl-header-image-fwsuper-bowl-header-image-fw

Approach

As one of my first major user experience challenges, I was tasked with designing a desktop and tablet interface that allowed for game-viewing, with multi-camera toggling, integrating player and team statistics, live tweets, interesting facts, replays of the commercials (my personal favorite), and of course, all while remaining friendly to advertisers. 

Statistics Tab

Especially helpful for those following along on the big screen, this tab featured player, team and scoring stats. The drawer displayed a the full play-by-play by quarter.

“The most social television event in history”

2013’s Super Bowl set a record 50 million tweets (followed by the 2012 presidential election with 2.3mm less). This tab/drawer featured a live feed of tweets throughout the evening, with charts on trending topics and a total count. 

Commercials Tab

Not only could you replay the commercials (otherwise known as the best part of the Super Bowl), but there was also close integration with social to vote on your favorites, read tweets about the commercials and post your own thoughts.

Multi-Camera Angles

Being able to toggle between multiple camera angles, including a ‘Fan’s Choice’ camera, is part of what made this experience truly unique from watching the game in the traditional way. There were also hints in lower VJ unit to direct users to what was on each camera angle.  

VJ Unit

Throughout the game (and Beyonce’s halftime show!), we had created hundreds of cards displaying tweets, interesting facts, helpful interaction hints, polls and more, that cycled through this lower unit, corresponding with the game’s events. I was even standing by and created one for the subsequent power outage!