Design System Geld.nl

🔷 Uitdaging

Door de groei van Geld.nl waren componenten, stijlen en contentblokken op verschillende manieren opgebouwd. Dit zorgde voor inconsistentie tussen producten, meer onderhoud en een minder efficiënte samenwerking tussen design en development. De uitdaging was om een schaalbaar design system te ontwikkelen dat de basis vormt voor alle digitale producten van Geld.nl.


🔷 Aanpak

▸ Atomic Design als fundament: ik heb het design system opnieuw opgebouwd volgens de principes van Atomic Design. Hierdoor ontstond een duidelijke hiërarchie van design tokens, foundations, componenten en templates.

▸ Design Tokens & Figma libraries: ik introduceerde Design Tokens voor kleuren, typografie, spacing en andere foundations en werkte een centrale Figma library uit met schaalbare componenten en varianten.

▸ Herbruikbare componenten: bestaande UI-elementen en contentblokken zijn gestandaardiseerd tot flexibele componenten die eenvoudig kunnen worden hergebruikt binnen verschillende producten en pagina's.

▸ Doorontwikkeling van het design system: Bij de verdere ontwikkeling van het design system heb ik AI ingezet als sparringpartner om de structuur, consistentie en schaalbaarheid verder te verbeteren. Deze inzichten heb ik vertaald naar concrete ontwerpkeuzes binnen Figma.

▸ Samenwerking met development: samen met developers zorgde ik ervoor dat het design system niet alleen visueel consistent was, maar ook technisch goed aansloot op de implementatie.


🔷 Resultaat

Het resultaat is een toekomstbestendig design system dat als fundament dient voor de digitale producten van Geld.nl. Dankzij Atomic Design, Design Tokens en een centrale Figma library werken designers en developers consistenter en efficiënter samen. Nieuwe pagina's en functionaliteiten kunnen sneller worden ontwikkeld, terwijl de gebruikerservaring en merkconsistentie behouden blijven.