Project: ASOS Urban Tour

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 experience

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.

Helicopter shot of London.

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, Baby Bang, Looney, Zeus and Marcio taking a break from holding very still in awkward poses

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

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.

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.

Projects: online shooting, truck tracking and responsive experiences

I once built a site that let real people on the internet fire a real machine gun in real time. For real.

It was live for two days and during that time we were running 102 servers, with a total of 6 environments and crazy security between them, as well as on site, of course. We had live video being streamed from 4 satellite dishes in the Nevada desert, we used peer-to-peer video streaming for the users in control (for a lower latency experience), and we had a social- and socket-powered dynamic queuing system that let visitors see stats like how many rounds had been fired, in real time.

A dummy rifle representing the SAW M249 in the hydraulic, software controlled aiming mount we had custom built.

A dummy rifle representing the SAW M249 in the hydraulic, software controlled aiming mount we had custom built.

We built this all in 6 weeks, which is why there were a few bugs in the system and why myself and another developer spent 48 hours in a caravan in Nevada without any sleep; and why despite that quite a few people had a less than optimal experience. And why I’m not going to mention who the job was for or what it was about, in case I’m not supposed to. But it did happen, and if you Google the right words you’ll find references to it.

I was CT and tech lead, I did most of the sysadmin and about half of the back end coding, as well as coordinating everyone on the tech side and running the technical client communications, which on this job were massive. Ask me about it in private and I’ll tell you the story.

I’m proud of what we managed to do :)

The funnest thing about this Skittles job was that we had to build a Facebook app with lots of interesting functionality (including live tracking a real truck delivering some sweets to the UK, by giving the driver a mobile phone we’d set up with tracking software on it) — but make the whole thing look like native Facebook functionality.

Lastly for this post, I love what we did with the brief for Dick’s Sporting Goods. They wanted an interactive film with a scavenger hunt feel, but couldn’t afford to shoot film in real snow. And they wanted it to work on everything. So we convinced them to do it as a glorified, stylised slideshow.

I’m really happy with what it turned out to be; a really responsive rich media experience that works well on all modern devices. It’s got 360 pannable images that fly through to tell a story and let you hunt for the clothes to dress the cute teens in so they can hit the slopes in time. FWA gave this both Site of the Day and Mobile Site of the Day.

Take a look: http://winterready.archive.stinkdigital.com/

A product detail view on an iPhone. The whole rich experience worked across devices in a real responsive way

A product detail view on an iPhone. The whole rich experience worked across devices in a real responsive way. This image is from the Stinkdigital portfolio page for the project.

Projects: Nike, Diesel and Lexus

While at Stinkdigital I worked on a lot of interactive films. Some had great directors, while some were a bit less polished — but the three here are all special for one reason or another.

My Time Is Now was Nike’s enormous ad campaign around the time of the UEFA Euro ’12. Concepted by Weiden+Kennedy, it’s by far the biggest job I’ve ever been involved in. An incredible film budget with some serious techniques in play was matched by a hugely ambitious digital build, including a playable Sonic level made in JS, as well as many other interactive pieces and linear films all seamlessly joined to the master timeline.

Nike My Time Is Now

Nike My Time Is Now. This image is taken from the Stinkdigital website.

I was Creative Technologist for this job and helped figure out how some of it would work, including an editable breakout that would be customisable for each territory – and yet fit seamlessly into the film…

It originally played in YouTube; here’s an archived version to take a look at: http://nikemytimeisnow.archive.stinkdigital.com/

Although I’ve written a post about another Diesel job I worked on with Stinkdigital, the AW11 campaign is really worth a mention. As CT on this job, it was a joy and a challenge to be told that we needed to come up with a concept that would let us make an interactive piece without shooting any extra models or garments — all the approved shots were already in the bag.

We came up with this idea for Santo, and Nieto and his team in Paris really knocked it out of the park. Check it out: http://diesel-island-fw11.archive.stinkdigital.com/

The Diesel FW11 tabletop set

The Diesel FW11 tabletop set

Last (for now) but not least, I want to mention Lexus Dark Ride, that we made for Skinny in NYC. This shoot was over 5 nights in LA and I ended up staying there for a month in order to work with the post company on a technique for treating the film, so that we’d be able to let users pan around without the distortions looking too crazy.

In the end there’s almost a 180° field of view thanks to a 6mm lens (shooting almost entirely without special lights, in the dark). The car wasn’t yet in production and we had to make do with a lighting reference car for the exterior shots, and the interiors were shot in the actual reference model used to tool up the factories — it was super well protected, but that didn’t stop the steering wheel coming off in an action shot!

Most interesting from a digital perspective though, as well as your Facebook profile appearing in the film you actually get to say some lines. If you go through the whole introductory experience you are asked some ‘psychometric’ test questions, and we surreptitiously record the answers and use them as lines in the dialogue later. It’s a very weird feeling hearing yourself say a line you weren’t expecting!

You can see for yourself here: http://darkride.archive.stinkdigital.com/

An interactive moment

