Design + Code

NBC Sports.

The Super Bowl tackles social media.

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. During the game itself, the site was promoted as a “second-screen experience,” serving up every television ad as it went live — and we made sure those videos 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 million unique page views in under twenty-four hours, the site was an immense success, surpassing every expectation.

Agency: nclud. Additional Development: 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.

The NBC Sports Super Bowl site displayed on a tablet
Homepage grid for the NBC Sports Super Bowl site, combining NBC GIFs, NFL GIFs, and Super Bowl commercials
An NFL GIF opened in a modal window over the homepage of the NBC Sports Super Bowl site

The site was covered by numerous mass media platforms, such as Adweek, Variety, Advertising Age, and CNN.

Adweek coverage of the NBC Sports Super Bowl site: "NBC Turns to Tumblr to Host All the Super Bowl Ads in one Place"
Advertising Age coverage of the NBC Sports Super Bowl site: "NBC's Super Bowl Live Stream Will Feature Home for TV's Ads"
Variety coverage of the NBC Sports Super Bowl site: "Super Bowl Ads: NBC Turns to Tumblr to Post Spots After They Air on TV"
CNN Money coverage of the NBC Sports Super Bowl site: "NBC launches Super Bowl ad Tumblr"

The second screen experience had over 28 million unique page views and over 100,000 engagements, helping grow NBC Sports's social media reach.

Stats for the NBC Sports Super Bowl site showing over 100,000 engagements and over 28 million impressions
About

I fell in love with design and code in 7th grade when I built a webpage in Microsoft Word.

Hosted on GeoCities, it was a middle schooler’s dream of Star Wars: lightsabers, starfields, hyperspace, character profiles, and, of course, the Mos Eisley cantina band song playing in a MIDI loop in the background. Since then, I’ve grown up alongside the web — the introduction of CSS, the explosion of JavaScript, the death of animated GIFs, the birth of Flash, the death of Flash, the rebirth of animated GIFs, Web 2.0, and too many search engines to mention (along the way, I taught myself how to make websites a little bit better than that first one). Now I'm a designer for Taco Bell — your favorite place to grab a delicious taco at 3AM on the way home from an unforgettable night out with friends.

I live in Richmond, Virginia. I have a border collie named Logan (yes, after the X-Man). I’m a sneakerhead and font nerd. I organize my closet by color. I was born on a Friday. I’ve been to the emergency room in every place I’ve ever lived.

Do you have an awesome project that needs design, code, or identity? I’m available for very limited freelance work, so reach out.

Additional Clients: African Wildlife Foundation, AOL, Audi Financial Services, Clyde's Restaurant Group, Comcast, Custom Ink, Doubletree by Hilton, EVERFI, Habitat for Humanity, jQuery Foundation, Neustar, RAINN, Renaissance Hotels by Marriott, Sweetgreen, Volkswagen Financial Services.