A powerful machine that produces and serves customiseable banners on brand, within an hour.

A powerful machine that produces and serves customiseable banners on brand, within an hour.

Situation
Eurosport was looking for a way to serve a vast array of banner campaigns to advertise their online player in relation to various sporting events taking place in 5 different countries, over the course of a year. Each campaign had its own brand colours and associated logos, with a matrix of match times, locations, teams or players and terms and conditions.

Task
The work required a dynamic set-up with Google DoubleClick Studio and Google Sheets to control copy, images, frames and colours, as well as ad display dates and times, markets and languages. This set-up then needed to be hooked in to a template powerful enough to switch out hundreds of variables to serve the correct banner set to the correct market at the correct time.

Approach
Madnella formed part of a team that created the banner engine, setting up powerful, flexible Google Sheets that could take input from users in the team, and transform that input into the feed used by the template. Madnella was also involved in building the template JavaScript, HTML and CSS files to receive the feed and display the banners. The aim was to streamline the process as much as possible, while keeping input fields intuitive and ordered.

Result
The banner engine ran successfully for a number of campaigns, and was expanded numerous times to incorporate more requirements from client. The resulting banners were robust and simple, but packed a mountain of flexibility, coping with text input ranging from a few words to long sentences, automatically resizing text, changing layout to accommodate images, dropping or adding frames where necessary, all while adhering to the main brand, and remaining well designed.

More detail
client required different banner sets to be served on a daily/weekly basis for various sporting events, to up to six different markets, so that, for example, when Dortmund and Bayern play a match in the Bundesliga football league, a banner advert is served in Germany from 2 days before the match to half an hour into the match, with the details of that match in german, including the names, logos and relevant team images. At the same time, the banner machine that was created could also serve a banner advert for Serena Williams vs Jennifer Brady in the US Open Tennis championships, perhaps with fewer frames, depending on requirement, displaying a different colour scheme and relevant copy and images, in english in the UK, while using the same build template and information database.

The machine added further finesse by automatically scaling down copy to best fit in the area available, with minimum display size and a maximum character length implemented on the user input side, while maintaining visual hierarchy. The duotone overlay on images was created dynamically from colours selected by the user. The back-end system used was Google's DoubleClick Studio with Google Sheets integration. On the front-end is HTML5, JavaScript, Google Enabler, Greensock and CSS3.

Tunes playing in the studio

About the Senior Digital Designer

I am a Digital animator. I snowboard. I play drums when I'm not dreaming in Animation or lying on the grass staring at the sky. One day I will live by the sea and work from home, in a hot sub-tropical climate, in an area where rock-climbing and kite-surfing are close enough to do all the time. And I will braai at least once a week.