[{"data":1,"prerenderedAt":345},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-cases-slug-stamp-postnl-design-system-i18n-slugs":132,"language-cases-slug-nl-stamp-postnl-design-system":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","stamp-postnl-design-system",{"locale":137,"value":135},"nl",{"page":139,"cases":265},{"title":140,"slug":135,"i18nSlugs":141,"social":144,"heroIllustration":147,"caseTeaser":152,"content":155,"metaData":223,"quote":159,"author":159,"pivots":245},"PostNL",[142,143],{"locale":134,"value":135},{"locale":137,"value":135},{"title":145,"description":146,"image":104},"Stamp Design System voor PostNL ontwikkelt door De Voorhoede","Wij ontwikkelden Stamp, het design system voor PostNL, om consistentie en efficiëntie binnen alle teams te verbeteren. Lees meer over onze strategie en tools.",{"url":148,"alt":149,"width":150,"height":151},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1722604132-stamp-postnl.png","Stamp postnl design system",3840,2160,{"title":153,"image":154},"Een design system om de consistentie en efficiëntie verbeteren binnen alle teams van PostNL",{"url":148,"alt":149,"width":150,"height":151},[156,161,165,175,179,193,197,201,208,212,216],{"__typename":157,"id":158,"title":159,"body":160},"TextSectionRecord","RayTSN-nTDK3Bj78gDoECQ","","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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 \u003Ca href=\"https:\u002F\u002Fvoorhoede.nl\u002Fnl\u002Fservices\u002Fdesign-system\u002F\" title=\"service pagina over design systems\">design system\u003C\u002Fa> voor alle teams van PostNL. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":157,"id":162,"title":163,"body":164},"CZiiTPk_RZmT4I-gRvyHOQ","Één Design System voor React, Angular, Salesforce en andere teams","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":166,"id":167,"image":168,"caption":173,"captionPosition":174},"ImageRecord","annyFGi8QhC7u6O81eSWtA",{"url":169,"alt":170,"width":171,"height":172},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1719836066-componenten-postnl-design-system.png","design system componenten van postnl",1344,1001,"Design system componenten van PostNL","bottom",{"__typename":157,"id":176,"title":177,"body":178},"aKIsIyedS6CFvhhFRm2CMg","Nieuwe branding razendsnel uitgerold","\u003Cp>\u003Cspan style=\"font-weight: 400;\">De \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fstudiodumbar.com\u002Fwork\u002Fpostnl\" title=\"PostNL case van studio Dumbar over de nieuwe huisstijl\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">nieuwe PostNL huisstijl\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> 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.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch4>Design tokens\u003C\u002Fh4>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":180,"id":181,"mute":182,"loop":182,"autoplay":183,"caption":184,"gif":104,"video":185},"ResponsiveVideoRecord","S_86ovkaT9GSKc_025L6NQ",false,true,"Stamp Playground van PostNL - Tijdens een hackathon ontwikkelden we een prototype voor een Playground waarin iedereen, bijvoorbeeld ook een PO, een eerste user interface in elkaar kan klikken. ",{"url":186,"title":187,"height":188,"width":189,"provider":190,"providerUid":191,"thumbnailUrl":192},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=1ltp6ZYjbKs","Stamp Playground van PostNL",113,200,"youtube","1ltp6ZYjbKs","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F1ltp6ZYjbKs\u002Fhqdefault.jpg",{"__typename":157,"id":194,"title":195,"body":196},"cVkHr75lRUGHicruFWUfmQ","Digitaal toegankelijk als speerpunt","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":157,"id":198,"title":199,"body":200},"MYhq7lijQAWmMWf31VP8Aw","Centraal portaal voor alle disciplines: van designers tot copywriters","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":166,"id":202,"image":203,"caption":159,"captionPosition":174},"OVNWtB9dSUCkteFcH_P03A",{"url":204,"alt":205,"width":206,"height":207},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1722606005-homepage-postnl.png","homepagina van postnl.nl met de nieuwe branding",3416,1800,{"__typename":157,"id":209,"title":210,"body":211},"WYMbD-_6QaiOsvYiavosJQ","Adoptiestrategie van het design system","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":157,"id":213,"title":214,"body":215},"fKc33vqWSVKu6Tb_xOfS7A","Design system governance","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":217,"id":218,"title":219,"body":220,"linkLabel":221,"linkUrl":222},"CallToActionRecord","V1c4pIMrRSGUlclUOcxQCA","Wil jij net zo’n design system als PostNL? ","\u003Cp>Onze specialisten helpen je graag.\u003C\u002Fp>","Neem contact op","\u002Fnl\u002Fcontact\u002F",{"expertisesTitle":224,"expertises":225,"deliverableTitle":230,"deliverables":231,"technologiesTitle":233,"technologies":234,"interestedTitle":243,"interestedLinkUrl":244,"interestedLinkLabel":140},"Expertises",[226,228],{"title":227},"Toegankelijkheid",{"title":229},"Design System","Product",[232],{"title":229},"Technologieën",[235,237,239,241],{"title":236},"React",{"title":238},"AngularJS",{"title":240},"Figma",{"title":242},"Web Components","Bekijk resultaat","https:\u002F\u002Fwww.postnl.nl\u002F",[246],{"title":247,"body":248,"links":249,"mailchimpValue":159,"mailchimpName":159,"mailchimpId":159,"formType":257,"contactPerson":258},"Hulp nodig met jouw design system?","\u003Cp>Ontdek wat wij voor je kunnen doen voor jouw digitale product.\u003C\u002Fp>\n",[250],{"__typename":251,"id":252,"title":253,"link":254},"InternalLinkRecord","135155041","Lees meer over onze service",{"__typename":255,"slug":256},"ServiceRecord","design-system","none",{"name":259,"lastName":159,"jobTitle":260,"image":261},"Jasper","CTO, Co-founder",{"url":262,"alt":104,"width":263,"height":264},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,[266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,339,342],{"slug":267,"title":268},"quantum-inspire","Quantum Inspire",{"slug":270,"title":271},"life-terra","Life Terra",{"slug":273,"title":274},"geldmaat","Geldmaat",{"slug":276,"title":277},"pathe-thuis","Pathé Thuis",{"slug":279,"title":280},"viriciti","ViriCiti",{"slug":282,"title":283},"drop-and-fly","Drop & Fly",{"slug":285,"title":286},"15-apps-voor-wateronderzoek-bij-deltares","15 Apps voor wateronderzoek bij Deltares",{"slug":288,"title":289},"het-nieuwe-funda","Het nieuwe Funda",{"slug":291,"title":292},"bouwen-is-macht","Bouwen is Macht",{"slug":294,"title":295},"world-water-atlas","World Water Atlas",{"slug":297,"title":298},"pick-up-10","Pick Up 10",{"slug":300,"title":301},"hike-one","Hike One",{"slug":303,"title":304},"dlr-inspectie-app","DLR Inspectie app",{"slug":306,"title":307},"tradus","Tradus",{"slug":309,"title":310},"trouw","Trouw, Volkskrant en Parool",{"slug":312,"title":313},"abn-amro-lening-kieswijzer","ABN-AMRO lening kieswijzer",{"slug":315,"title":316},"npo-dashboard","NPO Dashboard",{"slug":318,"title":319},"hotel-en-bungalowspecials","Hotel- en BungalowSpecials",{"slug":321,"title":322},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":324,"title":325},"2dehands-be","2dehands.be",{"slug":327,"title":328},"swipe-and-shop","Swipe & Shop",{"slug":330,"title":331},"ziggo-interactieve-televisie","Ziggo Interactieve Televisie",{"slug":333,"title":334},"giftforyou","GiftForYou",{"slug":336,"title":337},"commtrac","Commtrac",{"slug":135,"title":140},{"slug":340,"title":341},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":343,"title":344},"privacy-by-design-in-je-bol","In je bol",1776256137976]