Introduction

In a bid to rejuvenate SPAR's aging display banner system for an upcoming sales campaign, I embarked on a project that required more than just a facelift—it needed a revolution. The client was eager to elevate their advertising game, moving beyond the constraints of traditional HTML display banners limited by a 150KB size cap. This journey of creative problem-solving, technical innovation, and visual storytelling left the client delighted and their campaigns more impactful than ever.

The Challenge: Breaking Free from Constraints

SPAR's existing display banners, built with basic HTML and CSS, faced significant limitations:

Animation Constraints: Restricted by CSS, animations were simplistic and lacked flair.

Quality Compromise: The 150KB size limit forced a trade-off between image quality and banner weight.

Speed vs. Creativity: While the old system was fast, it didn’t allow for the kind of creative expression that modern digital campaigns demand.

The task was clear: Create a system that combined high-quality visuals with the flexibility and speed necessary for frequent updates.

The Innovative Solution: Embracing Video Streaming

Step 1: Introducing Seenthis Video Streaming

To bypass the KB limitation, I pitched the idea of using Seenthis, a video streaming solution that allowed us to stream video content directly into display banners. The client eagerly agreed, opening the door to high-quality, animated banners that could finally match the campaign's ambition.

Step 2: Creating Stunning Visuals in After Effects

With the KB limit no longer an issue, I utilized Adobe After Effects to design and animate the banners. This included creating intricate animations across 12 different formats for both desktop and mobile, resulting in a suite of visually engaging banners that captivated audiences with dynamic content.

Step 3: Dynamic Text Integration with JSON

To address frequent updates for product details, I used JSON objects to store product headers, subheaders, and prices, dynamically linking them to the corresponding elements in the banners. This approach allowed for quick and consistent updates, significantly enhancing efficiency.

Step 4: Automating Image Updates with Photoshop

I streamlined image updates by creating Photoshop files tailored for various formats. By overwriting specific image files, all banners using that image format could be updated simultaneously, ensuring both speed and quality in our visual assets.

Pushing Boundaries: Adding 3D Animation

With the technical foundation in place, I pushed the creative envelope further by crafting a 3D coin animation using Blender. This added a layer of sophistication and grandeur to the campaign, showcasing the potential of modern digital advertising.

Results & Client Feedback

The new display banner system exceeded all expectations, delivering on:

High-Quality Visuals: The video streaming solution enabled detailed and engaging animations.

Efficient Updates: JSON integration and Photoshop automation significantly reduced the time required for weekly updates.

Creative Freedom: The lack of KB constraints enabled the use of 3D animations and more complex visuals.

The client was thrilled with the outcome, praising the seamless blend of innovation and practicality. The system has since become a staple for their regular campaigns, showcasing the lasting value of our work.