Eén systeem, consistent in elk scherm
TL;DR
Dialog bouwt een HR-suite voor performance, engagement en talent. Een design systeem was er niet, waardoor varianten verspreid lagen over losse Figma-bestanden. Ik nam de lead in het opzetten van het Dialog Design System (DDS): van design tokens tot componenten, patronen en paginatemplates. Het resultaat: developers én designers werken sneller, het systeem draait live in Storybook en is dankzij de documentatie ook bruikbaar voor AI, voor designer en developer.
Het probleem
Toen ik bij Dialog begon, was er geen design systeem. Wel een verouderde front-end stack en veel nadruk op het snel leveren van nieuwe features. Componenten waren niet gedocumenteerd en varianten bestonden alleen in losse Figma-bestanden, verstopt tussen schetsen en implementatieschermen. Wat ontbrak was één bron van waarheid.
Klein beginnen
Als Product Designer was het mijn taak om een schaalbaar design systeem op te zetten. Samen met twee front-end developers en één back-end developer begonnen we bij wat haalbaar was. Wat hebben we zelf nodig van een systeem, en hoe gaan we ermee werken? De belofte was bewust klein: een Storybook-omgeving voor de eerste componenten, onder de naam DDS, Dialog Design System.
De kaders waren strak. We werkten “just in time”: alleen componenten die we echt nodig hadden, werden gebouwd. Een complete rebrand van het product paste niet in de planning.
De rebrand als startpunt
De timing bleek wel perfect. Intern werd een rebrand aangekondigd, met een nieuw logo, nieuwe kleuren en een nieuwe merkbeleving. Het ideale moment om dat direct door te trekken in het product.
Samen met de twee front-enders legde ik de eerste design tokens vast voor kleur, interactie en spatiëring. Leesbaarheid en schaalbaarheid stonden voorop. Voor kleur begon ik bij nieuwe primitives (eerst vanuit Bootstrap, later Tailwind) en bouwde daar semantische tokens op. Zo pas je een merkkleur op één plek aan, en klopt hij overal.
Documenteren voor elke developer
Om het DDS handen en voeten te geven, gaf ik een presentatie aan het hele dev team: mijn visie op het systeem, de waarde voor snellere oplevering en wat ze van mij konden verwachten. Dat ging verder dan tokens voor kleur, viewport, typografie en margins. Elk component kreeg een spec-sheet (gebaseerd op het werk van Nathan Curtis) met alle gedragingen, varianten en staten. Zo heeft elke developer één referentie in plaats van losse Figma-bestanden.
Niet alleen in Figma
Een design systeem reikt verder dan pixels in Figma. Ik testte de opgeleverde componenten zelf intensief in Storybook. Daarnaast vroeg ik intern bij Visma advies over het AI-ready maken van een design systeem. Dankzij de documentatie is het DDS nu “redelijk AI-ready”, zelfs zo dat ik zelf PR’s push voor kleine aanpassingen aan het systeem. What a world to be alive in today!
Uitkomst
In vijf maanden ging Dialog van verspreide Figma-bestanden naar één gedeeld systeem. Het DDS bevat tokens, componenten, patronen en paginatemplates, live in Storybook en per component gedocumenteerd. Developers en designers bouwen sneller: features duurde maar 2 weken in plaats van een maand of 2. Op de interne eindejaarsupdate presenteerde ik het DDS aan het hele bedrijf, met succes!