Claro
Clinic.

1. BJ Fogg's Prominence-Interpretation Theory

Geloofwaardigheid ontstaat volgens Fogg op het snijpunt van twee assen: wat valt op (Prominence) en hoe wordt daarover geoordeeld (Interpretation)? Bij Claro Clinic knalden goedkope stockfoto's keihard in beeld — sterk prominent dus — maar het oordeel was direct: "nep". Geen arts, geen kliniek, geen vertrouwen. Fogg (2003) waarschuwt expliciet dat prominente elementen die negatief geïnterpreteerd worden de geloofwaardigheid harder beschadigen dan helemaal niks plaatsen.

2. Recognition over Recall (Nielsen)

Minimaliseer geheugenbelasting. Val mensen niet lastig door ze info uit hun hoofd te laten opgraven. Bij Claro Clinic moest je als bezoeker een mentale landkaart opbouwen van het menu om überhaupt te snappen welke diensten er waren. Terwijl die opties gewoon direct zichtbaar op het scherm hadden kunnen staan — herkenning (recognition) in plaats van herinnering (recall) (Nielsen, 1994).

3. Cognitive Load & Het F-Pattern

Op de conversie-pagina's stonden enorme lappen tekst. Het F-Pattern (Nielsen Norman Group, 2006) voorspelt dat mensen hun ogen langs de linkerkant naar beneden laten vallen om trefwoorden te scannen. Een afspraak maken vergemakkelijk je echt niet door ze eerst vijftig zinnen te laten doorspitten voor de kalender. Daarmee jaag je de cognitive load onnodig omhoog — precies de plek waar je het minst wilt dat iemand afhaakt.

4. Don Norman's Visceral Layer

De usability-regels hierboven zijn efficiënt, maar missen iets cruciaal: de kwetsbare mens achter het scherm. Iemand die een SOA-test overweegt voelt mogelijk schaamte, stress, zelfs angst. Nog voordat er een letter gelezen wordt, maakt het brein onbewust een oordeel op basis van sfeer en kleur — Norman noemt dit de visceral layer (Norman, 2004). Als die eerste reactie "onveilig" schreeuwt, gaat geen logische button dat nog compenseren.

5. Cialdini's Authority & Social Proof

In de medische wereld is autoriteit niet optioneel — het is een harde eis. Cialdini (1984) beschrijft zes principes van overtuiging, en voor Claro Clinic zijn er twee niet-onderhandelbaar: Authority (BIG-registratie, professionele credentials) en Social Proof (reviews, patiëntaantallen). Als een bezoeker geen enkel bewijs ziet dat echte mensen hier daadwerkelijk behandeld zijn, ontstaat er een vacuüm. En dat vacuüm vult zich met wantrouwen.

6. Erika Hall's Onderzoekscyclus

De structuur van dit hele document volgt de zes fasen van Erika Hall: Define, Select, Plan, Execute, Analyze en Consider Next Steps (Hall, 2013). Het klinkt als een open deur, maar die stappen dwongen me om bewust stil te staan bij elke fase in plaats van direct Figma open te gooien met losse aannames.

Het Design System

Eén font. Manrope — een geometrische sans-serif die klinisch en toch warm is. De hele typografie-schaal draait op dit ene lettertype in vier gewichten (Regular, Medium, Bold, ExtraBold). Geen tweede font, geen typografische ruis. Alles van de 52px hero heading tot de 12px uppercase labels ademt dezelfde visuele taal.

Het kleurensysteem is monochromatisch teal. De primary kleur #00464A (deep teal) vormt het anker — logo, headings, CTA-knoppen, de geselecteerde staat van tijdslots. Die kleur is niet random: blauw-groen associeert in kleurpsychologie met reinheid, gezondheid en betrouwbaarheid (Albers, 2006). De rest bestaat uit grijsnuances en neutrale oppervlakken. Nul decoratieve franje. Elke pixel moet vertrouwen uitstralen.

Hoe elke HMW-vraag opgelost is

HMW #1 (Vertrouwen wekken): De fake hero is vervangen door een professionele foto van een echte zorgverlener in de kliniek. Geen stock, geen AI — een mens die je aankijkt. De overline boven de heading zegt het direct: "SNEL, DISCREET EN PROFESSIONEEL". Daar hoef je niet over na te denken, dat voel je (Norman's visceral layer).

HMW #2 (Diensten zichtbaar): Drie herkenbare kaarten op een rij — SOA testen, Vaccinaties, PrEP zorg. Elke card heeft een icoon (48×48px, teal stroke), een korte beschrijving, en een directe link: "Direct naar SOA →". Gestalt proximity in actie: ze staan bij elkaar, dus je brein ziet ze als verwant aanbod (Koffka, 1935).

HMW #3 (Één visuele taal): Het hele ontwerp ademt monochromatisch teal. Eén font (Manrope), één kleursysteem, consistente border-radius (10px), uniforme icon-stijl. Die absurde roze blobs en neonkleurige gradients? Deur uit. De visuele rust communicert: hier weten ze wat ze doen.

HMW #4 (Één route naar boeking): Er is nu precies één prominente CTA: "Afspraak maken". Die zit in de navigatie als accent-knop, in de hero als grote gradient-button, en bij de afspraaksectie als full-width primary knop. Altijd dezelfde deep teal. Altijd dezelfde tekst. Nul verwarring.

HMW #5 (Cognitieve load bij boeking): De afspraaksectie is radicaal gestript. Een compact formulier (480×450px) met drie stappen: selecteer service, kies datum, kies tijdslot. Geen muur aan tekst eromheen. De checkbox "Ik wens anoniem behandeld te worden" is bewust empathische microcopy — die erkent de schaamte zonder er een issue van te maken.

