PostNL

PostNL is in de afgelopen jaren in hoog tempo gedigitaliseerd. Verschillende leveranciers kregen volledige controle over de losse producten. De organisatie heeft hierdoor grote stappen gemaakt, maar tegelijk is hun digitale landschap versnipperd geraakt. Dit gaat ten koste van de consistentie in de user interface. Als gebruiker merk je dat de verschillende producten net anders werken en er net weer anders uitzien. Ook de winstgevendheid staat onder druk. Er is daarom behoefte aan meer efficiëntie binnen de digitale afdeling. Voornamelijk de development teams van PostNL waren veel dubbel werk aan het doen. Tijd voor een consistente en efficiënte oplossing: een design system voor alle teams van PostNL.

Als primaire framework werkt PostNL met React. Belangrijk is dus vooral dat de componenten hierin worden gebouwd. Omdat er diverse producten van PostNL met andere frameworks zijn gebouwd, hebben we als uniforme oplossing ook web componenten gebouwd. Op die manier kan elk team gebruikmaken van het design system.

De nieuwe PostNL huisstijl is een belangrijke drijfveer voor het design system. Bij alle teams komt er extra werk te liggen om de nieuwe branding te implementeren. Dankzij het design system gaat dit heel eenvoudig en snel. Niet alleen voor de huidige applicaties is het design system enorm efficiënt, ook voor het ontwikkelen en valideren van prototypes is het een aanwinst voor de organisatie. Binnen een dag zetten de developers een nieuw prototype in elkaar, waar ze voorheen twee weken over deden.

Design tokens

De vernieuwde huisstijl en het ontwerp van de componenten van PostNL zijn opgenomen in Figma. Een koppeling met deze ontwerptool is dus erg belangrijk. We ontwikkelden design tokens, waarmee we uit Figma belangrijke informatie haalden voor de bouw van de componenten. Design tokens zijn waardes die nodig zijn om het ontwerp te vertalen naar data. Denk bijvoorbeeld aan typografie, kleur, schaduwen of beweging. Deze stukjes code zorgen ervoor dat de visuele uitstraling en de gebruikerservaring in elk product hetzelfde is. Zodra het ontwerp werd geüpdatet in Figma wordt dit direct doorgestuurd naar de componenten uit het design system. Het ontwerp en de code worden automatisch gesynchroniseerd.

Als marktleider in de postbezorging is het voor PostNL erg belangrijk dat iedereen in Nederland hun digitale producten kan gebruiken. Een van de design principes is ‘We zijn er voor iedereen’. Accessibility, oftewel digitale toegankelijkheid, is daarom een van de speerpunten geweest van dit design system. De ontwerpen zijn pas klaar als ze toegankelijk zijn. De apps van PostNL scoorden al goed op toegankelijkheid, maar voor de webproducten was er meer werk nodig. Met het design system verbeterden we meerdere producten tegelijk. Niet alleen bedient PostNL daarmee meer mensen, ze bereiden zich daarmee ook voor op de European Accessibility Act, die op 28 juni 2025 van kracht wordt.

Goede documentatie is belangrijk voor een succesvol design system. Één bron met alle richtlijnen zorgt ervoor dat de huidige en de nieuwe collega’s - van designers tot developers en van marketeers tot copywriters - op dezelfde manier werken. Voor de documentatie van Stamp gebruiken we Zeroheight. Alle design richtlijnen en principes, accessibility checklists, componenten en flows staan hierin beschreven. Op die manier wordt het design system gebruikt zoals het is bedoeld.

De belangrijkste drijfveren voor het opnemen van het design system binnen de teams van PostNL waren digitale toegankelijkheid en de nieuwe branding. Om het design system bij de hele organisatie te introduceren, brachten we eerst alle digitale producten en teams in kaart. Deze ordenden we aan de hand van bedrijfswaarde, backlog, budget en combineerbaarheid met de design tokens en componenten.

Het design system is  als eerst geïntroduceerd bij het PostNL.nl team. Na de lancering van de vernieuwde website werd het gebruik van het design system meteen breed zichtbaar binnen de gehele organisatie. Andere teams raakten zo enthousiast om het design system te gebruiken. Bij een enkel product ontwikkelden we een aparte implementatie voor een specifiek framework (Angular). Dit zorgde voor een stijging in het gebruik van het design system en een verhoogde medewerkerstevredenheid bij deze teams.

Governance zijn alle processen rondom het design system. Dit is erg belangrijk, want een design system is het meest waardevol als het geborgen is binnen de organisatie. Dat hebben wij bij PostNL in diverse vormen aangestuurd. In de documentatie van Stamp wordt per techniek bijgehouden aan welke functionaliteiten wordt gewerkt en welke bugs er zijn opgelost. Voor het onderhoud en ondersteuning is de feedbackloop uitgebreid met een Slack-kanaal. Gebruikers kunnen hierin snel en eenvoudig vragen stellen en antwoorden krijgen over de werking van het design system. Hieruit komen ook weer nieuwe punten ter verbetering van het design system.