Het ontwerpen van een user-centered online boutique

Digital Design & WordPress Thema voor STAEL Boutique

Ben je benieuwd naar de laatste iteratie?

Klik hierrr voor de live versie van een User-Centered online boutique: STAEL Boutique!

Het ontwerp van de digitale boetiek van STAEL begon bij het zoeken naar de juiste plaatsing van content met het oog op sales. Hiervoor is gekeken wat haar naaste concurrenten nu deden en wat de best practices waren binnen het creëren van een online webshop.

Er is via verschillende bronnen uitgekomen tot een conclusie waaraan deze online boetiek aan zal moeten voldoen:

  • De customer journey van product tot afrekenen moet zo simpel mogelijk gemaakt worden. De bezoeker zal zo min mogelijk gestoord moeten worden bij het kopen van de artikelen.
  • De gebruikers willen naast alleen productfoto’s, ook graag voorbeelden zien hoe deze producten gedragen worden. Zo krijgen een beeld van de grootte of kleur van een product.
  • Door het toevoegen van een blog wordt de boetiek van meer waarde voor de gebruikers. Zo kunnen tips gedeeld worden, waar weer veel op gezocht wordt en dus nieuwe bezoekers krijgt op de website. En nieuwe bezoekers zijn potentiële klanten.

Uiteindelijk zijn er drie hoofdstukken hoe dit project is aangevlogen:

  • Hoe de doelgroep zich beweegt door de webshop (UX)
  • Het ontwerpen van de wireframes middels de inzichten (UI)
  • Het combineren van de User Interface en User Experience

Hoe de doelgroep zich beweegt door de webshop

Om te kijken hoe we de customer journey zo simpel mogelijk kunnen maken, is er allereerst gekeken hoe een bezoeker “instapt” in de verkoop-funnel door middel van een Hub & Spoke-model zoals hieronder te zien is. Deze bezoekers zijn weer opgedeeld in verschillende subdoelgroepen welke in een later proces weer getarget kunnen worden door middel van targeted advertising.

De customer journeys van de subdoelgroepen:

De Snuffelaar

De snuffelaar is een subdoelgroep welke niet naar een specifiek product aan het zoeken is, maar lekker door de boetiek heen snuffelt. Ze zoekt naar bijzondere producten die – als het ware – eruit springen, maar ook goedkope producten. Sorteerfuncties zijn voor haar belangrijk. Haar customer journey begint op de home om vervolgens door te klikken naar de verschillende collecties.

Doordat de snuffelaar graag verschillende soorten producten zonder verband wilt zien, is er voor gekozen om de producten in de boutique op willekeurige volgorde te tonen. Zo wordt elke ervaring een nieuwe ervaring.

Daarnaast is er een reeks van producten in de sale uitgelicht op de homepagina zodat de snuffelaar de laatste sale items kan vinden.

De producten in de boutique zelf laten zien hoe de producten gedragen worden door middel van draagmodellen. Deze foto’s worden weer getoond wanneer een bezoeker over een bepaald product heen hovert [overheen beweegt met de muis.], en zij dus al interesse heeft in het product. 

Customer Journey 0
Customer Journey 1

De Verzamelaar

De verzamelaar is iemand die zo veel mogelijk producten in haar winkelmand stopt, om vervolgens bepaalde producten eruit te halen die ze toch niet leuk vindt. Zo stopt ze bijvoorbeeld drie verschillende oorbellen in haar winkelmand, om zo bij het afrekenproces de leukste oorbel uit te kiezen. Een kijk-en-vergelijk-tactiek.

Er is gekozen om het zo simpel mogelijk te maken om een product toe te voegen aan haar winkelmand. Zo zijn er directe actieknoppen om de producten in jouw mand te stoppen getoond binnen de archiefpagina van de boutique. Daarnaast biedt de Minicart ook de mogelijkheid om producten direct uit je winkelmand te verwijderen. 

De Trendzetter

