Een heldere structuur en een logische stapsgewijze route tijdens het afrekenen, naadloos vertaald naar de bestaande techniek van de webshop.

Een heldere structuur en een logische stapsgewijze route tijdens het afrekenen, naadloos vertaald naar de bestaande techniek van de webshop.
Allgifts werkte met een maatwerk e-commerceplatform op basis van PHP, JavaScript en Bootstrap. Door jarenlange doorontwikkeling waren de achterliggende code en de opbouw van de schermen steeds complexer geworden. Dat kwam vooral naar voren tijdens het afrekenen op de telefoon. De mobiele check-out was minder overzichtelijk dan de desktopversie, telde onnodige tussenstappen en miste eenheid in de bediening. De uitdaging was om dit proces rustiger en gebruiksvriendelijker te maken, zonder de bestaande werking van de webshop overhoop te halen.
Samen met het e-commerceteam heb ik de bestaande afrekenstraat geanalyseerd en via webanalytics in kaart gebracht waar bezoekers vastliepen of afhaakten. Vervolgens heb ik alle losse schermonderdelen geïnventariseerd en de nieuwe opbouw eerst getest in schetsen (wireframes) en klikbare prototypes. Vanuit die basis heb ik in Figma een nieuw ontwerp gemaakt met het mobiele scherm als uitgangspunt. Door vaste vormen te kiezen voor invulvelden, knoppen en navigatie ontstond er direct eenheid, klaar voor de bouw in de bestaande Bootstrap-omgeving.
Het resultaat is een vernieuwde mobiele check-out die klanten stap voor stap en zonder afleiding door hun bestelling leidt. Omdat ik naast het ontwerp (UX/UI) ook verantwoordelijk was voor de technische bouw (front-endimplementatie), kon ik slim omgaan met de beperkingen van de bestaande code. Mobiele bezoekers rekenen nu een stuk eenvoudiger af, terwijl er aan de voorkant een schone, herbruikbare basis staat voor toekomstige verbeteringen.