Herontwerp website Drogisterij Zuyderwijk

Drogisterij Zuyderwijk in Rotterdam-Noord heeft sinds februari 2022 een complete verbouwing ondergaan. De fysieke winkel is compleet vernieuwd, en daar hoort een nieuwe website bij. De vorige website was erg ouderwets en niet geoptimaliseerd voor de nieuwe generatie klanten: mensen met een behoefte aan natuurlijke en dierproefvrije producten. De nieuwe website brengt de fijne winkelsfeer en online wensen van de klant samen.

Opdrachtgever
Drogisterij Zuyderwijk
Rol
UX designer
Datum project
2022

Overzicht

Probleem
De huidige website is niet up-to-date en bezoekers kunnen niet de informatie vinden die zij zoeken.
Doel
Een overzichtelijke website die qua stijl past bij de nieuwe uitstraling van de fysieke winkel.
Afbeelding van homepagina van Drogisterij Zuyderwijk

Proces

01 Vooronderzoek

Na een interview met de eigenaar heb ik contact gezocht met vaste bezoekers van de drogisterij. Omdat het over sfeer gaat op de website vind ik het belangrijk om te weten welke sfeer er wordt ervaren door de bezoekers van de fysieke winkel. Na het uitzetten van een enquête bleken er nog wat onduidelijkheden te zijn, waarop ik heb besloten om in de winkel een groot vel neer te leggen en aan mensen te vragen wat voor associaties zij hebben bij Drogisterij Zuyderwijk. Daarnaast vroeg ik bij een tweede vel wat zij graag op de website van Drogisterij Zuyderwijk terug zouden willen zien. Dit is de basis van het nieuwe ontwerp van de website.

Mindmap over de winkel van Drogisterij Zuyderwijk
Mindmap van de website van Drogisterij Zuyderwijk
04 Customer journey

Met de resultaten uit het onderzoek, de heuristic evaluation én de persona’s heb ik een customer journey gemaakt om te ontdekken waar in de klantroute de meeste problemen en/of frustraties plaatsvinden. Hieruit blijkt dat het gebrek aan een uitgebreide en goed werkende webshop een frustratie is.

Het is daarnaast voor bezoekers niet duidelijk wat voor mogelijkheden de website wél biedt en welke (extra) services er worden aangeboden in de fysieke winkel. Denk hierbij aan een DHL-pakketpunt, de mogelijkheid om te printen en om producten te bestellen op verzoek van de klant.

De klantreis gevisualiseerd
06 A/B-testen

Voor de A/B-test heb ik gebruik gemaakt van de schetsen van de actiefolder en deze omgezet tot digitale wireframes. Door de wireframes wordt duidelijker hoe de verhoudingen zijn van bepaalde vormen en titels. Voor de A/B test heb ik gebruik gemaakt van de actiefolder schetsen. Ik heb hierbij de doelgroep betrokken en hen gevraagd welke manier van het tonen van de aanbiedingen de voorkeur kreeg.

De doelgroep was erg duidelijk: de tegelweergave won het overduidelijk van de folder die digitaal doorgebladerd kan worden. De tegelweergave zou minder clicks opleveren om in één oogopslag zo veel mogelijk informatie te zien. Ook werd scrollen door een pagina prettiger bevonden dan te bladeren door pagina’s.

A/B test met de aanbiedingenpagina
02 Heuristic evaluation

Door middel van een heuristic evaluation onder experts werd duidelijk dat op de bestaande website veel mis ging met de gebruiksvriendelijkheid: de site reageerde niet zoals verwacht of bepaalde elementen werkten überhaupt niet. Ook werd er gelinkt naar een externe webshop zonder dat men dit door had en konden bezoekers alleen terugkeren naar de website als zij opnieuw de site in de browser intikten.

Ingevulde Heuristic Evaluation door een expert
03 Persona's

De interviews, het veldonderzoek en de heuristic evaluation hebben geleid tot twee persona’s die de brede doelgroep van Drogisterij Zuyderwijk vertegenwoordigen. Er is een grote groep 65+-ers die al jaren naar de winkel komt. Ook is er een grote groep jongvolwassenen en zijn er gezinnen die in de buurt wonen. Zij komen voornamelijk naar de winkel voor de natuurlijke producten.

Persona van een klant van Drogisterij Zuyderwijk
Persona van een klant van Drogisterij Zuyderwijk
05 Schetsen

In overleg met de opdrachtgever is besloten wat er op de nieuwe website terecht gaat komen. Hiervoor heb ik diverse schetsen gemaakt. Er komt onder andere een webshop op de nieuwe website.

Schets van de folder acties pagina
Schets van de webshop pagina van de website
07 Stijl bepalen

