THE DUBS

FSI Investment
Dynamic Ads

CREATIVE TECH
DESIGN
MOTION
CODE

CONCEPT • DESIGN • MOTION • CODE

The Dubs needed help in creating and managing a dynamic banner that would different sets of messages for 3 display ad formats – Billboard, DMPU and MPU.

From designing and animating the assets, building the HTML5 shell and also managing the dynamic content, we were able to offer a full support to a quite successful campaign.

Master Animations

It also consisted of two main custom animations, that were created with the assets provided. The Cityscape animation was done in After Effects and exported as a Gif, and this allowed it to have a great number of detail and style added to it.

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.

The Railway animation was done with the assets in code, first using CSS, then TweenLite. Once the client approved the animations, it was time to tackle the common issues of Dynamic Ads.

Usually, when using dynamic copy, you have to take in consideration that the design might not be as good changing the text only, so for that we added font-size options and more extra configurations, to make sure that if the client wanted to add or change the content, they would be able to do it themselves.

DYNAMIC HTML5

Setting the content and rules

In this case it was set up that the client could adjust the font-size and line-height, and with knowledge of line breaks, the layouts got much better.

The dynamic content also had a Reporting label, unique url and keywords. So you could access certain message with a keyword.

Coding the dynamic component

Most of the times, the complexity of changing the content of a dynamic ad requires a lot of effort. For this campaign we helped The Dubs craft 6 messages and they would ask us to prioritize one or other message.

The Master Dynamic Shell

The shell was done in a way that now serves as a template for new campaigns, where it is only needed some extra work on new animations etc.

The advertiser was quite happy with the results, and in the end selected the two better performing messages to run, and for that all that was needed was to make the rows Active:False.

Selected Works