SPACE 66 LONDON

VIRGIN MEDIA
BUSINESS VOOM
COMPETITION

CREATIVE
DESIGN
MOTION
CODE

CONCEPT • DESIGN • MOTION • CODE

Space66 was working with the Brand department to create a campaign launching a Dragon's Den style competition, for the Business service of Virgin Media.

The campaign consisted of interactive ads, responsive interstitial ads, and standard banners, and Proper Banners was involved in creating digital concepts, designs and all assets.

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.

Understanding that the campaign needed some wow-factor, we created a short but effective animation that would attract potential customers - online and in public spaces.

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.

RICH MEDIA

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

Interactive Rich Media Display Ad

Preview Ad

Creative Tech

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.

Design

After the concepts were approved, some time was spent on UX thinking, which enabled us 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.

Animation

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.

Functionality

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.

RESPONSIVE

Responsive
Interstitial 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.

Responsive Ads

EYE-CATCHING

Standard
HTML5 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.

Animation for Standard Ads

Preview Ad

The Process

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.

Challenges and Solutions

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.

Selected Works