Wanneer loont een design system en wanneer is het overkill?

Een design system komt zelden ter sprake omdat een directie besluit dat het bedrijf er één nodig heeft. Vaker verschijnt het als onderdeel van een voorstel voor een nieuwe website, applicatie of digitaal platform. En dan ontstaat een logische vraag: hebben we dit echt nodig?

Het antwoord is lang niet altijd ja. Een goed design system kan veel tijd besparen, de kwaliteit verhogen en ervoor zorgen dat verschillende digitale producten als één merk blijven voelen. Daar staat beheer tegenover. Wie één overzichtelijke website heeft waarop één team werkt, haalt dezelfde voordelen met een veel eenvoudigere oplossing.

De vraag is daarom niet hoe groot je website is, maar hoeveel herhaling, afstemming en inconsistentie er binnen je digitale omgeving ontstaat. Een design system wordt interessant zodra het goedkoper en makkelijker wordt om keuzes centraal vast te leggen dan om ze telkens opnieuw te maken.

Wat is een design system?

Een design system is een verzameling herbruikbare regels, onderdelen en afspraken waarmee digitale producten consistent kunnen worden ontworpen en ontwikkeld. Daaronder vallen kleuren, typografie en afstanden, maar ook knoppen, formulieren, navigatie, kaarten en andere onderdelen van de interface. Een volwassen design system legt daarnaast vast hoe die onderdelen worden toegepast, wanneer er nieuwe bij mogen komen en hoe wijzigingen worden beheerd.

Je kunt het daarmee zien als de gedeelde basis waarop websites, apps, klantportalen en andere digitale producten worden gebouwd.

Dat heeft een praktisch voordeel. Een ontwerper hoeft niet opnieuw te bepalen hoe een formulier eruitziet, en een ontwikkelaar hoeft geen knop te bouwen die ergens anders al bestaat. Werken verschillende teams aan verschillende producten, dan vertrekken ze allemaal vanaf hetzelfde punt.

Het doel is dus niet om creativiteit weg te nemen, maar om beslissingen die al een keer goed zijn genomen niet steeds opnieuw te hoeven nemen. Een design system legt vast wat niet iedere keer opnieuw bedacht hoeft te worden.

Een huisstijl, componentenbibliotheek en design system zijn niet hetzelfde

De begrippen worden regelmatig door elkaar gebruikt, terwijl er een belangrijk verschil tussen zit.

Een huisstijl bepaalt hoe een merk zich visueel presenteert. Denk aan logo, kleurgebruik, typografie, fotografie en andere visuele uitgangspunten. Een componentenbibliotheek bevat herbruikbare digitale onderdelen: in plaats van op iedere pagina opnieuw een knop, kaart of formulier te ontwerpen en te bouwen, maak je die één keer en gebruik je ze op meerdere plaatsen. Een design system gaat verder en brengt ontwerpregels, componenten, documentatie en beheer samen in één systeem dat door verschillende producten en teams gebruikt kan worden.

Dat verschil is belangrijk, omdat niet iedere organisatie die met componenten werkt meteen een volledig design system nodig heeft.

Voor veel websites is een goede huisstijl in combinatie met een solide componentenarchitectuur daarom al voldoende.

Welk probleem lost een design system eigenlijk op?

De waarde van een design system ontstaat vooral wanneer een organisatie groeit.

Bij één website en een klein team is afstemming eenvoudig. Dezelfde ontwerper weet welke keuzes eerder zijn gemaakt en de ontwikkelaars kennen de bestaande componenten. Veel kennis zit vanzelfsprekend bij de mensen die dagelijks aan het product werken.

Dat verandert zodra de digitale omgeving groter wordt. Naast de corporate website komt een klantportaal. Een tweede team bouwt een applicatie. Marketing werkt met een extern bureau aan campagnepagina's. Een andere leverancier ontwikkelt een configurator, en intern worden ondertussen nieuwe functies toegevoegd.

Al die teams nemen dagelijks kleine beslissingen. Welke kleur krijgt deze status? Hoe ziet een foutmelding eruit? Welke knop gebruiken we hier, hoeveel ruimte zit er tussen de onderdelen, en hoe gedraagt een formulier zich op mobiel?

Als iedereen daarvoor zelf een oplossing bedenkt, ontstaan er langzaam verschillen. Niet omdat mensen slecht werk leveren, maar omdat dezelfde vragen onafhankelijk van elkaar worden opgelost. Een design system maakt van die losse beslissingen gedeelde afspraken.

De echte drempel is niet het aantal pagina's

Een website met tweehonderd pagina's kan technisch relatief eenvoudig zijn, terwijl een organisatie met drie kleinere digitale producten juist veel behoefte heeft aan standaardisatie. Het aantal pagina's zegt daarom weinig. Interessanter is hoeveel herhaling en afstemming er ontstaat.

