Design System Safari bij DSW

Voor onze tweede Design System Safari mochten wij een kijkje in de keuken nemen bij zorgverzekeraar DSW. Wij gingen aan tafel met Rick (Design en Development), Marieke (Design), Bert (Design en Development), en Daniel (Developer / Architect) en vroegen hen alles over hun Design System ‘Daisy’. De dag van deze safari is een spannend moment, namelijk de release van hun eerste alpha versie!

Cijfers

1 Design System Team van 4 personen
18 designers
15 scrumteams met 120 IT’ers
20 producten
3 verschillende merken

Waarom een Design System?

Aanleiding voor een Design System kwam vooral vanuit development. Teams merkten dat ze dezelfde elementen steeds opnieuw aan het uitwerken waren. Daarnaast vormde accessibility een groot knelpunt. Elementen voldeden niet altijd aan de richtlijnen, terwijl toegankelijkheid wel iets is wat DSW ontzettend belangrijk vindt. Om dit beter en consistenter te kunnen doen is DSW in augustus 2018 begonnen met het opzetten van hun eigen Design System.

Zodat we niet elke keer het wiel opnieuw moeten uitvinden

Rick

Vrijwel alle producten worden bij DSW volledig in-house ontwikkeld. De uitgelezen kans dus om een Design System te ontwikkelen wat helemaal past bij hun wensen en werkwijze.

DSW tijdens de Design System Safari

Eerste stappen

Voordat DSW begon met hun Design System werkten ze al ‘component based’. Ze gebruikten een styleguide gebaseerd op SASS files die door verschillende applicaties werden hergebruikt. Atomic Design voelde als een logische vervolgstap, maar daar zijn ze eigenlijk al snel weer van afgestapt. In de praktijk bleek dit moeilijk uit te leggen en zeker het meekrijgen van stakeholders zonder technische achtergrond was bijna niet te doen. Na veel gesprekken als ‘is dit nu een atom of molecule?’ was de keuze snel gemaakt, dit moet anders.

Het Design System team is vervolgens helemaal opnieuw begonnen. Om overzicht te krijgen was de eerste stap om samen een component inventory (Design Audit) te doen. Dit gaf het team direct inzicht in de huidige staat van hun applicaties.

Er is gekozen om alle nieuwe applicaties met Angular te bouwen. DSW wilde echter niet vast zitten aan een specifieke 3rd party component library voor Angular. Na een aantal experimenten bleken bestaande oplossingen niet goed op hun wensen aan te sluiten. Ze bouwen daarom nu alles zelf en kijken goed naar de ‘lessons learned’ van anderen.

Bestaande pakketten doen vaak net niet wat we willen. We bouwen nu iets wat precies aan onze wensen voldoet.

Bert

We merken dat teams vaker kiezen voor het zelf bouwen van hun Design System. 37% van de deelnemers aan ons State of Design Systems onderzoek geeft aan hun Design System zelf te hebben gebouwd.

Open componenten

Om ervoor te zorgen dat een component geen “black box” is voor hun developers, maakt DSW gebruik van een principe dat zij ‘open componenten’ noemen. In plaats van dat het component alleen aangepast kan worden via een configuratie (en dus niet weet wat voor HTML er uit gaat komen), is het idee om bestaande HTML met logica te verrijken. Hierdoor heeft de ontwikkelaar volledige controle over het component en is er genoeg flexibiliteit voor eigen nuances in het component, maar kan hij wel voortbouwen op de bestaande code.

Als ontwikkelaar kun je nagenoeg dezelfde HTML schrijven als voor een normale tabel, je hebt slechts een paar (Angular) attributen en referenties nodig om de tabel aan het datamodel te koppelen en functionaliteit te bepalen. Het voordeel is dat je dan nog allerlei vrijheid hebt over de inhoud van je tabel cellen. Wanneer je bij bepaalde cellen een icon of inputveld wilt gebruiken, dan schrijf je dat gewoon in de HTML. Hiervoor hoeft geen configuratie aan Daisy worden toegevoegd.

Vervolgens krijg je van het tabel component allerlei logica, zoals het sorteren of het slepen van kolommen. Events voor het slepen worden gekoppeld via een eventmanager aan alle ‘table heads’.

voorbeeld van open componenten

Klein beginnen

DSW is klein begonnen met hun Design System. ‘Klantbeeld’ is de eerste applicatie die hier gebruik van gaat maken. Rick, Marieke, Bert, en Daniel zitten naast het Klantbeeld-team om te observeren hoe ze ermee werken. Hierdoor zijn ze in staat om verbeteringen door te voeren voordat anderen het Design System gaan gebruiken.

