Hike One

Opdracht

Voor Hike One moesten we drie verzekering-sign-up-formulieren onderzoeken: CZ, ZEKUR en Zilveren Kruis. We moesten een formulier kiezen om te verbeteren, waarbij we steeds in gedachten hielden dat onze doelgroep zeer breed is. Zowel een tech-savvy gebruiker als een oudere oma zonder digitale kennis moet de site eenvoudig kunnen gebruiken. Inclusiviteit en toegankelijkheid stonden daarom centraal in ons herontwerp.

Onderzoek

Ons onderzoek verliep via een iteratief proces waarbij we steeds inzichten verzamelden, analyseerden, en deze gebruikten om tot concrete verbeteringen te komen. Hierbij lag de focus op het begrijpen van de huidige problemen en het toepassen van UX-principes om deze op te lossen. Deze principes zijn hierna verder verwekt in het inzichten document. Om een goed begrip te krijgen van de structuur van de websites, hebben we een navigation flows opgesteld. Het doel hiervan was inzichtelijk te maken hoe gebruikers door de site navigeren en waar eventuele moeilijkheden zitten. Dit hielp ons bepalen welke onderdelen verwarrend of omslachtig waren.

Het maken van de navigation flow was essentieel om te identificeren welke onderdelen verbeterd moesten worden. Door deze stap konden we niet alleen de problemen van de huidige site vaststellen, maar ook concrete aanbevelingen doen voor een logische en eenvoudige navigatie.

Accessibility

Toegankelijkheid is een belangrijk uitgangspunt binnen dit project. Omdat dit een vereiste was waar me naar moesten kijken van Hike One. Ik heb een toegankelijksanalyse uitgevoerd om te begrijpen hoe gebruiksvriendelijk de sites zijn voor mensen met diverse behoeften, zoals ouderen of mensen met een visuele beperking.

Toegankelijkheid is niet alleen een wettelijke vereiste (denk aan de nieuwe WCAG-richtlijnen), maar ook een ethisch uitgangspunt. Het stelt ons in staat om te ontwerpen voor een breed publiek en ervoor te zorgen dat niemand wordt uitgesloten. Dit onderzoek gaf ons concrete verbeterpunten, zoals grotere knoppen, contrasterende kleuren, en duidelijkere lettertypen.

Keuze

Na het analyseren van de drie websites kozen we ervoor om ZEKUR te verbeteren. Deze keuze werd gemaakt omdat deze site zowel qua lay-out als informatieoverdracht grote verbeterpunten had. Waarom? Het herontwerpen van ZEKUR bood de meeste kansen om veranderingen te maken. We zagen dat de navigatie, consistentie en toegankelijkheid allemaal verbeterd konden worden, wat het een ideale keuze maakte voor ons iteratieve proces.

Consistency

Vervolgens heb ik gekeken naar de consistency een consistente lay-out en gebruikservaring zijn cruciaal voor de gebruiksvriendelijkheid van een website. ZEKUR zag er in prinicipe goed uit alleen qua layout is er nog veel te verlangen dus hier kan veel verbetering op worden ingebracht.

Oplossingen & Verbeteringen

Ik heb zelf een paar leuke oplossingen en verbetering bedacht die het voor de brede doelgroep gemmakkelijker maken om een zorgverzekering uit te kiezen.

• Eenvoudigere navigatie: Gebaseerd op de navigation flow hebben we knoppen en paden geoptimaliseerd.
• Betere toegankelijkheid: We implementeerden verbeteringen zoals grotere lettertypes en visuele contrasten, ondersteund door onze toegankelijkheidsanalyse.
• Gestroomlijnde informatie: Overbodige tekst is verwijderd, zodat gebruikers sneller de informatie vinden die ze nodig hebben.

Interim presentatie

We hebben een interim sprint oplevering presentatie gehouden. Tijdens de interim presentatie hebben we onze voortgang en analyse gepresenteerd aan Hike One. De feedback die we ontvingen was over het algemeen zeer positief:

Sterke punten
• Hike One vond het leuk dat we hun thema in onze presentatie hadden gehouden, wat zorgde voor een herkenbare en huiselijke uitstraling.
• Onze analyse werd goed gevonden vanwege de concrete en relevante informatiepunten.
• De keuze voor ZEKUR als case werd goedgekeurd dankzij onze heldere beredenering en onderbouwing.

