Technology: Node JS

The Defiant Ones

HBO

The Defiant Ones

The official website for HBO’s The Defiant Ones. A docu-series about Dr. Dre and Jimmy Iovine’s unlikely music partnership and their impact on contemporary culture.

Background

The Resistance

I was contracted by Deep Focus to generate a one page site promoting the HBO Documentary series– The Defiant Ones. The agency had presented four primary sections: a snapchat snapcode promoting the documentary, hidden bonus content, user generated gifs, and influencer experiences.

Bells & Whistles

The Features

Snapcode

Once landing on the site, the user is presented with snapping the Defiant Ones snapcode- which unlocks the official Defiant Ones lens.

Disruption

Unlock bonus content, by continuing to watch a few jarring animations.

User-generated content

Users could record their own 10 second video, fill in the black for the phrase “You will never _______.” and receive sharable animated gif that contains the same type of effect as the above.

Listen to some influencers.

HBO had 6 influencers record some of their defiant experiences to share.

The Tech

Loading up the toolbox

This one page site was packed with different technologies. React was used for the video capture process, nodejs was used to make the ugc content, and intense CSS3 animations for the glitchy-ness effects.

Considerations

The UGC content was the challenge that stood out the most. Making a video capture tool that will only be X amount of secs of recording, that will not only work cross-browser, but cross devices.

Related Work

Year in Review 2014

Spotify

Year in Review

View Spotify’s Year in Music. See what everyone was listening to in 2014 and get your own personalized Year in Music to share. In 2014 we couldn’t stop playing. From the bangers that made the world dance, to ballads that captured a moment — let’s look back, celebrate, and then play it forward.

BACKGROUND

Spotify

In 2014, Spotify compiled data from over 50 million users to reveal the most popular musical artists of the year. Additionally, the music streaming service captured listeners’ connections between songs from their playlist history and moments experienced throughout the same year.

The result

Spotify Year in Music

Video supplied from award submission
https://www.oneclub.org/awards/theoneshow/-award/23062/spotify-year-in-music

Top Female Artist

Katy Perry

View the Top 5
Say Congrats

Top Female Artist

Top 5

Close
  • 1

    Katy Perry

  • 2

    Ariana Grande

  • 3

    Lana Del Ray

  • 4

    Beyoncé

  • 5

    Lorde

CSS3

Tiles

The data and design supplied many types of information for the year in music. Tiles like this were used to show the featured category and flipped to reveal more information.

Prototype

Scroll Jacking

During the R&D stage of the project, the team wanted to see how the site could behave as single slides. After building out this prototype we discovered it would be best to allow the user control of scrolling.

Launch prototype

The Tech

Loading up the toolbox

There was a wide variety of technology used for this project. Angular was used for the framework, Node.js to compile the user’s sharable content, Handlebars for templating sections.

The Team

Group Creative Director — Alex Bodman
Creative Director — Diego Aguilar
Art Direction, Design & UX — Thomas Dudon
Copywriter — Hunter Simms
Dev — Chad Drobish
UX — Talia Fisher

Recognitions

The One Show
Gold Pencil

The Webby Awards
People’s Voice Winner
Best Visual Design – Aesthetic – Nominee, Honoree

The Clio Awards
Music, Digital/Social – Silver
Music, Innovative – Bronze

Mashies
Best Global Campaign – Winner

OMMA Awards
Online Advertising Creativity: Viral Campaign
Web Site Excellence: Entertainment

FWA
Site of the Day

aWWWards
Site of the Day

CSS Awards
Site of the Day

Creative Review Annual 2015

Experience MLS like a die-hard fan

ESPN

Experience MLS like a die-hard fan

Raucous fans make the MLS matchday atmosphere among the best in American pro sports.

Background

ESPN

This featured article was created to demonstrate the energized fans that fill up stadiums all over the county. ESPN chose to pick 5 teams and highlight their traditions that make going to a game a unique experience.

Content

The Chosen 5 Teams

