Onderzoeksvraag:
Dit onderzoek geeft inzicht in de gemaakte designkeuzes met onderbouwingen en uitleg waarom het ontwerp op deze manier is ontworpen. Maar het biedt niet alleen inzicht in het proces achter het ontwerp, maar dient ook als een bron van informatie voor verdere iteraties en ontwikkelingen van de website van Den Mulder.
Tijdens de ontwerpfase zijn belangrijke keuzes gemaakt om de website te verbeteren. Door een wijziging in de planning is de deadline voor het opleveren van het ontwerp met een maand vervroegd. Hierdoor is er aan het ontwerp begonnen met alleen de meest noodzakelijk onderzoeken. Zo zijn de resultaten uit #3 ‘Met welke technische & functionele vereisten dient er rekening gehouden te worden?‘ gebruikt om een designrichting te bepalen voor de eerste versie van het ontwerp.
Gedurende de ontwerpfase zijn er meerdere keuzes gemaakt, over hoe bepaalde onderdelen eruit zien of hoe ze werken. In het onderzoeksdocument worden deze één voor één uitgelegd. Zo is bijvoorbeeld rekening gehouden met het behouden van de huisstijl van de huidige website voor herkenbaarheid. De navigatiebalk is verkleind voor meer ruimte op de pagina. Boven de vouwlijn zijn essentiële elementen zoals ‘top 20 bestsellers’ en ‘Populaire bomen’ zichtbaar zonder dat de gebruiker hiervoor hoeft te scrollen. Producttegels zijn aangepast met opvallende Nederlandse benamingen, beschikbaarheidsindicaties, vanaf prijzen, en zonder eurotekens voor een hogere conversie. Een ‘voeg toe aan winkelwagen’ icoon is toegevoegd voor gebruiksgemak. Reviews, geïntegreerd via een API van Kiyoh, vergroten het klantvertrouwen. Een nieuw onderdeel voor tuinstijlen worden overzichtelijk getoond met een hover-effect voor extra informatie. De betaalmethodes zijn duidelijk zichtbaar, en de footer is compacter.
De productoverzichtspagina (POP) toont nu meer producten tegelijk en biedt sorteeropties. Het ontwerp van de productdetailpagina (PDP) is verfijnd met breadcrumbs voor betere navigatie en een overzichtelijke weergave van productvarianten. Een nieuw onderdeel genaamd ‘favoriet van Henk’ is toegevoegd en viel erg in de smaak bij de klant. Voor niet-voorraadartikelen worden alternatieven en contactopties getoond.
Op basis van co-reflecties is er feedback van de stakeholders verzameld, dit leidde tot aanpassingen zoals kleurgebruik voor knoppen en labels, en verbeterde menu-indeling. De mobiele versie is ontworpen met aandacht voor leesbaarheid en gebruiksgemak, waarbij componenten horizontaal schuiven of onder elkaar staan. Het project omvatte meerdere co-reflecties om het ontwerp te optimaliseren, resulterend in een gebruiksvriendelijke en visueel aantrekkelijke website voor zowel desktop als mobiel gebruik.
In het onderstaande Figma bestand zijn de iteraties per pagina te zien voor zowel de dekstop als mobiele versie. Zoom-in om de details beter te bekijken.
De vierde versie voor desktop en eerste versie voor mobiel voldoen aan de gestelde eisen uit #3 ‘Met welke technische & functionele vereisten dient er rekening gehouden te worden?‘ zo is onder andere de contrast verhouding van alle pagina’s op AA-niveau wat door de Web Content Accessibility Guidelines wordt aanbevolen. Deze versies zijn goedgekeurd door Den Mulder en moet door het development team worden ontwikkeld om tijdig te worden afgerond. Vanwege de vervroegde deadline was er nu geen tijd om A/B-tests of gebruikstesten uit te voeren op vierde en laatste versie van het ontwerp. Hierdoor kunnen er mogelijk nog ontwerpfouten in het ontwerp zitten. Deze ontwerpfouten worden opgespoord in het onderzoek #10 ‘Welke UX/UI-elementen moeten nog worden aangepast om het nieuwe ontwerp te verbeteren?
In dit onderzoek is er een ontwerp gemaakt dat voortdurend is verbeterd door middel van meerdere iteraties, gebaseerd op co-reflectie rondes. Voor het ontwerp zijn alle resultaten uit voorgaande onderzoeken gebruikt, zoals onderzoek #3 ‘Met welke technische & functionele vereisten dient er rekening gehouden te worden?‘. Deze resultaten hebben geholpen bij het bepalen van de designrichting voor de eerste versie van het ontwerp.
Verder zijn er verschillende versies (iteraties) van het ontwerp ontwikkeld en zijn er feedbackrondes gehouden met alle stakeholders om de nodige input te verzamelen voor verdere verbeteringen. Hierbij zijn zowel kleine als grote aanpassingen, doorgevoerd om het ontwerp steeds verder te optimaliseren. Enkele aanpassingen die zijn doorgevoerd zijn het wijzigen van knoppen, volgorde van content blokken, kleur van de labels of de weergave van het dropdown menu.
De vierde versie voor desktop en eerste versie voor mobiel voldoen aan de gestelde eisen uit #3 ‘Met welke technische & functionele vereisten dient er rekening gehouden te worden?‘, zoals de contrastverhouding, menustructuur en logische indeling. Vanwege de vervroegde deadline zijn deze versies direct door het development team ontwikkeld, waardoor de ontwerpen niet getest zijn met gebruikers. Hierdoor kunnen er mogelijk nog ontwerpfouten in het ontwerp zitten. Deze ontwerpfouten worden opgespoord in het onderzoek #9 ‘Welke UX/UI-elementen moeten nog worden aangepast om het nieuwe ontwerp te verbeteren?’.
Dit onderzoek heeft bepaald hoe het nieuwe ontwerp van de website en webshop van Den Mulder eruit komt te zien. Hierdoor weet de klant wat hij kan verwachten en het development team weet hoe alle componenten ontwikkeld moeten worden.
Juliën Verheijen
