UX Ontwerp: Claro Clinic

Docentweergave (Criteria & Verantwoording)

Zet deze modus aan om de beoordelingscriteria in de tekst te highlighten.

BC 8.2.1

Je creëert met behulp van creatieve technieken ideeën voor interactieve digitale producten of diensten en onderbouwt welke het best aansluiten bij de ontwerpeisen en de praktijkkaders.

BC 8.2.2

Je realiseert (deel)producten die aansluiten bij de/het ontwerpdoel(en).

BC 8.4.2

Je verantwoordt de gemaakte keuzes en resultaten en communiceert dit pro-actief en helder met de belanghebbenden én begeleiders.

Vertrekpunt

Waar ik vandaan kom.

De UX Audit leverde vijf knelpunten op, samengevat in twee ontwerpvragen (HMW) en vier ontwerpeisen. Dit datapunt toont de vertaalslag van dat onderzoek naar een werkend eindontwerp.

De Ontwerpvragen (HMW)

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?"

De Spelregels (PvE)

Die doelen zijn vertaald naar vier ontwerpeisen:

01. 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) stellen dat de eerste indruk meteen 'medisch betrouwbaar' moet overkomen. Eén nep-element en het vertrouwen is weg.

02. Eén consistent design system (Nielsen & Norman)

Het volledige ontwerp moet gebouwd zijn met consistente regels. Nielsen's heuristiek #4 (Consistency and standards) stelt dat een gebruiker nooit hoeft te twijfelen of elementen hetzelfde betekenen. Visuele rust voorkomt dat de website onbewust als 'slordig' overkomt (Norman's Visceral layer).

03. 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. Overtollige tekst rond formulieren schrap ik. Nielsen's heuristiek #8 (Aesthetic and minimalist design) is hier duidelijk: elke extra zin vecht om aandacht en maakt het drukker dan nodig.

04. 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 werken als de bezoeker ze direct ziet en begrijpt — vóórdat de twijfel toeslaat.

Architectuur & Navigatie

De bestaande navigatie miste logica.

Het probleem
De informatie-architectuur klopt in de basis. Het probleem ontstaat pas als een onzekere bezoeker een afspraak wil maken.

Het conversie-pad naar een afspraak is onnodig gefragmenteerd over verschillende subpagina's. Dit verhoogt de cognitieve belasting.

Van audit naar structuur
De bevindingen en ontwerpeisen uit de UX audit bepaalden al heel wat keuzes. Per inzicht schreef ik op wat dat betekent voor de navigatie:

Inzicht (Bevinding, PvE of Theorie) Consequentie voor de Sitemap

Kernprobleem #2 - Conversie-frictie De huidige website heeft te veel vertakkingen. Omdat de beslissingstijd oploopt bij elke extra optie, reduceer ik de hoofdnavigatie naar het absolute minimum: Homepage, Tarieven, Werkwijze, en de twee test-categorieën.

Bevinding #4 — Boekings-layout De huidige boekingsflow is gefragmenteerd over meerdere pagina's. Hoe de conversie het beste gebundeld kan worden is een open ontwerpvraag die ik in de ideatiefase met drie alternatieven ga verkennen. De sitemap reserveert hier alvast een sub-branch voor.

Kernprobleem #1 — Vertrouwenscrisis
"Werkwijze" wordt een volwaardige hoofdpagina in de primaire navigatie, niet verstopt in een footer. Fogg stelt dat trust indicators pas werken als ze prominent en statisch zichtbaar zijn — vóórdat de bezoeker twijfelt. Credibility is bij een kliniek een bestemming op zichzelf.

Bevinding #3 — CTA chaos
De primaire navigatie bevat exact 5 items — niet meer. Hick's Law voorspelt dat beslissingstijd toeneemt met elke extra keuze. De Relume-prompt enforceert dit hard: "keep exactly 5 main pages." Elke extra pagina verlengt de weg naar de afspraak.

Relume als uitvoeringstool
Relume genereerde het visuele skelet, strikt binnen mijn kaders. De prompt:

