Making of Building Blocks: hoe Zonneplan in 3 dagen 140 landingspagina's heeft gepubliceerd met een zelfgemaakte tool

Eén laadpaal. Honderden uitdagingen.

Met de introductie van de laadpaal stond de marketingafdeling van Zonneplan voor een uitdaging. Ze moesten ongeveer 140 landingspagina's creëren om de combinatie van de laadpaal, het automerk en het automodel goed vindbaar te maken voor de doelgroep. Daarnaast moesten de pagina's geoptimaliseerd kunnen worden voor SEO- en SEA-doeleinden. Met bijna 100 verschillende automodellen en specificaties was het een complexe taak. Het handmatig aanpakken van dit project zou een risico vormen, omdat het gemakkelijk zou kunnen leiden tot inconsistente en verouderde landingspagina's. Daarom was er behoefte aan een strategische en praktische aanpak.

In deze blog delen Robbert, Marketing Strateeg bij Zonneplan, en Martijn, Developer bij Zonneplan, hun ervaringen en inzichten over hoe ze deze uitdaging hebben aangepakt. Ze vertellen over de ontwikkeling van "Building Blocks" en hoe dit heeft bijgedragen aan het vereenvoudigen van het proces en het behouden van consistentie en actualiteit in de landingspagina's.

Strategische en praktische aanpak

Het ontwikkelen en onderhouden van vele landingspagina's brengt het risico met zich mee dat ze niet altijd correct en consistent worden opgemaakt. Daarnaast was er een doorlooptijd van gemiddeld een maand nodig voor Development om op maat gemaakte oplossingen te ontwikkelen voor individuele pagina's. Hiervoor moest een oplossing komen. Dit vraagstuk was het startpunt van Marketing Strateeg Robbert. Zijn doel was duidelijk: het eindproduct van dit project moest schaalbaar, efficiënt en consistent zijn, zonder dat de creatieve vrijheid van de marketingafdeling hieronder lijdt. Het moest van waarde zijn in de online marketingstrategie van de laadpalen, maar ook een oplossing bieden voor nieuwe websiteprojecten. Een uitgeschreven projectvoorstel en een refinementsessie later resulteerde in een concept dat boven Robberts verwachtingen was.

Samen met Martijn en onze Head of Development hebben we gekeken hoe we dit een stap verder konden brengen en uiteindelijk is het product nog veel beter geworden. - Robbert

Na diverse brainstormsessies over de gewenste pagina-indeling is het idee van Building Blocks ontstaan. Een belangrijk voorbeeld van hoe dit proces heeft geleid tot de ontwikkeling van deze blokkenstructuur is te vinden in de eerdere ervaring met 'steden-pagina's'. Hierbij moest ook op grote schaal landingspagina's opgemaakt worden op basis van gemeentes in Nederland. De developers en marketeers hadden toen aparte landingspagina's gemaakt voor elke stad, waarbij ze een standaardpagina hanteerde met de mogelijkheid om per stad specifieke inhoud toe te voegen. Hoewel deze aanpak aanvankelijk goed werkte, kwamen ze erachter dat ze beperkt werden door het vaste stramien van de pagina's. Daarom hebben ze gekozen voor een flexibele blokkenstructuur die hen meer vrijheid geeft bij het creëren en beheren van pagina's. En op dit idee is de projectgroep verder gaan bouwen.

Ontwikkeling van Building Blocks

Er is een lijst opgesteld van ongeveer 20 blokken die de marketingafdeling graag wilde gebruiken. Om deze blokken te definiëren en hun doel te bepalen, hebben de developers en marketeers hun visie vertaald naar concrete ontwerpelementen. Deze vertaling was belangrijk om de gewenste pagina-indeling te krijgen. Door samenwerking tussen beide teams hebben ze een blokkenstructuur gecreëerd die flexibiliteit en consistentie biedt. Met deze structuur kunnen ze pagina's opbouwen met verschillende blokken, elk met hun eigen functie en inhoud.

