Digital Campaign from Concept to Build

VIRGIN MEDIA BUSINESS

Space66

March 2016

Help create a campaign from defining the formats to building the master rich media ad, after designing and animating.

Tasks:

  • Creative Tech
  • Design
  • Animation
  • Interactivity
  • Logic
  • Responsive

The A Complete Digital Campaign

The digital campaign started taking shape when the client’s creative team shared some slides of the main TVC and a brief of how it would all make sense. From there, taking the liberty of suggesting the display ad suite, a set of rich media ads, standards and digital screens were concepted and storyboarded. While the production waited for final assets, the ad formats and features were defined and initial ux and build started.

Once the final assets came, the deadline was very tight, but the concepts were confirmed and most of the heavy background work done, it was time for animation.

Creating 150kb exciting animations with super high quality images and multiple layers turned out to be more difficult than predicted.

Expanding Multivideo Billboard

Taking in mind the nature of the campaign – promote an event – and the content, the idea of making interviews for extra content seemed natural – specially when tied up with the whole film. The concept was quickly adopted, and the video production agency was briefed to create special edits for the banners.

Using video as intro seemed to be a great way to intro the ad, and then we created custom video edits in After Effects for the banner. It would then fade to a static end image, and then be added with more layers, creating a parallax effect – to fit better on the Design.

After the concepts were approved, some time was spent on Ux thinking, which enabled to get to a working template very quickly in build. The design had a lot of revisions, but the main interactive design was used throughout the campaign.

Animating all the layers and assets was a mission, but interesting was that by using CSS, some of the assets would animated automatically when the ad would expand smoothly.

When the ad expanded, it showcased a youtube player and the user could select which video to watch. This template was used in other three similar ads.

Interstitial Responsive Mobile Ads

This is a relatively new format in DoubleClick. It is an ad that would fill the screen of the user device. The idea was to show the main TVC on the ad and the messaging as well. For this the ad needed more or less 4 different designs – tablet and phones, landscape and portrait.

All needed to respond to rotation and different OS etc. Of course it was a bit too crammed for the iphone, so in this case, the video would go full screen, and on the end, the message would play.

A lot of configuration, and again, many layers, but it did look good.

Standard Ads

150kb with intro animation and very customised animation. Not a very easy challenge.

Tweenlite was soon discarded – but happily replaced by nanotween. With the easy access to Blur filters and translates, it would be the best option anyway.

The intro animation had so many layers and had a parallax effect. The copy animation needed a lot of impact, so not such an easy task to try in code. The whole master mpu was first approved as an animation made in After Effects.

The problem was to recreate that in HTML5 – minding file-size and file-count optimisation.
A lot of spritesheets, super scaled assets as clouds, and many old Flash tricks. The result is really good taking in consideration the image compression.