SPAR: one offer, twelve display formats

I worked on SPAR's digital display campaigns through my agency role. The challenge was to make room for richer animation while keeping frequent product updates practical.

The existing HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) banners had a 150KB file size limit. That left little room for detailed motion and product imagery.

How the DCO workflow worked

For the DCO (dynamic creative optimisation) workflow, I connected changing product information to reusable banner templates.

I kept headlines, subheadings and prices in JSON (JavaScript Object Notation) and linked those values to the corresponding elements in After Effects. A product update could then flow through the format versions.

For product images, I prepared Photoshop files for the different formats. Replacing the image file updated the versions that used it.

I designed and animated the banners in After Effects across 12 desktop and mobile formats. The product information and images could change while the underlying layouts and animation stayed consistent.

The original video below shows how the product data and images fed the banner formats.

Making room for animation

I proposed using SeenThis to stream the finished video inside display banners. That gave me room to create the motion in After Effects and deliver it through video streaming.

The 3D coin

I also modelled and animated a SPAR coin in Blender for the campaign. The original video below shows the model and animation.

For a weekly campaign, the process becomes a product data and image update, followed by rendering and checking the format versions.