In August 2011 ASOS launched their new line of menswear with the Urban Tour promotion, concepted and designed by BBH and built by Stinkdigital, with film by Stink and Pulse, post by MPC, sound by Hear no Evil and interactive sound by Plan8.
A screenshot of the main experience interface. This image is taken from the Stinkdigital portfolio page for this project.
This was a hugely ambitious project that I am very proud to have been involved with while at Stinkdigital. I was the technical lead on the digital part of this project, as well as Creative Technologist and an Executive Producer.
I played a small role in shaping the project creatively, and a large one in working out exactly how it would all be achieved, and then making sure everybody understood everything. With a project like this there are so many moving parts that decisions and trade offs have to be made constantly as it progresses, and any specification goes out of the window in favour of doing something amazing in the time available.
I strongly encourage you to have a play with the project itself; BBH are hosting an archive version here: http://urbantour.bartleboglehegarty.com/urban-tour/. After that, come back to watch BBH’s case study below, and then read a bit more about what was involved.
This huge project has a Flash-based interactive film at its core with baked-in e-commerce support and a fallback HTML5 version that works on iPads. In addition, it brings together CMS-driven blog-style content featuring films shot around the world, with a custom rich transition sequence that puts each page into a global context.
The hero film itself was a huge challenge: a “one-take” handheld piece with 5 dancers loosely choreographed, 15 breakout moments that had to match specific points in the film exactly and involved “frozen time” (basically people being very still, often supported, in challenging positions) — all shot in two days. The intro sequence involved finding and licensing NASA imagery of the Earth and laying it onto an interactive 3D model; shooting stills from a helicopter over London and then compositing all of that and stitching it into large crane shot that had to match the handheld footage.
Hi-res helicopter stills of London were comped together and zoomed into. This image is taken from the Stinkdigital portfolio page for this project.
Add to the pressures of the shoot and post process that the deadline from signoff was only 7 weeks, and it shouldn’t be a surprise to find out that the Stinkdigital team of around a dozen people worked 200 hours each in the final two weeks before launch. Those were dark days. We sadly had to drop many of the features we had spent a lot of time on, but it turned out pretty well in any case!
One of the behind-the-scenes pieces of work that we had to do was building a custom player for MPC to use in order to review the transitions between the main and the breakout films. Because the breakout films’ first frames had to match frames at specific points in the main film, we would scrub the timeline after a user’s click in order to transition them to their breakout. But the scrubbing would happen at variable speed (depending how far away from the transition point the user was at the time) and could happen forward or in reverse, which made MPC’s job very hard — and meant they needed a custom interactive player to try out their transition effects with.
Lil’ Buck, Zeus and Marcio taking a break between shots
Creating the e-commerce integration was itself a challenge; ASOS was launching their mobile application just after the campaign launch, and they were in the process of building the e-commerce API to support that. As a result we were often building against API features that weren’t yet in place or had unexpected bugs.
The e-commerce interface. This image is taken from the Stinkdigital portfolio page for this project.
As the hero interactive piece represented London in the site’s global navigation, transitioning to each of the other cities needed to be richer than a simple page load. We built a custom effect on top of a gaming tile engine to give the effect of looking downward at the globe and speeding very fast between cities. The transition between London and Berlin is quick, has a small amount of sea and then a fair bit of greenery along the way, while the transition between London and New York takes longer and is almost entirely over a seascape.
The backgrounds to the cities’ blog-style pages were initially built as custom, live Flash cityscapes including moving traffic and sounds – each specific to its city. Unfortunately we weren’t able to optimise this in the time available and the entire feature was dropped :(
The blog-style interface. This image is taken from the Stinkdigital portfolio page for this project.
Another feature that was dropped was the variable preloader; initially the zoom into the planet from space was going to take as long as the time required to preload the assets needed; a fast connection would see a quick zoom while a slower connection might take some time to drift into the planet.
Luckily, despite having to drop some parts of the project at the last minute, the talents of Lil’ Buck, Baby Bang, Looney, Zeus and Marcio, as well as Sebastian Strasser, Dom Goldman and everyone on the Stinkdigital team meant this still turned out to be a great project that everyone was very proud of.
It ended up winning 3 Cannes Lions (Gold for design, 2x Bronze for Cyber), a Webby and FWA Site of the Day.