Een productzoeker die bezoekers een route wijst langs alle producten die ze nodig hebben.
Mobiele app
Google UX Design Cursus, Portfolio opdracht
Quick overview
01. over het project
A. Het probleem
Supermarktklanten verspillen tijd aan het zoeken naar producten en verlaten de winkel gefrustreerd, zonder alles te hebben gevonden.
B. De oplossing
Een productzoeker die bezoekers een route wijst langs alle producten die ze nodig hebben.
C. Het design van de belangrijkste schermen
Full case study
00. Voordat we beginnen
Dit project is voortgekomen uit de Google UX Design-cursus op Coursera, waarbij het ontwerpen van een app voor het vinden van producten in de supermarkt een van de voorgestelde opdrachten was. Omdat de projectopdracht vooraf vaststond, is er geen voorafgaand gebruikersonderzoek uitgevoerd. De pijnpunten en persona's in deze casestudy zijn daarom gebaseerd op aannames (proto-persona's) in plaats van op gevalideerd onderzoek. Beide rondes van bruikbaarheidstests zijn echter met echte deelnemers uitgevoerd, waardoor de ontwerpiteraties gebaseerd waren op daadwerkelijke feedback van gebruikers.
01. Overzicht
Dit project is een app waarmee klanten producten in een fysieke supermarkt snel kunnen terugvinden. Gebruikers kunnen naar producten zoeken, deze aan een boodschappenlijst toevoegen en een efficiënte route door de winkel laten uitstippelen. De app is bedoeld om frustratie te verminderen en tijd te besparen, vooral bij het winkelen in onbekende supermarkten.
02. Probleemstelling
A. Het probleem
Klanten hebben vaak moeite om producten te vinden in fysieke supermarkten. Dit kan leiden tot frustratie, een langere winkeltijd en een minder prettige winkelervaring.
B. Het doel
Het doel van dit project is het ontwikkelen van een digitale oplossing waarmee klanten eenvoudig producten kunnen vinden in een fysieke supermarkt, wat resulteert in een snellere en aangenamere winkelervaring.
03. Painpoints & user personas
01. Tijdsdruk maakt boodschappen doen stressvol
Consumenten met een drukke agenda ervaren boodschappen doen eerder als een stressvolle klus dan als een routinehandeling. Als ze producten niet snel kunnen vinden, stapelen kleine inefficiënties zich op; hierdoor verandert een boodschappenronde van twintig minuten in een frustrerende onderneming die wel een uur kan duren.
02. Onbekende winkelindelingen zorgen voor verwarring en tijdverlies
De indeling van supermarkten verschilt per locatie en keten, en producten worden regelmatig verplaatst of anders gerangschikt. Consumenten die een winkel zelden of voor het eerst bezoeken, hebben moeite hun weg te vinden en lopen vaak meerdere keren door de hele winkel om te vinden wat ze nodig hebben.
03. Het bijhouden van een boodschappenlijst tijdens het winkelen vergt veel mentale inspanning
Consumenten vertrouwen op geheugensteuntjes, notitie-apps of papieren lijstjes die losstaan van de fysieke winkelomgeving. Het schakelen tussen de lijst en de winkelomgeving zorgt ervoor dat ze het overzicht verliezen, producten vergeten of terug moeten lopen door gangpaden waar ze al zijn geweest.
04. Geen duidelijke manier om specifieke of onbekende producten te vinden
Wanneer consumenten op zoek zijn naar een specifiek merk, een minder gangbaar product of een artikel dat ze nog nooit eerder hebben gekocht, ontbreekt het aan een betrouwbaar hulpsysteem in de winkel. Personeel inschakelen wordt gezien als een laatste redmiddel, en de bordjes boven de gangpaden zijn vaak te algemeen om echt nuttig te zijn.
Maya Patel
Leeftijd: 22
Opleiding: Bachelorstudent Communicatie
Woonplaats: Utrecht, Nederland
Familie: Woont op zichzelf; afkomstig uit een Brits-Indiase familie
Beroep: Parttime barista (24 uur per week) naast haar studie
"Ik wil gewoon pakken wat ik nodig heb en weer wegwezen. Elke minuut die ik kwijt ben aan ronddwalen, is een minuut die ik niet heb."
A. Doelen
Haar boodschappen zo snel en efficiënt mogelijk doen
Maaltijden voor de week plannen zonder te veel tijd of geld in de winkel te besteden
Specifieke producten vinden zonder om hulp te hoeven vragen
B. Frustraties
Ze verliest tijd door heen en weer te lopen in de winkel, omdat ze producten niet snel kan vinden
De indeling van haar vaste supermarkt verandert regelmatig, waardoor zelfs vertrouwde boodschappenrondes verwarrend aanvoelen
Het combineren van een boodschappenlijstje op haar telefoon met het navigeren door de winkel voelt chaotisch aan en zorgt ervoor dat ze producten vergeet
C. Verhaal
Maya heeft een overvolle agenda met colleges, diensten in het café en het onderhouden van haar sociale leven. Ze doet één keer per week boodschappen, meestal op woensdagavond, en probeert dat zo snel mogelijk te doen. Boodschappen doen onder tijdsdruk levert stress op, vooral omdat ze voortdurend op haar lijstje moet kijken terwijl ze door de winkel loopt. Vaak raakt ze het overzicht kwijt, vergeet ze dingen of moet ze teruglopen door de gangpaden, waardoor wat een snel uitstapje zou moeten zijn, verandert in een frustrerende klus.
Bernard Osei
Leeftijd: 47
Opleiding: Mbo-diploma logistiek management
Woonplaats: Amsterdam, Nederland (oorspronkelijk uit Ghana)
Gezin: Getrouwd, twee kinderen van 12 en 15 jaar oud
Beroep: Teamleider magazijn bij een distributiebedrijf
"Ik wil graag met plezier inkopen doen voor mijn gezin, maar als ik niet kan vinden wat ik nodig heb, voel ik me verloren en geef ik het op."
A. Doelen
De wekelijkse gezinsboodschappen efficiënt doen, zodat hij zijn vrije tijd met zijn gezin kan doorbrengen
Producten vinden die aansluiten bij de voedingsvoorkeuren van zijn gezin, waaronder specifieke internationale of culturele producten
Zich zelfverzekerd voelen bij het navigeren door elke supermarkt, ook een waar hij niet regelmatig komt
B. Frustraties
Wanneer hij een andere supermarktvestiging of een nieuwe winkel bezoekt, heeft hij moeite om zijn weg te vinden en vertrekt hij vaak zonder alle producten van zijn boodschappenlijstje.
Algemene borden boven de gangpaden, zoals 'Internationaal' of 'Wereldkeuken', zijn niet specifiek genoeg om hem te helpen vinden wat hij daadwerkelijk nodig heeft.
Hij voelt zich ongemakkelijk om hulp te vragen aan het personeel en vindt het prettiger om producten zelfstandig te kunnen vinden.
C. Verhaal
Bernard maakt lange werkdagen en hecht veel waarde aan zijn weekenden met het gezin. Meestal doet hij de wekelijkse boodschappen op zaterdagochtend. Hoewel hij doorgaans bij zijn lokale supermarkt winkelt, bezoekt hij soms een grotere vestiging voor specifieke Ghanese ingrediënten. Deze uitstapjes zijn frustrerend, omdat de indeling onbekend is en de bewegwijzering onduidelijk; hierdoor moet hij de hele winkel doorzoeken of vertrekt hij zonder de gewenste producten. Hij zou willen dat hij simpelweg naar een product kon zoeken en precies wist waar hij moest zijn.
04. How might we
01. Hoe zouden we…
klanten met weinig tijd kunnen helpen hun boodschappen te doen via de meest efficiënte route?
Gebaseerd op pijnpunt 01: Tijdsdruk maakt boodschappen doen stressvol
02. Hoe zouden we…
ervoor kunnen zorgen dat navigeren door een onbekende supermarkt net zo makkelijk voelt als winkelen in een winkel die je wekelijks bezoekt?
Gebaseerd op pijnpunt 02: Onbekende winkelindelingen zorgen voor verwarring en tijdverlies
03. Hoe zouden we…
de mentale inspanning kunnen verminderen die gepaard gaat met het bijhouden van een boodschappenlijstje tijdens het lopen door de winkel?
Gebaseerd op pijnpunt 03: Het beheren van een boodschappenlijstje tijdens het winkelen vergt veel mentale inspanning
04. Hoe zouden we…
klanten kunnen helpen snel een specifiek product te vinden, zonder dat ze het winkelpersoneel hoeven te vragen of elk schapbordje moeten lezen?
Gebaseerd op pijnpunt 04: Geen duidelijke manier om specifieke of onbekende producten te vinden
05. User story & user journey
“Als drukke student met weinig tijd wil ik snel producten vinden en een efficiënte winkelroute uitstippelen, zodat ik mijn boodschappen kan doen zonder tijd te verspillen aan het zoeken in de winkel.”
“Als ouder die wekelijks de gezinsboodschappen doet bij verschillende supermarkten, wil ik naar specifieke producten kunnen zoeken en precies zien waar ze liggen, zodat ik met een gerust hart kan winkelen en niet door de hele winkel hoef te lopen.”
06. Papieren wireframes
A. Methode
Voor elk scherm schetste ik vijf varianten en combineerde ik de sterkste elementen tot één wireframe. Hieronder staan twee voorbeelden van deze werkwijze voor de pagina's met de boodschappenlijst en de kaart.
B1. Boodschappenlijst pagina
B2. Map pagina
07. Low-fidelity prototype
A. Methode
De papieren wireframes werden met behulp van Figma omgezet in digitale wireframes.
B1. Homepage & productzoekpagina
B2. Productoverzichtspagina & Productinformatiepagina
B3. Boodschappenlijst pagina & map pagina
08. Lo-fi usability study & verbeteringen
A. Low-fidelity bruikbaarheidsonderzoek
Methode: Begeleid bruikbaarheidsonderzoek
Deelnemers: 3 (2 mannen, 1 vrouw; leeftijd 25-63 jaar)
Duur van de sessie: 5-15 minuten
Onderzoeksvragen:
Wat kunnen we leren van de gebruikersstroom (user flow), oftewel de stappen die gebruikers doorlopen om een winkelroute in de fysieke winkel samen te stellen?
Zijn er onderdelen van de gebruikersstroom waar gebruikers vastlopen?
Zijn er extra functies die gebruikers graag in de app zouden zien?
Vinden gebruikers de app eenvoudig of juist lastig in het gebruik?
B. Affinity diagram
De observaties uit de opgenomen sessies werden in een affiniteitsdiagram geordend om patronen bij de deelnemers te identificeren.
C. Concrete inzichten & verbeteringen
Inzicht 01: Gebruikers lopen vast bij het aanmaken of opzoeken van een route in de winkel
Gebruikers hebben moeite om te begrijpen hoe ze een winkelroute kunnen genereren – vooral voor de volledige boodschappenlijst, omdat de actie 'Route bekijken' niet duidelijk zichtbaar of intuïtief is.
Actie: Gebruikers hebben een duidelijke en zichtbare manier nodig om een winkelroute voor hun volledige boodschappenlijst aan te maken.
Verbeteringen
De oorspronkelijke knop 'Route bekijken' was klein en viel nauwelijks op. Deze is vervangen door een grotere, vaststaande knop met het label 'Winkelroute genereren'. Hiermee wordt de zichtbaarheid vergroot, de nadruk gelegd op de belangrijkste actie en duidelijker gemaakt wat de functie precies doet.
Inzicht 02: Belangrijke acties worden gemist wanneer klikbare elementen niet duidelijk zijn aangegeven
Gebruikers weten niet zeker met welke onderdelen van de interface ze kunnen interageren; ze vragen zich bijvoorbeeld af of het logo klikbaar is of waar ze moeten tikken om verder te gaan.
Actie: Gebruikers hebben duidelijkere visuele aanwijzingen nodig om te begrijpen welke elementen klikbaar zijn en hoe ze door de app kunnen navigeren.
Verbeteringen
Omdat het hier om een 'low-fidelity'-prototype gaat, is het soms lastig te zien welke elementen klikbaar zijn, aangezien het ontwerp momenteel uitsluitend uit grijstinten bestaat. Dit inzicht is daarom vooral verwerkt in het 'high-fidelity'-prototype, waarin duidelijkere visuele aanwijzingen zijn toegepast. Daarnaast is het logo in de bovenste navigatiebalk ook in het 'low-fidelity'-prototype klikbaar gemaakt; dit verbetert de gebruiksvriendelijkheid en sluit aan bij gangbare app-conventies en industriestandaarden.
Inzicht 03: Belangrijke informatie wordt over het hoofd gezien als ervoor gescrold moet worden
Gebruikers missen vaak essentiële informatie die lager op het scherm staat, omdat ze niet uit zichzelf naar beneden scrollen, vooral op productpagina's.
Actie: Essentiële product- en navigatie-informatie moet bovenaan het scherm zichtbaar zijn, zonder dat de gebruiker hoeft te scrollen.
Verbeteringen
Op de productpagina is productinformatie belangrijker dan informatie over vergelijkbare producten. Daarom is het gedeelte met productinformatie hoger op de pagina geplaatst, dichter bij de belangrijkste productdetails. Het gedeelte met vergelijkbare producten is naar beneden verplaatst, aangezien dit minder direct verband houdt met het product zelf. Door deze wijziging hoeven gebruikers minder te scrollen en is de belangrijkste productinformatie gemakkelijker te vinden.
Inzicht 04: Gebruikers willen begeleiding bij het eerste gebruik van de app
Gebruikers gaven aan behoefte te hebben aan begeleiding binnen de app, zoals een informatieknop of uitleg over de werking van de app; dit is vooral van belang voor het begrijpen van unieke functies, zoals navigatie in de winkel.
Actie: Gebruikers hebben eenvoudige begeleiding in de app nodig om te begrijpen hoe deze werkt, met name voor unieke functies zoals navigatie in de winkel.
Inzicht 05: Taalopties zijn essentieel voor toegankelijkheid en vertrouwen
Gebruikers willen de taal van de app kunnen wijzigen, aangezien taalbarrières het vertrouwen en de duidelijkheid verminderen.
Actie: Gebruikers moeten de taal van de app kunnen aanpassen, zodat ze zich zeker en prettig voelen bij het gebruik van de app in de winkel.
Verbeteringen
Er is een accountpagina geïntroduceerd die toegankelijk is door op de profielfoto te tikken. Op deze pagina kunnen gebruikers hun profielgegevens beheren en app-voorkeuren aanpassen. Om in te spelen op de inzichten 4 en 5 zijn een taalpagina en een pagina voor ondersteuning en informatie toegevoegd. Hiermee kunnen gebruikers hun taalvoorkeuren wijzigen en informatie over de werking van de app raadplegen, waardoor de app toegankelijker wordt.
09. High-Fidelity prototype
Op basis van de inzichten uit het lo-fi bruikbaarheidsonderzoek werden de ontwerpen verfijnd tot een high-fidelity prototype. Er werden kleur, typografie en echte productafbeeldingen toegevoegd om een realistische weergave van het eindproduct te creëren.
A. Designsystem
Om consistentie te waarborgen en het ontwerpproces te versnellen, werd een designsystem opgezet als basis voor het high-fidelity prototype. Dit systeem omvat onder meer typografie, kleuren, iconen en knoppen, zodat elk scherm dezelfde visuele taal volgt.
De onderstaande gedetailleerde mock-ups (high-fidelity) tonen de belangrijkste gebruikersroute: van het openen van de app op het startscherm tot het genereren van een geoptimaliseerde winkelroute in de winkel. Elk scherm weerspiegelt de ontwerpkeuzes en verbeteringen die zijn doorgevoerd naar aanleiding van het gebruiksvriendelijkheidsonderzoek met eenvoudige prototypes (lo-fi).
B1. Homepagina
B2. Productcategorieën pagina
B3. Productlijst pagina
B4. Productinformatie pagina
B5. Boodschappenlijst pagina
B6. Boodschappenlijst routepagina
10. hi-fi usability study & improvements
A. High-fidelity bruikbaarheidsonderzoek
Methode: Ongemodereerd bruikbaarheidsonderzoek (enquête)
Deelnemers: 4
Duur van de sessie: 5-15 minuten
Onderzoeksvragen:
Wat kunnen we leren van de user flow, oftewel de stappen die gebruikers doorlopen om een winkelroute in de fysieke winkel samen te stellen?
Zijn er onderdelen van de user flow waar gebruikers vastlopen?
Zijn er extra functies die gebruikers graag in de app zouden zien?
Vinden gebruikers de app eenvoudig of juist lastig in het gebruik?
B. Affinity diagram
C. Concrete inzichten & verbeteringen
Inzicht 01: De kaart mist visuele duidelijkheid, waardoor het lastig is om producten in de winkel te vinden.
Gebruikers hebben moeite om de locatie van producten op de kaart te bepalen, omdat er geen kleurcodering per afdeling is, geen 'u bent hier'-aanduiding en geen schermvullende weergave om zich goed te kunnen oriënteren.
Actie: Gebruikers hebben behoefte aan een duidelijkere, informatievere kaart met kleurcodering per afdeling, een aanduiding van de huidige locatie en een optie voor schermvullende weergave.
Verbeteringen
De kaart bevat nu gelabelde gangpaden en elk gedeelte heeft een kleurcode die overeenkomt met de productcategorieën (bijv. groen voor groente, fruit en salades; lichtblauw voor diepvriesproducten; en geel voor pasta en rijst). Hierdoor kunnen gebruikers in één oogopslag de winkelindeling begrijpen.
Ook zijn de markers (pins) duidelijker gemaakt door kleine productafbeeldingen erin op te nemen. Producten die al zijn gepakt, hebben een groene omlijning, terwijl producten die nog op de lijst staan, zwart omlijnd zijn. Daarnaast is rechtsonder op de kaart een vergrotingsknop toegevoegd, waarmee gebruikers de weergave kunnen vergroten om de volledige winkelindeling en route in één keer te zien.
Inzicht 02: Gebruikers vinden het onduidelijk waarom ze opnieuw items moeten selecteren in de boodschappenlijst
Na het toevoegen van producten aan hun boodschappenlijst begrijpen gebruikers niet waarom ze opnieuw items moeten selecteren voordat ze een route genereren; deze stap voelt overbodig en de reden ervan is niet duidelijk.
Actie: Gebruikers hebben behoefte aan duidelijkere begeleiding of visuele feedback die uitlegt waarom het selecteren van items nodig is voordat de boodschappenroute wordt gegenereerd.
Verbeteringen
Om duidelijker te maken welke producten al zijn verzameld, worden de productafbeelding en -beschrijving in het lichtgrijs weergegeven zodra een item is afgevinkt. Hierdoor is sneller en eenvoudiger onderscheid te maken tussen verzamelde en nog resterende items. Daarnaast is de groene indicatorstip vervangen door een vinkje, voor een duidelijkere visuele bevestiging dat een product is verzameld.
Inzicht 03: Het gedeelte 'meer informatie' oogt niet duidelijk interactief
Gebruikers verwachten dat de tekst 'meer informatie' op de productpagina volledig aanklikbaar is, maar alleen het pijltje aan de rechterkant reageert; dit zorgt voor verwarring over wat er precies aanklikbaar is.
Actie: De volledige regel 'meer informatie' moet interactief zijn, niet alleen het pijltjesicoon.
Inzicht 04: De knop '+ toevoegen' maakt de actie niet duidelijk
Het icoon '+ toevoegen' op zich is niet uitnodigend of beschrijvend genoeg; gebruikers begrijpen niet direct dat ze door hierop te tikken het product aan hun boodschappenlijst toevoegen.
Actie: Er is een duidelijk gelabelde knop nodig die aangeeft dat het product aan de boodschappenlijst wordt toegevoegd.
Verbeteringen
De oorspronkelijke knop '+ Toevoegen' is vervangen door '+ Toevoegen aan lijst', zodat duidelijker is waar het product aan wordt toegevoegd. Daarnaast zijn de aparte knoppen voor 'Meer informatie' en het pijltje naar beneden samengevoegd tot één knop die over de volledige breedte loopt. Hierdoor kunnen gebruikers eenvoudiger en duidelijker bij de aanvullende productinformatie komen.
11. Geleerde lessen
A. Wat ging er goed?
Als ik op dit project terugkijk, ben ik trots op wat ik heb weten te realiseren als mijn eerste UX-ontwerpproject. Helemaal opnieuw beginnen – zonder enige eerdere UX-ervaring – en het volledige ontwerpproces doorlopen (van onderzoek en idee-ontwikkeling tot een getest 'high-fidelity'-prototype) voelde als een grote prestatie.
Waar ik vooral trots op ben, is het iteratieve proces dat ik heb gevolgd. In plaats van direct naar een eindontwerp te springen, nam ik de tijd om mijn 'low-fidelity'-prototype te testen met echte deelnemers, de bevindingen te vertalen naar concrete inzichten en die verbeteringen door te voeren in het 'high-fidelity'-ontwerp. Door twee volledige gebruiksvriendelijkheidstests uit te voeren en de resultaten daadwerkelijk te gebruiken voor ontwerpbeslissingen, kreeg het eindproduct een fundament dat verder gaat dan persoonlijke voorkeur.
Het uiteindelijke ontwerp weerspiegelt niet alleen mijn eigen visie, maar ook de feedback van echte gebruikers die in twee verschillende fasen van het proces met het prototype hebben gewerkt.
B. Wat zou ik anders doen?
Er zijn een paar dingen die ik anders zou aanpakken als ik dit project opnieuw zou doen. Het belangrijkste punt is het ontbreken van echt gebruikersonderzoek aan het begin van het proces. Omdat dit project voortkwam uit een vooraf vastgestelde opdrachtomschrijving en niet uit een probleem uit de praktijk, lag het uitvoeren van voorafgaand gebruikersonderzoek niet direct voor de hand. In een professionele context zou ik echter altijd beginnen met het spreken van echte gebruikers voordat ik pijnpunten definieer of persona's opstel, in plaats van te vertrouwen op 'proto-persona's' (gebaseerd op aannames), zoals ik hier deed.
Ook zou ik proberen meer deelnemers te betrekken bij elke ronde van gebruiksvriendelijkheidstests. Met drie deelnemers in de 'low-fidelity'-studie en vier in de 'high-fidelity'-studie bleven de steekproefgroottes onder het algemeen aanbevolen minimum van vijf deelnemers per ronde. Hoewel de studies waardevolle inzichten opleverden, had een grotere groep gezorgd voor betrouwbaardere en representatievere resultaten.
Tot slot: als dit een echt project voor een bestaande supermarktketen was geweest, had ik ervoor gezorgd dat de deelnemers aan de gebruiksvriendelijkheidstest ook daadwerkelijk klanten van die specifieke supermarkt waren. Testen met gebruikers die al bekend zijn met de supermarkt zou relevantere en concretere feedback hebben opgeleverd dan testen met algemene supermarktbezoekers.
C. Vervolgstappen
Mocht dit project een vervolg krijgen, dan is de belangrijkste volgende stap het valideren van de aannames die momenteel ten grondslag liggen aan de persona's en pijnpunten. Dit houdt in dat er interviews worden afgenomen met daadwerkelijke supermarktklanten om te bevestigen of de geïdentificeerde pijnpunten hun ervaringen accuraat weerspiegelen, en dat de persona's worden aangescherpt op basis van feitelijke gegevens in plaats van aannames.
Een logische volgende stap is ook het testen van het definitieve 'high-fidelity'-prototype met een grotere en gerichtere groep deelnemers, specifiek vaste klanten van de supermarkt waarvoor de app bedoeld is. Hiermee kunnen eventuele resterende bruikbaarheidsproblemen aan het licht komen die in de huidige onderzoeken mogelijk over het hoofd zijn gezien door de beperkte steekproefgrootte.
Tot slot, mocht de ontwikkeling van de app van start gaan, dan is het ontwerpen voor andere schermformaten, zoals tablets, een logische vervolgstap, om zo een consistente gebruikerservaring op alle apparaten te waarborgen.
D. Wil je het prototype zelf bekijken?
// Contact
Project in gedachten?
Een nieuwe website of een frisse blik op je huidige site? Laat het weten, dan kijken we samen naar de mogelijkheden.