De trendzetter is dol op nieuwe producten. Ze volgt de modetrends op de voet en wordt al snel blij van mooie, nieuwe producten waar ze mee kan pronken. Oud is al gauw passé. Zij wordt het best getriggert met een “Nieuw in de Boutique”-sectie.

“Nieuw in de Boutique” is een reeks van producten die getoond worden op de homepagina. Dit is een belangrijke categorievoor de trendzetter, aangezien ze de laatste items in haar bezit wilt hebben.

Customer Journey 2
Customer Journey 3

De Combinationist

De combinationist is op zoek naar bijouterie die gecombineerd kan worden. Door de juiste oorbellen bij de juiste kettingen te tonen, om vervolgens af te toppen met een bijpassende armband en ringen wordt wordt zij getriggert om een totaalpakket af te nemen.

De combinationist vindt het dus belangrijk om een set te hebben. Ze wordt verleidt van een reeks “gerelateerde producten” aan het product waar ze verdiepende informatie van wilt hebben (Product Detailpagina). 

Daarnaast wordt ze getriggert door de combi-pakketen die STAEL aanbiedt in haar boutique. Combi-pakketten zijn alle gerelateerde producten van een serie.

De Loyalist

De loyalist is de subdoelgroep die alles van STAEL Boutique wilt weten. Ze leest de blogs, en andere nieuwsgerelateerde artikelen en zoekt naar achtergrondinformatie. Hierdoor wordt ze door middel van die blogs geleid naar de specifieke artikelen binnen het blog.

Elke blog wordt gelezen door de loyalist, elke tip wordt gehanteerd. Door hierop in te spelen door blogs te schrijven die bepaalde producten of categorieën uitlichten, zal de loyalist zich meer identificeren met het product.

Customer Journey 4

Het ontwerpen van de schermen middels de inzichten uit UX

Omdat er nu duidelijk is voor wie we willen ontwerpen, waarom we willen ontwerpen en hoe de (sub)doelgroepen door de webshop heen beweegt kunnen de eerste wireframes ontworpen worden waarin de customer journey’s betrokken worden. Er is een onderscheid gemaakt van schermen die zijn ontworpen:

Sitemap
  • Header
  • Homepage
  • Archiefpagina van de Boutique
  • Detailpagina van een Product
  • Archiefpagina van de Blog
  • Detailpagina van een Blog
  • Winkelmand
  • Afrekenen
  • ‘Bedankt voor uw bestelling’-pagina

Header

De header heeft zes belangrijke elementen: 

  • Een home-knop zodat bezoekers makkelijk terug kunnen naar de basis van de webshop.
  • De Boutique: de archiefpagina waarin alle producten in komen te staan. 
  • Blogpagina: Een archiefpagina waarin alle blogs in komen te staan
  • Achtergrondinformatie van STAEL Boutique zelf om de brand een meer persoonlijke uitstraling te geven.
  • Een zoekfunctie zodat men een bepaald product kunnen vinden, zonder dat ze binnen de boutique hoeven te zoeken.
  • De winkelmand-knop welke een mini-cart opent waarin producten geplaatst worden zonder dat de gebruiker naar een andere pagina geleid wordt. Zo kunnen ze kijken wat er nu al in hun winkelmand ligt, terwijl ze naar andere producten aan het kijken zijn. 

Homepage

Voor de homepage is gekozen om een uitgelichte categorie te laten zien als eerste beeld. Hierin worden De Snuffelaar, De Combinatie-maker en De Verzamelaar gecaterd. Daaronder komt sectie waarin de nieuwste producten getoond worden, hierin worden de wensen van de Trendzetter vervuld, maar ook de wensen van De Snuffelaar en De Verzamelaar.

Onder deze sectie staat een blogsectie met de laatst toegevoegde blog. Binnen deze blogs geeft extra informatie over nieuwe (komende) producten, maar ook tips over bijvoorbeeld het combineren van de bijouterie. Eigenlijk kunnen er blogs geschreven voor elke subdoelgroep.

