Behind the build with DPDK
Dutch digital evangelists team up with Peugeot to create a mind-blowing VR experience
Cars and dragons, where’s the connection? Inside the minds of the creative thinkers at Rotterdam-based agency DPDK. Still can’t see the connection? Catch the Dragon is a promotion for Peugeot’s new 208. Still can’t see the connection? What brings the concept together is the driver? He sports a dragon tattoo that comes to life. But why does the dragon tattoo come to life? The campaign was based around the idea of a combination of the imagery of the international Peugeot TV commercial – starring an orange dragon – and the footage of the 208 Virtual Testdrive that DPDK had shot previously. The TV commercial was filmed at night in a metropolitan area, whilst the VR footage was shot in broad daylight on a mountain road in the south of France: two very different settings.
Both the commercial and the 208 Virtual Testdrive revolve around driving a new 208 and experiencing its energy. In the commercial, it is that energy that translates to a dragon tattoo coming to life and flying out of the car.
How did DPDK hope to achieve this transition? They proposed to blend the Virtual Testdrive and the dragon into one interactive VR film in which the user sets out to capture the eponymous creature by using their own energy, looking around and then finally getting friendly with the dragon.
VR in a mobile web campaign instead of an app, a world’s first.
On paper the premise of the project worked, but it was undoubtedly a challenge to begin with. The first thoughts of DPDK’s CEO Pim van Helten and creative director Michael Vromans were “How the hell are we gonna pull this off?” But what made them think this? “This project was a part of a bigger picture – the introduction of the new Peugeot 208 on the Dutch market. This introduction consisted of three steps: the initial introduction on the RAI car expo to car enthusiasts, a nationwide broad media introduction and a follow-up activation for consumers who, after experiencing one or both previous outings, were considered by Peugeot as leafs interested in buying a new 208.”
Catch the Dragon was the digital campaign of the broad introduction. To reach a wide audience, Peugeot aired the international TV commercial, with the plot revolves around a driver with a dragon tattoo that comes to life once the driver puts his hands on the steering wheel. The orange dragon – as bright as the car itself – then starts flying around town. Not quite your average car commercial to say the least.
“On top of that, at the time we created the Virtual Testdrive for the RAI car expo, there was neither a storyboard nor footage for this commercial. So the footage we had had no connection whatsoever to an orange dragon. After those first thoughts, we just laid out the different elements that we had to use and started thinking of ways to blend them together into one coherent piece.”
DPDK weren’t jumping in at the deep end on the project though luckily, as a previous working relationship between Peugeot and the agency ensured that both companies could trust each other to deliver the perfect project. Van Helten and Vromans explain how they started off working on the Catch the Dragon campaign alongside the car manufacturer and the benefits of Peugeot being a part of DPDK’s work: “Peugeot and DPDK have worked together for over a year, and doing so quite successfully. The previous projects for Peugeot all generated many valuable leads for Peugeot and were award winners at the same time.”
“We strive to push the limits of what’s possible within mobile browsers so that anyone can immediately take part in the campaign. Peugeot knows this and trusts that we will continue doing so with every project.”
“For a successful partnership, trust is essential. From our end, a producer does the day-to-day communication with Peugeot to keep them updated or to ask and answer questions. Because of the short timeframe, (we have to produce a campaign like this in typically six to eight weeks from brief to live), we present the progression every week.”
“We start out with a mock-up of how it should look and behave in the end, and then we start building working prototypes. These are the focal points of all communication from that moment on. Through phone calls, emails, Basecamp messages and face-to-face meetings, we discuss technical status, design updates, usability issues and the choices we’ve made or need to make in the next week.”
“Client-side, our team consists of a project executive and several other disciplines including digital, CRM and brand managers. On our side, broad media introduction and a follow-up activation for consumers who, after experiencing one or both previous outings, were considered by Peugeot as leads interested in buying a we strive to push the limits of what’s possible within mobile browsers so that anyone can immediately take part [we had] a variety of designers responsible for UX, visual and motion design, creative developers, a production team and testers.”
Bringing cutting-edge technologies and visual duties together were never going to be a quick and simple process. In fact, there were four different disciplines called into action as van Helten and Vromans reveal: “We had four different disciplines within our team working on the graphical work: design, motion design, creative development and frontend.
“Whilst we start every day with the complete team (adding Interaction design, backend and production to the mix) looking at the complete concept and exchanging opinions on how to shape our idea, these disciplines focused on specific areas within the project.
“Our art director set the style for the logo, the 2D dragon and the campaign website. Our motion designer handled the 3D dragon, the terrain and the transitions between different sections so scenes would lead fluently into one another.
“One of our creative developers had the terrain and dragon come to life by adding textures, shading, lighting and camera settings in code. And frontend was in charge of setting the website around the interactive world including all of its’ animations. Every discipline played its role.”
The campaign landing page, VR experience and end page with call to action
“A great example is the transition from the introduction movie to the landing page with the intro’s last scene ending on the dragon in close-up. Our motion designer edited this to have the dragon ‘fall apart’ in thousands of low-poly elements. Our creative developer re-created the same low-poly elements, but in CSS. Halfway through the animation, script elements replaced the movie elements so that users could interact with a low-poly cloud. It took a lot of tweaking “The TV ad aired and featured a call to action at the end, urging people to visit catchthedragon.nl. The website launched hours before the first showing on TV, and immediately visitors started coming in. We had also designed multiple other digital media such as mailers and banner sets, generating hundreds of thousands of potential visitors. That’s a great advantage of course.
“To get a grip on the total design we had a huge wall filled with inspiration, and as the project progressed with the different scenes and styles, [it functioned] as a storyboard. This way we could all see where style issues would arise in the end product, giving us the possibility to tweak straight away.”
“In the end, the proof of the pudding is in the eating, so if our campaign ended up being dull, slow or simply non-functioning, visitors would have left within seconds and there would be no leads going to Peugeot. But that wasn’t the case. During our campaign, traffic towards the 208 online showroom more than doubled, and online 208 configurations more than tripled. Those are some really successful numbers, even compared to previous campaigns.
“Basically the largest part of Catch the Dragon is the frontend. For the website around the VR movie we wanted a really clean look in design so there was a lot of custom front-end work in creating the forms alone. And because it’s responsive of course, there are a lot of exceptions that need to be written along the way. In the end the team really pulled through. There was nothing on our list we didn’t do because of time issues.”
Different stages of the development process of the VR world
Bringing the project to life was a challenge in the beginning, but to then bring it to the masses was a different challenge altogether for DPDK. This was because it was no small-scale launch for Catch the Dragon, this was a large-scale launch that had to sync with different kinds of media as well as with devices. Van Helten and Vromans explain how they brought it all together for the medium of television in the end: “The biggest challenge of the whole project was having the digital campaign sync seamlessly with the TV commercial. It was also one of its biggest allies in building broad media presence.
“The TV ad aired and featured a call to action at the end, urging people to visit catchthedragon.nl. The website launched hours before the first showing on TV, and immediately visitors started coming in. We had also designed multiple other digital media such as mailers and banner sets, generating hundreds of thousands of potential visitors. That’s a great advantage of course.”
“In the end, the proof of the pudding is in the eating, so if our campaign ended up being dull, slow or simply non-functioning, visitors would have left within seconds and there would be no leads going to Peugeot. But that wasn’t the case. During our campaign, traffic towards the 208 online showroom more than doubled, and online 208 configurations more than tripled. Those are some really successful numbers, even compared to previous campaigns.”
“Funnily enough, a considerable amount of traffic came from awards sites such as awwwards.com. This in turn led to a lot of tweets from within the digital industry, leading to more international web hits.” From both disciplines before it looked like it does now. So it was truly a team effort where everybody challenged as well as motivated one another.”
CHASE THE DRAGON
With a buzz around VR technology and 360-degree video, how could DPDK utilize the technologies for a killer concept?
The idea for Catch the Dragon was based on the TV commercial, but van Helten and Vromans wanted the digital experience to be so much more. “We saw the dragon and wanted users to be able to interact with it. Since we had been working with 360-degree video and VR technology before and experienced its impact, we were keen on using [them] in Catch the Dragon. In legends, a dragon has always been this elusive, ‘now you see me, now you don’t’ creature. So the technology and idea were made for each other. The biggest challenge however was to make that hi-res dragon from the commercial fly on mobile browsers. We could have gone with an app and used the same hi-res images in the commercial, but that would mean users having to download a heavy app. For a campaign, that’s deadly – users have to be able to engage instantly.
Whether visiting on desktop or mobile, with or without VR, Catch the Dragon works seamlessly
“We started with sketching a key shot that included the dragon, car, logo and surroundings. We worked on that until it had the exact right look and feel, and from there we knew where we would be working towards in terms of landscape, light and design. As for the dragon, we worked with the original 3D files from the TV version, stripping it back until we had a version simple enough for mobile GPU to render and still look great. A cool detail is that the whole body of the dragon is seamless – repeated and scaled down in code over the whole length of its body.”
Stripping the dragon from the TV commercial and rebuilding it in WebGL
THE CHALLENGE OF 360º VIDEO
Building the backend is often fraught with issues. It was no different for DPDK, but a clever video solution ensured all devices would enjoy the dragon experience
Mobile browsers weren’t playing nicely for the project. Van Helten and Vromans reveal how one of the team’s developers came up with a smart solution. “Back-end development was charged with the most important task – saving people’s data and safely sending that through to Peugeot. As we had done that multiple times before, this wasn’t an issue for our developers. The biggest coding problem was probably the 360-degree video at the start of the experience. Since mobile browsers prompt a native video player, we had no possibility of showing video without users having to press play and close the player afterwards, let alone look around in 360 degrees. In-app we had sorted that out years ago, but online it was a complete different story. As often happens, in the end the challenge was overcome by tricking the system. Instead of going from a video player with the introduction footage into a WebGL world with the low-poly terrain, our developer came up with the idea of placing a customized 360-degree video player inside a WebGL world. This way browsers see video as code instead of video. When the video ends, it dissolves into the low-poly terrain. That dissolve is hidden in the white flash you see when driving through the mountain tunnel.
Seamless transition: from 360 video to the VR world
To achieve a seamless transition, the intro video was placed inside the VR/ WebGL world and then dissolved
“Another big challenge was for the dragon to ‘behave’ in a natural way. The path it follows, the size and movement of the limbs, flying speed and so on. Since it was one of the project’s main features, the focus had been on developing a working dragon from day one, and so we had it working pretty early in the project. But we kept working on it up until the last minute before we went live six weeks later. Seeing it ‘fly’ around the terrain was worth the effort.”
The final piece of the Catch the Dragon project after launch was to ensure that it was kept running smoothly. As Van Helten and Vromans reveal it wasn’t all plain sailing and show the virtues of aftercare. “I wouldn’t say we actually pass the project on at all. It goes live, and together with the client we see how it comes to life, tweaking where necessary.
“From the moment we went live with Catch the Dragon, we were looking at the analytics to find if people would get stuck or drop out at a certain point. We always do this because it enables us to make changes that better the flow through the site. Of course in campaigns like these we run tests during the stages of development but there’s nothing like the real thing. You have hundreds of users from all over the country with an array of devices all making the same decision on every screen – to stay or not.
“In the case of Catch the Dragon, we saw that people had difficulties actually catching the dragon, and thus not reaching the end screen. Talk about a buzz kill… Together with Peugeot we made some changes and soon saw people successfully reach the end. As the campaign progresses, we release the mailers, banner sets and possible updates.
“Peugeot has a great team taking care of campaign results and they will eventually announce the winner. Everybody that catches the dragon is in with a chance to win an exclusive all-in trip to the south of France where the 360-degree footage was shot. We take care of the winner, by arranging all travel details and bookings.
From that moment on, we’re already thinking about what we will be doing next.