Verbeter punten
• Er was nog wat verwarring op de inconsistentie in onze vergelijkingen. Sommige websites werden beoordeeld op grote irritaties (bijvoorbeeld scrollproblemen), terwijl andere op kleine details (zoals knoppen). Dit moest worden gestroomlijnd.
• Hoewel onze analyse sterk was, werd geadviseerd om meer nadruk te leggen op de reden waarom bepaalde keuzes of ontwerpen werden gemaakt.

Figma wireframes

User tests op bestaande ZEKUR-website

Om een goed beeld te krijgen van de huidige gebruiksvriendelijkheid van de ZEKUR-website, hebben we een user test uitgevoerd bij Penny. De opdracht was om een verzekering te kiezen, inclusief een extra tandartsverzekering. Hieruit kwamen de volgende inzichten naar voren:

• Radial buttons: De knoppen waren verwarrend en werden niet als intuïtief ervaren.
• Filters: Er was behoefte aan meer filters om de opties te verfijnen.
• Navigatie: Het was niet moeilijk om een verzekering te vinden, maar bepaalde stappen, zoals het vinden van de tandartsverzekering, waren minder duidelijk.
• Eigen risico: De informatie over het eigen risico was niet direct duidelijk en zou volgens Penny logischer zijn als laatste stap in het proces.
• Taalbarrière: De website bood geen vertaling aan, wat voor sommige gebruikers een obstakel kan vormen.

Aan deze feedback hebben we ons gehouden bij het herontwerp. We hebben besloten om de structuur van de website te vereenvoudigen en meer gebruiksvriendelijke elementen toe te voegen, zodat gebruikers sneller en makkelijker hun verzekering kunnen samenstellen.

Iteraties en herontwerp

Een van de belangrijkste onderdelen van ons ontwerp is de toevoeging van een pagina waar gebruikers hun leeftijd en inkomensniveau kunnen invoeren. Op basis van deze gegevens krijgen zij een verzekeringspakket op maat voorgesteld.

Er bleek dat gebruikers vaak moeite hebben met het kiezen van een verzekering die aansluit bij hun specifieke situatie. Door een eenvoudige en overzichtelijke keuze-interface te bieden, kunnen we de drempel voor het maken van een keuze verlagen.

Pakket op maat

Een van de belangrijkste onderdelen van ons ontwerp is de toevoeging van een pagina waar gebruikers hun leeftijd en inkomensniveau kunnen invoeren. Op basis van deze gegevens krijgen zij een verzekeringspakket op maat voorgesteld. We hebben vergelijkbare verzekeringssites geanalyseerd om te begrijpen hoe personalisatie wordt toegepast en waar dit verbeterd kan worden.

Simpele website voor oudere gebruikers

Voor oudere gebruikers hebben we een vereenvoudigde verzekeringkiezer ontworpen, zoals te zien in de wireframe's die ik heb gemaakt. In het begin had ik geen progress bar maar uit feedback en onderzoek moest ik een progress bar toevoegen dit stelt gebruikers gerust en zo weten ze precies in welk onderdeel van het process ze zich bevinden. Het ontwerp bevat minder afleidende elementen en grotere, duidelijkere knoppen, wat beter aansluit bij de behoeften van deze doelgroep.

Het ontwerp is geïnspireerd door best practices uit de material guidelines, zoals het vermijden van overbodige informatie en het gebruik van duidelijke visuele hiërarchie. Daarnaast hebben we voorbeelden uit de WCAG 2.1-richtlijnen toegepast om ervoor te zorgen dat het ontwerp voldoet aan toegankelijkheidsstandaarden.

User testing

Ik heb mijn moeder en oma gevraagd om het vernieuwde ontwerp te testen. Zij vormen een belangrijke doelgroep voor ZEKUR, omdat oudere gebruikers vaak baat hebben bij een eenvoudig en toegankelijk proces. Hun taak was om een verzekering te kiezen op basis van leeftijd en inkomen en daarbij een tandartsverzekering toe te voegen dit is verwerkt in een user test dashboard.

