The Other Side – Honda Civic Type-R

http://www.hondatheotherside.com/d.php

Agency: Wieden + Kennedy, London

THE THINKING

Honda is renowned for its reputation of engineering excellence, technology and reliability. But it’s the brand’s other side, born from a racing heritage and thirst for innovation, that this interactive film heroes.

Showcasing both the Civic and new Civic Type R, the wild child alter-ego of the Civic hatchback, the film unfolds an adrenaline-fuelled dual narrative. One set during the day, the other at night. The daytime story sees a father in his white Civic pick his daughter up from school to drive her to a surprise party. The after dark narrative shows the father’s other side – an undercover cop getaway driving a crew of art thieves to a police sting, in a head-turning red Type R. Whilst they contrast in tone, the two stories mirror each other perfectly in their composition.

The viewer can switch seamlessly between each film by pressing ‘R’, triggering Honda’s ‘Race Mode’ and throws the viewer into their very own director’s cut to see how each storyline unfolds.

There were also two sides to the technical development, with desktop users being directed to Honda’s YouTube channel while tablet users enjoy the experience on a self-contained HTML5 site.

The YouTube build uses a “custom gadget”, styled to look like a branded but ordinary YouTube player making the interactivity all the more surprising. Behind the scenes, two separate video players are kept synchronised, showing each side of the film.

The HTML5 build keeps both films in a single double-width video, and uses the Web Audio API to switch between the left and right channels of a single audio file. This approach lets us perfectly synchronise the two films for a lightning fast and precise switch, but is also crucial for the experience to work on iOS.

The most interesting part of this project was making the site work seamlessly, not only across dozens of browsers and devices, but also 22 locales.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s