NBC Sports: Tackling social media for the Super Bowl.

Platform Web
Role Lead Design / Code
Year 2015
Agency nclud
Collaborators Ramsay Lanier

All work was designed with Illustrator. The second-screen experience was built with JavaScript, Paper.js, Gulp, and Sass on the Tumblr platform.

NBC Sports wanted to expand its Super Bowl reach to Tumblr with a visually striking, fast, and responsive platform. By combining JavaScript particle effects, SVG objects, and CSS animations with a custom grid and lightbox interaction, the site delivered an exciting and seamless second-screen experience.

TLDR
In the lead up to the game, the hero animation featured legendary NFL players and Super Bowl moments. Content featured animated GIFs, memes, and videos from NBC Sports features on the playoffs.
Browser controls in the top left Browser controls in the top right

Introduction

Bringing the Lombardi Trophy to Tumblr.

Every company likes to think of their project as “the big game,” but only one can truly lay claim to THE Super Bowl. While NBC Sports already had massive numbers of fans on Facebook and Twitter, they were looking to conquer another social media platform in the lead-up to the game: Tumblr. The network needed something eye-catching and beautiful that was also rock solid, fast, and responsive across desktop and tablet platforms in order to share content and interact with fans.

To recreate the sparkling on-air trophy graphics and branding, we combined JavaScript particle effects, SVG objects, and CSS animations into a unique, smooth, and compelling animation that would work everywhere (even on underpowered tablets and devices). Next, we developed a fully custom responsive grid and lightbox interaction to provide the best possible visual experience for visitors that also allowed for maximum sharing and social exposure.

Once teams won their conference finals, the hero animation was updated to feature key players from both Super Bowl bound teams.
Browser controls in the top left Browser controls in the top right

Second-Screen Experience

Live from Glendale, Arizona (and your living room couch).

During the game, the site was promoted on air as a “second-screen experience,” serving up every television ad, reaction GIF, and meme as they happened — and we made sure those videos and content became the center of attention, presented in a huge, beautiful manner.

With media coverage on CNN, Huffington Post, Reuters, Variety, AdWeek, and Advertising Age, as well as over 28.5 million unique impressions in under twenty-four hours, the site was an immense success, surpassing every expectation.

Results

Related Work