? UX Onderzoek: Claro Clinic — Joran Kooij
Selected Work · 08

Claro
Clinic.

Patiënten verwachten vertrouwen. En dat begon hier mis te lopen vóór de eerste scroll.

UX Onderzoek Heuristic Evaluation Peer Review LUK 8.1 · 8.3 · 8.4
Methodologische Leeswijzer: Deel 1 van 2

Dit is de eerste van twee gekoppelde showcases over Claro Clinic. In dit document (Deel 1) focussen we op de UX Audit en probleemanalyse van de bestaande website. De oplossingsgerichte onderzoeksvragen en de uitwerking van het iteratieve ontwerpproces worden aansluitend beantwoord in Deel 2: Claro Clinic Ontwerp.

Methodologische verantwoording: Double Diamond & Erika Hall

Binnen dit gehele traject (Claro Clinic Deel 1 & 2) hanteer ik de Double Diamond als overkoepelend ontwerpproces. Deze showcase (Deel 1) representeert de Discover en Define fase. Om er zeker van te zijn dat ik dit vooronderzoek niet willekeurig aanvloog, heb ik de UX Audit gestructureerd volgens Erika Hall's Onderzoekscyclus (2013). Dit vormt de fundering van dit specifieke document.

Deze cyclus bestaat uit zes stappen: Define the Goal → Select the Approach → Plan, Prepare and Design → Execute and Collect → Making Sense of the Results → Consider Next Steps. Door dit stappenplan zichtbaar te volgen, voorkwam ik dat ik overstapte van "iets ziet er lelijk uit" naar "dus ik ga het opnieuw ontwerpen" zonder een verdedigbare tussenstap.

Docentweergave (Criteria & Verantwoording)

Bekijk hier de BC die ik met dit document aantoon.

BC 8.1.1

Je maakt bij Opdracht duidelijk wat er van je gevraagd wordt en welke doelen jouw bijdragen dienen te bereiken.

Ik toon hier de originele (brede) briefing van Tije (Eigenaar Like Bamboo, mijn stageplek), maar neem daar geen genoegen mee. Ook omschrijf ik direct de praktische vertaalslag: ik baken de brede vraag af naar de kritieke conversiepaden en stel een scherpe hoofdonderzoeksvraag op. Hierdoor neem ik de regie en maak ik duidelijk welk meetbaar doel mijn audit dient.
BC 8.1.2

Je zet relevante theorie over mensgerichte ontwerpmethodes in om jouw keuzes te onderbouwen.

Ik gebruik theorie niet als namedropping, maar om expliciet mijn evaluatie-keuzes te sturen. Omdat we in een kwetsbaar medisch domein zitten, hanteer ik geen generieke theorie, maar gericht Fogg’s Prominence-Interpretation (voor vertrouwen) en Norman’s Visceral layer (voor de emotionele eerste indruk). Ik verantwoord hiermee exact wáárom ik deze specifieke mensgerichte brillen opzet in deze situatie.
BC 8.3.1

Je verzamelt bij je ontwerpactiviteiten methodisch inzichten met betrekking tot de te behalen doelen en beoordeelt de toegevoegde waarde daarvan voor het beantwoorden van de ontwerpvraag.

Ik verzamel inzichten uiterst methodisch door vooraf een strak, theoretisch evaluatieprotocol op te stellen. Om mijn eigen expert bias uit te sluiten, valideer ik deze inzichten via een proxy-gebruikersevaluatie (in lijn met eerdere feedback van Daniël dat ik gebruikers meer kan betrekken bij het onderzoek). Omdat deze showcase (Deel 1) onlosmakelijk verbonden is met het herontwerp (Deel 2), hebben deze verzamelde inzichten directe toegevoegde waarde: ze vormen de onmisbare, objectieve fundering om de uiteindelijke ontwerpvraag in het vervolgdocument überhaupt succesvol te kunnen beantwoorden.
BC 8.3.2

Je formuleert heldere Conclusie waar bruikbare verbetersuggesties uit voortvloeien.

Ik zet mijn ruwe testdata niet zomaar op papier, maar structureer de ernst ervan via Nielsen’s Severity Ratings. Conform de expliciete eis van Eduard zijn de zes kernconclusies direct voorzien van screenshot-bewijs ("make the invisible visible") én een concrete actie (verbetersuggestie) per fout. Omdat we de site niet slechts patchen maar in Showcase 2 herontwerpen, overstijg ik daarna deze losse actiepunten door ze te bundelen in twee overkoepelende 'How Might We' vragen, + een Plan van Eisen. Zo lever ik zowel directe verbetersuggesties als een strategisch startpunt voor het herontwerp.
BC 8.4.1

Je bereidt zelfstandig methodische ontwerpactiviteiten voor die je passend bij de situatie zelfstandig óf met andere belanghebbenden kunt uitvoeren.

Ik toon hier de proactieve houding die Robert eist qua eigenaarschap. Ik ben niet passief een eisenlijstje gaan afvinken, maar heb zélf het initiatief genomen om een methodische audit op te tuigen. Ik heb het evaluatieprotocol bedacht, de proxy-testen uitgewerkt en de kaders met de opdrachtgever afgestemd. Hiermee toon ik aan dat ik compleet zelfstandig een onderzoeksactiviteit passend bij deze unieke situatie kan inrichten.
Define the Goal (Opdracht)