HMW #8 (Social proof): Dit was de kritische toevoeging. Direct onder de USP bar verschijnt nu een trust badge strip met drie elementen: BIG-registratie ("BIG-geregistreerd CRB-12345678"), Google Reviews score ("5.0 / 5" met gouden sterren) en patiëntaantallen ("500+ patiënten"). Subtiel, maar ondubbelzinnig. Daarnaast staat er een volledige testimonial-sectie met anonieme reviewkaarten en een grotere Google Reviews badge (5.0, gebaseerd op 74 reviews). Cialdini's Authority én Social Proof — allebei prominent aanwezig (Cialdini, 1984).

Het volledige ontwerp

Hieronder het high-fidelity prototype in Figma. Scroll door het ontwerp om alle secties te bekijken: navigatie, hero met arts-fotografie, USP bar, trust badges, service cards, filosofie-sectie, testimonials, afspraken-widget en footer.

Waarom deze interacties specifiek.

Een prototype is geen klikbare afbeelding. Elke interactie die ik toevoegde aan het statische Figma-ontwerp moest een direct probleem oplossen uit de audit. Hieronder onderbouw ik per micro-interactie waarom die er is, en welke theorie daarachter zit.

1. Scroll-reveal animaties (secties faden in)

Het hele ontwerp ontvouwt zich geleidelijk terwijl je scrollt — koppen, kaarten en afbeeldingen verschijnen met een subtiele vertaling van 24px naar boven. Dit is geen decoratie. Norman's visceral layer (2004) beschrijft dat de eerste emotionele reactie bepaalt of iemand blijft of wegklikt. Door de content gecontroleerd op te bouwen vermijd je informatie-overload op het eerste scherm en creëer je een gevoel van controle — precies wat een patiënt nodig heeft die misschien al spanning voelt over zijn SOA-test.

2. Animated counters op trust badges (5.0 / 500+)

In de trust strip tellen de cijfers live op van 0 naar hun eindwaarde. Dit is een directe toepassing van Cialdini's Social Proof (1984): statische cijfers worden half gelezen, maar getallen die bewegen trekken het oog en worden actief verwerkt. Het verschil tussen "500+ patiënten" als dode tekst en als tellend getal is het verschil tussen informatie en overtuiging. De arts-autoriteit (BIG-registratie) en het patiëntvolume worden hierdoor prominenter — precies het antwoord op bevinding #8 (geen social proof).

3. Multi-step booking (stap 1 → stap 2)

De afspraken-widget splitst het boekingsproces in twee stappen: eerst service, datum en tijdslot kiezen (stap 1), daarna persoonlijke gegevens invullen (stap 2). Deze splitsing is een directe ingreep op de cognitive load die in bevinding #5 werd geïdentificeerd. Miller's Law (1956) stelt dat werkgeheugen maximaal 7±2 chunks tegelijk aankan. Door de 10+ invoervelden over twee schermen te verdelen, halveer je de belasting per stap. De progress bar bovenaan geeft daarnaast een tunneling-effect (Fogg, 2003): de gebruiker ziet hoever die is en voelt commitment om door te gaan.

4. Hover-effecten op service cards

Bij hover liften de dienstkaarten 6px op met een zachte schaduw, verschuift de link-pijl 6px naar rechts, en kleurt de icon-achtergrond dieper teal. Dit gaat over affordance — het communiceren dat iets klikbaar is voordat je erop klikt. Bij de originele Claro Clinic site (bevinding #4) was onduidelijk wat knoppen waren en wat niet. Door consequente hover-feedback op elk interactief element los ik die verwarring op. Norman (2013) noemt dit perceived affordance: het visuele signaal dat aanzet tot handelen.

5. Directe tijdslot-selectie met actieve staat

In plaats van een dropdown of een tekst-invoer kies je je tijdslot door op een visueel blok te klikken. De geselecteerde tijd kleurt deep teal (#00464A), de rest blijft neutraal. Dit is Recognition over Recall in de meest letterlijke zin (Nielsen, 1994): je hoeft geen tijd te onthouden of te typen, je herkent je voorkeur en klikt. Bovendien zien bezoekers in één opslag wanneer de kliniek beschikbaar is — dat reduceert onzekerheid op het kritieke moment van conversie.

6. Formuliervalidatie met inline foutmeldingen

Bij het bevestigen zonder verplichte velden in te vullen kleuren de lege invoervelden rood (border + subtiele glow). Zodra je begint te typen verdwijnt de rode rand. Dit is Nielsen's heuristiek #9: Help users recognize, diagnose, and recover from errors (Nielsen, 1994). Geen vage popup of alert bovenaan de pagina, maar directe visuele feedback bij het veld waar het misgaat. In de medische boekingscontext is dit extra belangrijk: een foutmelding mag nooit paniek veroorzaken. Rood bij het veld, verdwijnt bij correctie — controle terug bij de patiënt.

7. "Ik wens anoniem behandeld te worden" checkbox

Deze checkbox lijkt klein maar raakt de kern van het hele project. Bevinding #1 en de visceral layer-analyse toonden dat patiënten angst of schaamte ervaren. Door expliciet een anonimiteitsoptie te bieden, erken je die emotie zonder er een obstakel van te maken. Dit is bewuste empathische microcopy — de tekst communiceert: "Wij begrijpen het." Fogg (2003) zou dit classificeren als similarity-geloofwaardigheid: de site gedraagt zich alsof die de gebruiker echt begrijpt.