Afstudeerpresentatie · HBO-ICT · 2026

Centrale
enquête-
invulomgeving

{{ presenterLine }}

Het bedrijf

Onderzoekdoen.nl

Onderzoeksbureau + eigen softwareproducten

Klanten
Politie · Tweede Kamer · GGD · Gemeenten
Certificeringen
ISO 27001 · NEN 7510 · BIO BBN1 · ISO 9001
Data
Persoonsgegevens uitsluitend op Nederlandse servers

Onze software

Twee softwarepakketten

Eén ontwikkelteam, twee producten

Enquêtetool
Uitgebreid onderzoek
Klantmonitor
Klantfeedback

Het team

Onderzoekbureau én softwareontwikkelbedrijf

Onderzoek en software, allebei in eigen huis

Onderzoeksteam
3 onderzoekers
Ontwikkelteam
3 programmeurs, 1 productowner, 1 leidinggevende/programmeur

Onze tools in cijfers

Antwoorden vorige week

Totaal aantal antwoorden verzameld vorige week, maandag 15 juni t/m zondag 21 juni

Avicii
Enquêtetool
299.848
Antwoorden verzameld
↗ 72% van totaal
Hakon
Klantmonitor
182.892
Antwoorden verzameld
↗ 28% van totaal
Totaal
Avicii + Hakon
482.740
Alle antwoorden
Bijna een half miljoen

Onder de motorkap

Twee identieke, extra codebases

Naast de hoofdapplicatie heeft elk product een eigen ENQ-codebase, functioneel identiek, apart onderhouden

Avicii Enquêtetool
avicii-app
avicii-backend
avicii-enq-appENQ
avicii-enq-backendENQ
Hakon Klantmonitor
hakon-app
hakon-backend
hakon-enq-appENQ
hakon-enq-backendENQ

Het probleem

Twee losstaande codebases

Dubbel onderhoud, onbetrouwbare data en verouderde UX

Dubbel werk
1 feature = 40u → 70u · bugs twee keer fixen
WCAG-tekorten
Niet compliant · retroactief gepatcht in twee codebases
Onbetrouwbare data
Dubbele inzendingen · ontbrekende antwoorden
Verouderde UX
7 jaar oud · past niet bij huisstijlen klanten
De huidige invulomgeving
Huidige enquête-invulomgeving
Zeven jaar oud, sluit niet aan op de huisstijl van klanten en is niet toegankelijk.

Het antwoord

Een nieuwe centrale enquête-invulomgeving die de problemen oplost

Aanpak

Vier fasen, iteratief

Analyseren
Requirements · Stakeholders · MoSCoW
Adviseren
3 opties · MCA · Onderbouwing
Ontwerpen
Architectuur · UX-flows · Wireframes
Realiseren
Bouwen · Testen · Valideren

Onderzoek & validatie · Multi-Criteria Analyse

Welke oplossingsrichting?

GEWOGEN OP 5 CRITERIA Must-haves afgedekt Data in Nederland WCAG-controle Flexibiliteit Onafhankelijkheid
A · Uitbesteden
35%
B · SurveyJS integreren
62%
C · Zelf ontwikkelen
95% ✓

De keuze uitgewerkt

Van twee codebases naar één

Eén centrale enquête-invulomgeving voor beide producten

Twee losse enq-codebases
Avicii · Enquêtetool
avicii-enq-app
avicii-enq-backend
Hakon · Klantmonitor
hakon-enq-app
hakon-enq-backend
→
Eén gedeelde codebase
henq gedeelde invulomgeving
├── henq-app
└── henq-backend

Ontwerpfase

Van wireframe naar ontwerp

Van low-fidelity wireframes in Figma naar het uitgewerkte ontwerp

Wireframe · Figma
Wireframe in Figma
→
Uitgewerkt ontwerp
Uitgewerkt ontwerp

WCAG 2.1 niveau AA

Toegankelijkheid by design

Niet achteraf gepatcht, structureel in de architectuur

A Volledige Tab/Enter-navigatie, geen muisafhankelijkheid
AA CDK FocusTrap, logische focusvolgorde per vraagpagina
A ARIA-labels op alle interactieve elementen
A Validatiefouten gekoppeld via aria-describedby → schermlezer spreekt fout uit
AA Contrast 4,5:1 minimum · schaalbare typografie, geen vaste px-waarden

Realisatie · frontend-betrouwbaarheid

IndexedDB: nooit een antwoord kwijt

Elk antwoord wordt eerst lokaal gebufferd, daarna pas naar de backend verstuurd

HENQ APP · browser
Welkomstpagina → Vraagpagina's → Bedanktpagina
elk antwoord direct opslaan ↴ IndexedDB-buffer
online ↓ verstuur & markeer als verzonden ↺ offline: wacht, sync bij herverbinden
HENQ BACKEND
gebufferde antwoorden → POST /answers
verdere verwerking & schaalbaarheid: zie volgende slide
✓ Geen missende antwoorden
Lokaal first, dan pas verzenden
1Lokaal first. Elk antwoord landt direct in IndexedDB in de browser, nog vóór verzending.
2Werkt offline. Verbinding weg? De respondent vult gewoon door; antwoorden wachten lokaal.
3Automatische sync. Bij herverbinden verstuurt de app de gebufferde antwoorden alsnog; een verzend-status per antwoord voorkomt dubbele verzending bij retries.

Live demo

Kritische reflectie

Twee lessen

Beide opgelost, maar eerder te onderkennen geweest

Voorbeeldmodus
Impliciet verwacht, niet ontworpen
Les: leg bestaande functionaliteit expliciet vast: scope creep komt van impliciete aannames.
Schaalbaarheid
Aanname niet vroeg gevalideerd
Les: valideer niet-functionele eisen vroeg met een load test, niet op aannames.

Les 1 · uitgewerkt

Voorbeeldmodus opnieuw ontworpen

Wat ging fout: de preview-functie was impliciet bekend maar nooit expliciet ontworpen, waardoor de scope tijdens de bouw alsnog moest worden uitgebreid

Oud · vaste balk bovenin
Je bekijkt het onderzoek in de voorbeeldomgeving, resultaten worden niet opgeslagen.
✓ Negeer de vraag validatie ✓ Negeer de vraag voorwaarden
Alle knoppen op één rij, geen visuele hiërarchie, niet toetsenbordvriendelijk.
Nieuw · zwevend bedieningspaneel
Voorbeeld
Pagina
S 1 ✓
Validatie
Voorwaardes
Gegroepeerde segmenten, duidelijke toggles, volledig toetsenbord- en schermlezer-toegankelijk.

Les 2 · uitgewerkt

RabbitMQ + henq-consumer

Vanuit de load test gerealiseerd: asynchrone verwerking ontkoppelt invullen van wegschrijven 

henq-backend → RabbitMQ
             → henq-consumer
             → Enquêtetool DB
100.000+ antwoorden/uur
Throughput-eis ruim gehaald, zonder dataverlies

Conclusie

In hoeverre voldoet henq?

Merendeel functionele én niet-functionele requirements gerealiseerd
WCAG 2.1 AA structureel geïntegreerd, niet achteraf
White-label theming volledig werkend
Betrouwbaarheid + schaalbaarheid geborgd via IndexedDB en RabbitMQ
NFR-02: 133 backend-tests ✓, frontend architectuurklaar, tests nog niet geschreven

Tot slot

Vragen?

Bedankt voor uw aandacht

{{ presenterLine }}

{{ counter }}
Spreektekst, slide {{ counter }}
Richttijd {{ richttijd }}

{{ notes }}