De kaders bepalen

Tije van Like Bamboo overhandigde me als startpunt een brede opdracht: "Kijk eens naar Claro Clinic en kom met een verbeterplan in hoe zij hun website kunnen verbeteren. Je kunt eventueel ook al een her-ontwerp voor ze maken. Om te weten wat we écht wilden bereiken, moest ik deze vraag eerst concreter maken.

De makkelijkste weg is om ja te knikken en direct een audit van de héle website te plannen. Maar onderzoeken zonder duidelijke afbakening is niet zo slim. Om de opdracht scherp te stellen, heb ik eerst een korte verkenning (quickscan) van de huidige website gedaan.

Uit deze snelle verkenning viel direct op dat de homepage rommelig oogde en de boekingsflow frictie bevatte. Met die observaties ben ik het gesprek met Tije aangegaan, waarbij we de volgende vaste kaders hebben vastgesteld:

  1. Focus op de kritieke conversiepaden: In plaats van de hele site te auditen, richten we het onderzoek uitsluitend op de Homepage en de Boekingsflow. Dat is tenslotte de plek waar potentiële patiënten beslissen om wel of geen afspraak te maken. De ontwerpeisen die we daar ophalen, kunnen we later altijd als basis gebruiken voor de rest van de site.
  2. Onderzoekstriangulatie (Expert review + Gebruikerstest): Om te voorkomen dat ik me blindstaar op mijn eigen 'expert bias', spraken we af om de huidige website op twee manieren te analyseren. Ik voer eerst zelf een Heuristische Evaluatie uit om de structurele UX-fouten in kaart te brengen. Daarnaast laat ik drie personen uit de doelgroep de huidige site doorlopen met behulp van een formulier en gerichte taken, gestructureerd volgens de theorie (HAN)''EXPERTS, PEERS & GEBRUIKERS'''. Door mijn eigen observaties te vergelijken met de onbevooroordeelde ervaringen van echte gebruikers, versterken we de betrouwbaarheid van de audit.

Ik stelde de volgende overkoepelende onderzoeksvraag op voor dit vooronderzoek:

Hoofdonderzoeksvraag: "Welke UX- en usability-knelpunten op de huidige website van Claro Clinic belemmeren potentiële patiënten bij het maken van een afspraak?"

Deelvragen

Om deze hoofdonderzoeksvraag te kunnen beantwoorden, heb ik hem opgedeeld in gerichte deelvragen. Deze vragen zijn een vertaling van de afgesproken kaders (focus op de homepage en boekingsflow) gecombineerd met mijn initiële verkenning. Volgens de theorie van Fogg over Web Credibility (2003) is 'vertrouwen' namelijk de allerbelangrijkste conversie-metric voor platforms in de gezondheidszorg. Dat verklaart waarom ik deze begrippen expliciet meeneem in mijn bevraging.

De onderstaande deelvragen beantwoord ik in dit document door middel van de Heuristische Evaluatie en Gebruikerstest. De inzichten die hieruit voortkomen, vertaal ik aan het eind van dit document naar 'How Might We' ontwerpvraagstukken voor het daadwerkelijke herontwerp (Datapunt 2).

  1. Welke elementen op de huidige homepage versterken of ondermijnen het vertrouwen van een eerste bezoeker?
  2. Waar in de huidige boekingsflow ervaren gebruikers onnodige frictie?
  3. Is de huidige visuele identiteit consistent genoeg om een professionele medische kliniek uit te stralen?

Praktijkkaders

Naast de onderzoeksvragen zijn er randvoorwaarden en uitgangspunten meegegeven vanuit het stagebedrijf (Like Bamboo):

  • Business Goal (Pitch): Het project fungeert als acquisitie-middel ('visitekaartje') voor Like Bamboo om Claro Clinic te overtuigen van een marketing traject. Daarom wordt er bewust Desktop First ontworpen om maximale visuele impact te maken tijdens de presentatie.
  • Merkrestricties: Het bestaande logo van Claro Clinic en de inhoudelijke copy (het feitelijke dienstenaanbod) staan vast. De digitale merkbeleving (kleurenpalet, typografie, vormtaal) mag wél volledig opnieuw uitgevonden worden.
  • Sfeer & Art Direction: De huidige website voelt aan als een "koude, afstandelijke medische kliniek" (briefing Tije). De eis is om met behulp van kleurentheorie, warme typografie en consistente design tokens een veilige sfeer te creëren, zónder medische autoriteit te verliezen.
  • Scope & Tijd: Het onderzoek en de ontwerpkern focust zich primair op de twee grootste knelpunten: de Homepage en de Boekingsflow. Het volledige herontwerp moest bovendien in een tijd van ongeveer 2 weken worden afgerond.
Opdrachtgever
Like Bamboo
Type
UX Audit & Herontwerp
Methode
Heuristic Evaluation + (HMW)
Oude website Claro Clinic inclusief rare hero
De huidige landing van Claro Clinic (April 2026)
Select the Approach (Meetlat)

De bril kiezen.

Voordat ik één pagina had bekeken, moest ik beslissen: met welke criteria ga ik beoordelen? Een audit zonder vooraf bepaalde meetlat is geen onderzoek maar een persoonlijke mening. Voor de basis-bruikbaarheid gebruikte ik de industriestandaard (de 10 heuristieken van Nielsen). Echter, omdat Claro Clinic opereert in een privacy-gevoelig medisch domein, kon ik niet volstaan met uitsluitend generieke regels. Bezoekers zijn hier zenuwachtig, twijfelen en zoeken veiligheid. Daarom breidde ik mijn meetlat uit met theoretische kaders die specifiek focussen op het wekken van vertrouwen en het verlagen van emotionele drempels.

1. Norman's Visceral Layer (2004)

Norman onderscheidt drie niveaus van emotionele verwerking. Het visceral niveau; dus de directe, pre-cognitieve eerste indruk is bij Claro Clinic bijzonder relevant. Iemand die overweegt een SOA-test te maken, is al kwetsbaar. Als de pagina in de eerste milliseconden niet veilig en professioneel aanvoelt, verlaat de bezoeker de pagina voordat er ook maar één woord gelezen is. Dit kader gebruikte ik om de eerste 5 seconden van de gebruikerservaring te beoordelen.

2. Nielsen's Heuristieken & Cognitive Load (1994)

Nielsen's 10 heuristieken zijn de standaard meetlat voor usability-audits. Ik paste ze toe als systematische checklist om te voorkomen dat ik alleen de opvallende problemen zou aanwijzen. Aanvullend hanteerde ik het principe van Cognitive Load minimaliseren: in een context waar een bezoeker al emotioneel belast is (een medische afspraak), mag de interface zo min mogelijk mentale energie vragen. Dit kader gebruikte ik primair voor de beoordeling van de boekingsflow.

3. Fogg's Prominence-Interpretation (2003)

In de medische wereld is geloofwaardigheid de drempel vóór elke andere actie. Fogg's model stelt dat credibility ontstaat op het snijpunt van Prominence (wat valt op?) en Interpretation (hoe wordt dat beoordeeld?). Ik koos dit kader als primaire lens voor de homepage, omdat het me dwingt te beoordelen of de meest opvallende elementen van de pagina vertrouwen opbouwen of juist afbreken, nog voordat ik een eigen oordeel vel.

Verworpen methodes & beperkingen

Een methodekeuze is pas verdedigbaar als je weet wat je niet doet. Ik heb drie alternatieve methodes bewust afgewogen en verworpen:

  • Analytics & heatmaps: Als eerste stap wil je als UX'er het liefst kijken naar échte gebruikersdata; waar klikken mensen, waar haken ze af, hoe ver scrollen ze? Hiervoor had ik toegang nodig tot de Google Analytics van Claro Clinic. Die toegang kan helaas niet worden verstrekt.
  • Cognitive Walkthrough: Een Cognitive Walkthrough focust zich op de stappen van één specifieke taakflow (bijv. het invullen van een formulier). Omdat ik bij de eerste ''check'' zag dat de huidige Claro Clinic website fundamentele problemen had op het gebied van vertrouwen, sfeer en eerste indruk (aspecten die een taak-analyse niet meet), was een Heuristische Evaluatie met de focus op credibility (Fogg) een veel completere methode om de algehele UX-schade in kaart te brengen.
Plan & Prepare (Structurering)

De bril opzetten.

Voordat ik door de site ging klikken, had ik een duidelijke richtlijn nodig. Om te bewijzen dat ik zelfstandig een ontwerponderzoek kan voorbereiden, maakte ik eerst een evaluatieprotocol.

Scope

Ik bakende de evaluatie af tot twee pagina's. Die keuze is niet willekeurig want samen vormen ze het hart van de patiënt-funnel. Als een bezoeker op de homepage afhaakt of op de afsprakenpagina vastloopt, maakt de rest van de site niet meer uit.

Pagina
Doel in de funnel
Primaire theoretische lens
Homepage
Eerste indruk, vertrouwen, dienstaanbod
Fogg (credibility), Norman (visceral), Nielsen (heuristieken)
Afsprakenpagina
Conversie (afspraak maken)
Nielsen (heuristieken & cognitive load)

Evaluatieprotocol

De theoretische kaders combineerde ik tot één geïntegreerde "meetlat". Per pagina doorliep ik dezelfde procedure:

  1. Eerste indruk (5 sec): Pagina openen, niet scrollen, eerste visceral reactie noteren; wat kan een bezoeker voelen op dat moment? (Norman, 2004)
  2. Heuristiekenscan: Nielsen's 10 heuristieken (Nielsen, 1994) als checklist doorlopen. Per heuristiek noteren: voldoet / aandachtspunt / schending
  3. Credibility-check: Fogg's Prominence-Interpretation grid toepassen; welke elementen vallen op, en hoe worden ze geïnterpreteerd? (Fogg, 2003)
  4. Severity toekennen: Elke bevinding beoordelen op een driepuntsschaal

Severity-schaal

Niet elke fout is even urgent. Om te voorkomen dat ik straks alles tegelijk probeer te fixen, classificeerde ik elke bevinding op impact:

Critical

Directe impact op vertrouwen of conversie.

High

Verzwakt de gebruikservaring significant.

Medium

Storend maar niet blokkerend.

Opzet Validatie met gebruikers (BC 4.1)

Een audit is slechts theorie; de aannames die hieruit voortkomen wilde ik in de praktijk toetsen om confirmation bias te voorkomen. Om aan te tonen dat ik methodische ontwerpactiviteiten zelfstandig kan voorbereiden (BC 4.1), heb ik in deze plan-fase de validatie-opzet bepaald.

Op basis van het methodisch kader uit Experts, Peers & Gebruikers (Van Hofwegen et al., 2025) heb ik een gestructureerd formulier opgesteld voor een proxy-doelgroep. Voorafgaand aan de test is via een informed consent expliciet toestemming gevraagd en gekregen om de testresultaten en citaten onder hun eigen (voor)naam in dit openbare portfolio te verwerken. De vragen zijn bewust niet-sturend geformuleerd en gericht op beleving, niet op ontwerp-oordelen. Het formulier leidt elke deelnemer stapsgewijs door de live site van Claro Clinic:

  1. Eerste indruk: Homepage openen, 5–10 seconden kijken zonder te scrollen. Waar gaan je ogen naartoe? Komt de kliniek betrouwbaar over?
  2. Navigatie: Probeer informatie over PrEP-consulten te vinden. Kon je het vinden? Waar liep je vast?
  3. Begrip: Lees de teksten op de informatiepagina's. Helder of te medisch?
  4. Conversie: Navigeer naar de afsprakenpagina en vul fictief wat data in. Liep je tegen irritaties aan?
Execute & Collect (De Audit)

Het protocol doorlopen.

Plan klaar, tijd om te scannen. Ik liep de website door met mijn theoretische bril op. Niet zoeken naar wat ik zelf 'lelijk' vond, maar objectief turven waar de site de regels brak. Hier is de uitwerking van mijn onderzoek; het bewijs waarop mijn latere conclusies zijn gebaseerd.

Stap 1: Eerste indruk (Visceral reactie, 5 seconden)

Homepage

"Het eerste wat opvalt is een grote foto met een jonge mannelijke arts in witte jas met stethoscoop ,het ziet er fake uit. Bovenaan draait een balk met quick-wins: 'Klantbeoordeling 9.8', 'Gratis parkeren', 'BIG-geregistreerde arts'. Goed dat die er staan, maar ze vliegen voorbij. De teal-kleur is consistent, maar zodra ik scroll breekt er ineens een paarse gradient in bij de vaccinatiesectie. Dat is niet consistent.

Afsprakenpagina

"Titel: 'Afspraak maken', dat is duidelijk. Pagina laadt erg sloom. Eenmaal op de pagina zit de module ''below the fold''. Daarboven zit een alinea tekst die de diensten op de homepage herhaalt. Pas daarna verschijnt de boekingswidget; een 3-staps formulier met sidebar ('Kies je dienst', 'Datum & tijd', 'Jouw informatie'). Dat is prima, maar de nieuwe pagina, en de tekst erboven is onnodig. En de 'Ga verder'-knop is super inconsistent met de rest. ''Waarom?"

Stap 2: Nielsen's 10 Heuristieken — Checklist

Per heuristiek (Nielsen, 1994) noteerde ik of de pagina voldoet, een aandachtspunt heeft, of de heuristiek schendt:

Heuristiek
Home
Afspraak
Notitie
1. Visibility of system status
✅
✅
Afspraken-wizard heeft een duidelijke step-indicator die de voortgang communiceert.
2. Match between system and world
✅
✅
Taalgebruik ("PrEP", "SOA zorg") sluit aan bij de doelgroep zonder overdreven medisch jargon.
3. User control and freedom
✅
✅
Boekingswizard laat je eenvoudig terugkeren naar een eerdere stap via kruimelpad.
4. Consistency and standards
❌
❌
Mix van teal, paars en grijstinten. 5 verschillende knop-stijlen. Dit schendt conventies zwaar.
5. Error prevention
✅
✅
Datumprikker voorkomt data in het verleden en formulier blokkeert lege submits.
6. Recognition rather than recall
⚠
✅
Navigatie werkt met dropdowns; diensten zijn wel zichtbaar op de homepage als kaarten.
7. Flexibility and efficiency
✅
⚠
Duidelijke 'Afspraak maken'-knoppen, wel een overbodige flow-stap.
8. Aesthetic and minimalist design
❌
❌
Veel visueel lawaai. Onnodige teksten, veel concurrerende kleuren op de homepage.
9. Recognize, diagnose errors
✅
✅
Rode teksten bij ongeldige formulier-velden ("Verplicht veld"). Voldoende duidelijk.
10. Help and documentation
⚠
⚠
Geen FAQ op de homepage, en op afsprakenpagina onbreekt een tooltip bij medische termen.

✅ = voldoet ⚠ = aandachtspunt ❌ = schending (opgenomen als bevinding)

Stap 3: Fogg Credibility Check

Per geloofwaardigheidsfactor (Fogg, 2003) noteerde ik of het element aanwezig, afwezig of actief schadelijk was:

Principe
Status
Notitie
Prominence (Fogg)
Schadelijk
Hero toont een high-end stockfoto van een fake arts. Extreem prominent, maar je ziet dat dit AI is en daarom maakt het de kliniek ongeloofwaardig, dit is zichtbaar geen echte medewerker.
Surface Credibility (Fogg)
⚠
Basis-layout is niet professioneel (teal, clean typografie), er zijn veel inconsitenties in kleur en layout, zoals de onverwachte paarse gradient bij vaccinaties wat de visuele eenheid breekt. Meerdere identiteiten op één pagina.

Theorie is niet heilig ''Daniël'' (Validatie met gebruikers).

Tot nu toe was de audit gebaseerd op mijn eigen blik als UX'er. Dat is nuttig om snel problemen te signaleren, maar het blijft een expert-oordeel. Om te checken of deze expert-bevindingen ook buiten mijn eigen hoofd standhielden, wilde ik de live site voorleggen aan mensen uit de daadwerkelijke doelgroep.

Formeel gebruikersonderzoek met huidige patiënten was niet haalbaar, bij zoiets persoonlijks als een SOA-test vraag je niet zomaar mensen in een wachtkamer van een kliniekom mee te doen. Daarom heb ik een kleinschalige gebruikersvalidatie opgezet met een proxy-doelgroep: jongvolwassenen uit mijn eigen netwerk die seksueel actief zijn en ervaring hebben met SOA-testen of vaccinaties: vier deelnemers (2 man, 2 vrouw, leeftijd 24–28). Geen patiënten van Claro Clinic, maar demografisch wel representatief voor wie de website moet bedienen. Omdat dit geen echte patiënten waren, kan ik niet uitsluiten dat hun emotionele drempel bij het daadwerkelijk invullen van een SOA-test anders zou zijn. Die beperking neem ik mee in mijn conclusies.

Inzichten uit de validatie (4 deelnemers)
  • Gebrek aan geloofwaardigheid (Fake Hero): Drie van de vier deelnemers vielen direct over de hero-afbeelding. Evelien noemde het "dat mannetje met de gebleekte tanden op de voorpagina is cringe". Madelief en Dries zagen direct dat het nep was: "Het ziet eruit als AI of een foto van internet". Madelief benadrukte dat dit haar vertrouwen schaadde: "Niet echt betrouwbaar, dit komt vooral door de AI/stock foto."
  • Visuele chaos en commerciële 'vibe': De rommelige UI (verschillende knopkleuren en bewegende letters) zorgde voor wantrouwen. Dries vond de bewegende letters "onprofessioneel". Evelien gaf aan: "Dat je verschillende manieren en knoppen hebt is onduidelijk en verwarrend." Madelief voelde bovendien te veel commercie: "Ze doen een soort verkooppraatje... dit geeft mij als patiënt minder vertrouwen om hier écht een afspraak te maken."
  • Cognitive load & verwarring in de boekingsflow: De lappen tekst op de pagina schrikken af. "Wel veel tekst, ik haak wel snel af" (Dries). Binnen de widget ontstond frictie: Raoul begreep de UI niet ("Sommige vakjes van de data zijn half ingevuld, ik weet niet wat dit betekent") en Evelien schrok van de foute microcopy: "Op de laatste pagina voor je afrondt staat er al 'bevestigd', dus heeft Jan Henk nu een bevestigingsmail? Dat is niet zo fijn."
  • Positieve noot: De navigatie-structuur was in de basis goed. Alle deelnemers wisten feilloos de PrEP-informatie te vinden. Raoul en Evelien vonden de medische teksten (nadat ze eenmaal gevonden waren) overzichtelijk en helder geschreven.

Wat dit opleverde (Triangulatie): De gebruikers gaven me niet alleen de kwantitatieve bevestiging dat mijn expert-oordeel klopte (zoals bij de AI-foto), ze gaven me vooral de context om de frustratie te duiden. Het gebrek aan visuele eenheid en de onduidelijke flow leiden direct tot wantrouwen (de 'commerciële vibe'). Dit was het laatste puzzelstuk dat ik nodig had om zowel mijn expert-audit als deze gebruikersdata samen te voegen (synthese) tot de werkelijke kernproblemen.

Making Sense of the Results (Synthese)

Zes fouten die klanten kosten.

Het doornemen van de heuristieken én de gebruikersvalidatie gaf me een lange lijst aan aantekeningen. Om alleen de inzichten over te houden waar we echt wat mee konden, heb ik de resultaten getrianguleerd en gefilterd. Hieronder staan de zes gecombineerde bevindingen die direct antwoord geven op de hoofdonderzoeksvraag, en daarmee het fundament leggen voor het uiteindelijke herontwerp.

Om te bepalen in welke volgorde we deze problemen moeten oplossen, heb ik de ernst ervan gescoord op basis van Nielsen's Severity Ratings (1995). Ik woog elk probleem op drie factoren: de impact, de frequentie en de persistentie. Fouten die het vertrouwen direct schaden of de boeking onmogelijk maken, kregen Severity 4 (Usability Catastrophe) of Severity 3 (Major Problem). Visuele inconsistenties die de boeking vertragen maar niet blokkeren, vielen onder Severity 2 (Minor Problem).

#1 Fake Hero (AI / Stock)

De hero toont een AI foto van een arts met een te perfecte glimlach, geen echte medewerker van Claro Clinic. Fogg's Prominence-Interpretation Theory (2003) waarschuwt dat wanneer een prominent element negatief word geïnterpreteerd ("dit is nep"), de credibility harder daalt dan wanneer je niks had geplaatst. Voor een medische kliniek is dat onacceptabel.

Actie: Vervang de AI-foto door echte fotografie van een arts of het team. Als dat niet beschikbaar is, werk ik met abstracte vormen en een rustige kleur in plaats van een ongeloofwaardig gezicht.

De stockfotografie op de hero van de live homepage
#2 Identiteitscrisis (Kleurruis)

De homepage start met een consistent teal-palet, maar zodra je scrollt breekt er een paarse gradient in. Knoppen wisselen mee: soms teal, soms paars. Die dubbele identiteit ondermijnt de visceral layer (Norman, 2004), onbewust voelt het alsof je op een andere website bent.

Actie: Eén passend kleurensysteem doorvoeren.

De paarse gradient achter reisvaccinaties
#3 CTA's in meerdere talen (Hick's Law)

Vijf verschillende stijlen knoppen. Solid, outline, paars, afgerond, plat. Hick's Law (Hick, 1952) voorspelt dat de reactietijd toeneemt naarmate het aantal keuzes stijgt. De bezoeker moet hier nadenken over wat een knop is en wat niet. Bezoekers weten daardoor niet eens meer wat klikbaar is. Dat kost conversie.

Actie: Een binair primary/secondary button systeem voor de volledige patiëntreis.

Knopvariant 1 Knopvariant 2 Knopvariant 3 Knopvariant 4 Knopvariant 5

Vijf verschillende knopstijlen op één website — geen consistent design system.

#4 Boekings-layout

De afsprakenpagina begint met een inleidende tekstalinea die de diensten hérhaalt (al op de homepage gezien). Pas dáárna below the fold verschijnt de 3-staps boekingswidget. Die widget zelf is prima (progressie-indicator met 'Dienst → Datum → Info'), maar de tekst erboven voegt onnodige cognitieve belasting toe op het moment dat de bezoeker al besloten heeft om te boeken (NNg, 2006).

Actie: De inleidingtekst verwijderen. Een manier vinden om de boekingswidget intuitiever te laten vinden door de patient.

Tekstmuur boven de boekingswidget op de afsprakenpagina
#5 Contrast / WCAG Failure

Witte tekst op een hele lichte teal balk scoort een contrastratio van 1.92:1. WCAG AA vereist minimaal 4.5:1 voor normale tekst. Dat is niet een randje eronder, dat is minder dan de helft van wat nodig is.

Actie: Contrast opschroeven. Typografie moet hard afsteken.

Witte tekst op lichte teal balk — onvoldoende contrast
#6 Trust signals verstopt in ticker

BIG-registratie, LCR-registratie en een klantbeoordeling van 9.8 stáán op de site, maar uitsluitend in een scrollende ticker-balk bovenaan de pagina. Die ticker schuift snel voorbij en is makkelijk te missen. Verderop staat een Google Reviews widget, maar ver onder de vouw. Trust signals werken alleen als ze op het juiste moment zichtbaar zijn: vóórdat de bezoeker twijfelt, niet nadat die al is afgehaakt.

Actie: Credential-blok (BIG, LCR, review-score) als statisch, visueel prominent element direct in de hero plaatsen. Niet verstoppen in een animatie.

De scrollende ticker-balk met trust signals

Drie kernproblemen uit zes wonden.

Ik bekeek alle zes de punten. Toen ik ze groepeerde, zag ik pas de echte patronen. Ze bleken namelijk allemaal terug te voeren op drie grote problemen:

① Vertrouwenscrisis

De fake hero (#1), de identiteitscrisis (#2) en het gebrek aan statische trust signals (#6) zijn in de kern hetzelfde probleem. De website wekt geen vertrouwen. Bij een medische kliniek is vertrouwen alles. Als dat ontbreekt, vertrekt de bezoeker.

② Conversie-frictie

Bevinding #3 (CTA chaos) en #4 (boeking-layout) draaien om hetzelfde: de route naar een afspraak is niet intuïtief genoeg. Visuele afleiding, lange laadtijden en een gebrek aan een goede flow zorgt voor verminderde conversi.

③ Technische schuld

Bevinding #5 (WCAG contrast) is ook relevant: een contrastratio van 1.92:1 betekent dat tekst voor slechtziende bezoekers onleesbaar is. Bij een medische website mag je niemand uitsluiten.

Van deze drie weegt de Vertrouwenscrisis het zwaarst: zonder vertrouwen bereikt een bezoeker de boekingsflow überhaupt niet. De conversie-frictie komt pas in beeld als iemand al besloten heeft om een afspraak te maken. Met die prioritering werd het plan helder: het herontwerp moest beginnen bij het opbouwen van medisch vertrouwen, en vervolgens de weg naar een afspraak zo makkelijk mogelijk maken. De contrastschending documenteer ik om ook rekening mee te houden.

Eerlijk is eerlijk: sommige van deze problemen zijn niet bepaald subtiel. Dat de hero een overduidelijke AI-afbeelding bevatte, zag ik bij de allereerste quickscan natuurlijk ook al. De valkuil voor mij als ontwerper is dan dat je op je gut feeling gaat varen en denkt het al te weten. Maar daar bleek juist de kracht van deze gestructureerde audit te zitten. Zonder Fogg's theorie en de gebruikersvalidatie was mijn afkeer van die AI-foto puur een esthetische mening gebleven; nu was het een gevalideerde conversiekiller. Hetzelfde geldt voor Nielsen's heuristieken: de vijf verschillende knopstijlen (#3) voelden in eerste instantie gewoon 'rommelig', maar door de lens van Consistency and Standards besefte ik pas hoeveel cognitieve frictie dit oplevert in de boekingsflow. Tot slot dwong deze methodiek me om verder te kijken dan visuele voorkeuren, waardoor ik de gevaarlijke contrastschending (#5) ontdekte die ik anders had gemist. Deze brede theoretische blik (Nielsen, Fogg én WCAG) transformeerde mijn losse aannames in keiharde ontwerpeisen.

Was dit de juiste aanpak?

Achteraf gezien was de combinatie van een theorie-gedreven audit (via Norman, Nielsen en Fogg) en een proxy-validatie de juiste keuze voor dit privacygevoelige domein. De drieslag aan theorieën voorkwam dat ik uitsluitend naar oppervlakkige usability keek (Nielsen), maar dwong me ook om de emotionele eerste indruk (Norman) en geloofwaardigheid (Fogg) zwaar mee te wegen. De proxy-validatie diende vervolgens als onmisbaar tegenwicht voor mijn eigen expert bias. Zonder die validatie had ik waarschijnlijk te veel nadruk gelegd op de kleurinconsistentie (#2), terwijl de reacties van de proxy-doelgroep aantoonden dat de fake hero (#1) en de commerciële vibe het vertrouwen (Fogg) nog veel harder schaadden. Door de academische theorie direct naast de gebruikerservaring te leggen, was de ontwerpopgave niet langer een mening, maar een onderbouwd feit.

De Ontwerpvraag en How Might We's

Problemen afvinken is makkelijk, maar ze omzetten in een ontwerpkans levert meer op. Nu we de kernproblemen weten (Vertrouwen en Conversie-frictie), is de overkoepelende Hoofdontwerpvraag voor het komende herontwerp direct helder:

"Hoe kan de online ervaring van Claro Clinic het vertrouwen van een potentiële patiënt opbouwen en tegelijkertijd de drempel naar het maken van een afspraak frictieloos verlagen?"

Om deze brede vraag behapbaar te maken voor het ontwerpproces, heb ik hem via de How Might We-methode opgesplitst in twee gerichte deelvragen. Volgens Rosala (2021) stelt een goede HMW-vraag de gebruiker centraal en is hij positief geformuleerd:

  • HMW 1 (Focus op de Vertrouwenscrisis):
    "Hoe kunnen we de visuele identiteit zo ontwerpen dat deze direct medische autoriteit en veiligheid uitstraalt, zodat een kwetsbare bezoeker de kliniek onmiddellijk vertrouwt zonder dat het commercieel aanvoelt?"
  • HMW 2 (Focus op de Conversie-frictie):
    "Hoe kunnen we de patiëntreis zó vloeiend en intuïtief maken dat de bezoeker frictieloos van eerste oriëntatie naar een definitieve afspraak navigeert, zonder cognitieve overbelasting door teveel tekst of inconsitentie in UI?"
Consider Next Steps (Volgende Stappen)

Programma van Eisen (Theorie → Ontwerp)

De twee brede HMW-vragen vertaalde ik door naar vier concrete en meetbare ontwerpeisen. Omdat de HMW's overkoepelend zijn, leveren ze meerdere randvoorwaarden op; de ontwerpkans rondom de vertrouwenscrisis (HMW 1) dicteert bijvoorbeeld zowel harde eisen over het beeldmateriaal als over de toepassing van een consistent design system. Elke eis is bewust verankerd in het theoretisch kader (Nielsen, Fogg en Norman) dat eerder is vastgesteld. Hierdoor is het uiteindelijke ontwerp straks objectief toetsbaar op usability en geloofwaardigheid, in plaats van op persoonlijke smaak:

  1. Authentiek beeldmateriaal (Fogg & Norman): Alle fotografie moet aantoonbaar een echte zorgverlener of kliniekfoto zijn, géén AI-gegenereerde beelden. Fogg's Prominence-Interpretation Theory (2003) en Norman's Visceral layer (2004) dicteren dat de eerste indruk onmiddellijk 'medisch betrouwbaar' moet communiceren. Een nep-element roept wantrouwen op, wat de opbouw van geloofwaardigheid direct verlaagd.
  2. Eén consistent design system (Nielsen & Norman): Het volledige ontwerp moet gebouwd zijn met consistente regels. Nielsen's heuristiek #4 (Consistency and standards) dicteert dat een gebruiker nooit mag twijfelen of verschillende uitingen hetzelfde betekenen. Daarnaast voorkomt visuele rust dat de gebruiker de website onbewust als 'slordig' of 'onprofessioneel' ervaart (Norman's Visceral layer).
  3. Reductie van keuzes (Nielsen): De volledige website gebruikt uitsluitend een binair primary/secondary button-systeem. Alle CTA's richting de afspraak gebruiken een identieke kleur, label en afmeting. De overtollige tekstblokken rondom formulieren worden geschrapt. Dit voldoet aan Nielsen's heuristiek #8 (Aesthetic and minimalist design), die voorschrijft dat elke extra eenheid informatie concurreert met de relevante eenheden en de cognitieve belasting onnodig verhoogt.
  4. Statische trust indicators (Fogg): Minimaal drie geloofwaardigheidsindicatoren moeten statisch zichtbaar zijn in de eerste viewport of direct na de hero. Ze mogen niet verborgen zitten in een scrollende animatie. Fogg stelt dat geloofwaardigheidssignalen pas impact hebben wanneer ze onmiddellijk (prominent) opvallen en geïnterpreteerd kunnen worden vóórdat de bezoeker gaat twijfelen.

Wat dit onderzoek oplevert (Conclusie).

Vijf bevindingen, drie severity-niveaus, vier ontwerpeisen. Maar wat is het overkoepelende beeld?

Als ik de vijf bevindingen naast elkaar leg, ontstaat er een helder beeld. 2 van de fouten bevindt zich niet op specifieke pagina's, maar is geworteld in het gebroken fundament (sitebreed) (zoals het gebrek aan een consistent design system). De overige drie pagina-specifieke fouten (zoals de neppe AI-foto en de niet frictieloze boekingsmodule) bevinden zich uitsluitend op de twee meest kritieke touchpoints: de homepage en de boekingsflow.

Bevinding Raakt primair
#1 Fake Hero (Critical) Homepage
#2 Identiteitscrisis (High) Fundament (Sitebreed)
#3 CTA-chaos (High) Fundament (Sitebreed)
#4 Boekings-layout (Medium) Boekingsflow
#5 Trust signals verstopt (Medium) Homepage

Dat patroon dicteert de oplossing. De specifieke interactie-fouten beperken zich tot de start en het einde van de keten: als op de homepage het vertrouwen niet wordt opgebouwd (Fogg, 2003), bereikt de bezoeker de boeking niet. Bevat de boekingsflow te veel cognitieve frictie (Nielsen, 1994), dan haakt men alsnog af. Omdat zowel de structuur van deze touchpoints áls de visuele identiteit (het fundament) kapot zijn, kan ik niet zomaar beginnen met schermen inkleuren. Het proces vereist een strikte scheiding tussen interactie en visueel ontwerp.

Scope-beslissing

Het herontwerp vereist een gelaagde aanpak: van interactie naar visueel fundament, hierin werk ik in lagen. Eerst ontrafel ik de complexe boekingsflow en de lay-outstructuur (focus op frictie verlagen). Zodra die interactie staat, repareer ik de visuele identiteit door een betrouwbaar design system te bouwen (focus op vertrouwen wekken). Pas als die twee pijlers staan, pak ik ze samen in het definitieve herontwerp van de twee kritieke touchpoints (homepage en boekingsmodule).

Handoff

Van inzicht naar ontwerp.

Hier stopt de probleemanalyse. De vier ontwerpeisen uit het PvE en de daaruit voortvloeiende How-Might-We vragen vormen samen de briefing voor het daadwerkelijke designwerk.

Status Deelvragen na de Audit
1. Welke elementen op de huidige homepage versterken of ondermijnen het vertrouwen van een eerste bezoeker? ✓ Beantwoord
2. Waar in de huidige boekingsflow ervaren gebruikers onnodige frictie? ✓ Beantwoord
3. Is de huidige visuele identiteit consistent genoeg om een professionele medische kliniek uit te stralen? ✓ Beantwoord

De audit heeft alle drie de deelvragen beantwoord: we weten nu precies wat er mis is en waarom de patiënt afhaakt. Het fundament van het huidige ontwerp is dusdanig instabiel dat pleisters plakken geen zin heeft; we hebben een doordacht herontwerp nodig.

Een ontwerpvraag beantwoord je echter niet met theorie, maar met een gevalideerd product. In Datapunt 2: UX Ontwerp neem ik de geformuleerde How-Might-We (HMW) vragen en het Programma van Eisen mee als mijn vertrekpunt. Hierbij formuleer ik nieuwe, ontwerpspecifieke validatievragen (zoals: "Weet dit nieuwe design system wel medisch vertrouwen op te wekken?") om te bewijzen dat het nieuwe prototype de problemen écht oplost.

Bronnen

Bronnenlijst (APA)

De theorieën die het fundament vormden voor dit UX-onderzoek.

  • Fogg, B. J. (2003). Prominence-Interpretation Theory: Explaining How People Assess Credibility Online. CHI '03 Extended Abstracts on Human Factors in Computing Systems, 722–723.
    [ACM Digital Library]
  • Hall, E. (2013). Just Enough Research. A Book Apart.
    [A Book Apart]
  • Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26.
  • Rosala, M. (2021). Using "How Might We" Questions to Ideate on the Right Problems. Nielsen Norman Group. Geraadpleegd op 12 april 2026, van
    https://www.nngroup.com/articles/how-might-we-questions/
  • Nielsen, J. (1994). 10 Usability Heuristics for User Interface Design. Nielsen Norman Group.
    https://www.nngroup.com/articles/ten-usability-heuristics/
  • Norman, D. A. (2004). Emotional Design: Why We Love (or Hate) Everyday Things. Basic Books.
  • Van Hofwegen, F., Annema, J. H., Kelzenberg, I., Kreling, P., & Schuszler, P. (2025). Experts, Peers & Gebruikers: Tips voor het benaderen van mensen en het interpreteren van hun informatie (versie 2.2). Hogeschool van Arnhem en Nijmegen.