2022

UX design

Projectmanagement

Koffiepartners keuzehulp

In 2022 merkte Koffiepartners op dat veel van hun klanten aangaven dat ze op hun website door de bomen het bos niet meer konden zien. Dit was te wijden aan dat ze honderden koffiemachines hebben en dat veel potentiële klanten geen idee hebben wat er belangrijk is voor hen m.b.t. het kiezen van een machine voor hun bedrijf. De overzicht pagina’s en detailpagina’s moesten dus onder de loep genomen worden, Maar was dit wel echt het probleem?

Probleem inventarisatie

Voordat ik zomaar aan het ontwerp begon van de twee aangegeven pagina’s, ben ik in gesprek gegaan met de klant over waar het probleem voor de doelgroep lag. 

 

Bellers gaven aan dat de overzichtspagina van de machines erg druk was met veel tekst bovenaan de pagina. Uit Hotjar data bleek dat deze tekst vaak niet werd gelezen. Wanneer men belde naar koffiepartners werd vaak aangegeven dat er erg veel tekst op de pagina stond en dat ze last hadden van information overload. Er moest dus een laagdrempelige oplossing komen om men op de website verder te helpen met welke machine bij de bezoeker past. Aan de hand van deze informatie heb ik een kort concurrentie onderzoek gedaan. Hieruit bleek dat een aantal concurrenten een keuzehulp op hun website hebben staan voor bezoekers die hulp nodig hebben met kiezen. 

 

 

Ik stelde dus voor om ook een keuzehulp te ontwerpen naast het redesign van de bestaande pagina’s. Uit een gesprek met salesmedewerkers is onderstaande flow ontstaan voor een keuzehulp die aansluit op de machines van Koffiepartners.

Het ontwerp

In het ontwerp is rekening gehouden met de onervarenheid van de doelgroep. Dit is op de volgende manieren gedaan.

 

Laagdrempelig beginnen
Om laagdrempelig engagement te creëren, heb ik ervoor gekozen om bij de eerste stap de makkelijkste vraag te stellen. Iedereen weet immers hoe groot zijn of haar bedrijf is. Op deze manier is het dus makelijk om te beginnen met het invullen van de vragen. En door daarnaast aan te tonen dat men maar 5 stappen hoeft te doorlopen, wordt er dus voor gezorgd dat men niet snel zal afhaken tijdens het invullen van de keuzehulp.

Informatiebehoeften
Als je in de verkleinde weergave van de keuzehulp hieronder naar stap 2 gaat, zie je dat men met hovers altijd makkelijk kan zien wat een optie inhoudt. Als je dus bijvoorbeeld niet weet wat wiener melange is, is dat geen probleem in deze keuzehulp.

Ook is er altijd informatie beschikbaar over de stap die je aan het invullen bent, door op het vraagteken rechtsboven te klikken. Hiernaar wordt ook verwezen, als er een stap weg valt. Probeer namelijk maar eens filterkoffie te kiezen en door te gaan naar stap 4.

Resultatenpagina

Hieronder zie je een verkleinde weergave van de resultatenpagina. Op deze pagina wordt niet alleen rekening gehouden met de bezoeker, maar ook met de behoeften van de salesafdeling van Koffiepartners.

 

Voor de bezoeker is meteen een top 3 overzicht van machines te zien, op basis van de aangegeven informatie van de bezoeker. Op hover kan de bezoeker USP’s zien van deze machines. Ook kan men een voorstel op maat ontvangen. Hiervoor hoeven ze alleen maar hun naam en e-mailadres achter te laten via het formulier onderaan de pagina. De salesafdeling krijgt dan een bericht met jouw gegevens, je top 3 machines en wat er bij elke stap is ingevuld.

 

Vul je liever geen formulier in? Dat is begrijpelijk. Dan kan je ook altijd nog gebruik maken van de contactgegevens die ernaast staan om direct contact op te nemen.

Implementatie en beheer

Het ontwerp is duidelijk. Maar hoe gaan we dit eigenlijk in de website integreren? Best een goede vraag van de developer die dit moest bouwen toch?

 

Aangezien de machines allemaal al worden ingeladen in categorieën die ook worden gebruikt voor de filtering op de overzichtspagina van alle machines, hebben we besloten om de keuzehulp stappen te beheren vanuit dezelfde plek in de backend als de categorieën. Zo kunnen de beheerders van de site binnen het beheer van de filtering op de overzichtspagina, ook meteen de bijbehorende stappen binnen de keuzehulp configureren. De inhoud van de stappen komt immers ook terug in deze filtering.

 

En hoe gaan we ervoor zorgen dat de juiste 3 machines getoond worden? Ook weer een goede vraag van de developer. In overleg met de klant hebben we besloten dat er een ranking systeem in de website zou komen. Elke machine heeft in de backend een extra veld gekregen waar een getal  kan worden ingevuld. Hoe hoger het getal, hoe groter de kans dat de machine in een top 3 te zien is als hij aan alle gekozen voorwaarden voldoet.

DON`T BE A STRANGER!

Heb ik je interesse opgewekt? Neem gerust contact op! Ik babbel altijd graag over mijn werk en over eventuele kansen of mogelijkheden binnen jullie bedrijf.

Volgend project

Denardi store locator

Optimalisatie van een store locator.

Onderzoek, Concepting, Prototyping, UI design