Zodra de resultaten van het eerste team goed zijn, is het de bedoeling dat er steeds meer teams aangehaakt worden. Op dat moment wil het Design System team alleen nog maar het Design System ‘bewaken’.

Wij zijn meer de gatekeeper, de rest gaat vooral bijdragen aan het Design System

Daniel

DSW probeert Daisy binnenkort te lanceren en vervolgens adequaat te reageren op wensen vanuit de organisatie. De dingen die het hardst nodig zijn worden als eerst opgeleverd. Ze blijven bij elke wens goed nadenken of deze echt toegevoegde waarde heeft; de ervaring leert dat het makkelijker is dingen toe te voegen dan weg te nemen of aan te passen.


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

Flexibiliteit voor verschillende merken

Onder het merk DSW vallen ook nog andere merken, zoals Stad Holland Zorgverzekeraar en inTwente Zorgverzekeraar. In plaats van alle styling ‘contained’ te houden (styling opslaan in de component) hebben ze ervoor gekozen om een globale styling op te zetten, met een andere invulling van variabelen per merk (thema). Per thema is er één grote stylesheet. Hier hebben we:

  1. root variabelen (design tokens);
  2. component groepen met eigen variabelen;
  3. eventueel daarop nog specifieke styles.

Hierdoor kunnen teams de bestaande code pakken en hoeven alleen nog maar een paar kleine dingen aan te passen om het te gebruiken in hun applicatie. Doormiddel van een dropdown kun je als gebruiker schakelen tussen de verschillende merken in het Design System.

Ons doel is om het leven van onze medewerkers makkelijker te maken door ze heel vrij te laten.

Bert
Daisy for all 3 brands
Design System voor alle 3 merken

Hoe nu verder?

Voordat ze hun eerste versie met de rest van de organisatie kunnen delen wil het team eerst nog alle bestaande componenten goed documenteren. Zodra er een basis staat zijn ze klaar om de rest van de organisatie te betrekken.

We weten nog niet precies hoe we alles gaan overbrengen, maar het is wel belangrijk dat dit goed gebeurd.

Bert

Daarnaast zijn ze nu druk bezig met hoe ze dingen kunnen opleveren aan hun ‘eindgebruikers’. Dit is wat ze nu aan het testen zijn met hun ‘Klantbeeld’ team. Het is voor DSW belangrijk om alle verschillende teams mee te nemen en ze het gevoel te geven dat ze hier een onderdeel van zijn. Het is nog zoeken naar een manier om alle non-developers, zoals testers en designers te ‘onboarden’.

We zijn nu aan het kijken hoe en wanneer we het willen gaan promoten. We zit te denken aan wat ludieke dingen, bijvoorbeeld een prijs.

Design Systems draaien 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. Wil je ook het proces beter aanpakken? Onze Design System Proces Puzzel kan je daarbij helpen.

Werkplek van het team bij DSW

Release eerste versie

Over 6 weken staat de release van de eerste versie gepland. Alle ‘basis’ componenten zitten dan in het Design System, zoals form controls, tabellen en accordions. Deze componenten willen ze vervolgens gebruiken in de ‘Klantbeeld’ applicatie.

De planning is dat binnen een half jaar 2 andere applicaties ook gaan aansluiten op het Design System.

De Design System tips van DSW

  • Breng alles terug tot de kern. Vraag je constant af ‘Wat is dit eigenlijk? Wat moet het kunnen? Wat is de functie?’. Begin dus niet gelijk met het uitwerken van component, maar doe eerst een stapje terug. Wanneer gebruik je bijvoorbeeld een knop en wanneer een link?
  • Zorg dat je snel een eerste versie hebt waar je op kunt itereren. Vraag de gebruikers van je Design System feedback, zodat je snel kunt leren en verbeteren!
  • Werk met open componenten, zodat developers van verschillende product teams zelf de controle hebben over de implementatie van een component. Men kan de standaard richtlijnen uit de styleguide volgen, of zijn eigen UI template schrijven voor een component zonder dat de achterliggende functionaliteit wijzigt.
  • Zorg voor een multidisciplinair team: developers, designers, testers etc. Blijf ook de business continu betrekken bij je Design System.

Meer weten over de details van ‘Daisy’? Neem contact op met het Design System team van DSW. Ze beantwoorden graag al jullie vragen. Mail naar: designsystem[at]dsw.nl


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 of download onze tools.

Aan de slag met Design System?

Niet zeker of je Design System nodig hebt? 
Probeer dan Design System Taster Workshop.

Vragen over Design Systems?
Maurice denkt graag met je mee.

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