Relume prompt

Create a flat and simple sitemap for "Claro Clinic", a discrete private clinic. Prevent choice overload (Hick's Law) by keeping exactly 5 main pages in the horizontal navigation.

Structure it exactly like this:

1. Home
   - Hero Header Sectie (introductie + CTA afspraak maken)
   - Hoe Het Werkt Sectie (stappen: afspraak, consult, uitslag)
   - FAQ Sectie (veelgestelde vragen over diensten en privacy)
   - Getuigenis Sectie (klantbeoordelingen)
   ↳ [Booking Flow: Afspraak Maken]
      - Stap 1: Zorgvraag
      - Stap 2: Datum & Tijd
      - Stap 3: Persoonlijke gegevens
      - Stap 4: Bevestiging

2. SOA Testen
   - Header, Features Lijst (testpakketten), Voordelen, FAQ, CTA Formulier

3. Vaccinaties
   - Header, Features Lijst (vaccinatie-aanbod), Hoe Het Werkt, CTA Formulier

4. Werkwijze
   - Header, Hoe Het Werkt, Over Ons, Team, Certificaten

5. Tarieven
   - Header, Prijzen (overzichtstabel), Vergelijking, Voordelen/vergoeding, CTA Formulier

Every sub-page ends with a Footer. Do NOT add any other sub-menus, subpages, or medical catalogs. Keep the main navigation strictly to these 5 items.

Sitemap Claro Clinic — 5 hoofdpagina’s met subsecties, gegenereerd via Relume

Ideation: Interactie & Flow

Hoe komen we bij de afspraak? Ideation op interactiepatronen.

De sitemap reserveerde een sub-branch voor de boekingsflow: vier stappen. Die keuze stond vast, maar hoe die flow zich gedraagt was nog open. HMW 2 stuurde de methodekeuze voor wat er daarna moest komen.

HMW 2 stuurde mij naar: Divergent Thinking gecombineerd met Flow Ideation Drie interactie-patronen, elk een andere UI-architectuur. Elke ‘flow’ beschrijft het ideale pad van startklik tot bevestiging.

Via een vereenvoudigde Morphological Matrix (Zwicky, 1969) dwong ik mezelf tot drie interactie-concepten. De variabelen: Focus (is de afleiding weg?) en Context (voelt de patiënt zich nog op de kliniek-website?).

Flow A (Losse Pagina): Maximale focus, maar de bezoeker verliest de context van de website.
Flow B (Accordion): Maximale context (blijft op de homepage), maar nul focus (te veel afleiding).
Flow C (Modal): De 'best of both worlds'. De dark-overlay forceert absolute focus, maar de context blijft sluimerend op de achtergrond bewaard.

Morphological Matrix — Boekingsflow Divergentie: Focus × Context (Zwicky, 1969) met drie flow-varianten

Door deze drie uitersten in Figma uit te werken als flowcharts, werd de interactie-logica visueel meetbaar.

A — Losse Pagina

B — Accordion

Flow C — Multi-step Modal: dark overlay forceert focus, stappenstructuur en bevestigingsdialoog bij annuleren

C — Modal — Gekozen

De matrix stuurde bewust op variabelen die direct uit de audit kwamen: Focus (Bevinding #4: de huidige boekingsflow leidt af) en Context (Eis 02: consistente site-ervaring). Dat Modal hoog scoort op allebei is geen toeval, het is de reden dat die variabelen zijn gekozen. De uitkomst is toch valide: de peers bevestigden dezelfde richting zonder dat ze de matrix hadden gezien.

Convergeren.

De flowcharts legde ik voor aan twee peers. Niet "welke vind je mooi?", maar: welke lost de conversie-frictie het beste op?

A. De Losse Pagina

Klik op boeken → Laad nieuwe pagina → Vul lang formulier in.

Feedback:
Kort pad naar het formulier, maar het hele formulier in één keer zichtbaar werkt als drempel. Hoog afhakrisico.

B. In-page Accordion

Formulier schuift open in de content van de homepage zelf.

Feedback:
Geen paginalading is prettig. Maar zonder afscherming kan de gebruiker verdwalen in de rest van de homepage.

C. Multi-step Modal

Scherm wordt donker. Flow is opgesplitst in micro-stapjes.

Winnaar (Unaniem):
Opgeknipt in stappen, daardoor rustiger. De waarschuwing bij een onbedoelde mis-klik houdt de focus vast.

Convergentie door Methodische Triangulatie

Ontwerpbeslissingen baseer ik niet op onderbuikgevoel of één enkele aanname. Om de Multi-step Modal definitief te valideren als de juiste richting, heb ik methodische triangulatie toegepast. Ik heb pas geconvergeerd toen drie onafhankelijke bronnen naar exact dezelfde oplossing wezen:

1. De Analytische As (Morphological Matrix): Stuurde op de variabelen Focus en Context, voortkomend uit UX Audit Bevinding #4 en PvE Eis 02. De Modal was conceptueel de enige architectuur die beide voorwaarden verenigt.
2. De Kwalitatieve As (Peer Review): Twee onafhankelijke peers kozen unaniem voor de Modal, puur op basis van de interactie-logica (flowcharts), zonder de onderliggende matrix te kennen.
3. De Theoretische As (Cognitive Load & Context): De dark overlay van de modal elimineert afleidende elementen (extraneous cognitive load, de valkuil van de accordion), terwijl de zichtbare achtergrond voorkomt dat de bezoeker zijn navigatie-context verliest (spatial memory, de valkuil van de losse pagina).

Omdat de matrix, de gebruikers-proxy (peers) én de cognitieve theorie exact overlappen, is de keuze voor de Modal academisch verantwoord en vrij van confirmation bias.

Divergeren op User Interface (BC 8.2.1)

Vertrouwen in 50 milliseconden.

De boekingsflow stond vast, maar een patiënt start die flow pas als de website veilig en professioneel oogt. De oude website van Claro Clinic faalde hierin: het ontbrak aan geloofwaardigheid (Trust Signals).

De oude hero-sectie van Claro Clinic — gebrek aan geloofwaardigheid

Voor de hero paste ik de Crazy 8's methode toe: acht schetsen in acht minuten. Doel: de hero hiërarchie uitwerken zodat er bij gebruikers binnen 50 miliseconden vertrouwen wordt opgewerkt.

De 8 Crazy 8 schetsen. De groen-gemarkeerde varianten (4, 6 en 8) vormden de basis voor de uiteindelijke hybride keuze.

De acht schetsen vergeleek ik met de ontwerpeisen uit de UX Audit. De Hero is de eerste indruk, dus eisen rond eerste indruk, vertrouwen boven de vouw en duidelijke actieknoppen wegen hier het zwaarst:

Ontwerpeis (uit Datapunt Claro Clinic UX Audit)	V1–3	V4 ✓	V5	V6 ✓	V7	V8 ✓
Eis 3: Radicale reductie van keuzes (Nielsen H#8 — Aesthetic and Minimalist Design)	✗	●	✗	●	✗	●
Eis 4: Statische trust indicators direct zichtbaar (Fogg — Prominence-Interpretation Theory)	✗	½	✗	✗	✗	●
Eis 01: Authentiek beeldmateriaal (Fogg & Norman)	½	●	½	●	✗	●

● = voldoet ½ = deels ✗ = voldoet niet

Feedback van Lot, Rik en Maike

Lot koos V4 + V8 (badges, strakke start). Rik ging voor V6 (directe actie). Maike stelde de hybride voor: opmaak van V8, knop van V4, keurmerken van V6. De selectiematrix bevestigt dezelfde richting, de hybride keuze is een meetbare match op de ontwerpeisen.

Van schets naar scherm

De visuele richting.

Tije (bedrijfseigenaar Like Bamboo) stuurde op warmte: "Wegblijven van dat killige witte en steriele." Mijn PvE (Eis 1) eiste juist medische betrouwbaarheid. Dat spanningsveld stuurde de kleurkeuze.

Het Palet

Op basis van Elliot & Maier (2014) en Biophilic Design is gekozen voor natuurlijke, lage-saturatie kleuren die stress verlagen zonder de medische autoriteit te ondermijnen.

Gedempte groentint

Primaire actiekleur. Lage saturatie werkt kalmerend zonder klinisch over te komen (Elliot & Maier, 2014). De groentint sluit aan bij Biophilic Design: natuurlijke kleuren verlagen stress.

Warme crèmetint

Hoofdachtergrond. Vervangt steriel wit; Elliot & Maier tonen aan dat koud wit stress verhoogt.

Aardse accenttint

Zachte warmte die de medische context verzacht. Sluit aan bij de stakeholder-eis: "wegblijven van kil en steriel."

;

Design Tokens

Typografie & Typescale

Op basis van Bringhurst (2004) is gekozen voor Plus Jakarta Sans gecombineerd met Public Sans, op een Perfect Fourth typeschaal (~1.333 ratio): 16px body, 21px subtitel, 38px sectietitel, 67px hero.

Validatie & Testen

Het Testbare Mid-Fidelity Prototype.

De sitemap, taskflows en design system kwamen samen in één interactief Figma-prototype.

Testen met echte gebruikers

Het prototype testte ik via de "Usability Testing 101" richtlijnen (NN/g): mensen denken hardop na (Think-Aloud) terwijl ze taken uitvoeren. Zo zie je direct waar ze vastlopen.

De Doelgroep:
Personen die binnen de reële doelgroep van de kliniek vallen: regelmatige reizigers of seksueel actieve personen. Focus ligt op representatief gedrag, niet op kwantitatief volume.

Taak 1: Oriëntatie & Credibility (Dekt Eis 1, 2, 4)

Scenario: "Stel, je zoekt discreet naar SOA-testen of vaccinaties. Controleer of deze kliniek professioneel is en wat het kost."

Doel: Valideren of het nieuwe design system (Eis 2) in combinatie met authentiek beeld (Eis 1) direct medisch vertrouwen wekt, en of de nieuwe statische trust indicators (Eis 4) snel gevonden worden.

Taak 2: Conversie & Chunking (Dekt Eis 3 & Business Value)

Scenario: "Je bent overtuigd. Plan nu een afspraak in voor donderdagmiddag."

Doel: Testen of de opgesplitste Modal-flow en de reductie van keuzes/CTA's (Eis 3) de cognitieve frictie daadwerkelijk verlagen. Een frictieloze flow stelt de belangrijkste business-waarde (conversie/omzet) van de kliniek veilig.

Taak 3: Error Recovery

Scenario: "Je bedenkt je halverwege en wilt de datum wijzigen, zonder opnieuw te beginnen."

Doel: Testen of het systeem vergevingsgezind is (Nielsen #3: User Control). Een stressvrije error-recovery voorkomt paniek, wat samen met correct gekozen microcopy de emotionele drempel verlaagt.

Testresultaten & Iteratie

Wat de test opleverde.

Het prototype legde ik voor aan drie mensen uit de reële doelgroep van de kliniek, zonder voorkennis van het ontwerp.

Tommy, 21

Regelmatige reiziger; reist enkele keren per jaar en heeft al eerder een vaccinatie gehad.

Madelief test het Claro Clinic prototype

Madelief, 28

Heeft eerder naar een privékliniek gezocht en ervaart de stap om een afspraak te maken soms als spannend.

Arnold, 69

Ervaren reiziger; methodische lezer die pas klikt als hij volledig zeker is van zijn keuze.

Van bevinding naar actie

Bevinding (quote)	Actie Hi-Fi	Status
“Nu ben ik alles kwijt.” — Tommy	Safe-net ''Weet je het zeker?''	✓ Doorgevoerd
Twijfelde of keuze was opgeslagen — Madelief	Drieledig signaal: rand + tint + vinkje	✓ Doorgevoerd
Contrastverhouding sage green op crème te laag voor WCAG AA — eigen ontdekking	Primaire kleur verdonkerd tot >4.5:1	✓ Doorgevoerd
Zocht "Over ons" i.p.v. "Werkwijze" — Tommy	Label → "Werkwijze & Team"	✓ Doorgevoerd
"Te veel tekst, ik wil scannen" — Arnold	Meer hierarchie aangebracht in teksten	✓ Doorgevoerd
Geen indicatie van aantal stappen in boekingsflow — observatie	Progressbalk toegevoegd (eigen iteratie)	✓ Doorgevoerd
"Voelt niet als een medische kliniek, meer als een warme plek" — Madelief	Kleurenpalet doorvoeren in hi-fi	✓ Bevestigd
CTA 'Afspraak Maken' direct gevonden (<5s) — alle drie	Huidige positie behouden	✓ Bevestigd

"Professioneel, rustig, vertrouwd." — Tommy, 21

"Ja, ik zou hier gewoon een afspraak boeken. Voelt veilig." — Madelief, 28

"Snel. Dacht dat het meer stappen zou zijn." — Arnold, 69

Realisatie (BC 8.2.2)

Het definitieve ontwerp.

Alle beslissingen uit de analyse, het ontwerpsysteem en de usability test komen samen in het eindontwerp.

Het mid-fi testte de structuur en flow, ontworpen en uitgewerkt in Figma. Het eindontwerp bouwt daarop voort met interacties en stakeholder-input. Voor de vertaling van ontwerp naar werkende code heb ik een design-to-code (MCP) pipeline gebruikt: het Figma-bestand wordt uitgelezen en omgezet naar HTML/CSS/JS. Van daaruit heb ik geïtereerd op inhoud, interacties en responsive gedrag.

Deze werkwijze sluit aan bij LUK 8.2: Het eindontwerp volgt uit uitgebreid onderzoek, maken en testen, met middelen die gangbaar zijn in de praktijk waarin ik nu stage loop. De creatieve en analytische keuzes (BC 8.2.1), van kleurrichting tot interactiepatroon zijn gemaakt in Figma op basis van theorie, audit en testresultaten. De design-to-code pipeline vertaalt die keuzes naar een werkend eindproduct dat aansluit bij de ontwerpdoelen (BC 8.2.2). Het gereedschap voert uit; de ontwerpbeslissingen zijn van mij.

Wijziging	Was (mid-fi)	Werd (hi-fi)	Aanleiding
Navigatielabel	"Werkwijze"	"Werkwijze & Team"	Test: Tommy zocht "Over ons" maar vond alleen "Werkwijze"
Boekingsflow — terug-navigatie	Geen bevestigingsdialoog	Bevestigingsdialog bij sluiten	Test: Tommy sloot de modal i.p.v. terug te navigeren, invoer ging verloren
Selectie-feedback boekingsflow	Geen zichtbare bevestiging na klik op dienst	Groene rand + achtergrondtint + vinkje	Test: Madelief twijfelde of haar keuze was opgeslagen
Microcopy	Labels ("Kies datum", "Selecteer")	Geruststellende, menselijke taal ("Wanneer komt het goed uit?")	Eigen iteratie: medische context vraagt om empathische toon (Yifrah)
FAQ-dekking	2 vragen, alleen op de homepage	Accordion op elke pagina, uitgebreid naar 6 vragen	Eigen iteratie: vragen moeten bereikbaar zijn waar ze ontstaan (Nielsen H#10)
Teamfoto's	Kleine profielfoto's, beperkte uitstraling	Uitvergrote foto's met hover-zoom en naam/functie	Eigen iteratie: vertrouwen op een medische site begint bij herkenbaarheid van zorgverleners
Progress bar boekingsflow	Niet aanwezig	Voortgangsbalk per stap	Eigen iteratie: voortgang zichtbaar maken (Nielsen H#1)
Trust badge	"GGD Goedgekeurd"	"ISO-gecertificeerd lab"	Feitelijke correctie, de kliniek is ISO-gecertificeerd
Tarieven	Aparte tarieven-pagina	Geïntegreerde sectie op homepage	Stakeholder (Tije): transparante prijzen zijn patiëntvraag nummer één

De interactielaag (hover-states, scroll-animaties en formuliervalidatie) is direct in productiecode gebouwd.

Bekijk het definitieve ontwerp

Het hi-fi prototype werkte ik uit werd een werkende website. Hieronder een walkthrough van het eindresultaat.

Video-opname van het werkende eindontwerp.

Bekijk de live website ↗

Van ontwerpvraag naar eindontwerp

De UX audit leverde twee How Might We-vragen op die het volledige ontwerpproces aanstuurden. Het eindontwerp is het antwoord op beide.

HMW 1 — Vertrouwen

“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?”

Antwoord: Het nieuwe kleurenpalet vervangt de kleurruis door één consistent systeem. Echte foto's vervangen de AI-hero. Trust badges (BIG, ISO, Discreet) staan statisch in de hero; statisch zichtbaar vóór de eerste scroll. Prijzen transparant weergegeven op de homepagina.

HMW 2 — Conversie

“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 inconsistentie in UI?”

Antwoord: De boekingsflow zit in een modal (geen paginawisseling). Vier stappen, één keuze per stap (chunking). Progressbalk toont voortgang. Error prevention voorkomt dataverlies. Door de overlay behoudt de gebruiker de focus en de context.

PvE Check: De vier eisen in het eindontwerp

✓
Eis 1 — Authentiek beeldmateriaal (Fogg & Norman): Alle fotografie is aantoonbaar een echte zorgverlener of kliniekfoto, 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. De AI-hero is vervangen door een echte foto.
✓
Eis 2 — Eén consistent design system (Nielsen & Norman): Het volledige ontwerp is gebouwd met consistente regels. Nielsen’s heuristiek #4 (Consistency and standards) dicteert dat een gebruiker nooit mag twijfelen of verschillende uitingen hetzelfde betekenen. Visuele rust voorkomt dat de gebruiker het onderbuik gevoel heeft dat de website ‘slordig’ is (Norman’s Visceral layer). Het Tactile Sanctuary-systeem biedt één kleurenpalet, één typescale en één knopstijl door de gehele site.
✓
Eis 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 vorm, label en afmeting. De overtollige tekstblokken rondom formulieren zijn geschrapt. Dit voldoet aan Nielsen’s heuristiek #8 (Aesthetic and minimalist design), die voorschrijft dat elke extra eenheid informatie concurreert met de relevante eenheden. De boekingsflow bestaat uit vier stappen met één keuze per scherm (chunking). Testgebruikers noemden dit overzichtelijk en rustig.
✓
Eis 4 — Statische trust indicators (Fogg): Minimaal drie geloofwaardigheidsindicatoren zijn statisch zichtbaar in de eerste viewport: ISO-gecertificeerd lab, BIG Geregistreerd en Discreet. Ze zitten niet verborgen in een scrollende animatie. Daaronder draait een infinity marquee met zes echte Google-reviews. Fogg stelt dat geloofwaardigheidssignalen pas impact hebben wanneer ze onmiddellijk (prominent) opvallen en geïnterpreteerd kunnen worden vóórdat de bezoeker gaat twijfelen.
✓
Aanvullend — Patiënttaal (Nielsen #2): Medisch jargon is vervangen door menselijke taal. Foutmeldingen zijn sturend in plaats van bestraffend. Geen formele PvE-eis, maar een logisch gevolg van de doelgroepfocus. Hiervoor heb ik de bronnen van Cursus 7 over Microcopy gebruikt.

Aansluiting op LUK 8.2: Het ontwerp volgt het volledige ontwerpproces; van UX audit en heuristische analyse, via HMW-vragen en PvE, naar een geteste mid-fi en een uitgewerkt eindontwerp. De methodes (Nielsen’s heuristieken, Fogg’s credibility model, usability testing via NNg-richtlijnen) en de tooling (Figma, design-to-code pipeline) sluiten aan bij wat gangbaar is in de stageorganisatie. Het eindproduct is gebouwd voor de doelgroep; patiënten die een gevoelige medische afspraak maken, en beantwoordt de twee ontwerpvragen die uit de audit voortkwamen.

Verantwoording & Communicatie (BC 8.4.2)

Keuzes verantwoorden. Proactief communiceren.

BC 8.4.2 draait om één ding: laat zien dat je je gemaakte keuzes actief en helder hebt teruggekoppeld aan de mensen die ertoe doen; begeleiders én belanghebbenden (in dit geval Tije, mijn opdrachtgever en Lot mijn stagebegeleider).

Tije — Bedrijfsleider (Stakeholder)

Tije is de bedrijfsleider van Like Bamboo, een marketingbureau. Het Claro Clinic ontwerp functioneert daarin als acquisitietool: het bureau toont dit soort ontwerpen aan potentiële klanten om te laten zien wat LikeBamboo kan leveren. Tije is regelmatig bijgepraat over de ontwerprichting, zodat de keuzes pasten bij de visie van het bureau.

Lot — Stagebegeleider (Begeleider)

Lot is mijn directe stagebegeleider. Met haar heb ik doorlopend contact gehad (Wij zitten in dezelfde ruimte) en met haar reviewde ik ook het hi-fi ontwerp vóór oplevering aan Tije. Lot zal ook feedback geven op dit datapunt, dus daaruit zal blijken dat ik daadwerkelijk iedereen in de loop heb gehouden!

Tije — Presentatie Audit-bevindingen

De auditbevindingen heb ik aan Tije gepresenteerd vóór het ontwerp begon. Ik heb de bevindingen aan hem voorgelegd en ook verteld hoe ik van plan was het ontwerpproces aan te vliegen.

Tije — Tussentijdse Check Look & Feel

Eenmaal begonnen aan het ontwerp is doorlopend met Tije gesproken en heb ik zo ook tussendoor feedback gevraagd over bijvoorbeeld de visuele stijl: passen de kleuren en de sfeer bij wat Claro Clinic moet uitstralen? Geen grote presentatie, maar meerdere snelle overleggen om te voorkomen dat het ontwerp de verkeerde kant op ging.

Bewijs: E-mail

De mail aan Tije (22 april 2026, vóór oplevering):

E-mail van Joran aan Tije (22-04-2026) — uitnodiging om ontwerpkeuzes Claro Clinic te bespreken — E-mail van 22 april 2026 — Hier nodig ik Tije proactief uit voor een bespreking van het eindontwerp en de verantwoording ervan. Reactie Tije: "Dat zou vanmiddag kunnen rond 15:00."

Geraadpleegde theorieën & methoden

Bronnenlijst (APA)

Geraadpleegde bronnen.

Bar, M., & Neta, M. (2006). Humans prefer curved visual objects. Psychological Science, 17(8), 645–648.
Bringhurst, R. (2004). The Elements of Typographic Style (3e druk). Hartley & Marks.
Elliot, A. J., & Maier, M. A. (2014). Color psychology: Effects of perceiving color on psychological functioning in humans. Annual Review of Psychology, 65, 95-120.
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]
Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26.
IDEO. (z.d.). How Might We. Design Kit. Geraadpleegd op 12 april 2026, van https://www.designkit.org
Nielsen, J. (1994). 10 Usability Heuristics for User Interface Design. Nielsen Norman Group.
https://www.nngroup.com/articles/ten-usability-heuristics/
Nielsen Norman Group. (2006). F-Shaped Pattern For Reading Web Content. Geraadpleegd op 12 april 2026, van https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
Norman, D. A. (2004). Emotional Design: Why We Love (or Hate) Everyday Things. Basic Books.
Sweller, J. (1988). Cognitive Load During Problem Solving: Effects on Learning. Cognitive Science, 12(2), 257–285.
Yifrah, K. (2017). Microcopy: The Complete Guide. Nemala.
Action, Clarity, Conversational) bij de toonverschuiving in microcopy.
Zwicky, F. (1969). Discovery, Invention, Research Through the Morphological Approach. Macmillan.

ClaroClinic.