This content is password protected. To view it please enter your password below:

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’. Zien hoe dit werkt? Download de code snippet van DSW.

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 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.

Een vliegende start met je Design System, hoe dan?

Thursday, 28 February om 17:45

67 deelnemers

Get your Design System up and running, but how?

Tuesday, 5 March om 18:00

104 deelnemers

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.

Maurice Timp

Onze Design System Lead beantwoordt graag al jouw vragen.

Stel Maurice jouw vraag

Design Sprint & the immense value of failure

We fail every day. But we are often so worried about our failure that we create vague goals, so that nobody can point the finger when we don’t achieve them. Tonight we discussed how a Design Sprint creates a safe environment to be able to fail and learn.

How do you experiment?

We always like an active Meetup, so right before the presentation, we did a practical exercise. with the whole group. During the exercise we got up on our feet and shared our knowledge and experience with experimenting. We shared our experience about the amount of experiments, measuring success and which conditions we need to freely experiment.

Most large organizations embrace the idea of invention, but are not willing to suffer the string of failed experiments necessary to get there.

Jeff Bezos, Founder of Amazon

We fail every day. But we are often so worried about our failure that we create vague goals, so that nobody can point the finger when we don’t achieve them. We imagine all the possible excuses why things went this way, instead of learning from our mistakes.

Michael Jordan failed over 9000 times!

Create a safe environment to fail

With a Design Sprint you create a safe environment to be able to fail and learn together with your team in 4 days. During this Meetup we showed how to get the most value from experiments and how a Design Sprint can help you with this. Like SNS Bank, they experimented with a lot of new ideas during the sprint. At the end of the 4 days, they were able to decide which parts to build and which parts they didn’t have to invest any time in.

Success can only happen when we admit our mistakes, learn from them, and create a climate where it is in a certain sense, ‘safe’ to fail.

Matthew Syed, Black Box Thinking

📚 Book tip! 📚

Still not convinced failing is best way to learn? We highly recommend ‘Black Box Thinking‘ from Matthew Syed.

Download slides

Verder met Design Sprints?

Experimenteren met Design Sprints? Esther helpt je op weg.

Esther Wieringa

Onze Design Sprint Lead beantwoordt graag al jouw vragen over Design Sprints.

Stel Esther jouw vraag

Help, I have a Design System, now what?

Developing and maintaining a Design System is a hot topic right now. Setting up and improving your Design System can be very challenging. This evening we will share our experiences with helping companies and organisation setting up their own Design System.

puzzel

What have we learned from ‘State of Design Systems 2018’ survey

In this Meetup we shared our insights from ‘State of Design Systems’ survey that we conducted among 260+ designers and developers from the Netherlands! ❤️

Together with the participants we discussed the most interesting insights we found. We asked them how they perceive these challenges and how they would solve them.

Design System Proces Puzzel 

Design Systems are 80% about people and how they work together. This is one of the biggest challenges people face when setting up and using a Design System. In our survey we used process and collaboration as main focus.

During this Meetup we focused on this particular challenge and gave the participants a fictional case. In small teams we asked them to create a fictional process by using our Design System Process Puzzle to solve the following problem:

Cool Design System! I need a live chat, how do I add it to the Design System?

After everyone created their own process, the teams shared insights and discussed their flows.

Download the Slides

Ready to start with your Design System? Join us at our next Meetup in The Hague or Amsterdam

Een vliegende start met je Design System, hoe dan?

Thursday, 28 February om 17:45

67 deelnemers

Get your Design System up and running, but how?

Tuesday, 5 March om 18:00

104 deelnemers

Verder met je Design System?

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

Aan de slag met Design Systems?
Maurice denkt met je mee.

Maurice Timp

Onze Design System Lead beantwoordt graag al jouw vragen.

Stel Maurice jouw vraag

Help, ik heb een Design System. Wat nu?

Design by Fire Café

Het ontwikkelen en onderhouden van een consistente gebruikerservaring is tegenwoordig helemaal hot. Het aantal devices en platformen dat we als ontwerpers en ontwikkelaars moeten ondersteunen groeit snel. Een Design System kan helpen om hiermee om te gaan.

Design by Fire

Learnings uit ‘State of Design Systems 2018’ questionnaire

Tijdens de Meetup deelden we onze inzichten uit de ‘State of Design Systems’ questionnaire welke is ingevuld door meer dan 260 Nederlandse designers en developers! ❤️

Samen met de groep bespraken we de meest opvallende punten waar men tegenaan loopt. Hoe ervaart de groep deze pijnpunten en hoe lossen zij dit nu op?

Design System Proces Puzzel 

