Onze samenwerking met Weba is al bijna een decennium gaande – en in die tijd hebben we samen al heel wat samen gedaan – van webshops, tot advertenties, tracking, en zo kunnen we wel nog even doorgaan.
Kort gezegd? WEBA is een van onze meest trouwe partners. We hebben een samenwerking opgebouwd die draait om vertrouwen, geduld en gedeelde waarden.
Samen lanceerden we iets nieuws in juni: de Hyvä checkout. Een top-notch ervaring die we graag delen.
Backend uitdagingen bij de Hyvä Checkout van WEBA
De checkout van WEBA is nauw geïntegreerd met hun ERP-systeem. Dat betekent: automatische adresvalidatie voor leveringen, gepersonaliseerde levermethodes per adres, leverdata op maat, en meer. Bij elke stap in de checkout stroomt er informatie heen en weer tussen de webshop en het ERP-systeem, zodat alle details correct verzameld en duidelijk aan de klant getoond worden.
Die koppeling met het ERP was een stevige klus. Het vergde intensieve communicatie, ontwikkeling en heel wat testen aan weerszijden.
De Hyvä Checkout bouwen in combinatie met Magewire bracht ook zijn eigen uitdagingen met zich mee. We moesten een complexe maar intuïtieve gebruikerservaring neerzetten voor de eindklant, én tegelijk trouw blijven aan de ontwikkelprincipes en best practices van Hyvä en Magewire. De complexe flows dwongen ons uit onze comfortzone, en leidden zelfs tot rechtstreekse gesprekken met het Hyvä-team om samen tot de beste oplossingen te komen.
Beide technologieën zijn relatief jong, en tijdens onze ontwikkeling kwamen er nog grote updates uit. Toch zijn we trots dat we vroege adopters waren – en dat we deze technologieën nu volledig in de vingers hebben.
Onderzoek en implementatie van het design
Op basis van diepgaand onderzoek – waaronder inzichten van het Baymard Institute en andere toonaangevende experts in e-commerce UX – hebben we een reeks gerichte verbeteringen doorgevoerd die zowel de gebruiksvriendelijkheid als de bedrijfsdoelen ondersteunen. Hoe we dat aangepakt hebben? Door onder andere:
- De guest-checkout meer te benadrukken
- Duidelijkere stapindicatoren toe te voegen
- Tab-switchers te introduceren
- Een “address-first”-aanpak te hanteren
- FAQ-toegang rechtstreeks in de flow te voorzien
- De totale prijs beter zichtbaar te maken
- Compacte, uitklapbare productoverzichten te gebruiken
- Subtiele nudges richting afhaling in de winkel in te bouwen
- Levering per verdieping aan te bieden
- Facturatie- en leveringsgegevens duidelijk te scheiden
Gast-checkout als prioriteit
Eén van de eerste aanpassingen was het duidelijker in beeld brengen van de optie voor gast-checkout. Uit onderzoek blijkt dat veel klanten hier de voorkeur aan geven, dus wilden we deze keuze zo frictieloos mogelijk maken.
Vroeger kregen inloggen en gast-checkout evenveel visuele aandacht, waardoor gebruikers actief moesten zoeken naar de juiste optie.
We hebben dit opgelost door de gast-checkout visueel te benadrukken, zodat die sneller opvalt en intuïtiever aanvoelt.
Door deze flow te prioriteren, haalden we een belangrijke drempel weg én sloten we beter aan bij wat gebruikers verwachten.
Duidelijkere stapindicatoren (stepper states)
We hebben de checkout-stepper verfijnd zodat elke stap in het proces – huidig, voltooid en aankomend – duidelijk herkenbaar is.
In het vorige ontwerp werden iconen en kleuren hergebruikt, wat leidde tot verwarring over waar iemand zich precies bevond in het proces.
Nu is elke status visueel uniek, wat zorgt voor meer duidelijkheid en vertrouwen. Dat is cruciaal om afhakers te vermijden – een punt dat ook sterk naar voren komt in het Baymard-onderzoek naar checkout UX.
Tab-switchers voor leveringsopties
Om de complexiteit van meerdere leveringsmethodes te beheren, hebben we een tab-switcher geïntroduceerd. Dit is misschien geen alledaags element, maar wel een bijzonder krachtig: het laat gebruikers eenvoudig schakelen tussen levering en afhaling, zonder de interface te overladen met informatie.
Door complexe keuzes op te splitsen in tabs, volgen we het principe van progressieve onthulling: we tonen enkel wat relevant is op het juiste moment. Dat maakt de flow minder overweldigend en veel gebruiksvriendelijker.
Address-first aanpak
We kozen bewust voor een address-first aanpak: zo vroeg mogelijk in de checkout vragen we naar het leveringsadres.
Waarom? Omdat dit ons meteen toelaat om:
- leveringskosten en prijzen voor camionetteverhuur te berekenen,
- de afstand tot dichtstbijzijnde winkels te bepalen,
- en zelfs bij keuze voor afhaling nuttige info aan te reiken.
Door deze gegevens in een vroege fase te verzamelen, kunnen we ook volgende stappen automatisch invullen, wat tijd en moeite bespaart voor de gebruiker.
Bovendien ondersteunt deze aanpak slimme bedrijfslogica: het toont transparant de kosten van levering en bestelwagenverhuur, waardoor veel klanten uit zichzelf kiezen voor gratis afhaling in de winkel. Een oplossing die zowel kostenbesparend is voor de klant, als strategisch interessant voor WEBA.
In-flow toegang tot FAQ’s
We merkten dat gebruikers vaak vragen hebben over praktische zaken zoals het huren van een bestelwagen of openingsuren van winkels. Daarom hebben we directe FAQ-links ingebouwd in de checkout flow, precies op de momenten dat die info relevant is – en dat zonder de checkout te moeten verlaten.
In plaats van gebruikers het proces te laten onderbreken om antwoorden te zoeken, tonen we hulp via modale vensters – zonder de flow te verlaten.
Volgens UX-experts zoals Nielsen Norman Group en Baymard Institute is zulke in-context ondersteuning essentieel om focus te behouden en onzekerheid te verminderen bij complexe aankoopprocessen.
Duidelijkere weergave van de totaalprijs
We hebben de totaalprijs visueel versterkt door het bedrag groter en opvallender te maken.
In de vorige versie moesten gebruikers soms zoeken tussen kortingen en subtotale bedragen om te weten wat ze uiteindelijk gingen betalen.
Nu is het finale bedrag altijd duidelijk zichtbaar, wat bijdraagt aan vertrouwen en transparantie – twee sleutelfactoren in het vermijden van winkelwagen-verlatingen, zoals Baymard ook aantoont in hun onderzoek.
Compacte, uitklapbare productoverzichten
De productoverzicht-sectie werd herwerkt naar een compacte standaardweergave, met de mogelijkheid om details uit te klappen.
Zo houden we het scherm overzichtelijk en kunnen gebruikers hun bestelling in één oogopslag controleren – terwijl ze toch altijd de optie hebben om meer details te bekijken indien gewenst.
Volgens Baymard is zo’n uitklapbaar orderoverzicht ideaal om de scanbaarheid te verbeteren én het vertrouwen van gebruikers te verhogen tijdens het afrekenen.
Subtiele aanmoediging richting afhaling in de winkel
We moedigen gebruikers op een subtiele manier aan om te kiezen voor afhaling in de winkel – de meest rendabele en logistiek efficiënte optie voor WEBA.
Hoe doen we dat?
Door het te tonen als de standaard, kosteloze keuze, en tegelijk duidelijk te maken hoeveel goedkoper het is in vergelijking met levering.
Deze aanpak geeft gebruikers alle nodige informatie – inclusief een inschatting van de kosten voor bestelwagenverhuur – zodat ze doordachte keuzes kunnen maken die aansluiten bij hun eigen behoeften én bij de zakelijke doelstellingen van WEBA.
Levering per verdieping
Voor gebruikers die kiezen voor levering, introduceerden we een verdiepingskeuze. Ze kunnen nu aangeven op welke verdieping de levering moet gebeuren, met bijhorende kosten en voorwaarden die duidelijk toegelicht worden in een modaal venster.
Deze aparte interactie houdt de interface intuïtief en schaalbaar, zelfs wanneer de verzendopties complexer worden.
Duidelijk onderscheid tussen factuur- en leveringsadres
Tot slot verbeterden we het design van de facturatiegegevens, en zorgden we voor een heldere visuele scheiding tussen factuur- en leveringsadres wanneer die verschillen.
Hoe? Door elke sectie in een aparte kaart (card) te plaatsen.
Deze visuele groepering maakt het voor gebruikers eenvoudiger om gegevens te controleren en aan te passen, wat fouten vermindert en de leesbaarheid verhoogt – essentieel in een kritieke flow zoals checkout.
Tracking-updates na de implementatie van de Hyvä Checkout
Beslissingen nemen op basis van correcte gebruikersdata is een topprioriteit voor zowel WEBA als Baldwin. Een vernieuwde checkout-flow vroeg dan ook om een geüpdatete tracking set-up.
We zorgden ervoor dat alle instellingen aangepast én grondig getest werden, inclusief alle relevante e-commerce events. Op basis daarvan kunnen de marketingteams nu hun rapporten verfijnen en hun digitale campagnes bijsturen – met beter gericht adverteren en maximale ROAS als doel.
Ben je benieuwd naar wat de Hyvä Checkout voor jouw webshop kan betekenen? Let’s have a chat!