Damian, vormgever bij Zonneplan, heeft elk blok ontworpen en Martijn heeft deze vervolgens in diverse varianten gerealiseerd. “Stel je bijvoorbeeld eens voor dat je een videoblok wilt toevoegen aan je pagina. Dankzij de veelzijdigheid van ons systeem kun je specifieke configuraties instellen, terwijl het blok altijd de kenmerkende uitstraling behoudt die Damian heeft bedacht, zij het binnen een specifieke variant”, aldus de ontwikkelaar.

Uitdagingen tijdens het project

Nadat de vormgever bij het project betrokken raakte, kwam al snel naar voren wat bij elk multidisciplinair team speelt, namelijk het behartigen van ieders belang en goede communicatie. "Natuurlijk was er aan het begin soms wat strijd, omdat Damian al bezig was met pixel-perfectie en Development het meer universeel wilde aanpakken”. De Software Ontwikkelaar wilde dit corrigeren en kwam tot de conclusie dat de vormgever in een bepaald stramien moest werken, zodat componenten consistent hergebruikt konden worden. Vaste afspraken over lettergrootte, afmetingen en marges leidden tot een consistentere en schaalbare aanpak.

Ook wilde Martijn voorkomen dat er voor ieder nieuw ontwerp een nieuw blok aangemaakt moest worden. "De kunst hiervan is om ervoor te zorgen dat elk blok zo universeel mogelijk is, zodat je niet drie soorten tekstblokken hoeft te maken", aldus de ontwikkelaar. Dit resulteerde in een eigen design-systeem, waarin alles in lijn is met de afgesproken stijlregels. Het mooie aan deze samenwerking is dan ook dat de marketingafdeling meer begrip toonde voor de belangen van Development en vice versa. "Hierdoor heeft iedere betrokkene ook ontdekt wat de ander nou belangrijk vindt." Deze ontwikkeling heeft het project enorm geholpen. Overleg met de vormgever was altijd belangrijk om te zorgen dat de beschikbare varianten voldoen aan de verwachtingen voor een bepaald blok. Nieuwe blokken voor pagina's werden ook gezamenlijk besproken.

Ik denk dat iedereen steeds beter van elkaar ontdekt wat iemand belangrijk vindt - Martijn

Koppeling met een EV-database

Het uitwerken van de tickets voor nieuwe functionaliteiten ging niet over één nacht ijs. De informatie van iedere pagina moest worden afgestemd op een specifiek automerk of -model. Om ervoor te zorgen dat alle informatie klopt, is er gebruikgemaakt van een koppeling met een EV-database. Deze database bevat gegevens zoals laadsnelheid, laadtijd en het maximale laadvermogen van verschillende elektrische auto's. Deze data wordt gebruikt voor overkoepelende pagina's van automerken zoals Tesla, maar ook voor model-specifieke pagina’s, zoals die van de Tesla Model 3. Het systeem kan bijvoorbeeld gemiddeldes berekenen van verschillende waarden om een algemeen technisch beeld te schetsen van een automerk. Een concreet voorbeeld hiervan is dat een websitebezoeker op een merkpagina het gemiddelde aantal zonnepanelen kan zien dat nodig is om een elektrische auto van dat merk op te laden.

Toepassing van shortcodes

Voor de koppeling is een aangepaste kopie van de EV-database gemaakt, die gebruikt kan worden voor meerdere applicaties. Het systeem haalt de informatie op die nodig is door verbinding te maken met deze database. Ontwikkelaars of marketeers kunnen bijvoorbeeld een lijst met automodellen opvragen en deze op de website weergeven. Door een specifieke auto te selecteren, worden alle bijbehorende gegevens van die auto opgehaald en getoond. Om de informatie van de EV-database in de pagina's te integreren, worden shortcode placeholders in de tekst gebruikt. Hierdoor kan de informatie op de pagina's gemakkelijk worden bijgewerkt, omdat eventuele wijzigingen automatisch worden doorgevoerd zonder dat elke pagina handmatig moet worden aangepast.

