De slimme banner — Michiel Wilman

Handmatige banners? Nee!

Wekelijks worden er tientallen banners voor promoties, campagnes en selecties aangemaakt op de websites van Audax. Denk aan kortingen, nieuwe releases of aanraders.

Het maken van deze banners was een inefficiënte, tijdrovende klus omdat ze via een heel proces aangevraagd moesten worden bij de vormgevers. Dat is nu verleden tijd. De winkelmedewerkers maken nu zelf banners naar eigen behoeften en wensen aan. Gevolg? Flinke kostenbesparing, hogere conversie en mooiere banners.

Wekelijks worden er tientallen banners voor promoties, campagnes en selecties aangemaakt op de websites van Audax. Denk aan kortingen, nieuwe releases of aanraders.

Het maken van deze banners was een inefficiënte, tijdrovende klus omdat ze via een heel proces aangevraagd moesten worden bij de vormgevers. Dat is nu verleden tijd. De winkelmedewerkers maken nu zelf banners naar eigen behoeften en wensen aan. Gevolg? Flinke kostenbesparing, hogere conversie en mooiere banners.

Wekelijks worden er tientallen banners voor promoties, campagnes en selecties aangemaakt op de websites van Audax. Denk aan kortingen, nieuwe releases of aanraders.

Het maken van deze banners was een inefficiënte, tijdrovende klus omdat ze via een heel proces aangevraagd moesten worden bij de vormgevers. Dat is nu verleden tijd. De winkelmedewerkers maken nu zelf banners naar eigen behoeften en wensen aan. Gevolg? Flinke kostenbesparing, hogere conversie en mooiere banners.

Wekelijks worden er tientallen banners voor promoties, campagnes en selecties aangemaakt op de websites van Audax. Denk aan kortingen, nieuwe releases of aanraders.

Het maken van deze banners was een inefficiënte, tijdrovende klus omdat ze via een heel proces aangevraagd moesten worden bij de vormgevers. Dat is nu verleden tijd. De winkelmedewerkers maken nu zelf banners naar eigen behoeften en wensen aan. Gevolg? Flinke kostenbesparing, hogere conversie en mooiere banners.

Aanpak

Er kwam in het verleden veel bij kijken om een promotie met banner op onze site te krijgen. Met het team bekeek ik welke stappen zij allemaal zetten om een banner aan te vragen, om vervolgens op papier een ideale situatie neer te zetten. Daar moesten we heen.

Er kwam in het verleden veel bij kijken om een promotie met banner op onze site te krijgen. We zetten met het team het proces op papier en kraste weg wat overbodig was. Zodoende kwamen we uit op een ideale situatie: daar moesten we heen.

Er kwam in het verleden veel bij kijken om een promotie met banner op onze site te krijgen. Met het team bekeek ik welke stappen zij allemaal zetten om een banner aan te vragen, om vervolgens op papier een ideale situatie neer te zetten. Daar moesten we heen.

Oude situatie

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

Gewenste situatie

Business maakt een promotie aan;
Koppelt producten aan promotie en stelt promotie in;
Koppelt banner aan promotie;
De volgende dag staat de banner live op productie.

Uitdenken

Omdat er dag in, dag uit vele banners gemaakt werden, was het mogelijk om patronen te herkennen en de banner te ontleden. Deze onderdelen werkte ik samen met de front-end developers stuk voor stuk uit als losse bouwstenen, voorzien van de wensen van de stakeholders. Samen met de back-end developers zorgden we er voor dat de banners eenvoudig configureerbaar zijn in het CMS.

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

Het component is volledig geïntegreerd in ons design systeem, waardoor deze voor alle labels op dezelfde manier werkt - in een ander jasje.

Opdrachtgever
Audax

Rol
UX/UI designer

In samenwerking met
Interne stakeholders
Graphic designers
Front-end developers
Back-end developers

✌️

Wil je meer weten?

→ Mijn werk

→ Over mij

→ Contact

Houten (Utrecht, NL)