Direct naar de inhoud LabelNoir.me

Nederland bewust maken van gehoorschade

Gemaakt voor VeiligheidNL Als onderdeel van ROX

Woman wearing headphones

Een test uit het telefoontijdperk met moderne verwachtingen.

VeiligheidNL helpt Nederland veilig te blijven, van gevaren op de werkvloer tot alledaagse risico's. Hun gehoortesten zijn bedoeld om gehoorschade vroegtijdig op te sporen en mensen door te verwijzen naar professionele hulp.

Maar de testen waren verouderd. Oorspronkelijk ontworpen voor gebruik op de telefoon, waren ze naar het web overgezet zonder ze echt aan te passen. Een lang formulier voorafgaand aan de test, instructies die vaak werden overgeslagen en een rebranding in ontwikkeling.

We hebben drie gehoortesten opnieuw ontworpen tot één uniform systeem: minder drempels, meer aandacht en voortbouwend op een merkrichtlijn die nog niet af was. Een schoner, duidelijker traject van de eerste klik tot de wetenschap of je hulp nodig hebt.

Facts & Figures

Client VeiligheidNL

VeiligheidNL is een non-profitorganisatie die zich inzet voor het verminderen van ongevallen en het bevorderen van veiligheid in heel Nederland. Al meer dan 35 jaar ontwikkelt VeiligheidNL tools, campagnes en hulpmiddelen voor uiteenlopende onderwerpen, van kinderveiligheid tot gehoorschadepreventie. Ze vertalen onderzoek naar praktische oplossingen die mensen in het dagelijks leven beschermen.

Ontdek VeiligheidNL
Agency ROX

ROX is a digital agency located in Rotterdam that specializes in helping companies with their digital growth. Through a combination of strategic advice, polished designs and custom software development, they create web applications that are future-proof, scalable and improve work efficiency.

Ontdek ROX
Rol UI/UX Design, Research

Ik was vanaf de eerste vergadering betrokken tot aan het visuele ontwerp – ik maakte wireframes, voerde gebruikerstestsessies uit en ontwierp het volledige visuele systeem voor drie testvarianten. Het team was klein: mijn leidinggevende (CEO/Strategist) leidde samen met mij de onderzoeksfase en de strategie, waar ik vervolgens het designproces zelfstandig uitvoerde.

Periode 2025

Van concept tot lancering voor drie gehoortesten: hoortest.nl, oorcheck.nl en bedrijfsoorcheck.nl. Het project navigeerde een lopende rebranding, wetenschappelijke beperkingen rond de test zelf en een stijlverkenning van tien visuele richtingen voordat de juiste werd gevonden.

Identity Wing

Veiligheid, verwoven in alledaags leven.

VeiligheidNL wacht niet tot er ongelukken gebeuren. Al meer dan 35 jaar werken ze aan preventie, d.m.v. op onderzoek gebaseerde tools, campagnes en hulpmiddelen die mensen in elke levensfase beschermen. Van kinderveiligheid tot valpreventie, van gevaren op de werkplek tot gehoorschade, hun werk omvat het volledige spectrum van dagelijkse risico's.

Hun missie is eenvoudig maar diepgaand: Nederland veiliger maken, één preventieve maatregel tegelijk. Ze vertalen complex veiligheidsonderzoek naar toegankelijke, praktische instrumenten die gewone mensen bereiken – niet alleen specialisten.

De gehoortesten vormen de kern van die missie. Geen klinische diagnose, maar een eerste signaal. Een aansporing tot bewustwording en, indien nodig, het advies om professionele hulp te zoeken.

Chamber of Constraints

Waar de wetenschap de grenzen stelde en design de rest invulde.

  • A/B Testing
  • API Driven
  • Agile
  • Branding
  • Component Library
  • Continue optimalisatie
  • Design System
  • Duurzaam ontwerp
  • Externe samenwerking
  • Flexible Page Builder
  • GDPR
  • Gebruikersinterviews
  • Gefaseerde lancering
  • Gegenereerde content
  • ISO 27001
  • Informatiearchitectuur
  • Interactief prototype
  • Journey mapping
  • Laravel
  • Locatiegebonden content
  • MVP
  • Meertalig
  • Motion design
  • Next.js
  • React
  • Redactioneel ontwerp
  • Rijke bewegingstaal
  • Scrum
  • Stakeholderinterviews
  • Statamic
  • Technical SEO
  • Toegankelijk ontwerp
  • Typografie
  • Usabilitytesten
  • WCAG 2.1 - Niveau A
  • WCAG 2.1 - Niveau AA
  • WCAG 2.2 - Niveau AA
  • WCAG 3
  • Waterfall
  • Wireframes