Duur van het project

Los van de koppeling van de EV-database heeft het project ongeveer 1,5 sprint gekost (3 weken), waarbij uiteindelijk een tweede ontwikkelaar is ingeschakeld om Martijn te ondersteunen. In de aanloop naar de ontwikkelingsperiode heeft het marketingteam veel voorbereidingen getroffen. Zo heeft het team een half jaar eerder de teksten geschreven. Toen alles bij elkaar kwam, kostte het 3 dagen om alle 140 landingspagina's live te zetten. Het gebruik van shortcodes heeft het project aanzienlijk geholpen en toont ook op de lange termijn zijn waarde. In de energiesector zijn er veel dynamische waarden, zoals wisselende stroomprijzen. Aan het begin van elke nieuwe maand worden automatisch nieuwe prijzen geïmplementeerd. Hierdoor blijft de informatie op de website altijd actueel, zonder dat er enige inspanning nodig is. Deze functionaliteit is zeer praktisch omdat het aanzienlijk werk bespaart.

Resultaten

Na de livegang van de nieuwe landingspagina's zijn de volgende resultaten binnen een week behaald

• Van de 250+ zoekwoorden hebben er in de eerste week er 20 een toppositie in Google behaald*.
• 17 zoekwoorden hebben zelfs een top 3 positie in Google behaald.
• 254 zoekwoorden zijn geïndexeerd.
• Er is een toename van leads onder de gebenchmarkte cost-per-lead.

*Inmiddels is dit aantal gegroeid. Zo hebben 160 zoekwoorden top 10 posities behaald, waarvan 46 in de top 3

Continue optimalisatie

Maar daar blijft het niet bij. Robbert geeft aan dat de SEO-specialist voortdurend de ontwikkeling van de posities in Google volgt. Ook houden ze de markt in de gaten, bijvoorbeeld de ontwikkelingen bij concurrenten en nieuwe automerken en -modellen, zodat er op de juiste momenten relevante content wordt geschreven en nieuwe pagina's live worden gezet. Martijn richt zich meer op de prestatie-indicatoren, zoals de snelheid van de website en de core web vitals van Google, en probeert deze te vergelijken met concurrenten om een voorsprong te behalen. Op deze manier blijven ze bezig met het optimaliseren voor zoekmachines, waarbij ook wordt gekeken naar nieuwe mogelijkheden zoals snippets en AI-oplossingen.

De ontwikkeling van Building Blocks heeft een schaalbaar designsysteem opgeleverd waar marketeers en ontwikkelaars mee kunnen werken, zonder in te leveren op consistentie en efficiëntie. Dit heeft geleid tot ongeveer 140 verschillende landingspagina's voor de laadpalen van Zonneplan. Maar ook op de lange termijn bieden de Building Blocks waarde voor de organisatie. Zo kunnen de blokken ook worden toegepast op andere webpagina's, zoals blogberichten of pagina's waarbij de inhoud altijd up-to-date moet worden gehouden. De kansen voor Building Blocks zijn oneindig. Door een centrale benadering en een multidisciplinaire aanpak hebben de Building Blocks van een ingewikkeld proces iets simpels en praktisch gemaakt. Ze zijn daarmee in lijn met de kernwaarden van Zonneplan: Eenvoudig en Vernieuwend.

Er is nu geen excuus meer om iets niet te doen. Dan ligt het echt aan onszelf. - Robbert

Wil jij ook impact maken?

Wil jij, net als Martijn en Robbert, met jouw digitale expertise toegankelijke oplossingen ontwikkelen die het energieverbruik van consumenten positief beïnvloeden en bijdragen aan een duurzame toekomst? Bekijk dan nu onze vacatures op het gebied van Development en Marketing.