Een design system wordt relevanter wanneer meerdere ontwerpers of ontwikkelaars aan dezelfde digitale omgeving werken, wanneer er verschillende bureaus bij betrokken zijn, wanneer dezelfde componenten in meerdere producten terugkomen of wanneer veranderingen op veel verschillende plaatsen moeten worden doorgevoerd.

Denk aan een organisatie met een corporate website, een serviceportaal en een configurator. Als die alle drie dezelfde merkidentiteit gebruiken, dezelfde formulieren bevatten en vergelijkbare interacties hebben, is het inefficiënt om die oplossingen drie keer afzonderlijk te ontwerpen en te onderhouden.

Dan ontstaat er schaalvoordeel. Niet omdat het bedrijf groot is, maar omdat hetzelfde digitale vraagstuk meerdere keren terugkomt.

Wanneer heb je een design system nodig?

Er bestaat geen vast aantal medewerkers, pagina's of producten waarna een design system automatisch rendabel wordt. Wel zijn er signalen dat de investering interessant begint te worden.

Je hebt meerdere digitale producten

Een website, klantportaal, app, platform of configurator hoeft niet iedere keer opnieuw vanaf nul ontworpen te worden. Hoe meer overlap er tussen die omgevingen bestaat, hoe groter de waarde van gedeelde bouwstenen.

Meerdere teams of bureaus werken aan hetzelfde merk

Zodra verschillende partijen ontwerpen en ontwikkelen, groeit de behoefte aan één gedeeld uitgangspunt. Een design system zorgt ervoor dat niet iedere leverancier zijn eigen interpretatie van dezelfde interface maakt.

Dezelfde onderdelen worden steeds opnieuw gebouwd

Onderhouden teams meerdere varianten van dezelfde knoppen, formulieren, kaarten of navigatie-onderdelen, dan wordt standaardisatie interessant.

Consistentie wordt moeilijker te bewaken

Een merk kan op papier één identiteit hebben en digitaal toch versnipperd raken, vooral wanneer producten onafhankelijk van elkaar worden ontwikkeld. Een design system helpt om die ervaring weer bij elkaar te brengen.

Wijzigingen moeten op meerdere plaatsen worden doorgevoerd

Een centrale basis wordt bijzonder waardevol zodra een verandering niet op één plek, maar op meerdere websites en applicaties moet landen.

Wanneer is een design system juist overkill?

Voor veel organisaties is het antwoord voorlopig dat ze het niet nodig hebben. Heb je één relatief overzichtelijke website, wordt die door één vast team onderhouden en verandert de digitale omgeving niet voortdurend, dan kan een volwaardig design system meer beheer opleveren dan het bespaart.

Wat je dan wel wilt, is dat de website goed is opgebouwd. Knoppen horen niet twintig keer afzonderlijk ontworpen te zijn, en hetzelfde geldt voor formulieren, kaarten, typografie en veelgebruikte contentblokken. Die wil je als herbruikbare componenten opbouwen, zodat wijzigingen centraal kunnen worden doorgevoerd. Dat is gewoon goed bouwwerk.

Het verschil is dat je daar niet meteen een aparte systematiek van documentatie, beheer, versies en organisatiebrede invoering omheen hoeft te bouwen. Een goed gebouwde website heeft herbruikbare componenten nodig; een organisatie heeft pas een design system nodig wanneer die componenten over meerdere producten, teams of processen heen waarde gaan leveren.

Die nuance voorkomt dat een relatief eenvoudig webproject onnodig groot wordt gemaakt.

Een design system is geen project dat na oplevering klaar is

Hier wordt de investering vaak onderschat. De eerste versie bouwen is overzichtelijk; daarna begint het werk pas echt.

Digitale producten veranderen. Nieuwe functies worden toegevoegd, technologie ontwikkelt zich, de merkidentiteit verandert, toegankelijkheidseisen worden aangescherpt en teams lopen tegen situaties aan die eerder niet waren voorzien. Het design system moet daarin meegroeien.

Dat betekent dat iemand moet bepalen wanneer een nieuw onderdeel wordt toegevoegd, hoe een bestaand onderdeel wordt aangepast, en hoe wijzigingen terechtkomen in de producten die ervan afhankelijk zijn. Daarom horen beheer en eigenaarschap bij een volwassen design system. Niet per se in de vorm van een groot team dat er alleen voor bestaat, maar wel met een duidelijk antwoord op de vraag wie verantwoordelijk is voor de kwaliteit en de ontwikkeling ervan.

Een systeem waar niemand eigenaar van is, loopt langzaam achter op de praktijk. Teams gaan er vervolgens omheen werken omdat dat op korte termijn sneller is. Vanaf dat moment neemt juist de inconsistentie toe die het systeem had moeten voorkomen.

De belangrijkste vraag is daarom niet alleen of je een design system kunt laten bouwen, maar of je het daarna wilt blijven onderhouden.

Design tokens maken veranderingen schaalbaar

