Author: Lucia Komljen, Strategist, BBH London

This week saw the launch of ASOS Urban Tour – a shoppable, cultural experience in the form of an interactive platform promoting ASOS A/W 2011 menswear collection.  It invites the audience to watch some of the world’s most skilled urban musicians, dancers, designers and artist in action across the world and to explore what – and where – inspires their craft and their style. The centerpiece is a dynamic, shoppable video set in London which can be paused and explored at any point, presenting the user with more information on the dancers and enabling the purchase of their looks.

Overall, we hope Urban Tour is an example of what can be achieved when you push technology and design in an attempt to seamlessly combine entertainment and service for e-commerce brands. Furthermore, it’s another demonstration of just how powerful it can be when technology enables ambitious creativity throughout the customer journey.

Here’s the story behind the work so far, we’d love to hear what you think.

Insight Mining

Resistant to the conventional ‘gathering’ methods and media favoured by the ASOS womenswear audience (fashion magazines, tastemakers, celebrity, or simply browsing the virtual racks until something bites), we know our male audience predominantly find their style-inspiration amidst their diets of pop-, sub- and street culture. The setting for the menswear catalogue had to be the streets.

Imitation vs Contribution

However, hiding the brand behind flipcam-aesthetics and dropping it onto YouTube alongside that guitar guy, those C-Walkers and that flute-playing, Nintendo-loving beatboxer felt tired. Rather than imitating it, we needed to figure out how to give back to culture whilst not losing sight of needing to retail clothes. High production values and ambitious technical standards (across film, UX and interactive design) brought some magic and ease of use to what was shaping up to be an immersive – and hard-working – retail experience.

Shop my Culture

Regardless of media spend or social spread, we didn’t want to rely on guys seeking out the collection online (let alone single items) and following through with a purchase after being exposed to entertainment alone. Cue the desire for technology that would enable us to own the most critical parts of their journey in a magical way (browsing and purchasing).  A production partner who’d be up for a seriously ambitious project was critical.


Dominic Goldman (BBH CD on the project) on how he wanted the interactive component to work:

“To allow people to click on any of the dancers at any time and check out the clothes, we would have to create a series of break-out moments whereby the action would rewind or forward to a specific performance. We then had to stitch together a scene in which the dancer would stop what they were doing, and come to life to show their clothes.”

We gave that challenge to our partners at Stink Digital. As Marcel Kornblum, creative technologist there, puts it:

“Everything about the job was ambitious.  From the timelines for the shoot and the interactive build, to the feature list. In just seven weeks we did everything from start to finish. We did a two day shoot in London with five of the best young dancers in the world, and just a handheld camera, some special effects props, a crane and a helicopter. The edited and graded film was painstakingly visually matched by MPC to create the interactive breakouts, with the matches verified individually in a custom-built player allowing the speed, acceleration and deformations to be customised per breakout, creating the right balance of film and interactive magic for the effect, as well as a lot of visual cleanup taking place.”

Dom adds:

“In some instances, we had to support the dancers with rods and poles, to hold them in this impossible position that could never be achieved without them being supported. We removed this in post, to give the illusion of a dancer floating in mid-air, while the individual dancers performed their break-outs.”

Check out 20 seconds of magic below, showing this in progress:


Lessons learned so far

We’re almost a week into the launch now. Inevitably, there’s still a lot to do, monitor and react to. To date, it’s taught us the following:

1. Not to let the fear of failure prevent us from taking the harder option. Parts of this project have been painful (glitches right up to the last hour), but at no point were there any wishes that we’d been less ambitious.

2. More proof, if proof were needed, that best in class collaborators in every sense (interaction design, sound design, music, film, editing etc) bring untold value to the mission

3. Going the extra mile to find the very best talent is worth it – the jaw-droppingly talented young dancers, skaters and beatboxers we worked helped make the end product truly outstanding.

4. Above all else, you can’t do this without a client with vision, ambition and guts. We’re lucky on that score.

To travel through the rest of ASOS Urban Tour check out the other films here. And here’s the Paris film for starters:

[youtube width=”540″ height=”438″][/youtube]

More tech background (thanks to Marcel Kornblum)

The site was built using a combination of Flash video, dynamic audio and HTML/JS technologies. Dynamic audio soundscapes (by Hear no Evil and Plan8) allow seamless mixing between the main and the breakout films. The flash video allows users to interact with the main performer whilst freezing time through the manipulation of the enormous (up to 200MB) video asset timeline. HTML and Javascript were used for all the static and editorial content, with gracefully degrading levels of animation tailored to different browsers, including Safari for iOS.

A CMS and integration with the prelaunch ASOS API allow for full product management and integrated eCommerce functionality within the experience, including stock availability and pre-buy configuration.

The scale of this was pretty crazy to say the least.  Whilst the team had produced the frozen moment effect before, never had it been done with the added challenge of making the main character step out of the freeze and into a separate performance – and certainly not with 12 unique frozen moments, spread over 2 minutes of a 4 minute film, and using handheld footage.



Clare Dobbie, Global Marketing Director
Lindsay Nuttall, Global Head of Strategy and Communications
Fiona Marshall, Senior Global Brand Manager
Louise Bancroft, Menswear Marketing Manager


BBH Creative Director: Dominic Goldman
BBH Art Director: Dominic Goldman,
BBH Copywriter: David Kolbusz,
BBH (Addictive Pixel) Designer: Eric Chia
BBH Head of Strategy: Jason Gonsalves
BBH Head of integrated Production: Olivia Chalk
BBH Interactive Producer: Susan Liu
BBH Integrated Producer: Charlie Dodd
BBH Strategist: Michelle Gilson
BBH Team Director: Ngaio Pardon/Liz Harper

Production credits for London interactive film

Production Company: Stink Digital
Director: Sebastian Strasser
Executive Producers: Daniel Bergmann, Gregory Cundiff, Marcel Kornblum, Josh Tenser
Producer: Richard Fenton
DoP: Joost Van Gelder
Post Production: Moving Picture Company
Editor/Editing House: Tony Kearns @ Peep Show
Sound: Hear No Evil, Plan 8
Interactive production: Mark Anson, Magnus Dahlstrand, Nick Fitzsimons, Ian Hart, Marcel Kornblum, John Lund, Ian McGregor, Neil Nand, Arpad Ray, Margaux Renaudin, Olof Storm and Josh Tenser, Javier Abanses

Production credits for Paris/Tokyo films

Production company (Paris/ Tokyo): Pulse Films
Director (Paris/ Tokyo): Ben Newman
Producer (Paris/Tokyo): Neil Andrews
Line Producer (Paris): Hugo Merival
Line Producer (Tokyo): Masa Kokubo
DoP (Paris/Tokyo): Daniel Trapp
Post Production (Paris/Tokyo): The Mill
Editor/Editing House (Paris/Tokyo): Thomas Grove Carter/ Family
Sound (Paris/Tokyo): Munzie, Grand Central

For more on the Making Of:

[youtube width=”540″ height=”438″][/youtube]

Dancers: Lil' Buck, Baby Bang, Looney, Zeus and Marcio