Terug naar werk

Mobile · Interaction Design · Front-end

Replace
Direct

Een redesign van de mobiele webshop. Steeds meer bezoekers, maar een achterblijvende conversie. Met een nieuwe skin over de bestaande shop kreeg ReplaceDirect rust, ruimte en een navigatie die wél meewerkt.

Rol
Interaction Design, Mockups & Front-end
Opdrachtgever
ReplaceDirect
Type
E-commerce (mobile web)
Focus
Conversie, rust & duidelijkheid
De vernieuwde mobiele webshop van ReplaceDirect in gebruik op een telefoon

De uitdaging

De mobiele website van ReplaceDirect trok steeds meer bezoekers, maar de conversie bleef daarbij achter. De oorzaak zat in de interface: verouderd, druk en moeilijk te doorgronden. Te veel kleuren, te veel componenten dicht op elkaar. Bezoekers raakten de weg kwijt nog voordat ze hun product hadden gevonden. In een webshop met meer dan een miljoen onderdelen is dat fataal: wie niet snel vindt, haakt af.

De opdracht was helder, maar de randvoorwaarde stevig: er mocht niets aan de onderliggende techniek veranderen. De oplossing moest een nieuwe skin worden: een laag die over de bestaande webshop heen gelegd kon worden en het geheel een frisse uitstraling en betere navigatie gaf, zonder de motor eronder aan te raken.

Het concept

Ik begon met een grondige analyse van de bestaande mobiele site. Waar lopen mensen vast? Welke stappen kosten te veel moeite? Vanuit die inzichten ontwikkelde ik een interaction design dat de complete flow door de webshop vastlegde, van zoeken en categoriseren tot de winkelwagen, en precies aanwees waar de winst te behalen viel.

De leidende gedachte: rust en ruimte. Waar de oude interface alles tegelijk wilde laten zien, koos ik voor een cleane, duidelijke opzet met lucht tussen de elementen. Minder kleur, meer hiërarchie. Zo kan de klant moeiteloos zijn weg vinden in plaats van te verdrinken in het aanbod.

Zoekresultaten en winkelwagen in het nieuwe ontwerp van ReplaceDirect Categorie- en menustructuur van de vernieuwde ReplaceDirect-webshop

Het proces

Vanuit het interaction design werkte ik een serie mockups uit: hoe zou de website eruit kunnen zien en, belangrijker nog, hoe zou hij moeten werken? Deze mockups vormden de taal om samen met de stakeholders het gesprek te voeren. Niet praten over abstracte verbeteringen, maar laten zien: schermen waar iedereen wat van kon vinden.

Stap voor stap kwam zo de nieuwe ervaring tot leven: een heldere zoekflow waarmee je via apparaat, merk en typenummer precies het juiste onderdeel vindt, overzichtelijke categoriepagina's, en een winkelwagen die geen vragen oproept.

Verschillende schermen van het ReplaceDirect-redesign in perspectief

Het resultaat

De goedgekeurde mockups vertaalde ik vervolgens naar werkende code (HTML, CSS en JavaScript) die direct geïmplementeerd werd in de bestaande webshop, gebouwd in ColdFusion. Het eindresultaat: een mobiele webshop die er fris uitziet, prettig navigeert en de bezoeker rustig naar de aankoop begeleidt.

Net zo belangrijk als de nieuwe look is de manier waarop het is opgebouwd. De code is zo opgezet dat er gemakkelijk op voortgebouwd kan worden, zodat ook andere delen van de website stap voor stap dezelfde upgrade kunnen krijgen. Het redesign is daarmee geen eindpunt, maar een fundament.

In e-commerce is UX nooit cosmetisch. Elk scherm raakt direct aan de vraag of iemand zijn aankoop afrondt, of afhaakt.
Sfeerbeeld van meerdere schermen uit het ReplaceDirect-redesign