04Stage

VanHelder

Een zakelijke energieleverancier met een offerteflow die gebruikers op de helft liet afhaken. Mijn stage: die flow begrijpen, verbeteren, en gebruikers verder helpen.

vanhelder.nl
Klant
VanHelder
Rol
Frontend Developer (stage)
Jaar
2022 – 2023
Duur
1 stagejaar
Het probleem

VanHelder leverde energie aan zakelijke klanten. Om een offerte aan te vragen moesten die klanten een meerstappig formulier doorlopen: bedrijfsgegevens invullen, verbruiksdata opgeven, en de offerte bevestigen. De flow was technisch aanwezig maar gebruiksonvriendelijk — onduidelijke stappen, gebrekkige validatie, en geen duidelijke indicatie van voortgang. Mijn taak: dat verbeteren.

Aanpak

De eerste stap was begrijpen waar het misging. Ik keek naar de bestaande flow vanuit het perspectief van een nieuwe gebruiker: welke stap was verwarrend, welke invoervelden misten context, en waar ontbrak feedback als je iets fout deed? Die analyse vormde de basis voor de verbeteringen.

De kern van de verbeteringen lag in drie dingen: een duidelijke stap-indicator zodat gebruikers altijd weten hoe ver ze zijn, inline validatie met begrijpelijke foutmeldingen in plaats van pas bij submit, en veldlabels en helpteksten die uitleggen waarom bepaalde informatie nodig is (zoals het KvK-nummer).

Werken binnen een bestaande codebase als stagiair leerde me hoe ik wijzigingen maak zonder de rest te breken: kleine, gerichte commits, goed communiceren wat ik aanpaste en waarom, en altijd testen op de scenario's die gebruikers daadwerkelijk doorlopen.

Proces
01
Flow-analyse
Bestaande wizard doorgelopen als nieuwe gebruiker. Knelpunten gedocumenteerd en prioriteit bepaald.
02
Stap-indicator & voortgang
Duidelijke visuele stap-indicator toegevoegd zodat gebruikers altijd weten waar ze zijn in het proces.
03
Inline validatie
Foutmeldingen direct bij het veld bij verlies van focus, met begrijpelijke tekst en context.
04
Gebruikerstest & iteratie
Verbeteringen getest met echte gebruikersscenario's en aangepast op basis van bevindingen.
Technische keuzes
📋
Multi-step form UX

Een meerstappig formulier vraagt om duidelijke voortgang, goede state management tussen stappen, en de mogelijkheid om terug te gaan zonder data te verliezen.

Next.jsReactForm State
Inline validatie

Foutmeldingen pas tonen bij submit is een veelgemaakte fout. Directe feedback bij elk veld verlaagt de frustratiedrempel en helpt gebruikers fouten vroeg te herstellen.

TypeScriptValidationUX
🔨
Werken in een bestaande codebase

Als stagiair leer je het meest van het werken in code die je niet zelf hebt geschreven — je leert lezen, begrijpen, en zorgvuldig wijzigen zonder de rest te breken.

Next.jsTypeScriptRefactoring
Resultaten
B2B
Type
Zakelijke energieleverancier
Form UX
Focus
Multi-step validatie & feedback
Iteratief
Aanpak
Gefaseerd verbeterd op basis van bevindingen

"Gebruikers die vastlopen op een formulier vertrekken stilletjes. Ze klagen niet — ze zijn er gewoon niet meer. De kunst is de wrijving wegnemen vóórdat het zover komt."

— Luuk van Dijk, over VanHelder

Een goed formulier is onzichtbaar —
je merkt het alleen als het fout gaat.

💡

Form UX is onderschat werk. Een goed formulier is onzichtbaar — je merkt het alleen als het fout gaat. De kunst is de wrijving wegnemen vóórdat de gebruiker gefrustreerd raakt.

🔍

In een bestaande codebase werken vraagt discipline: kleine commits, goede communicatie, en altijd de context begrijpen vóórdat je iets aanpast.

Gebruikersvalidatie hoeft niet complex te zijn om impact te maken — duidelijke foutmeldingen op het juiste moment zijn soms genoeg.

Volgend project
1 op 1Dieet