Een Design System is eigenlijk 80% mensen en hoe we met elkaar samenwerken. Dit is dan ook precies het grootste pijnpunt waar iedereen tegenaan loopt met het opzetten en gebruiken van zijn Design System. Dit vormde dan ook de rode draad in ons eigen onderzoek.

Daarom gingen we precies met dit pijnpunt aan de slag in het praktische deel van de Meetup. In kleine groepjes gingen de deelnemers aan de slag met de ‘Design System Proces Puzzel‘ op basis van een fictieve case.

De situatie van de case: 
Je krijgt de volgende vraag van een Designer uit een ander team: “Cool Design System! Ik ben bezig met het maken van een live chat, hoe voeg ik dat toe?”

De deelnemers puzzelden per groepje hun eigen proces in elkaar.

Download slides

Verder met jouw design system?

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

Aan de slag met Design Systems?
Maurice denkt met je mee.

Maurice Timp

Onze Design System Lead beantwoordt graag al jouw vragen.

Stel Maurice jouw vraag

State of Design Systems in NL
[Ladies that UX]

Developing and maintaining a Design System is a hot topic right now. Setting up and improving your Design System can be very challenging. This evening we will share our experiences with helping companies and organisation setting up their own Design System.

Download the slides
ltux

What have we learned from ‘State of Design Systems 2018’ survey

In this Meetup we shared our insights from ‘State of Design Systems’ survey that we conducted among 260+ designers and developers from the Netherlands! ❤️

Together with the participants we discussed the most interesting insights we found. We asked them how they perceive these challenges and how they would solve them.

Design System Proces Puzzel 

Design Systems are 80% about people and how they work together. This is one of the biggest challenges people face when setting up and using a Design System. In our survey we used process and collaboration as main focus.

During this Meetup we focused on this particular challenge and gave the participants a fictional case. In small teams we asked them to create a fictional process by using our Design System Process Puzzle to solve the following problem:

Cool Design System! I need a live chat, how do I add it to the Design System?

After everyone created their own process, the teams shared insights and discussed their flows.

Interested in more Design System related tools? Check out our Design System tools 🔥

discussing proces puzzles
Download slides

Ready to start with your Design System? Join us at our next Meetup in The Hague

Een vliegende start met je Design System, hoe dan?

Thursday, 28 February om 17:45

67 deelnemers

Get your Design System up and running, but how?

Tuesday, 5 March om 18:00

104 deelnemers

Verder met jouw Design System?

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

Instagram

All our Instagram links on one page!

@angi_studio


Meetup slides 🇳🇱

Set the stage: Hoe kies je de juiste probleemstelling voor je design sprint?

Hoe kies je de juiste probleemstelling voor je Design Sprint?

Hoewel een design sprint een plug-and-play proces is, valt of staat een sprint met een goed gekozen uitdaging. We hebben helaas vaak genoeg gezien dat teams niet alles uit een design sprints halen doordat doelen heel abstract blijven of niet de kern van het probleem raken. Tijdens deze Meetup gingen we in op de voorbereiding voor je Design Sprint.

Download slides

Een goed begin van je Design Sprint

Inmiddels hebben we al meer dan 50 sprints gefaciliteerd, maar dat betekend niet dat elke sprint even succesvol was. We proberen daarvan te leren, door hier op te reflecteren en dit proces te verbeteren. Tijdens deze Meetup lieten we twee korte oefeningen zien die je samen met je team kunt doen om een goede start te maken met de sprint en met de juiste uitdaging aan de slag te gaan. Een goed begin is immers het halve werk 😉

Wat maakt een problem statement ‘goed’

We hebben met elkaar 6 voorbeelden van productstatements uit de praktijk besproken en samen benoemd wat een statement goed of slecht maakt.
Hier is er een handig lijstje uitgekomen.

Lijstje wat een problem statement goed en slecht maakt

Problem framing in 5 stappen

Je wil je design sprint niet verspillen aan verkeerde probleem. Hoe pak je het juiste probleem bij de wortels?
Samen met de deelnemers hebben we stap 3 en 4 van de ‘problem framing’ oefening gedaan. 3 teams gingen met hetzelfde statement aan de slag: ‘Mijn organisatie is bang te experimenteren’.

Hier zijn als resultaat drie mooie ‘problem trees’ uitgekomen. Veel overeenkomsten en toch een aantal duidelijke verschillen per team.

Download slides

Zelf aan de slag met de oefeningen uit deze Meetup?

Problem Tree

You don’t want to waste time on solving superficial problems. If you want to create impact, you have to solve the root of your problem. The Problem Tree helps you find that problem worth solving.

Future mapping oefening

Future mapping helpt je om kansen te ontdekken om te innoveren. Gebruik deze oefening om samen met jouw team trends te ontdekken.

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