An interactive moment. Image from the Stinkdigital portfolio page.

The same moment, with all the footage users could pan to see.

The same moment, with all the footage users could pan around to see. Image from the Stinkdigital project page.

08 (2)

Project(s): Wrangler Jeans

Wrangler EU approached Stinkdigital to work on their digital marketing soon after doing their breakout piece with Kokokaka in 2010— that amazing simple project that everyone was playing with. We were excited.

Over the course of the next 2½ years we built 6 or 7 experiences for them as well as rebuilding their main european portal (not the one that’s live now). My contribution to these projects was mainly on the management and planning levels; I was often the main point of contact and served as Executive Producer in a kind of Accounts role as well as being Creative Technologist on the projects, and the technical contact for their IT systems people.

Worn Across America. That's the producer's truck.

Worn Across America. That’s the film producer’s truck. This image is taken from the Stinkdigital portfolio page for this project.

As well as representing my first work-related travel and being responsible for my first trips to the states, these projects were always a lot of fun. With no creative brief to work to, and the main client concern being to make something accessible and playful, we were really given free rein (or enough rope, depending how you look at it!).

One of my favourite ever projects came out of this relationship: Get Your Edge Back is worth a play and I think stands up well. There are a couple of easter eggs in there as well; if you drag the boy on the pier the wrong way he flies into the water (see if you can spot the other one).

BlueBell SS11 Split Screen. Weird but lovely.

BlueBell SS11 Split Screen. Weird but lovely. This image is taken from the Stinkdigital portfolio page for this project.

It also allowed us to create the most experimental work I think I’ve been involved with, the BlueBell SS11 made in USA project. This was crazy ambitious from both a film and a digital perspective; creating film that would work with one half of the screen playing backwards and one forwards, that would match up at significant moments and tell something of a story, and that the user could try to “open” but that would resist — all of that would have been tough even if we hadn’t been working with first time film directors.

I’m not exaggerating to when I say that I was the only person keeping everyone’s understanding of that project in the same place, but having a prototype to drop early rushes and camera tests into on set was also invaluable…

Mark Your Territory AW11

Mark Your Territory AW11. This image is taken from the Stinkdigital portfolio page for this project.

03 (1)

Project: Diesel A Hundred Lovers

One of the projects I most enjoy showing to people is this campaign / season catalogue / music video that Stinkdigital built for Anomaly London, and are still hosting an archive version of here: http://diesel-hundredlovers.archive.stinkdigital.com/

I was Creative Technologist on this job, which involved a lot of figuring out how the interface would work (let people easily stop the film to see each frame, but stop it feeling too interruptive) and also, interestingly, working out how to get all that tagging data into a film made of so many jump cuts.


The artist whose song the piece was set to is highlighted. This image is taken from the Stinkdigital portfolio page for this project.

In the end we had to build a second application for internal use only. We hired about a dozen interns and runners to sit for 2 weeks with our app and go through the film frame by frame, making sure each item of clothing and each person was tagged in the right place on each frame.

A still from the piece

The whole catalogue was shown in this campaign, due to a clever technique devised by Anomaly.

Rather them than me — but what a great end result…

Project: Cadbury Nibbles

Hyper approached Stinkdigital in 2009 with an amazing concept for a giveaway for Cadbury Nibbles: create a digital-only pop up shop that appeared in ad space on fashion blogs and allowed lucky users to speak one on one with “Cadbury’s girls” who would give them a limited edition scarf.

This was a very technically challenging project; live one-to-one video connections with users, a queueing system all had to appear on a specific blog and no other, then a few minutes later move to a new virtual location. All the locations that weren’t ‘open’ had to show video that appeared live (of the outside of a shop) but was in fact pre-recorded and stitched together from very little content, to save costs.

I did most of the coding on the back end of this project myself, and there was a lot of debugging and fixing going on while sitting on the floor of the location (a real popup shop in Carnaby St, London) during the live event!

08 (1)

Project: Philips Carousel

At the start of 2009 Philips launched a campaign to promote their 21:9 format TVs, with TribalDDB Amsterdam doing the creative as the agency, and Stinkdigital the film and digital production.

Although I was only peripherally involved, this project has a special place in my heart. Stinkdigital was my first job in advertising, and this was Stinkdigital’s first job for an external client. And it ended up winning Grand Prix at the Cannes Lions, adland’s most prestigious award.

Although my title at the time (and all through my employment with Stinkdigital) was Creative Technologist, most of the work I did then was back end coding, which this project didn’t need. I took part in discussions about interaction paradigms (how do you represent that you’re travelling through a moment out of time, but can elect to pause the main experience and jump into real time, that is also behind the scenes‽

Mostly though, I learned about how film works, and how advertising works. It launched the company in a big way, and it earned me my first trip to Cannes ;)

A lot has been written about it by a lot of people (it now features in various media studies courses and has been the inspiration for scenes in films), so I won’t go into it here. But it’s still worth watching – an amazing film by Adam Berg: http://labs.tribalddb.nl/Cinema219/