Een site over thuisbatterijen, waar wijzigingen binnen seconden live staan

Doel

Eerst uitleggen, dan een aanvraag

Weinig mensen weten precies hoe een thuisbatterij werkt. De site moest dat eenvoudig uitleggen en bezoekers daarna naar een aanvraag leiden. Het team wilde alle content zelf kunnen aanpassen, de site moest snel blijven bij veel bezoekers, en animaties mochten het verhaal ondersteunen.

Aanpak

Uitleg, dan pakketten, dan vragen

Een thuisbatterij is een grote aankoop. Niemand leest de hele site en beslist dan. Mensen vragen iets aan als de keuze duidelijk is.

Daarom heeft de site een vaste volgorde: eerst een korte uitleg, dan de pakketten, dan de veelgestelde vragen. Die vragen staan op de plek waar mensen meestal gaan twijfelen. De knop voor een aanvraag is overal zichtbaar.

Strategie

Losse secties in plaats van een vaste pagina

De homepage bestaat uit losse secties die het team zelf combineert. Ze kunnen teksten aanpassen, de volgorde van het verhaal omgooien en pakketten en vragen bijwerken zonder mij.

Pagina's worden vooraf gebouwd en alleen opnieuw gegenereerd als er iets verandert. Ze laden daardoor snel en niemand hoeft op een volledige build te wachten.

Contentblokken

Blokken kiezen, geen layouts ontwerpen

Elk blok in DatoCMS hoort bij één onderdeel van de site. Een redacteur kiest blokken en vult ze in, hoe het eruitziet ligt vast. Secties kun je verschuiven zonder dat er iets breekt, en een nieuwe pagina ziet er meteen uit als de rest.

Preview

Zien wat je publiceert

Met Next.js Draft Mode bekijken redacteuren ongepubliceerde content op de echte site, zoals een bezoeker hem straks ziet. Wat in de preview staat, gaat zo live.

Publiceren

Binnen seconden online

Publiceert iemand iets in DatoCMS, dan stuurt het CMS een webhook en ververst de site alleen de pagina's die veranderd zijn (On-Demand ISR). Er is geen volledige rebuild nodig. Een aangepast pakket of een nieuwe vraag staat dus binnen seconden live.

Animatie

GSAP voor de overgangen

Overgangen en kleine interacties zijn gemaakt met GSAP. Ik heb animatie zuinig ingezet: rustige reveals bij het scrollen en knoppen die direct reageren. Het grootste stuk is de scroll-animatie 'Dit is Watt, elke dag', die het huis volgt van de ochtend tot de nacht.

Resultaat

Het team publiceert zelf

Dit is Watt heeft een snelle site die het team zelf bijwerkt. Pakketten en vragen blijven actueel, en de weg naar een aanvraag is op elke pagina duidelijk.