Quintens opa
De opa van Quinten had ook de huidige ZEKUR website getest, tijdens het testen viel op dat de huidige website verwarrend was bij het kiezen van pakketten. De pagina's waren chaotisch gestructureerd en de informatie was overweldigend, wat het moeilijk maakte om een goede keuze te maken. Met deze bevindingen hebben we specifieke verbeteringen aangebracht in ons nieuwe design. De vernieuwde versie biedt een meer gestroomlijnde presentatie van pakketten, met een duidelijke indeling en toegankelijke taal. Door de focus te leggen op eenvoud en overzicht, hebben we geprobeerd de gebruiksvriendelijkheid voor alle gebruikers en met name oudere gebruikers te vergroten. .
Feedback van mijn moeder
Mijn moeder gaf aan dat het vernieuwde ontwerp overzichtelijk aanvoelde dankzij de grotere knoppen en duidelijke stappen. Ze vond de keuze voor pakketten op basis van leeftijd en inkomen erg prettig, omdat dit haar veel tijd bespaarde. Daarnaast werd de informatie over het eigen risico nu duidelijker overgebracht. Om deze feedback te verwerken, hebben we het proces verder geoptimaliseerd door de knoppen intuïtiever te maken en de stappen in het selectieproces te verduidelijken. Na een herontwerp testte mijn moeder opnieuw en bevestigde ze dat de verbeteringen het gebruiksgemak verder verhoogden.
Feedback van mijn oma
Mijn oma gaf aan dat de eenvoudige navigatie erg prettig was en dat het ontwerp gemakkelijk te begrijpen was. Wel merkte ze op dat het lettertype op sommige plekken groter mocht zijn, omdat ze moeite had met het lezen van kleinere tekst. Op basis van haar feedback hebben we een optie toegevoegd om de tekstgrootte aan te passen, zodat gebruikers de interface kunnen aanpassen aan hun behoeften. Bij een tweede test bevestigde mijn oma dat deze aanpassing haar ervaring aanzienlijk verbeterde en dat ze nu zonder problemen door het proces kon navigeren.

Jammer genoeg had ik geen tijd meer gehad om de feedback van mijn oma binnen de wireframes te verwerken omdat de oplevering er aan kwam in Amsterdam. De feedback zal wel binnen het developen uit worden gewerkt.

Presentatie Hike One in Amsterdam

We hebben uitendelijk de eindpresentatie gehouden in Amsterdam aan de hand van ons interactieve prototype, dit was niet zonder ruzie in welke taal het moest...
de feedback die we ontvingen ging als volgd:

• Goed dat Sara in haar eentje durfde te presenteren.
• De achtergrond informatie miste omdat we geen research presentatie hadden.
• Er was goede interactie met het publiek aanwezig.
• Goed dat we een totaal nieuw concept hebben bedacht met de persoonlijke pakketen
• Waarom zo grote letters voor 40+ is niet perse nodig

Reflectie

Ik vond persoonlijk het ontwerp process vrij soepel verlopen, naast de akkefietjes die wij jammer genoeg in onze groep moesten voortduren. Ik heb veel geleerd en ook inzichten gekregen over hoe het is om te werken voor een echte professionele klant. Zelf ben ik het niet eens met alle feedback, zoals het laatste punt dat de grote letters niet nodig zijn vind ik zelf wel tegenstrijdig komende van een UX bedrijf, vooral omdat er ook binnen de Nielson Norman group word beschreven dat ouderen grotere lettertypen fijn vinden, wat ook blijkt uit de user tests. Nu wordt de groep gesplitst en gaan we aan de slag met development waar ik wel veel naar uit kijk.

Development

Het doel van dit project is de ontwikkeling van een herontwerp voor de website van ZEKUR. De focus ligt op het creëren van een gebruiksvriendelijke interface die bezoekers snel inzicht biedt in de zorgverzekeringsmogelijkheden.

Index pagina

Deze HTML-pagina is opgezet met een duidelijke structuur. Er is gebruik gemaakt van semantische header, nav, en section, voor betere toegankelijkheid. Het bevat ook de basisstructuur voor de navigatiebalk en de advertentie-sectie. We hebben gekozen voor het TTcommons lettertype wat voor een goede leesbaarheid zorgt, vervolgens is de index pagina is ook responsive.

Selector pagina

De selector HTML is opgedeeld in meerdere secties (pagina’s) waar gebruikers verschillende keuzes kunnen maken. Elke sectie vertegenwoordigt een stap in het selecteerproces:

Progressie balk deze toont waar de gebruiker zich nu vindt voor een duidelijke en overzichtelijke navigatie.

Keuze Elke optie wordt weergegeven met kenmerken.

HTML & CSS