VeiligheidNL

Onze gehoortest bestaat al jaren en we willen hem moderniseren. We hebben meerdere varianten, dus we hebben een systeem nodig dat we voor meerdere testen kunnen gebruiken.

Graag! Omdat we de test zelf niet mogen aanpassen, richten we ons op een betere flow en een betere UI.

Manager

De deadline voor dit project is erg krap, dus ik heb een flink volle planning gemaakt zodat we het gaan halen.

Die planning is veel te optimistisch. Een waterfall-aanpak gaat hier niet werken, want elke tegenvaller leidt tot vertraging. We moeten meer agile gaan werken.

Developer

Door de API-gedreven aanpak kiezen we vanzelf voor React, wat animaties voor ons makkelijker maakt. Ga je gang!

Mooi, laten we dit meer als een app laten voelen en minder als een website.

VeiligheidNL

Ons brandingbureau werkt aan een nieuwe visuele stijl, maar daar zijn wat hobbels en vertragingen bij. Die is niet op tijd af voordat de nieuwe testen live moeten.

Laten we doornemen wat er al is, kijken welke onderdelen nog ter discussie staan en daar een afgeleide van maken.

Operations Hub

Standaarden ontwikkeld door middel van onderzoek.

Drie tests, één uniform systeem en een merkrichtlijn die nog in ontwikkeling is. Tijdens de onderzoeksfase kwamen de criteria vanzelf naar voren, waardoor een duidelijke standaard ontstond voor wat goed ontwerp in deze context inhield.

Mobile designs
Practice round of the test
Two desktop designs
Prototype

Drempels verminderen

Een gehoortest werkt alleen als mensen hem voltooien. De oorspronkelijke test confronteerde gebruikers met een formulier met meerdere velden voordat ze überhaupt konden beginnen, iets wat sommige bezoekers afschrikt. We hebben dit vervangen door een wizard met meerdere stappen, die het proces opdeelt in kleine stappen. Minder overweldigend, waardoor de drempel lager wordt en meer mensen de test voltooien.

Trek de aandacht

De instructies zijn essentieel voor een accuraat resultaat. Je hebt een koptelefoon nodig, stille omgeving, geen afleiding. Maar een lap tekst wordt vaak slecht gelezen. We hebben de instructies omgevormd tot een carrousel: één duidelijke boodschap per keer, visueel gemaakt met custom pictogrammen, die onmogelijk te negeren zijn. Consistentie met de wizard-vorm was een bonus.

Consistent maar Uniek

Drie tests voor drie doelgroepen (het algemene publiek, jongeren en professionals) en één design system. We hebben een uniform visueel framework ontwikkeld met varianten voor elke test, waardoor consistentie bij alle tests wordt gewaarborgd, terwijl tegelijkertijd rekening wordt gehouden met de verschillen tussen doelgroepen en testmethoden.

Ontwerpen rondom beperkingen

De wetenschappelijke test kon niet aangepast worden. Vroeg in het proces zagen we UX-verbeteringen, zoals een verzendknop waarmee je antwoorden kunt corrigeren voordat de test automatisch wordt ingediend, maar dit is afgewezen omdat het gevolgen zou hebben voor de onderliggende algoritmes. Dus hebben we om de wetenschappelijke test heen ontworpen.

Toegankelijk zo ver mogelijk

De tool is ontworpen met toegankelijkheid in gedachten: toetsenbordnavigatie, voldoende contrast en een duidelijke visuele hiërarchie. Eén bewuste uitzondering: tekstalternatieven voor audio. Ondertiteling toevoegen aan een audio-gehoortest ondermijnt het doel ervan. Toegankelijkheid is overal toegepast waar het zinvol was en bewust weggelaten waar het niet nodig was.