Overzicht
Een webshop laten ontwerpen voor een kledingmerk begint bij de vraag wat iemand op dat moment probeert te doen: iets zoeken, iets vergelijken of afrekenen. 16.08 Streetwear groeide, de webshop liep achter. Versie 2.0 is een volledig herontwerp, van huisstijl tot checkout.
De uitdaging
De oude shop kwam uit een eerdere fase van het merk. De structuur was verouderd en een aantal functies deed niet meer wat het moest. Wie een specifiek item zocht, moest te veel klikken: categorieën liepen door elkaar, filters hielpen nauwelijks en afrekenen kostte meer stappen dan nodig. Voor een merk dat groeit is dat het verschil tussen een bestelling en iemand die afhaakt.
De aanpak
Ik ben begonnen met job stories. In plaats van een persona te beschrijven leg je vast wat iemand in een bepaalde situatie voor elkaar wil krijgen, en waarom. Dat geeft elk scherm een duidelijke opdracht: wat moet hier lukken, en wat staat er in de weg. Vanuit die stories heb ik de navigatie, de categorieën en de filters opnieuw ingedeeld en het afrekenen teruggebracht tot de stappen die er echt toe doen.
Daarnaast heb ik de merkidentiteit uitgewerkt en vastgelegd in een huisstijlhandboek: logo, kleurgebruik, typografie, iconen, button states, invoervelden, web-elementen en illustraties. Dat handboek is opgezet met de developers in gedachten. Geen losse screenshots, wel een set die ze direct kunnen bouwen.
Tot slot heb ik micro-interacties ontworpen en in de shop verwerkt. Kleine dingen: een knop die reageert, een filter dat laat zien dat hij aanstaat, een overgang die vertelt waar je terechtkomt. Ze vallen niet op als ze goed zijn, wel als ze ontbreken.
Het resultaat
De shop is nu opgebouwd rond wat een bezoeker komt doen: zoeken, kiezen, afrekenen. Elk scherm heeft één taak en werkt op elk formaat. De developers bouwen uit één handboek, dus wat in het ontwerp staat komt ook zo live, en nieuwe pagina's passen er vanzelf bij.