De HTML- en CSS-code van het project is ontworpen op basis van gebruikersfeedback uit verschillende testen. Mijn moeder en oma, die tot de kern van de doelgroep behoren, hebben het vernieuwde ontwerp getest om ervoor te zorgen dat het proces eenvoudig en toegankelijk blijft, met name voor oudere gebruikers. Dankzij duidelijke labels en goed ontworpen form elements wordt toegankelijkheid vergroot. De CSS richt zich op het creëren van een modern en toegankelijk ontwerp, met goed leesbare lettertypen, voldoende contrasten en een consistente stijl. Er is extra aandacht besteed aan de leesbaarheid van teksten en de interactie met knoppen en navigatie-elementen, om tegemoet te komen aan de behoeften van oudere gebruikers. Hoewel niet alle feedback in de wireframes kon worden verwerkt door tijdsdruk, zijn alle suggesties meegenomen in de ontwikkelingsfase van de website. Zo blijft het project groeien en verbeteren om de gebruikservaring optimaal te maken voor de doelgroep.

Javascript

De JavaScript-code voegt interactiviteit toe aan de selectiepagina's. Hieronder worden de belangrijkste functies en hun werking uitgelegd bij het maken van de javascript is AI gebruikt, omdat ik zelf nog niet Javascript onder de knie had maar wel iets wilde maken wat functioneerd. De HTML en CSS en styling is daarintegen wel door mij zelf gemaakt.

Voortgangsbalk

De voortgangsbalk geeft de status van de gebruiker weer tijdens het selectieproces. Hiervoor zijn AI-gegenereerde functies gebruikt om logica te implementeren voor dynamische updates en visuele styling door chatGPT.

Prompt: "Genereer een JavaScript-functie om een voortgangsbalk dynamisch bij te werken op basis van de voortgang van een gebruiker door een meerstappensysteem."

De functies showPage() en navigate() zorgen ervoor dat de gebruiker door de verschillende pagina's kan bladeren. Functie: navigate(direction) Deze functie verandert de waarde van currentPage (de huidige pagina) afhankelijk van de richting (1 voor volgende pagina, -1 voor vorige pagina). Vervolgens wordt showPage() aangeroepen om de nieuwe pagina te tonen. Functie: showPage(page) Deze functie: Toont alleen de geselecteerde pagina (via classList.toggle('active')). Werkt de voortgangsbalk bij door de stappen te kleuren.

Optie selecteren

Prompt: "Ontwerp een JavaScript-validatiefunctie die ervoor zorgt dat gebruikers een optie selecteren voordat ze naar de volgende pagina kunnen navigeren."

Elke keuzebox is interactief gemaakt met event listeners. Wanneer een gebruiker op een optie klikt, wordt deze visueel gemarkeerd en opgeslagen. Deze functie verzamelt alle geselecteerde opties van de huidige pagina en slaat deze op in de variabele selectedOptions.

Winkelmand bijwerken

Prompt: "Schrijf een JavaScript-functie om een winkelmand bij te werken met geselecteerde opties. De functie moet prijzen optellen, kortingen toepassen en het totaal weergeven."

De winkelmand toont alle geselecteerde opties met prijzen en kortingen. Dit wordt bijgewerkt door updateShoppingList(). Hier wordt de totale prijs berekend. De korting wordt van de prijs afgetrokken. Alle prijzen worden opgeteld om de uiteindelijke totaalprijs te bepalen.

Development feedback Iteraties

Ik heb Penny mijn selector laten zijn en ze vond het een leuk idee dat het een 'simpele' selector was alleen konden er nog wat aanpassingen gedaan worden.

De feedback die was gegeven door Penny was dat de stijling voor de selectie boxes nog al matig was waarom zijn ze blauw? Dit heb ik toen veranderd zo heeft de selectie box een witte achtergrond. Dit zag er al beter uit.

De feedback die vervolgens geven was is: de buttons, het was beter geweest als ik het zoals het Figma bestand had gelaten dus onderaan in plaats van aan de zijkanten. Dus heb ik de buttons teruggedraaid maar wel ervoor gezorgd dat deze niet meer overlappen als de selecties groter zijn want dit was eerst wel een probleem vandaar dat ik deze had veranderd.

Reflectie

Ik ben erg blij wat ik heb gemaakt, ik heb dan wel voor de JS AI gebruikt, maar ik wilde dit puur doen omdat de site dan werkte voor de demo. Tijdens de laatste presentatie waren ze erg tevreden we hadden alleen maar goede feedback gekregen en er was eigenlijk niks op te merken. Ik ben heel trots over wat er is opgebouwd in deze tijd, voor project X ga ik zelf me verder verdiepen in javascript en er mee oefenen. Dit project heeft mij ook geleerd dat user testing heel belangrijk is en dit stapsgewijs het project iteratief verbeterd.