Een vliegende start met het Design System van de gemeente Den Haag

De gemeente Den Haag breidt de webteams uit en zocht naar meer houvast in het ontwerp- en ontwikkelproces. Wij hebben ze geholpen met het vastleggen van een duidelijk proces. Ook de daarbij horende verantwoordelijkheden hebben we duidelijk gemaakt. Dit is allemaal beschreven hun spiksplinternieuw Design System.

Design System Take-off dag 1

Van styleguide naar Design System

Dit project begon met de vraag van de gemeente Den Haag om een Styleguide. De in-house designers en ontwikkelaars hadden meer houvast nodig bij de doorontwikkeling van Denhaag.nl en MijnDenHaag.nl. Uit deze vraag is het begin van een compleet Design System ontstaan.

In vier dagen hebben we samen met de gemeente Den Haag:

  • De kennis en kunde overgedragen om zelf aan de slag te gaan;
  • Een UI-kit opgezet in Sketch;
  • De eerste componenten ontworpen met behulp van de UI-kit en ontwikkeld in Fractal;
  • De eerste componenten gedocumenteerd voor toepassing en ontwikkeling;
  • Een roadmap voor het Design System beschreven voor de komende tijd;

De gemeente Den Haag heeft na 4 dagen nu genoeg kennis en informatie in huis om zelf aan de slag te gaan met het verder vullen van het Design System. Uiteindelijk hebben wij hen een nieuwe manier van werken aangeleerd en heeft de gemeente meer controle over het design en het proces eromheen.

Design System Den Haag

Samen met het hele team

Een Design System werkt alleen als iedereen zich aan de afspraken houdt. Draagvlak binnen de organisatie is dus enorm belangrijk. Uit ons onderzoek over de staat van Design Systems in Nederland blijkt dat de samenwerking en adoptie binnen de organisaties één van de allergrootste pijnpunten is. Daarom zijn er op dag 1 en 2 van de Design System Take Off zoveel mogelijk mensen betrokken om mee te denken over de juiste samenwerking en insteek. Dit betrof mensen vanuit vele verschillende disciplines zoals content specialisten, accessibility specialisten, scrum masters, product owners, designers, front-enders, back-end developers en online specialisten.

Design System Rollen

Vanuit Angi Studio waren er twee facilitators voor 2 dagen, 1 developer voor 2 dagen en 1 designer voor 2 dagen aanwezig, zodat we de gemeente Den Haag zo goed mogelijk kunnen begeleiden.

Op deze manier staat iedereen vanaf het begin achter het proces en is het duidelijk wat de verantwoordelijkheden binnen het team zijn voor het Design System. Een goed begin is in dit geval zeker het halve werk!

Componenten in Design System

Het doel

Het Design System dat is opgezet, geldt voor DenHaag.nl, MijnDenHaag.nl en de formulieren die op beide domeinen te vinden zijn. Deze digitale producten moeten uiteindelijk allemaal voldoen aan design, front-end en accessibility richtlijnen. Voor accessibility zijn er heel veel verschillende hulpmiddelen voor de borging van kwaliteit waar rekening mee gehouden moet worden. Een paar voorbeelden hiervan zijn de schrijfwijzer, AVG, W3C en WCAG 2.1. Al deze richtlijnen in combinatie met scenario’s, coding guidelines en huisstijl gidsen hebben nu een plekje gevonden in het Design System van de gemeente Den Haag.

Het doel van het online team van de gemeente Den Haag is om over twee jaar alle componenten te hebben beschreven in het Design System en deze op beide platformen te gebruiken. Dit komt de consistentie van de gebruikerservaring alleen maar ten goede.

Toegankelijkheid

Uitdagingen & proces

Tijdens de eerste twee dagen van de Design System Take Off lag de focus vooral op de uitdagingen in kaart brengen en een juiste procesbeschrijving. De eerste dag begon dan ook met elkaar interviewen en ‘Hoe Kunnen We’s opschrijven. Op deze manier kunnen we vanuit verschillende disciplines naar aan Design System te kijken. Hoe gaat het nu en hoe gaat een Design System ons in het vervolg helpen? Wat zijn mogelijke hobbels op de weg? Hieruit bleek dat de grootste uitdagingen voor de teams van de gemeente Den Haag de volgende waren:

  • WCAG & AVG richtlijnen al in het design proces meenemen
  • Zorgen dat documentatie en ontwerpen voor iedereen toegankelijk zijn
  • Dezelfde werkwijze hanteren tussen verschillende teams

In de procesbeschrijving heeft de gemeente Den Haag vervolgens zo goed mogelijk deze problemen en uitdagingen proberen te tackelen, zoals bijvoorbeeld een Definition of Done opstellen. Ook is er tijdens de Design System Take Off een UI-kit opgezet waarin de meest gebruikte componenten staan. Hierin hebben wij als Angi Studio de gemeente Den Haag goed kunnen begeleiden. Hierdoor kan de ontwerper heel snel pagina’s opbouwen vanuit bestaande bouwblokken zonder iedere keer het wiel opnieuw te hoeven uitvinden.

Design System Proces

Wat heeft het gemeente Den Haag opgeleverd?

Uiteindelijk is het Design System in een aangepaste Fractal omgeving opgebouwd en kan iedereen binnen het team toegang krijgen tot het de UI-kit, de code componenten en de beschrijving die daarbij hoort. Alle onderdelen om met het Design System aan de slag te gaan staan erin. De gemeente Den Haag kan nu zelf aan de slag met het verder uitwerken van componenten en templates.


3 tips voor een vliegende start met het Design System 👍

Design Systems draait voor 80% om mensen en hoe we met elkaar samenwerken. Het valt of staat om een goed proces en de afspraken die we met elkaar maken.

Tip 1: Begin niet te groot

Wat heb je als team echt nodig? Waar kun je mee beginnen? Definieer een Minimal Viable Design System voor jouw organisatie. Onze checklist kan je bij helpen met het creëren van focus.

Tip 2: betrek gebruikers vanaf het begin

Zorg dat je mensen uit de gehele organisatie betrekt, zodat het geen één richtingsverkeer is. Veel teams zitten momenteel vaak nog in een soort cocon, terwijl het veel beter is voor de adoptie van je Design System om gebruikers vanaf het begin te betrekken. Zorg voor Design System Advocates die je helpen het Design System intern te promoten. In onze Design System Take Off zorgen we ervoor dat gebruikers vanaf het begin betrokken zijn.

Tip 3: Zorg voor een go!

Zorg dat er voldoende tijd is om je Design System uit te werken en te onderhouden. Developers moeten het met elkaar eens zijn over de technische implementatie en Managers en Stakeholders moeten zeker weten dat het de moeite waard is om in te investeren. Doe bijvoorbeeld een Design Audit om te laten zien wat er mis gaat. Dat is trouwens heel gezond om de elke 6 maanden te doen.

Je hebt veel tijd en energie in je Design System gestoken, maar adoptie binnen je organisatie gaat moeizaam. Met onze Design System Booster geven wij in één dag je Design System een boost!


Meer over Design Systems?

Ben je benieuwd hoe andere organisaties in Nederland Design Systems bouwen en onderhouden? Lees dan onze uitgebreide onderzoek State of Design Systems in Nederlands, 2018.

Of bezoek onze Meetups over Design Systems.

Vragen over Design System? 
Maurice denkt met je mee.

Wij gebruiken cookies voor de beste ervaring van de website. Tijd teveel, beklijk onze privacyverklaring