LZ Lando ZeilstraSenior UX en product designer
← Alle cases
WCAG en design systemOnderlinge – Klantportaal

Een klantportaal voor pensioen en verzekeringen dat iedereen kan gebruiken

Onderlinge 's-Gravenhage is gespecialiseerd in levensverzekeringen en pensioenproducten. Ik werkte aan het redesign van het klantportaal, met focus op gebruiksgemak, toegankelijkheid en consistentie, en zette tegelijk een design system op als fundament voor toekomstige productontwikkeling.

RolSenior UX en product designer · product owner
Periode2023 – 2025
SectorVerzekeringen
Samen metBusiness, compliance, IT en marketing
Het vernieuwde Onderlinge-portaal op een laptop

Mijn rol

  • Lead designer voor het redesign van het klantportaal
  • Opzetten van het design system en design tokens
  • Realiseren van WCAG AA-compliance

01

Het probleem

Het klantportaal helpt klanten hun producten te beheren en zaken digitaal te regelen, in een complexe financiële omgeving.

De bestaande omgeving had een complexe informatiearchitectuur, een inconsistente ervaring, beperkte toegankelijkheid en versnipperde ontwerpkeuzes. Dat maakte het lastig voor klanten, en lastig om op door te bouwen.

02

Wat ik ontdekte

Versnipperde ontwerpkeuzes waren de bron van de meeste problemen, niet één slecht scherm.

Uit de analyse van klantreizen en gesprekken met business, compliance en IT bleek dat usability- en toegankelijkheidsproblemen steeds terugkwamen op dezelfde oorzaak: elk onderdeel was op een eigen manier ontworpen. Een structurele oplossing vroeg om gedeelde bouwstenen.

03

Keuzes en afwegingen

Eerst het fundament, dan de schermen

Kleuren, typografie en componenten legden we vast in een design system met design tokens. Daardoor werd elke volgende pagina sneller en consistenter.

Een keuzehulp in plaats van een menu vol producten

Op de homepage helpen een paar eenvoudige vragen bezoekers naar de juiste informatie over wonen of inkomen.

De rekenhulp in stappen

De premieberekening werkt met schuifregelaars en laat zien wat de meeste mensen kiezen. De aanvraag volgt in vijf duidelijke stappen, met een samenvatting om te controleren.

WCAG AA in de componenten zelf

Contrast, focus en toetsenbordbediening zijn in de componenten opgelost, zodat elke pagina ze automatisch meekrijgt.

04

Het ontwerp

Het vernieuwde portaal, van de homepage tot het afronden van een aanvraag.

De nieuwe homepage: 'Gelukkig ouder worden doen we samen'.
De nieuwe homepage: 'Gelukkig ouder worden doen we samen'.
Een keuzehulp op de homepage: in een paar vragen naar de juiste informatie over wonen of inkomen.
Een keuzehulp op de homepage: in een paar vragen naar de juiste informatie over wonen of inkomen.
De rekenhulp: bedrag en looptijd met schuifregelaars, met de meest gekozen keuze als houvast.
De rekenhulp: bedrag en looptijd met schuifregelaars, met de meest gekozen keuze als houvast.
Aanvragen in vijf stappen, met een samenvatting om alles te controleren.
Aanvragen in vijf stappen, met een samenvatting om alles te controleren.

05

Resultaat

  • ✓Het vernieuwde portaal voldoet aan WCAG AA.
  • ✓Een design system met tokens dat teams hergebruiken, met minder ontwerpfragmentatie en sterkere UX-governance.
  • ✓Een team dat door coaching zelf sterkere UX-keuzes maakt, en een hogere UX-volwassenheid in de organisatie.

06

Wat ik nu anders zou doen

Toegankelijkheid en een design system versterken elkaar. Door toegankelijkheid in de componenten op te lossen, hoefde niemand er per pagina meer aan te denken.

Samenwerken

Herken je dit vraagstuk in jouw team?

Ik vertel er graag meer over in een gesprek, inclusief wat er niet in deze case past.

Neem contact op Bekijk LinkedIn