De stijl van de nieuwe website moet goed aansluiten op de net verbouwde winkel. De fysieke winkel heeft de focus gelegd op het natuurlijke assortiment dat zij hebben. Dit doet men onder andere met groene stroken en banners aan het plafond. De website moet daarnaast de fijne, welkome sfeer overbrengen op de bezoeker, zodat deze wordt uitgenodigd de fysieke winkel te bezoeken.

Stijldocument met kleuren, lettertypes en knoppen
Stijldocument met kleuren, lettertypes en knoppen
01 Vooronderzoek

Na een interview met de eigenaar heb ik contact gezocht met vaste bezoekers van de drogisterij. Omdat het over sfeer gaat op de website vind ik het belangrijk om te weten welke sfeer er wordt ervaren door de bezoekers van de fysieke winkel. Na het uitzetten van een enquête bleken er nog wat onduidelijkheden te zijn, waarop ik heb besloten om in de winkel een groot vel neer te leggen en aan mensen te vragen wat voor associaties zij hebben bij Drogisterij Zuyderwijk. Daarnaast vroeg ik bij een tweede vel wat zij graag op de website van Drogisterij Zuyderwijk terug zouden willen zien. Dit is de basis van het nieuwe ontwerp van de website.

Mindmap over de winkel van Drogisterij Zuyderwijk
Mindmap van de website van Drogisterij Zuyderwijk
02 Heuristic evaluation

Door middel van een heuristic evaluation onder experts werd duidelijk dat op de bestaande website veel mis ging met de gebruiksvriendelijkheid: de site reageerde niet zoals verwacht of bepaalde elementen werkten überhaupt niet. Ook werd er gelinkt naar een externe webshop zonder dat men dit door had en konden bezoekers alleen terug keren naar de website als zij opnieuw de site in de browser intikten.

Ingevulde Heuristic Evaluation door een expert
03 Persona's

De interviews, het veldonderzoek en de heuristic evaluation hebben geleid tot twee persona’s die de brede doelgroep van Drogisterij Zuyderwijk vertegenwoordigen. Er is een grote groep 65+-ers die al jaren naar de winkel komt. Ook is er een grote groep jongvolwassenen en zijn er gezinnen die in de buurt wonen. Zij komen voornamelijk voor de natuurlijke producten naar de winkel.

Persona van een klant van Drogisterij Zuyderwijk
Persona van een klant van Drogisterij Zuyderwijk
04 Customer journey

Met de resultaten uit het onderzoek, de heuristic evaluation én de persona’s heb ik een customer journey gemaakt om te ontdekken waar in de klantroute de meeste problemen en/of frustraties plaatsvinden. Hieruit blijkt dat het gebrek aan een uitgebreide en goed werkende webshop een frustratie is.

Het is daarnaast voor bezoekers niet duidelijk wat voor mogelijkheden de website wél biedt en welke (extra) services er worden aangeboden in de fysieke winkel. Denk hierbij aan een DHL-pakketpunt, de mogelijkheid om te printen en om producten te bestellen op verzoek van de klant.

De klantreis gevisualiseerd
05 Schetsen

In overleg met de opdrachtgever is besloten wat er op de nieuwe website terecht gaat komen. Hiervoor heb ik diverse schetsen gemaakt. Er komt onder andere een webshop op de nieuwe website.

Schets van de folder acties pagina
Schets van de webshop pagina van de website
06 A/B-testen

Voor de A/B-test heb ik gebruik gemaakt van de schetsen en deze omgezet tot digitale wireframes. Door de wireframes wordt duidelijker hoe de verhoudingen zijn van bepaalde vormen en titels. Voor de A/B test heb ik gebruik gemaakt van de actiefolder schetsen. Ik heb hierbij de doelgroep betrokken en hen gevraagd welke manier van het tonen van de aanbiedingen de voorkeur kreeg.

De doelgroep was erg duidelijk: de tegelweergave won het overduidelijk van de folder die digitaal doorgebladerd kan worden. De tegelweergave zou minder clicks opleveren om in één oogopslag zo veel mogelijk informatie te zien. Ook werd scrollen door een pagina prettiger bevonden dan te bladeren door pagina’s.

A/B test met de aanbiedingenpagina
07 Stijl bepalen

De stijl van de nieuwe website moet goed aansluiten op de net verbouwde winkel. De fysieke winkel heeft de focus gelegd op het natuurlijke assortiment dat zij hebben. Dit doet men onder andere met groene stroken en banners aan het plafond. De website moet daarnaast de fijne, welkome sfeer overbrengen op de bezoeker, zodat deze wordt uitgenodigd de fysieke winkel te bezoeken.

Stijldocument met kleuren, lettertypes en knoppen
Stijldocument met kleuren, lettertypes en knoppen

Eindproduct

Afbeelding van homepagina van Drogisterij Zuyderwijk
Afbeelding van webshop van Drogisterij Zuyderwijk
Afbeelding van de winkelwagen pagina van Drogisterij Zuyderwijk