Onder de zichtbare componenten ligt nog een laag die voor schaalbaarheid belangrijk is: design tokens. In plaats van op honderden plekken dezelfde kleurcode, lettergrootte of afronding vast te leggen, krijgt zo'n ontwerpkeuze een centrale naam en waarde. Een knop gebruikt dan niet zelfstandig een specifieke kleur, maar verwijst naar de vastgelegde kleur voor primaire acties.

Dat lijkt technisch, maar het zakelijke voordeel is eenvoudig. Wanneer een merk verandert, hoeft niet op iedere plek afzonderlijk gezocht te worden waar een bepaalde waarde is gebruikt. Een wijziging in de centrale ontwerpregels werkt door in alle componenten die daarvan gebruikmaken.

Design tokens maken een design system daarmee niet alleen consistenter, maar ook beter aanpasbaar.

Begin klein en bouw alleen wat werkelijk wordt gebruikt

Een design system hoeft niet compleet te zijn voordat het waarde kan leveren. Vooraf iedere mogelijke component bedenken is meestal niet de verstandigste aanpak.

Begin bij wat er werkelijk gebruikt wordt. Bouwt een organisatie een nieuw platform, dan kunnen de eerste componenten daarvan de basis vormen: typografie, knoppen, formulieren, navigatie en veelgebruikte contentblokken. Wordt er later een tweede digitaal product ontwikkeld, dan kijk je welke bestaande onderdelen herbruikbaar zijn en welke nieuwe patronen structureel waarde toevoegen.

Zo groeit het systeem mee met de digitale omgeving. Niet iedere denkbare variant wordt vooraf ontworpen; nieuwe onderdelen komen erbij omdat de praktijk erom vraagt.

Dat maakt de investering beheersbaarder en vergroot de kans dat het systeem ook echt wordt gebruikt.

De businesscase zit in wat je niet meer dubbel hoeft te doen

Een design system kost geld om te ontwerpen, te bouwen en te onderhouden. De opbrengst zit vervolgens verspreid over verschillende projecten en teams. Dat maakt de businesscase minder zichtbaar dan die van één nieuwe website.

Toch kun je vrij eenvoudig bepalen waar de mogelijke waarde zit. Kijk naar de afgelopen twaalf maanden. Hoe vaak is er iets ontworpen of gebouwd dat binnen de organisatie al bestond? Hoeveel tijd gaat er op aan afstemming over terugkerende interfacevragen? Hoeveel verschillende versies van vergelijkbare componenten worden er onderhouden, en hoeveel handwerk ontstaat er wanneer iets in de huisstijl of de interface verandert?

Komen die problemen nauwelijks voor, dan heb je waarschijnlijk geen uitgebreid design system nodig. Komen dezelfde vragen telkens terug, dan betaal je de kosten van het ontbreken ervan al. Alleen verspreid over projecten, leveranciers en interne uren.

De businesscase van een design system zit niet in wat je bouwt, maar in wat je daarna niet meer opnieuw hoeft te bouwen.

Componentenlaag of design system?

Voor veel organisaties komt de beslissing uiteindelijk hierop neer.

• Eén website, één team en beperkte digitale complexiteit. Bouw een goede componentenbasis in de website en houd het eenvoudig.

• Meerdere digitale producten met veel dezelfde functionaliteit. Dan wordt het interessant om herbruikbare onderdelen buiten één product te organiseren.

• Meerdere teams of leveranciers die structureel aan hetzelfde digitale landschap werken. Dan wordt een volwaardig design system steeds waardevoller.

• Geen eigenaar of capaciteit om het systeem te onderhouden. Maak het voorlopig niet groter dan je kunt beheren.

Het volwassen antwoord is dus niet standaard een uitgebreider systeem. Het is de kleinst mogelijke structuur die voldoende is voor de complexiteit van je organisatie.

Een design system moet de organisatie eenvoudiger maken

Een goed design system is uiteindelijk geen doel op zichzelf. Het moet ervoor zorgen dat teams sneller kunnen werken, dat producten consistenter worden en dat digitale ontwikkeling makkelijker meegroeit. Voegt het meer processen, documentatie en onderhoud toe dan het aan dubbel werk wegneemt, dan is het te groot voor wat je nodig hebt.

Daarom kijken wij niet alleen naar de vraag of een design system technisch mogelijk is. We kijken naar het digitale landschap eromheen: welke producten er zijn, wie eraan werkt, hoeveel overlap er bestaat en hoe de organisatie zich de komende jaren wil ontwikkelen.

Soms is het antwoord een volwaardig design system. Soms een gedeelde componentenbibliotheek. En soms gewoon een uitstekend opgebouwde website.

De beste oplossing is niet de grootste, maar degene die voorkomt dat je digitale omgeving complexer wordt dan nodig.

Welke structuur past bij jouw digitale landschap?

Zo bespaar je euro's aan beheer dat je niet gebruikt.

Bespreek je digitale landschap