Design System
Toen ik kwam werken bij Voordeeluitjes was er al een Design System, maar die werd nog niet optimaal gebruikt. Het Design System was gedeeltelijk met Atomic Design gebouwd, maar er ontbraken nog stappen zoals templates en pages. We hebben toen besloten om met een frisse start te beginnen aan een nieuw design systeem waarbij we elke stap van Atomic Design in hebben meegenomen.
Ik ben begonnen met het verzamelen van de kleinste elementen op de website van Voordeeluitjes. Iconen, labels, titels, teksten en vormen. Daarna heb ik deze elementen omgezet in componenten en heb ik de componenten samengevoegd tot nieuwe en grotere componenten, zoals het samenvoegen van een tekst en een icoon tot een knop. Dit was by far het meeste werk, maar het loonde wel, omdat je op dit punt de elementen kan hergebruiken.
Door gebruik te maken van de elementen die nu in Design Systeem staan, heb ik templates en pagina’s kunnen bouwen. Deze pagina’s zijn de meest bezochte pagina’s van Voordeeluitjes en door deze toe te voegen aan het Design System is het maken van A/B testen en nieuwe functionaliteiten veel sneller en efficiënter geworden.
Gebruikersonderzoek (UX Research)
Bij Voordeeluitjes staat onderzoek centraal. Ideeën voor de website komen voort uit pijnpunten van de gebruikers. Deze punten worden op verschillende manieren onderzocht:
Klantenservice: als er vaak dezelfde problemen worden vermeld, wordt daar notitie van gemaakt. De UX Designers, waaronder ik, bespraken deze punten samen met klantenservice om tot mogelijke oplossingen te komen. Wij analyseerde de klachten en problemen die plaatsvonden op de website en bedachten mogelijke oplossingen met stakeholders.
Enquête: veel van het onderzoek kwam ook rechtstreeks van de klanten. Door feedback te vragen door middel van formulieren (Tally), kregen we de meeste inzichten. De antwoorden op deze formulieren heb ik dagelijks bekeken om de laatste inzichten te bestuderen. Veel terugkomende thema’s werden behandeld in het team en aangepakt indien dit mogelijk was.
Microsoft Clarity: een van de leukere manieren om onderzoek te doen. Clarity is een tool waarmee je recordings kan kijken van het gedrag van de gebruikers op de website. Je kunt zo bijvoorbeeld zien waar de gebruiker allemaal klikt, waar die naar toe scrolt en hoe lang ze doen over hun doel behalen. Doordat Clarity deze gegevens opslaat, was het ook mogelijk om heatmaps te genereren van deze data. Deze onderzoeksmethode heb ik het meest gebruikt om problemen die bekend waren te bevestigen.
Preference tests: voordat we high-fi prototypes gingen maken voor A/B testen, kwam het voor dat we eerst wilde weten of het idee wat we hebben überhaupt aanslaat. Hiervoor benaderde we ons klantenpanel om voorkeuren te vragen over bepaalde ontwerpen.
A/B Testen: aan het einde van het ontwerpproces, werden de ontwerpen getest door middel van A/B Testen. De resultaten hiervan werden geanalyseerd samen met CRO om met de bevindingen de ontwerpen nog eventueel aan te passen.
UX Design
Ik heb aan veel mooie projecten mogen werken voor Voordeeluitjes. Een paar mooie voorbeelden zijn het toevoegen van huisdieren in boekingsproces, het laten zien van populaire faciliteiten bij hotels, ontwerpen voor de Mijn Voordeeluitjes account omgeving en het uitbreiden van de zoekfunctie van vakantieparken. Deze projecten heb ik doorlopen door de Design Thinking methode toe te passen, waarbij ik bij elk project eerst onderzoek heb gedaan (zie de onderzoeksmethoden hierboven), ideeën heb bedacht, besproken met stakeholders, ontwerpen heb gemaakt zowel lo-fi als hi-fi en daarna getest.
Design Thinking
Vanuit mijn vorige functie bij Gall & Gall heb ik gewerkt met de Design Thinking ontwerpmethode. Deze manier van werken helpt een ontwerper alle fases door te lopen om de gebruiker beter te begrijpen, ideeën te bedenken, prototypes te maken en deze uiteindelijk te testen. Toen ik begon bij Voordeeluitjes was er nog geen duidelijke manier van werken. In overleg met mijn team had ik voorgesteld om deze manier van werken te hanteren en sindsdien zijn we begonnen met het Design Thinking proces. Om het proces makkelijker te maken heb ik een template gemaakt in Figma die de stappen doorloopt, die gedupliceerd kan worden om aan een eigen ontwerp te beginnen.
Deze nieuwe manier van werken heeft er voor gezorgd dat de ontwerpbestanden compleet voorzien waren van het onderzoek, het probleem, ideeën, prototypes en testresultaten. Hierdoor zijn alle ontwerpstappen doorlopen en krijg je overzichtelijke en begrijpbare ontwerpdocumenten (in Figma).