ESPN went on the road to gather editorial from the Atlanta United FC, Minnesota United FC, Portland Timbers, Seattle Sounders FC, and the Sporting Kansas City. They came back with 360º videos, HD video, and imagery that captures the fans excitement

Capturing the excitement

Using 360º Video

My initial thought to display 360º video, was to create a custom player with three.js. From my discovery I found that videojs has a plugin for vr. After a prototype, I decided to go with the plugin which ultimately saved a few hours.

The Result

Experience MLS like a die-hard fan

Launch Project
The Tech

Loading up the toolbox

I am a huge fan of GSAP all the way back from the days of Flash. With the exception of GSAP and Videojs-vr the rest of the technologies I used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

Considerations and Recommendations

As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning.  This provides visibility to the client for the work that is outstanding, in development and completed.

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

Related Work

Race Your Heart Out

Acura

Race Your Heart Out

An award-winning digital and social campaign for Acura’s winter sales event.

BACKGROUND

Razorfish meet Acura

Acura teamed up with Razorfish to reinvent a holiday tradition and launch the first ever, multi-broadcast social event, allowing a new audience to experience the exhilaration of driving an Acura TLX on Periscope.

Tapping into the holiday nostalgia of the Gen X and Millennial demographics, Acura drove awareness of its Winter Sales Event by complementing the “Oh What Fun it is to Drive” TV spot and drawing on the emotional connection to the classic slot cars holiday gift.

THE IDEA

Race Your Heart Out — The First-Ever Periscope Powered Race

A socially driven live slot car race powered by Twitter’s Periscope.

Participants of the live event controlled acceleration remotely with their smart phones by pressing the Periscope “heart” button to power the racing Acura TLXs around the track. Ryan Eversley, Acura factory racecar driver, served as part of the event’s commentary team and, in spirit of the holidays, Acura donated race winnings to the Pediatric Brain Tumor Foundation.

THE WORK

And how it was done…

With a bit of smoke and mirrors, I created a web app with socket.io and an express server that would communicate to the web overlays what should be viewed. For example, should the HUD be on or off for Car A? When a race is over show the leader board on both cars. Update all the HUD display properties: hearts per hour, number of laps made, elapsed time, etc. The web browser would capture the video of the car, and a device would capture the screen (in this case a MBP) and stream that composite to Periscope!

The Tech

Loading up the toolbox

Since there was no need to support multiple browsers, I recommended chrome. Socket.io was used to communicate to the apps. On the server-side, NodeJS and Express were used. SCSS was used for styling up the huds and HTML5 for grabbing the video from the computer.

Discovery & Pride

One thing the team and I knew we had to account for was the number of hearts being clicked for speed. Creating real-time averages of hearts per X time and then using that as the basis for speed. There were a few times the car went from zero to superspeed resulting in flying of the track! Even planning for this was a challenge when working with real-time data.

Conclusion

One of my all time favorite projects. Short timeline, a few smart folks, a one-off, arduino, helping a charity – A dream project.
This project was very well received.

RESULTS
Increase in engagement

190%

Hearts per hour

60k+

Raised

$10k

The purse for each race was worth a $500 donation to the Pediatric Brain Tumor Foundation. Two hours and twenty races later, we had generated over 120,000 hearts and raised $10,000. In total, users watched 75 hours worth of races and Acura branded content increasing Acura’s engagement on Periscope by 190%.

RECOGNITION

2016 Cannes Lions
Silver Lion – Mobile

2016 Smarties Awards
Gold – Gold > Marketing within a Mobile Gaming Environment

2016 National Addy Awards
Gold – Social Media

2016 National Addy Awards
Silver – Online/Interactive

2016 One Show Awards
Merit – Mobile > Branded Games
Merit – Mobile > Durable Goods
Merit – Social Media

2016 Webby Awards
Honoree – Experimental & Innovation
Honoree – Best Use of Mobile Media
Honoree – Best Use of Video

2016 Shorty Awards
Finalist – Emerging Platform