Een nieuwe webshop is pas geslaagd als je klant in de betaalstap niets merkt
Kruidvat heeft de voorkant van zijn website vernieuwd en de bestaande SAP Commerce-backend laten staan. In een interview met Twinkle van 9 juli 2026 legt Ralf Peters, Head of Technology Online Business Benelux bij AS Watson Benelux, uit hoe dat ging. De oude site was als één monolithisch geheel gebouwd, en elke klik laadde een volledige pagina opnieuw. Nu draait er een losse, headless frontend op SAP Composable Storefront, technisch een single page application, bovenop dezelfde backend. Zo kon de drogisterij moderniseren zonder het hele systeemlandschap te vervangen. De oude site deed het niet slecht; het bezwaar was dat vernieuwingen vaak meer tijd en afstemming kostten dan gewenst. Daarom was het uitgangspunt dat klanten een grotendeels herkenbare winkel bleven zien, en dat wat de oude site in de loop der jaren beter had gemaakt, mee zou gaan.
Die houding verdient navolging, juist voor het deel van de site waar het interview niet over gaat: winkelmand, checkout en betaalstap. Een nieuwe frontend raakt elk scherm, maar nergens zie je het effect van een kleine verandering zo snel terug in de omzet als in de laatste stappen voor de order.
Wat een checkout beter maakt, staat zelden in een specificatie
Het grootste risico van een nieuwe frontend zit in wat je niet ziet. De verbeteringen die een checkout door de jaren heen sterker maken, zijn zelden grote nieuwe functies. Het gaat om de volgorde van de betaalmethoden, de bezorgoptie die standaard aanstaat, een foutmelding die zegt wat er mis is en hoe je het oplost, een postcodeveld dat de straat invult, een totaalbedrag dat al in de winkelmand klopt. Zulke details zijn ooit aangepast na een test of een klacht en daarna vanzelfsprekend geworden. Juist daardoor staan ze vaak nergens beschreven.
Een team dat een frontend opnieuw bouwt, neemt mee wat op papier staat. Maak daarom voor de bouw begint een inventaris van je huidige checkout zoals een shopper die doorloopt: elk veld, elke standaardwaarde, elke tekst en elk logo bij de betaalmethoden, elke foutmelding, en de volgorde waarin je klant dat allemaal te zien krijgt. Markeer welke onderdelen het resultaat zijn van een test of een gemeten verbetering. Die lijst is de lat waaraan de nieuwe checkout moet voldoen, niet het nieuwe ontwerp.
Een single page application vraagt om eigen tests in de betaalstap
Op een traditionele site is elke stap een nieuwe pagina. In een single page application blijft de shopper technisch op dezelfde pagina terwijl de inhoud wisselt. Voor de betaalstap heeft dat twee gevolgen die je apart moet controleren.
Het eerste is de terugkeer na de betaling. Bij een betaalmethode met een doorverwijzing, zoals een bankbetaling, verlaat je klant de webshop om de betaling goed te keuren en komt daarna terug. Op dat moment moet de site de juiste toestand herstellen: de bevestiging van precies deze order, niet een lege winkelmand of de homepage. Test dat op een telefoon, voor elke betaalmethode die zo werkt. Test ook de route waarin je klant de betaling afbreekt en terug wil naar de keuze van de betaalmethode, met de winkelmand nog intact.
Het tweede is meting. Peters noemt zelf dat een single page application andere kennis en werkwijzen vraagt, onder meer voor monitoring. Een stap in de checkout die op de oude site als aparte paginaweergave werd geteld, wordt in een single page application niet vanzelf op dezelfde manier geregistreerd. Wordt een stapovergang anders of helemaal niet gemeten, dan lijkt de uitval per stap na livegang te verschuiven terwijl de shopper niets anders doet, of valt een echte daling weg in de cijfers. Controleer voor de lancering dat elke stap in de checkout en elke betaalpoging in de nieuwe omgeving op dezelfde manier wordt vastgelegd als in de oude. Anders vergelijk je na livegang twee metingen die op een andere manier tot stand komen.
Vergelijk de checkout per stap, niet het gemiddelde van de site
Kruidvat testte de nieuwe site vooraf op gebruiksvriendelijkheid, functionaliteit, performance, toegankelijkheid en SEO. Daarnaast volgde het team doorlopend conversie, laadtijden, gebruikersgedrag en organisch verkeer, om vast te stellen dat de nieuwe omgeving minstens zo goed presteert als de oude. Dat is de juiste maatstaf. Een gemiddelde conversie over de hele site laat alleen niet zien waar het misgaat: een lichte winst op productpagina’s kan een verlies in de betaalstap verbergen.
Zet daarom voor de oude en de nieuwe omgeving de doorstroom per stap in de checkout naast elkaar, uitgesplitst naar apparaat en naar betaalmethode. Kijk naar het aandeel betaalpogingen dat een order wordt, naar het aandeel shoppers dat na een mislukte poging een andere methode kiest, en naar de tijd tussen winkelmand en bevestiging. Wijkt een enkele betaalmethode af terwijl de rest stabiel blijft, zoek de oorzaak dan eerst in de koppeling of in de terugkeer naar de site, en pas daarna bij de shopper.
De afstemming op de Kruidvat-app, die twee jaar eerder was vernieuwd, levert nog een les op. Kruidvat koos voor een ervaring die consistent is maar per kanaal kan verschillen. In de betaalstap betekent consistent: dezelfde namen en logo’s van betaalmethoden en dezelfde teksten over bezorging, retour en terugbetalen, in app en browser. Een shopper die een betaalmethode uit de app kent, moet die op de site zonder zoeken terugvinden.
Staat een nieuwe webshop of een nieuwe frontend op je planning, leg dan eerst de inventaris van je huidige checkout vast en spreek per stap af hoe je meet, nog voordat het eerste scherm wordt ontworpen. Wat niet op die lijst staat, merk je pas na de lancering, in de cijfers van de betaalstap.
Bron: twinklemagazine.nl