Desktop Wireframe

Archiefpagina van de Boutique

De boutique is een plaats waarin alle producten gewoon worden. Door een filter te plaatsen op zowel type van accessoires, kleur en categorieën wordt het de bezoeker zo simpel mogelijk gemaakt naar het zoeken van een bepaald product.

Daarnaast zijn de producten van de Boutique opgedeeld in kaarten verdeeld op drie producten per rij, zodat genoeg informatie in combinatie met een grote productfoto gezien kan worden.

Deze kaarten zijn gevormd naar hiërarchie van belangrijke informatie die een bezoeker wilt zien. Zo is de productfoto belangrijk om een beeld te krijgen over welk product het gaat, daarna de titel zodat de bezoeker tekstueel uitleg kan krijgen over welk producttype het gaat. Dan volgt de prijs (inclusief de sale) en dan pas komen de twee actieknoppen op basis van hierarchie: Direct in de winkelmand stoppen, of doorklikken naar de productpagina. Wanneer een product in de sale is, of wanneer er een product uitverkocht is komt er linksbovenin (in verband met leesrichting) een label te staan met desbetreffende info.

Productpagina

De productpagina’s zijn eigenlijk op basis van dezelfde hiërarchie als de kaarten in de boutique, alleen dan uitgebreid met meer informatie.

Hoofditem is de foto, daarnaast wordt een contentblok getoond waarin allereerst weer titel wordt gelezen, waaronder de prijs. Daaronder staat een korte beschrijving van het product en een apart blok voor de producteigenschappen. Dan pas komen de actieknoppen: “Terug naar de boutique” en “Plaats in winkelmand”

Onder deze productinformatie staan gerelateerde producten die goed bij het desbetreffende product staan. Dit kunnen producten uit dezelfde categorie zijn, maar ook bijvoorbeeld van de zelfde type.

Archiefpagina van de Blogs

Een blog kennen we allemaal al wel. Daarbij komt dat het belangrijk is om de titel en een kleine actietekst wat er in de blog staat te laten zien. Daarnaast is het belangrijk om een sfeerbeeld van het onderwerp van de blog te laten zien zodat de bezoeker visueel geprikkeld wordt.

De archiefpagina van de blog is opgebouwd uit diverse artikels zoals bovenstaand beschreven.

Detailpagina van een Blog

Een blogartikel zelf is opgebouwd uit bepaalde contentblokken die aan de hand van Gutenberg WordPress [externe link] ingedeeld kunnen worden zodat Stella zelf de vrijheid heeft om haar eigen blogs in te delen qua typografisch ontwerp. Voor het UI ontwerp is een proefartikel opgesteld met een aantal van deze Gutenberg-contentblokken.

Winkelmand en Minicart

Beginnend bij de winkelmand. Belangrijk hier is om aan te geven hoeveel producten een bezoeker in haar winkelmand heeft, en wat de totale kosten hier van zijn. Daarnaast zal de bezoeker ook willen zien welke producten al in haar mand heeft. Dit wil ze zien terwijl ze aan het shoppen is. Daarom is er voor gekozen om deze als overlay te tonen bij het winkelen. Binnen deze overlay staan nog twee actieknoppen: Direct afrekenen en alles bekijken in de winkelmand.

De winkelmand zelf toont alle producten die gekozen zijn. Hier kan de bezoeker haar bestelling nog wijzigen, zoals bijvoorbeeld producten te verwijderen of het aantal te veranderen.

Daaronder staan twee kolommen, eentje om nog wat extra sales te promoten door middel van gerelateerde artikelen en een kolom waarin een contentblok voor een couponcode getoond wordt. Door het zo simpel mogelijk te maken voor het gebruiken van coupons haal je de bezoeker iets sneller over de streep van verkoop. Daarnaast kom in de rechterkolom een blok waar de totale order berekent wordt met een call-to-action om het af te rekenen.

Afrekenen

