Van bezoekersdata naar een eenvoudigere serviceaanvraag.
Klanten die een machine voor service wilden aanmelden, kregen vier verschillende routes voorgeschoteld. Met Hotjar zocht ik uit waar ze vastliepen. Daarna ontwierp ik een heldere aanvraag in drie stappen en bouwde ik die zelf live in het CMS.
Een servicepagina met vier categorieën, drie verschillende knoppen en één categorie zonder knop.
316 klikken en het scrollgedrag van 177 bezoekers geanalyseerd, daarna wireframes, concepten en de live bouw.
Eén route voor elke categorie, met vooraf duidelijk wat de klant kan verwachten.
VoorNa
Vier categorieën, vier verschillende routes.
IMBEMA verzorgt onderhoud, reparatie, kalibratie en keuring voor reinigingsapparatuur, meetapparatuur, sloten en slangen. Op de servicepagina kozen klanten hun categorie, maar elke kolom werkte net anders.
Drie categorieën hadden een eigen knoptekst, de vierde had alleen een belinstructie. Daaronder stond een groot ingesloten contactformulier voor “andere vragen”. De vraag was niet hoe het mooier kon, maar waarom bezoekers niet sneller bij hun aanvraag kwamen.
“Een redesign zonder data is een gok met een mooi jasje.”
Kijken naar gedrag, niet naar meningen.
Ik zette Hotjar-heatmaps in op de desktopversie van de pagina: waar klikken bezoekers, hoe ver scrollen ze, waar bewegen ze met de muis? De meting omvatte 177 bezoekers en 316 klikken.
- I-01De knoppen werkten, als ze er waren.Bijna de helft van alle klikken ging naar een aanmeldknop. Bezoekers wisten wat ze wilden; de pagina moest ze alleen niet in de weg zitten.
- I-02Bezoekers klikten op alles wat op een knop leek.Bijna een kwart van de klikken landde op productfoto's, koppen en tekst die niet klikbaar waren. Een teken dat de route niet duidelijk genoeg was.
- I-03Eén categorie viel buiten de boot.Slangen had geen knop, alleen “Bel ons op … of vul het contactformulier in”. Voor die klanten bestond de snelle route dus niet.
- I-04Het formulier onderaan werd nauwelijks gezien.Halverwege de pagina was een derde van de bezoekers al weg. Slechts een op de drie kwam tot het einde van het contactformulier.
Eén route, drie stappen.
In de wireframes legde ik de aanvraag vast als een flow van drie stappen. Het principe: de klant kiest eerst wat er aan de hand is, en krijgt pas dan de vragen die voor dat product relevant zijn.
Kies categorie
- Vier gelijke tegels in plaats van vier verschillende kolommen
- “Weet ik niet zeker”Ook wie twijfelt, heeft een route
Vul gegevens in
- Merk, type en serienummer, met een hulplink “Waar te vinden?”
- Normaal of spoedPrioriteit direct helder voor de planning
- Ophalen, opsturen of op locatie
Bevestigen
- Overzicht vóór verzenden
- Opslaan en later verderVoor wie het serienummer nog moet opzoeken
Als elke categorie dezelfde, duidelijke knop krijgt en de klant vooraf ziet welke stappen er komen, dan starten meer bezoekers een serviceaanvraag, omdat ze hun route niet meer hoeven te zoeken.
Daarna vertaalde ik de wireframes naar concepten in de IMBEMA-huisstijl. In de tweede versie kwam de nadruk meer op snelheid te liggen: “Start serviceaanvraag” en de belofte “Binnen een paar minuten geregeld”.
Live: een pagina die werkt zoals de klant denkt.
Het gekozen concept bouwde ik zelf live in CloudSuite CMS: van de kaarten en de stappenindicator tot de knoppen en de teksten. Zo kwam het ontwerp zonder vertaalslag op de website terecht.
| Voor | Na | |
|---|---|---|
| Knoppen | Drie verschillende teksten (“Machine”, “Apparaat”, “Slot aanmelden”) en bij Slangen geen knop | Vier keer dezelfde knop: “Service aanvragen” |
| Categorieën | Lange omschrijvingen in twee regels | Korte naam, met de producten erachter tussen haakjes |
| Verwachting | Geen idee wat er na de klik gebeurt | Drie stappen vooraf in beeld: kies, vul in, wij gaan aan de slag |
| Belofte | Lange introtekst over het serviceaanbod | “Binnen een paar minuten geregeld.” |
| Contactformulier | Groot ingesloten formulier onderaan, door een derde gezien | Verwijderd: elke route loopt via een categorie |
Ook bij de rest van de nieuwe website dacht ik mee, met advies over layout, kleur, typografie en voorstellen voor nieuwe widgets. Het uitgangspunt bleef hetzelfde: eerst begrijpen wat de bezoeker probeert te doen.
Wat ik meeneem
Klikken op dingen die niet klikbaar zijn, is het eerlijkste signaal dat een pagina geeft. Het laat zien wat bezoekers verwachten.
Wat ik anders zou doen
Een nameting inplannen vóór de livegang. De heatmaps lieten het probleem scherp zien; met dezelfde meting na livegang was het effect net zo hard aan te tonen geweest.
Zo'n aanpak voor jouw team?
Ik vertel je graag meer over deze case, en over wat ik voor jullie merk en website kan doen.