Schaalbaar design system voor 30+ giftcardwebshops
Giftcards.Group
Design Systems
Voor Giftcards.Group ontwierp ik een schaalbaar design system dat meer dan 30 giftcardmerken ondersteunt. Elk merk heeft z'n eigen stijl, maar ze draaien allemaal op één visuele basis. Opgebouwd uit slimme tokens, variable modes en herbruikbare componenten. Het resultaat: sneller ontwerpen, makkelijker lanceren, en altijd consistent.
Impact
Resultaten in cijfers
80%
Minder libraries
3x
snellere brand launches
1
Systeem voor iedereen
Uitdaging
Giftcards.Group beheert meer dan 30 giftcardwebshops. Elk gebouwd in Storyblok, met een gedeelde technische basis. Maar in Figma was er geen centrale structuur: elk merk kreeg zijn eigen design library en los detail design. Dat leidde tot dubbel werk, inconsistente interfaces en het ontbreken van een schaalbaar designproces.
Oude situatie: zonder structuur en versnipperde systemen
Mijn oplossing was duidelijk: breng structuur in de visuele chaos. Ontwerp één centraal design system dat ruimte biedt aan de unieke stijl van elk merk, maar onder de motorkap werkt met een gedeelde, schaalbare basis. Een systeem dat logisch is voor developers, efficiënt is voor designers, en consistent is voor gebruikers. Flexibel aan de voorkant, slim en onderhoudbaar aan de achterkant.
.webp)
Nieuwe situatie: één centraal systeem waar alle merken aan gekoppeld zijn
Aanpak
Analyse en inventarisatie
Als enige UX/UI designer binnen Giftcards Group maakte ik onderdeel uit van een multidisciplinair team. Het designproces werd tot dan toe voornamelijk gedreven door grafisch vormgevers, waarbij elke webshop apart werd opgezet. Dit leverde mooie visuals op, maar er was geen overkoepelende structuur.
Product owners en developers hadden al langer de wens om het proces te standaardiseren en onderhoud te versnellen, maar het ontbrak aan de kennis om dit te vertalen naar een schaalbaar design system.
Mijn eerste stap: een brede inventarisatie, niet alleen van de designs, maar ook van de organisatie eromheen.
Product owners en developers hadden al langer de wens om het proces te standaardiseren en onderhoud te versnellen, maar het ontbrak aan de kennis om dit te vertalen naar een schaalbaar design system.
Mijn eerste stap: een brede inventarisatie, niet alleen van de designs, maar ook van de organisatie eromheen.
Stakeholders in kaart
Binnen Giftcards Group werkte ik in een multidisciplinair team waarin grafisch ontwerp, development en productmanagement samenkwamen. Mijn rol was om de brug te slaan tussen deze disciplines en ervoor te zorgen dat het nieuwe design system zowel visueel aantrekkelijk als technisch schaalbaar zou zijn.
Directe stakeholders:
- Category managers & Product Owners - wilden snellere lanceringen en minder handmatig werk per merk.
- Developers - vroegen om consistente componenten en een betere koppeling met Storyblok modules.
- Grafisch ontwerpers - wilden de creatieve vrijheid behouden binnen de kaders van de verschillende merkidentiteiten.
Indirecte stakeholders:
- Marketing & Branding teams - hadden behoefte aan merkconsistentie over campagnes en webshops heen.
- Managers - streefde naar lagere onderhoudskosten en een toekomstbestendig platform.
De gebruiker
- Consumenten - verwachten een herkenbare, consistente en soepele aankoopervaring, ongeacht het merk.
Door de belangen en afhankelijkheden van deze groepen te begrijpen, kon ik een systeem ontwerpen dat waarde toevoegt voor iedereen, van developer tot eindgebruiker.
Huidige situatie, pijnpunten en kansen
Na het in kaart brengen van alle stakeholders en hun rol in het designproces, bracht ik de huidige situatie in Figma en Storyblok gedetailleerd in beeld. Door deze analyse werden de belangrijkste pijnpunten en verbeterkansen zichtbaar, wat de basis vormde voor het ontwerp van het nieuwe, schaalbare design system.
De blauwdruk voor een schaalbaar design system
Nadat de huidige situatie, pijnpunten en kansen helder waren, begon het werk om die inzichten te vertalen naar een plan. Mijn doel: een centraal design system dat de basis vormt voor meer dan 30 giftcardwebshops, flexibel genoeg voor unieke merkidentiteiten, maar onder de motorkap volledig consistent.
Stap 1: Analyse van bestaande assets
.webp)
Voordat ik kon bouwen, moest ik begrijpen wat er nú was.Ik bracht alle 32 Figma libraries in kaart, inclusief hun componenten, stijlen en benamingstructuren. Deze inventarisatie liet direct zien waar dubbele content, ontbrekende tokens en inconsistenties zorgden voor extra werk.
Ik ontdekte onder andere:
Ik ontdekte onder andere:
- In elk bestand stond dezelfde set aan componenten, maar met een ander jasje. Dit betekent dus: 1 aanpassing van een component, 32 keer doorvoeren voor ieder merk
- De design tokens werden niet tot nauwelijks bijgehouden, waardoor tokens als font-size, line height en letter-spacing in de documentatie, niet overeen kwamen met de opgegeven styles in het Figma bestand zelf
- Veel aangemaakte Figma styles werden niet correct gekoppeld aan componenten, waardoor een aanpassing aan deze styles vaak niks deed, en elk component nog handmatig aangepast moet worden.
- Elke design library die later is aangemaakt, had een mix van alle voorgaande libraries meegenomen, waardoor de tokens niet consistent waren met wat live stond in Storyblok.
Stap 2: Uniformiteit als kracht
Met de uniformiteit van de webshops scherp in beeld, vertaalde ik mijn analyse naar een centrale systeembasis. Omdat alle functionaliteit en componentstructuur identiek was, richtte ik me op één gedeelde kern die via tokens en merk-specifieke assets eenvoudig aangepast kon worden.
De opbouw volgde het Atomic Design-principe: van basisstijlen en kleine componenten naar complete pagina’s. Zo bleven de kerncomponenten generiek en schaalbaar, terwijl kleur, typografie, en in de toekomst ook border radiuses per merk via tokens, opgebouwd in Figma variable modes, werden toegepast.
Dit maakt het mogelijk om nieuwe merken snel te lanceren, zonder ooit de onderliggende structuur te breken.
De opbouw volgde het Atomic Design-principe: van basisstijlen en kleine componenten naar complete pagina’s. Zo bleven de kerncomponenten generiek en schaalbaar, terwijl kleur, typografie, en in de toekomst ook border radiuses per merk via tokens, opgebouwd in Figma variable modes, werden toegepast.
Dit maakt het mogelijk om nieuwe merken snel te lanceren, zonder ooit de onderliggende structuur te breken.
Stap 3: Structuur inbouwen door middel van Figma variables
Met het inzicht dat alle merken technisch identiek zijn, ontwierp ik een centrale systeemstructuur die zowel schaalbaar als onderhoudbaar is. De kern werd gevormd door een token-hiërarchie die de visuele stijl van elk merk loskoppelt van de functionele componenten.
De opbouw:
De opbouw:
- Primitives: Basiswaarden zoals kleuren, typografie, spacing
- Semantic tokens: Functiegerichte variabelen zoals
color/button/primary - Component tokens: Direct toegepast in knoppen, formulieren, navigatie
Door te werken met variable modes in Figma kan elk merk in één klik van stijl wisselen, zonder dat de onderliggende componenten worden aangepast.
Dit vermindert onderhoud, voorkomt inconsistenties en maakt het eenvoudig om nieuwe merken in dagen in plaats van weken live te zetten.
Dit vermindert onderhoud, voorkomt inconsistenties en maakt het eenvoudig om nieuwe merken in dagen in plaats van weken live te zetten.
Stap 4: Opschalen naar 30+ merken
Toen de systeembasis stond, begon de uitrol. Alle 30+ giftcardwebshops werden aangesloten op één centrale Figma-library, volledig gekoppeld aan Storyblok. Elke merkvariant kreeg zijn eigen variable mode voor kleuren en typografie. De Assets zijn ook per merk onderverdeeld, en gekoppeld aan een variable, waardoor we binnen no time een nieuw merk klaar kunnen zetten voor livegang.
Alles op een rijtje
Het resultaat van dit project
- Nieuwe merken live in dagen in plaats van weken
- Consistentie over alle platforms, zonder merkidentiteit te verliezen
- Minder dubbel werk en minder fouten voor zowel design als development
.webp)