Het afrekenen is opgedeeld in twee kolommen. De linkerkolom begint met het aanbieden van de coupon. Door het zo simpel mogelijk te maken voor het gebruiken van coupons haal je de bezoeker iets sneller over de streep van verkoop. Daaronder komt het formulier waarin de bezoeker haar persoonlijke informatie moet invullen in volgorde van:

  • Land (om extra verzendkosten te berekenen)
  • E-mailadres (voor aftersales)
  • Voornaam (voor aftersales en levering)
  • Achternaam (voor aftersales en levering)
  • Straat en huisnummer (voor levering)
  • Postcode (voor levering)
  • Plaats (voor levering)

Onder het blok van de persoonlijke informatie komt de manier van facturering met verschillende opties die Stella zelf wenst. Met daaronder een opt-in voor een nieuwsbrief en algemene voorwaarden.

Pas daaronder, wanneer alle informatie is juist ingevuld, komt de knop van afrekenen te staan.

‘Bedankt voor uw bestelling’-pagina

Wanneer de bestelling is juist geplaatst en betaald, wordt de bezoeker geleid naar een Bedankje, waarin er een kleine orderbevestiging wordt getoond met een aantal actieknoppen die weer terug leiden naar de andere content van de website, zoals een blog over het dragen van de sierraden.

UI / UX combineren tot één ontwerp

Schermafbeelding 2020 04 17 om 13.04.37

Door de inzichten vanuit de customer journeys te gebruiken, in combinatie met de gekozen wireframes op basis van hiërarchie zijn de ontwerpen gerealiseerd waarbij verschillende iteraties bij de doelgroep werd getest.

Zo zijn de eerste ontwerpen van de homepagina, de boutique en een productpagina bij de doelgroep neergelegd met een 5-second test, zodat er gezien kon worden welke elementen het meest aanspraken. Daarna is er een takenreeks uitgevoerd om te kijken hoe zij door het ontwerp bewogen. Hierdoor werden de ontwerpen weer aangepast rondom de inzichten die vergaard werden: Zoals dat de filter, die niet helemaal duidelijk was.

Hiervoor is er voor nu gekozen door een filter eruit te halen, zodat er bij een volgende update deze toegevoegd zou kunnen worden. De sorteerfunctie zal een standaard sortering weergeven waar bezoekers al een mental model van hebben, te zien in onderstaande afbeelding.

Schermafbeelding 2020 04 17 om 13.05.51

Vervolgens zijn deze eerste ontwerpen uitgebreid met alle pagina’s die belangrijk zijn binnen de webshop (zie vorig hoofdstuk). Zo kreeg de webshop haar tweede iteratie van ontwerp. Dit ontwerp is weer bij de doelgroep neergelegd waarbij gekeken naar de totale uitstraling en het versimpelen van de customer journey.

Schermafbeelding 2020 04 18 om 11.27.05

Bij de derde en laatste iteratie zijn de elementen verbeterd zoals bijvoorbeeld vriendelijkere UX copywriting. Daarbij kwam het mobiel ontwerp waarin gekeken is om alle UI-elementen op hiërarchische volgorde te plaatsen. Ook zijn bepaalde elementen (zoals de knoppen van de product-kaarten) vervormt naar mobiel-vriendelijke knoppen.

Schermafbeelding 2020 04 18 om 11.54.07
Schermafbeelding 2020 04 18 om 11.45.16 e1587203417861

Dit is dan ook de iteratie die momenteel online is. Het blijft een iteratief ontwerp waarbij gekeken wordt naar hoe de bezoeker zich beweegt door de webshop. Zo kunnen passende UX-updates gedaan kunnen worden en de gebruikerservaring steeds verbetert wordt op basis van actuele data.

Ben je benieuwd naar de laatste iteratie?

Klik hierrr voor de live versie van een User-Centered online boutique: STAEL Boutique!

Wil je zien hoe de huisstijl ontworpen is?

Klik hierrr om te lezen hoe ik het logo en de huisstijl heb ontworpen!