Waarom een Design System?

RVO laat klanten verschillende applicaties gebruiken (zoals e-Loket, UPNL en TriplEforms) om zaken te regelen. Bijvoorbeeld voor het aanvragen van subsidie. Deze applicaties zien er visueel verschillend uit en werken ook niet altijd hetzelfde. In de ene applicatie kan de verzenden knop rechts staan waarbij deze in een andere applicaties links is uitgelijnd.

Het verschil in zowel look en feel als in de manier waarop de applicaties gebruikt worden is verwarrend voor de klant. Het komt namelijk voor dat de klant het ene moment een subsidie aanvraagt in de ene applicatie en een ander moment gebruik maakt van een regeling in een andere applicatie.

Overschakelen naar één applicatie is technisch en financieel niet haalbaar. De klant moet echter niet merken dat er op de achtergrond verschillende applicaties gebruikt worden. Hier biedt een Design System uitkomst. 

Wat is een Design System?

In het Design System wordt vastgelegd hoe componenten er uit zien. Denk aan een button, menubalk, tabel of formulier. Alle applicaties kunnen deze stijlen gebruiken maar ook aangeven wat zij nog missen of anders zouden willen zien in het Design System. Zo ontstaat er een feedback loop waarbij het Design System constant verbeterd wordt.

Dit Design System wordt gebruikt om de voorkant (front-end) van alle applicaties vorm te geven. Dus technisch zijn de applicaties op de achtergrond verschillend maar voor de bezoeker is er geen verschil.

Verbeteren van communicatie tussen developers en designers

Daarnaast zorgt het Design System ervoor dat designers en developers beter met elkaar kunnen samenwerken omdat alle designkeuzes zijn vastgelegd en gedocumenteerd.

De developers (ontwikkelaars of programmeurs) kunnen gebruik maken van de Storybook omgeving.

In deze omgeving zijn de verschillende componenten van het Design System vastgelegd in code. Developers kunnen gemakkelijk beschikbare code en assets (CSS bestanden, iconen en afbeeldingen) gebruiken in hun eigen projecten.

De designers kunnen gebruik maken van een Figma bestand. Hiermee kunnen designers snel schermen ontwerpen door gebruik te maken van de componenten in de library. 

Omdat de componenten in Figma hetzelfde zijn als de componenten in Storybook kan een developer een Figma ontwerp realiseren door de beschikbare code uit Storybook te gebruiken. Dit voorkomt onnodige communicatie en contactmomenten waarin de designer en developer elkaar proberen te begrijpen. 

Werkwijze synchronisatie

De Storybook omgeving is leidend. De componenten zoals ze daar getoond worden is hoe ze ook daadwerkelijk in de applicaties getoond (moeten) worden. 

De componenten in Storybook zijn opgebouwd uit HTML, CSS en Javascript. Omdat alle (web) applicaties uiteindelijk ook HTML, CSS en Javascript tonen aan de klant is de weergave binnen Storybook het meest realistisch. De componenten kunnen daarom ook bekeken en getest worden in verschillende browsers en op verschillende apparaten, zoals een mobiele telefoon of een tablet.

Daarnaast gebruikt Figma een eigen rendering engine. Dat wil zeggen dat Figma ervoor zorgt de componenten er op alle apparaten er hetzelfde uit zien. Dit is handig als je met verschillende teams aan dezelfde ontwerpen werkt. Dit is echter geen realistische weergave van hoe de klant uiteindelijk de schermen te zien krijgt omdat elk apparaat en elke browser ook een eigen rendering engine heeft.

Werkwijze ontwikkelen nieuwe componenten

Designers geven aan dat een bepaald component mist, bijvoorbeeld een accordion. In werksessies gaan we deze componenten samen met de designers ontwikkelen. We kijken naar de beschikbare UX onderzoeken en best practices en proberen zo tot een nieuw component te komen. Dit component wordt dan in Storybook als een HTML/CSS prototype opgenomen. Als iedereen zich kan vinden in het component wordt het opgenomen als Storybook story en daarna nagemaakt in Figma. 

Rijkshuisstijl Design System

Omdat RVO zich moet houden aan de Rijkshuisstijl zijn alle componenten in ons Design System goedgekeurd door onze interne Rijkshuisstijl coördinatoren. 

De Rijkshuisstijl is echter beperkt en niet genoeg doorontwikkeld op het gebied van digitalisatie. Zoals zelf aangegeven bij de Online componenten:

“Naast de verplichte bouwstenen van de Rijkshuisstijl (logo, online kleuren en webfonts) zijn er nu ook visuele voorbeelden van online componenten. Deze zijn puur ter inspiratie en niet in beton gegoten omdat de context van een component tot andere vormkeuzes kan leiden.”

Hierdoor laat de Rijkshuisstijl veel ruimte voor interpretatie. Daarnaast voldoen niet alle online componenten zoals aangeboden door de Rijkshuisstijl aan de toegankelijkheidseisen (WCAG). We zijn daarom genoodzaakt aanpassingen te doen om er op die manier voor te zorgen dat wij ons aan de wet houden. 

Een goed voorbeeld is de rand om een input tekst veld. In de Rijkshuisstijl wordt een wit veld zonder rand op een lichtgrijze achtergrond getoond. Deze contrastwaarde is voor veel gebruikers te laag en daardoor zijn de velden slechts zichtbaar. In ons Design System tonen we de velden daarom met een duidelijke zwarte rand.

Andere Design Systems op basis van de Rijkshuisstijl

Het afgelopen jaar ben ik erachter gekomen dat RVO niet de enige, maar ook zeker niet de eerste, overheidsorganisatie is die een Design System aan het ontwikkelen is op basis van de Rijkshuisstijl. Zo zijn er:

• UNO van DUO
• Bold van de Belastingdienst (niet publiekelijk toegankelijk)
• Het CIBG Design System van het Ministerie van Volksgezondheid, Welzijn en Sport

En er zijn er vast nog veel meer waar ik het bestaan niet van af weet. 

Maar waarom het wiel opnieuw uitvinden en een eigen Design System op basis van de Rijkshuisstijl optuigen?

Aansluiten bij het NL Design System

Als RVO hebben we vrij snel besloten dat we willen aansluiten bij het NL Design System. Het NL Design System is een initiatief van Gebruiker Centraal dat samenwerken tussen overheidsinstanties stimuleert. Wij vinden het belangrijk hier aan bij te dragen. 

RVO is de eerste overheidsorganisatie die moet voldoen aan de Rijkshuisstijl en een Design System via de architectuur (Storybook i.c.m. Design tokens) heeft opgezet. De bovengenoemde andere Rijkshuisstijl Design Systems zijn niet aangesloten bij het NL Design System.

Mijn persoonlijke hoop is dat ons Design System, in samenwerking met het NL Design System, de basis is van een overkoepelend Rijkshuisstijl Design System waar meerdere overheidsorganisaties samen ontwikkelen aan stijlen, componenten en patronen. Naar het voorbeeld van het Design System van de Engelse overheid.

Meer weten over het Rijkshuisstijl Design System?

Bekijk mijn presentatie die ik heb gegeven over het Design System van RVO voor de Design System Week van Gebruiker Centraal.

Heb je vragen of opmerkingen over bovenstaande? Laat het mij weten door hieronder een reactie achter te laten.