De slimme, dynamische banner

De business maakt wekelijks tientallen promoties, campagnes en selecties aan op de websites van Audax. Denk aan kortingen, nieuwe releases of aanraders. 

Om de juiste aandacht voor deze artikelen en pagina's te creëren, maken ze gebruik van een traditionele vorm van online advertenties: banners. Voorheen waren dit statische banners die één voor één werden aangevraagd door de business. De vormgevers maakte dus ook iedere dag dezelfde soort banners. Dag in, dag uit. Vele uren werk, voor hetzelfde proces. Daar wilde ik verandering in brengen...

In deze case lees je hoe dynamische en geautomatiseerde banners het aanmaken van promoties in het CMS versnelde en zorgde voor een kostenbesparing.

Aanpak

Statische banners (oud)

1. Business maakt een promotie aan;
2. Koppelt producten aan een promotie met ISBN-nummers;
3. Verzamelt ISBN-nummers van die producten voor de vormgever, geeft aan welke bannersoort ze willen en wat de bijhorende tekst wordt;
4. Maakt een ticket aan met bovenstaande gegevens zodat het in de planning van de vormgevers komt;
5. Vormgever verzamelt en download allereerst de productafbeeldingen;
6. Vormgever plaatst de tekst en producten op de juiste positie in zijn Photoshop-template;
7. Exporteren vanuit Photoshop als platte .png;
8. Verkleinen via TinyPNG;
9. Via VPN uploaden naar onze server;
10. Wanneer de afbeelding klaarstaat (~15 minuten), wordt een link van de afbeelding doorgegeven aan business;
11. Business kopieert deze link en plaatst de afbeelding bij de juiste campagne;
12. De volgende dag staat de banner live op productie.

Dynamische banners (nieuw)

1. Business maakt een promotie aan;
2. Creëert binnen het CMS direct een banner aan de hand van eigen wensen en producten;
   
3. Koppelt banner aan promotie;
   
4. De volgende dag staat de banner live op productie.
   

Uitdenken

De statische banners bestonden altijd uit:

• 1 tot 4 producten;
• een handmatige productafbeelding;
• een achtergrondkleur;
• een achtergrondplaatje;
• een titel en subtitel;
• een prijs;
• en/of een badge.

Deze onderdelen werkte ik samen met de front-end developers stuk voor stuk uit als losse bouwstenen, voorzien van de wensen vanuit business. De back-end zorgde ervoor dat deze componenten configureerbaar werden in het CMS.

Hieronder enkele voorbeelden uit de uitgebreide specificaties die geschreven werden.

Het resultaat

Dynamisch en actueel

Snel inhaken met een banner op de actualiteit? Business hoeft niet meer te wachten op een afbeelding van een vormgever. Zelfgeschreven teksten worden rechtstreeks vanuit het CMS overgenomen in de banner.

Automatiseren

De statische banners moesten wekelijks per categorie vervangen worden op basis van de bestverkochte producten. Met de nieuwe, dynamische banner gebeurd dit automatisch. Ieder moment van de dag.

Kleurherkenning

Is de kleur geel dominant in de cover? Dan zou de banner zich daar op aanpassen. Het systeem beschikt over een tool die de cover kan matchen met de achtergrond.

Personaliseren

Kocht iemand laatst een sportboek bij ons? Diegene heeft ongetwijfeld meer interesse in een voetbalboek dan het laatste deel van De Zeven Zussen. Met de dynamische banners hebben wij de marketeers een extra tool gegeven om mee te werken.

Thematiseren

Kerst, Sinterklaas of Pasen? De vormgevers houden nog steeds de vrijheid om banners te thematiseren. Zo krijgen ze de mogelijkheid om een afbeelding voor en achter het boek te plaatsen. 

White label

Conclusie

Het aanvragen en maken van deze banners was een inefficiënte, tijdrovende klus. Dat is nu verleden tijd. Business maakt zelfstandig zijn promoties aan en er werden zodoende flinke kosten bespaard op de afdeling vormgeving

Met de nieuwe, slimme banner kan de business op een snellere manier alle kanten op. Een banner die zorgt voor minder handmatige wijzigingen, maar ook dynamisch en gepersonaliseerd gevuld kan worden. 

Opdrachtgever
BookSpot (voor overname Audax)

Rol
UI / UX designer

In samenwerking met
Front-end developers
Back-end developers

✌️

Wil je meer weten?