Design System Safari at Amsterdam UMC

For this Design System Safari we were invited by Robert van de Linde, designer at the Amsterdam UMC. Recently, the board of Amsterdam UMC and VUmc hospital joined forces. Represented as one overarching hospital, all internal and external communication needs to feel consistent. A huge challenge for Robert, being the only digital designer in an organisation of 22.000 people (!!).

Anna and Robert talking
Robert and Anna during the Design System Safari

Robert started his career as a graphic designer/artist. 8 years ago he joined the Amsterdam UMC as a webdesigner. He is part of the department of internal and external communication, located right in the middle of the hospital. In the last 8 years developed a lot more skills than just graphic design. Robert does some visual design, UX design and little bit of front-end every now and then.

When you’re part of a small in-house team, you have to be able to do a bit of everything.

Robert

We talked with Robert about starting his Design System, the challenges he faces in setting it up and being the only designer in an organisation of 22.000 people.

Developer hand-off

Even though Robert is the only designer in his team he felt the need for a more structured workflow. Especially considering developer hand-off, since he’s working a lot with external developers. By adopting Atomic Design and making agreements about how they work together, collaboration would be a lot easier and faster.

The collaboration Robert pointed out here is exactly what Design Systems are about. Design Systems aren’t only about components, but is for 80% about governance. Our Design System Proces Puzzle could help you define your process together with your team.

His first step was a static style guide, but it didn’t feel quite right. Robert illustrated this beautifully: the style guide felt like a pile of Lego bricks. Bricks are great for building, but the outcomes can be completely different when there are no instructions. Besides colors and fonts, they need ‘instructions’ to create this consistent user experience. That’s why Robert started working on a more living library in Frontify. As he calls it: Design System 1.0!

A styleguide is like a pile of Lego, without instructions it can become anything.

Sketch + Abstract + Frontify

As a designer, Robert mainly works in Sketch. We were really impressed by the amount of work he already put in his Sketch library. Practically all elements you can think of using for the Amsterdam UMC are part of the library as smart components. This helps Robert a lot in speeding up the design. With all elements being in place it might just take one day to redesign a full Amsterdam UMC app.

With this Sketch Library I can easily redesign one of the AMC apps in just one day

Robert

Robert uses Sketch in combination with Abstract for version control. Even though it’s just for him, it helps to keep his work structured and easy to find back any changes he made.

Screenshot of Abstract
Abstract environment of Amsterdam UMC

Amsterdam UMC is mostly a Windows-oriented environment. To make the Design System accessible by his colleagues, he chose to use Frontify for Design System 1.0. For developer hand off, Robert uses Abstract. Abstract helps external developers implementing elements in a consistent way.

The Frontify environment is set up in two main categories: ‘base elements’ and ‘guidelines’. Base elements consists all basic elements, sorted in an Atomic Design way (atoms and molecules). Robert chose to start with the most visible parts like colors, fonts, buttons, shapes and icons. Guidelines focus more on how to use these elements. For example how and when to use certain colors or avatars.

Adding the external front-end developers to Abstract was a huge success. Robert: “the designer and front-end developer I’m working with are so happy!”. There is a lot less confusion in collaboration.

💡 Tip: Define a Minimal Viable Design System for your organization. What do you really need as a team? What could you start with? Our checklist can help you get more focus.

Finding allies

One of the challenges Robert is facing is that design/digital isn’t core-business at the hospital. That’s why development of a Design System is not a top priority. His advice? Try to find some allies and partners in the organization. He explains: “this Design System would really help with branding, so I’m now partnering with someone who’s involved in the overall branding of the hospital, he/she can help me spread the word through other parts of the organization.”

Expanding the Design System

When we spoke with Robert about his plans for the upcoming months, his approach is all about making impact. Starting with parts of our online presence which are very visible to stakeholders and visitors. In this case it will be the corporate website.

Another wish is to also include his content colleagues. He explained his colleagues have a lot of freedom within the CMS (GX). According to Robert, a great addition would be if they had agreements on how to set up articles on the website. Things like: structure of the pages, what are we communicating, tone-of-voice etc.

The possibilities we offer are maybe a bit too much, people get very creative 🙂

Robert
Robert showing the Design System of AMC
Robert showing the AMC Design System

3 tips from Amsterdam UMC

We asked Robert what his 3 tips would be for other designers in the same situation. What would you advise them when they want to start with their own Design System?

  • Use your freedom and create your own role. Being alone can be an impediment, but if you turn it around, you have a lot of opportunities to shape things the way you like it.
  • Just do it! It’s that easy, just start somewhere. Even though you have just a small part of your Design System, you can start looking for allies within your organization.
  • Don’t be overwhelmed by all the big companies like Airbnb. You are not like them. Choose the things which have the most impact in your organization. “Others will probably move faster than you, but so be it!”


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.

The Lean Design System of Greenchoice: How to create a Design System on the fly

Thursday, 25 April om 18:00

26 deelnemers

Verder met jouw eigen Design System?

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.

The Lean Design System of Greenchoice: How to create a Design System on the fly

Thursday, 25 April om 18:00

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

Design System Safari bij Priva

Priva, misschien niet een naam die direct een belletje doet rinkelen maar de kans is groot dat ook in jouw kantoor iets van hen aanwezig is! Priva richt zich namelijk op de software en regeltechniek van klimaatbeheersing. Naast de kantooromgeving ontwikkelt Priva ook klimaatoplossingen voor de tuinbouw en indoor farming.

Ruim een half jaar geleden zijn Peter en Sigrid gestart met het opzetten van een Priva-breed Design System, welke inmiddels  wordt doorontwikkeld door het UX team nu bestaande uit Ben, Louis, Margina, Peter, Tommy en Tristan.

Wij hadden de mogelijkheid om Tristan (UX), Peter (Front-end Developer) en Margina (Design System Owner) te interviewen en ze alles te vragen over hun Design System. Hoe ze begonnen zijn, de tooling die ze gebruiken, de adoptie en hun plannen voor 2019. Hun belangrijkste tip? Vier vooral ook je successen!

Statistieken

1 UX team van 6 personen (design en front-end), 6 development teams, 3 Product Owners, 15 webapplicaties, 6 maanden sinds de start van hun Design System

Design System Safari bij Priva

Waarom een Design System?

De belangrijkste reden voor Priva om te starten met een Design System was om consistentie te bewerkstelligen. Je moet je voorstellen: 6 development teams met 3 Product Owners die in bijna 60 jaar allemaal verschillende applicaties hebben ontwikkeld met allemaal hun eigen vormgeving, componenten en interactiepatronen. Het UX team merkte dat er geen cohesie meer was waardoor er allemaal losse eilandjes ontstonden. Het kwam er op neer dat iedereen zijn eigen implementatie had, “eigenlijk een Design System in het hoofd”. Tijd voor verandering.

Door het Design System willen we een transitie maken zodat we alle development teams op één lijn krijgen.

Demo van Design System

Eerste stappen

Voor Priva lag de focus in eerste instantie op de componenten en UI-kant. De eerste stap was het inventariseren van front-end componenten. Peter: “Ik ben simpelweg binnen projecten gaan zoeken naar componenten die overeenkomen. Ik ben een lange tijd bezig geweest met het inventariseren en matchen van HTML en CSS. Samen met Sigrid heb ik vervolgens het belang van een Design System op de kaart weten te zetten. Sigrid heeft de UX processen opgezet en geimplementeerd om ons design systeem verder te ontwikkelen.”

Van statische Wiki naar levend Design System in Figma en Storybook

De documentatie met rationale achter de componenten werd in eerste instantie in Sketch gemaakt. Een wiki op Azure DevOps (VSTS) werd gevuld met PNG-exports van deze documentatie. Dit is lastig te onderhouden omdat bij elke wijziging van een component er nieuwe screenshots geüpload moesten worden. Het team merkte dat ze moesten zoeken naar een andere oplossing.

Wanneer je statische visual design voorbeelden gaat gebruiken zijn deze ontzettend snel ‘outdated.

Al snel kwam het idee om alles in de cloud-based design tool Figma te bouwen. Met de live-embed functionaliteit kon altijd de laatste versie van zowel de componenten als documentatie ervan gedeeld worden. Figma dient als ‘single source of truth’ voor de interactie, het design en de documentatie van componenten. Vanuit Figma wordt er naar ieder component gelinkt in Storybook. Hierdoor kijkt iedereen altijd naar hetzelfde component en is er één plek waar alle informatie staat.

Design System in Figma
Feedback geven op componenten via Figma

Een eigen systeem

Het mooie aan een Design System is dat er niet één manier de juiste is, het gaat er om wat werkt voor jouw team en organisatie en dat doet Figma zeker voor Priva. Waar ze het meest trots op zijn zijn alle ‘systeempjes’ die ze zelf hebben bedacht in en rondom Figma om de communicatie en het gebruik inzichtelijk te houden. Ook Uber hanteert een soortgelijke aanpak in hun Base-UI System.

Overlays

Zowel design als documentatie van vastgelegde componenten leven naast elkaar in Figma. Om verwarring te voorkomen over wat nog ‘in progress’ is, bedacht het team een visuele aanwijzing. Oranje blokjes worden als arcering gebruikt om aan te geven aan Developers “bouw dit vooral nog niet”, bijvoorbeeld wanneer er nog geen verdere flow achter zit.

'In progress' overlay
‘In progress’ overlay

States in Storybook 

Met ‘knobs’ in Storybook kun je niet alleen de content van componenten bewerken, maar zie je ook de modulariteit van een component direct in werking door onderdelen aan en uit te zetten. Bijvoorbeeld de component grootte, titel/subtitel, met of zonder knop. Bekijk hieronder hoe het werkt 👇

Opstarten kost veel tijd

Tijdens ons onderzoek naar State of Design Systems in Nederland zagen we duidelijk dat opstarten veel tijd kost, iets dat bij Priva het geval was.

Het ontwikkelen en beheren van het Design System is één van de vele werkzaamheden die ze verrichten. Daarnaast wordt er veel ontwikkelt en bedacht, van kleine applicatie aanpassingen tot nieuwe producten. Het kost allemaal veel tijd. 

“Vanwege een reorganisatie hadden we voor even meer tijd om echt stappen te maken met het Design System. Nu komen we alweer een beetje in het nauw, om een voorbeeld te geven: wij doen ook veel bouwbegeleiding. Je snijdt je steeds in vingers, het is of documentatie verzorgen of begeleiden. Wat is belangrijker? Het zijn dynamische tijden voor ons. We moeten focus gaan creëren. 

Volledige focus

Als oplossing hebben ze Margina (Design System Owner) gevraagd om 80% van haar tijd aan het Design System te spenderen, anders komt men er simpelweg niet aan toe. Peter (Front-end Developer) is 100% van zijn tijd met het Design System bezig. Hij is onder andere bezig met bouwbegeleiding, implementatie, updates aan Storybook en het schrijven van front-end code. Tristan (UX) doet 80% projectwerk en is daarnaast voor 20% betrokken bij de ontwikkeling van het Design System.

Hoe nu verder?

Waar het team nu vooral nog tegenaan loopt is de adoptiegraad binnen de product teams. Uit ons onderzoek bleek dat dit probleem voor veel organisaties een uitdaging is.

In 2019 is UX geen afdeling meer, maar een mindset.

Priva heeft nu één applicatie draaien die gebruik maakt van het Design System, de rest nog niet. Er wordt nog veel ontwikkelt in oudere versies waardoor het bijna niet te onderhouden is. Margina: “Het overzicht en hoe alles elkaar raakt zit vooral in onze hoofden. We missen nog wel een stuk architectuur. Hoe verhoudt alles zich tot elkaar?”.

Momenteel staan componenten wel al in front-end, maar nog niet in Figma of zijn deze nog niet gedocumenteerd, dit willen ze naar elkaar toe gaan brengen in Figma. 

Daarnaast moeten ze Product Owners en Developers gaan overtuigen dat het Design System meerwaarde biedt en dat ze het écht nodig hebben.

Kijkje in de keuken

De Design System tips van Priva

  • Als eerste: veel eerder op het proces gaan zitten. Daarin ook de Product Owners en Developers vanaf het begin betrekken. Het was tot nu toe vooral nog een ‘UX feestje’. Als je wil dat het verder gaat groeien, moet er een gedeelde verantwoordelijkheid komen.
  • De ontwikkeling en groei van het Design System nog meer over de as van projecten doen. Hierbij eerst een bare minimum opzetten met componenten die je gaat toepassen in je project. De keuzes pas maken als je ook gaat implementeren, in plaats van alles globaal proberen op te pakken.
  • Een Design System Owner aanwijzen. We zitten met zoveel ontwerpers bij elkaar en iedereen heeft duidelijk zijn eigen mening. Je wilt eigenlijk iemand hebben die zegt: ‘zo gaan we het doen’.
  • Het ook leuk houden! Priva heeft bijvoorbeeld hele specifieke componenten. Deze er af en toe bijpakken als afwisseling houdt het proces een stuk leuker. “Die standaard checkboxes en dropdowns kennen we nu wel.”.
  • Onze beste tip: Vier het! Sta ook stil bij successen. Je verzand namelijk heel snel in: “en verder, en verder en verder”.

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.

Maurice Timp

Onze Design System Lead beantwoordt graag al jouw vragen.

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

Help I have Design System. Now What?

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.

Process-puzzle-exercise
Download the slides

Verder met jouw design system?

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?

Het ontwikkelen en onderhouden van een Design System is tegenwoordig helemaal hot. Dit opzetten en uitbreiden is alleen vaak makkelijker gezegd dan gedaan. Deze avond deelden we met de groep hun Design System ervaringen. Hoe kun je het goed opzetten, onderhouden en schalen.

Anna en Maurice presenteren Design System Meetup

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.

Design System Proces Puzzel
Download de slides

Verder met jouw design system?

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 Nederland 

In september 2018 voerden wij een onderzoek uit naar de huidige staat van Design Systems in Nederland. In dit artikel willen we jou meenemen in de resultaten van dat onderzoek en delen we wat wij allemaal geleerd hebben.

Wanneer je begint met je Design System is eigenlijk je enige referentie de ‘best in class’ Design Systems als Carbon, Polaris en Lightning Design System. Indrukwekkend en voor veel organisaties een droom Design System, maar wat misschien nu nog niet past bij jouw organisatie. In Nederland zijn er weinig bedrijven die het zo massief oppakken. Ook zitten veel Design Systems achter slot en grendel. Je hebt eigenlijk weinig kleine en realistische voorbeelden.

Daarom was ons primaire doel met deze questionnaire om kennis te delen en te leren van anderen. Hoe pakt de Nederlandse markt het aan en hoe kunnen we voorkomen dat we straks dezelfde fouten maken? Hoe helpen we een Design System neerzetten wat past bij jouw bedrijf, jouw werkwijze en jouw team en hoe kun je daar maximaal van profiteren?

Wie deden er mee?

We zijn super blij met de 260+ reacties die we hebben ontvangen van de Nederlandse (UX) design en front-end community. ❤️ De questionnaire is breed gedeeld op Linkedin, Facebook, Linkedin en onze Meetup groep.

De respondenten bestonden vooral uit designers en front-end developers. 35% is UX designer, 31% UI-/visual designer en 10% is front-end developer.

  • 50% werkt in-house bij een organisatie
  • 26% is werkzaam als freelancer
  • 24% werkt bij een agency.

Een groot scala aan sectoren is vertegenwoordigd: IT, financiële dienstverlening, e-commerce, overheid, telecom, energie en meer. Een mooie weerspiegeling van de markt. In deze rapportage focussen we specifiek op in-house teams bij organisaties.

Bijna alle A-merken op de Nederlandse markt zijn vertegenwoordigd.

Veel grote organisaties hebben deelgenomen aan het onderzoek. Bijna de helft (46%) van de respondenten is werkzaam bij organisatie met 500+ medewerkers.

Van onze respondenten werkt 39% bij organisaties met één team van meerdere designers. 34% heeft één of meerdere designers per development team en 17% zijn de enige designer binnen het bedrijf. Slechts 6% van respondenten heeft aangeven dat ze geen eigen design team hebben.

*Dit onderzoek is verkennend en inventariserend van aard, de uitkomsten van dit onderzoek zijn indicatief en geen bewezen feiten. Het is het beeld wat bij de respondenten leeft, niet de volledige markt.

overzicht

Hoe staat het er nu voor?

Terug naar inhoud

Straks heeft 80% van de respondenten een Design System

Van onze respondenten heeft 63% aangegeven dat ze al een Design System hebben en 17% is er druk mee bezig. 20% van de respondenten heeft geen Design System, omdat ze niet weten wat het is of het niet nodig vinden.

De term Design System leeft, maar er zijn verschillende opvattingen over

Als eerste de belangrijkste vraag: wat is een Design System nou eigenlijk? Zoals we wel hadden verwacht zijn hier veel verschillende opvattingen over. De term leeft, je hoort het veel, maar we hebben het duidelijk niet over hetzelfde…

1. Design System is een UI kit

Er is een grote groep die een Design System omschrijft als stijlgids of UI kit:

Een uitgebreide styleguide waar al je visuele componenten staan met uitleg waar en hoe te gebruiken.

Een Design System is een snelle, efficiënte manier om een stijlgids binnen een bedrijf door te voeren en te communiceren…

Verder zijn er respondenten die het al heel duidelijk omschrijven dat het proces er omheen heel belangrijk is en vooral ook hoe het uitgebreid kan worden.

Als een product, het proces er omheen is erg belangrijk. Voor ons is een design system een product dat bestaat uit visual design language, elementen, componenten en patterns. […]

2. Design System is ‘Way of work’

Een klein aantal gaan er nog veel verder in. Het is de ‘way of work’  We vinden dit zelf een hele mooie quote, het is eigen de enige manier om er überhaupt grip op te houden. Uiteindelijk is het een systeem hoe je werkt, niet het resultaat wat er uit komt.

Voor ons is het een way of work waarin we decentrale development kunnen verbeteren. Voor ons intern, maar juist ook voor de eindgebruiker. De deliverable is een website met styleguide, getting started, guidelines en ready-to-use componenten.

We hebben een aantal quotes verzameld die volgens ons heel mooi verwoorden wat een Design System inhoud. Elke quote bevat een belangrijke redenen en aspecten voor een Design System. Het laat vooral zien: het is niet slechts een tool.

Een Design System is dé enige bron van waarheid.

Een levende collectie van herbruikbare componenten, gebaseerd op duidelijke standaarden tbv consistentie in klantbeleving en snelheid van realisatie.

Het Design System evolueert met het product, de tools en nieuwe technologieën.

Een Design System slaat een brug tussen user experience en development en zorgt voor uniformiteit binnen verschillende teams en applicaties.

Design Systems zijn relatief nieuw 👶

Wat voor ons redelijk onverwacht was dat onder de doelgroep van respondenten het relatief nieuw is. 66% heeft het minder dat een jaar, net in gebruik eigenlijk. 19% heeft het nu 1-2 jaar in gebruik. Slechts 15% heeft het langer dan 2 jaar.

Design System

Design System in gebruik 

Terug naar inhoud

,Wanneer we het hebben over Design Systems gaat het snel over tooling. Welke tools komen het meest voor? Sketch Library staat met 68% met stip op nummer 1. Gevolgd door zelfgemaakt in front-end (37%) en Invision DSM (23%).

Heel opmerkelijk dat Sketch Library zo’n groot marktaandeel heeft. We waren vooral benieuwd naar de combinatie met andere tooling. Een Design System stopt niet bij een design in Sketch. Hoe gaat het dan verder? Waar wordt het gedocumenteerd? De processen of coding standaarden? Dat zit toch niet allemaal in een Sketch Library? Welke combinaties worden het meest gebruikt?

Grootste aandeel (31%) is voor Sketch in combinatie met zelfgemaakt in front-end, gevolgd door Sketch & Invision DSM. Toch gebruikt 22% van onze respondenten alleen Sketch Library. We zijn heel benieuwd: hoe gaan Product Owners hier mee om? Hoe leeft het binnen de organisatie? Hoe is de kennisoverdracht of onboarding?

9/10 Design Systems zijn vooral visueel ingesteld

 Vraag:Wat zit er allemaal in een Design System?

We weten wat er allemaal in kán zitten maar wat zit er nu echt in? Dit waren hele duidelijke uitkomsten. 9/10 Design Systems bevat visual language (kleur, typografie, icons etc.), UI elementen (knoppen, form controls, etc.) en UI componenten (pagina headers, footer, tabellen, paginatie, navigatie, etc.). Heel erg visueel ingesteld dus. 9/10 Design Systems is dus meer een styleguide.

Slechts 1 op de 5 Design Systems heeft processen en onboarding opgenomen. Denk bij proces aan vooral aan samenwerking. Stel ik ben Product Owner en wil een nieuw component, hoe vraag ik dat dan aan, hoe geef ik feedback als een component niet converteert in de test of hoe wordt mijn input gebruikt? Bij onboarding gaat het erom hoe snel nieuwe teamleden hier mee aan de slag kunnen. Iets wat essentieel is voor adoptie binnen je organisatie.

Een ‘strict’ design system heeft de voorkeur

Mag iedereen zomaar dingen toevoegen en wijzigen of zijn er mensen specifiek voor aangewezen? We zien een voorkeur of lichte trend naar een meer ‘strict’ Design System.

UX designers, UI designers en Front-end developers zijn er primair bij betrokken

Wat we zien is dat de designers en front-enders duidelijk de kar trekken. Zij zijn dan ook in de meeste gevallen eindverantwoordelijk. Is er een dedicated Design System team? Dan nemen zij de lead. 24% van de respondenten heeft een dedicated Design System team.

Design Systems zijn levend, dagelijks in gebruik

Leuk om te zien dat het zo leeft, dagelijks in gebruik. 30% gebruikt het zelfs meerdere keren per dag. Er is geen enkele stijlgids die zo intensief wordt gebruikt. Ook updaten gebeurd regelmatig 58% wekelijks doet dit wekelijks en 15% zelf dagelijks. Heel erg in ontwikkeling dus.

Waar loopt men tegenaan?

Waar loopt men tegenaan?

Terug naar inhoud

Het primaire doelen van ons onderzoek was, hoe we kunnen leren van anderen en hoe we als community meer van elkaar leren. Waar lopen ze tegenaan en hoe kun je dit voorkomen?

Wat we heel duidelijk zagen is dat opstarten veel tijd kost. In het begin komt er veel verandering. Je herziet een component veel of veel dingen moeten nog besproken worden.

Er zijn ook veel respondenten die aangeven: “het is nog niet live, maar nog ontwikkeling”. Hier lijkt het alsof het Design System een heel groot project of grote kluif aan werk wordt en ontzettend lang duurt. Verder weet een groot deel van de mensen ook niet waar te beginnen.

Als men eenmaal een start heeft gemaakt met het Design System zijn er twee grote thema’s waar ze tegenaan lopen:

Samenwerking en adoptie

Dat samenwerking lastig is, is een rode draad en vormt ook de grootste hoeveelheid aan reacties. Als je nagaat dat een Design System 80% mensen is. Dan is dat ook precies het pijnpunt waar iedereen tegenaan loopt. Het gaat hier niet alleen om designers onderling, maar bijvoorbeeld ook met developers. Hoe maak je het toegankelijk en hoe gaan ze het gebruiken.

Samenwerking is vrij lastig, soms voelt het alsof je de politie moet uit gaan hangen. Het design systems is nog niet af 😉

Bij samenwerken hoort ook een stukje adoptie binnen de organisatie. Het delen en enthousiasmeren van collega in het (UX)design team daarbuiten. Onze respondenten vinden het heel erg lastig om hun organisatie mee te krijgen en feedback te krijgen op het Design System. Er is behoefte aan feedback, zonder feedback weet je niet wat je moet verbeteren en of het wel gebruikt wordt.

Het is teveel “zender-gebaseerd“. Te weinig feedback van gebruikers.

Proces en collega’s waarde laten inzien van DS

Wildgroei en inconsistentie

Dit is precies waar een Design System voor bedoeld is, om te voorkomen dat er wildgroei ontstaat. Dit zijn de gevaren van wat er gebeurd wanneer je het proces niet op orde hebt. Dan is alles lekker ‘loose’ en je hebt veel vrijheid als ontwerper, maar het begin als snel uit zijn jasje te groeien. Een jaar verder en je kan haast weer opnieuw beginnen.

Wij hebben een hele grote bak met legacy. […] Daarnaast is iedereen vrij om dingen toe te voegen aan het Design System (uiteraard wel via ons team), waarbij we soms dingen moeten toelaten die we liever niet willen zien.

Overzicht ontbreekt, zodat er wildgroei ontstaat van componenten etc. Ook is er geen duidelijk Design System voor mobiel. Dus hier worden dingen naar ieders eigen inzien bepaald.

Andere terugkerende thema’s zijn:

Structuur en opbouw

Er zijn veel manieren om een Design System op te zetten en men vindt het heel lastig om de goede manier te vinden.

Single source of thruth

Onduidelijk waar te kijken voor een laatste versie of specifiek component. Vaak versnipperd over verschillende tools. Documentatie van je keuzes kan je hierbij helpen.

Up-to-date houden

Dit is iets wat voor veel teams heel lastig blijft. Voelt erg omslachtig. Wordt veel extra werk gedaan om bij te houden wat de laatste versie is.

Magische wensen

Magische wensen voor je Design System

Terug naar inhoud

We vroegen aan onze respondenten die al een Design System hebben, wat zou je aan jullie Design System willen verbeteren? Wat als je 3 magische wensen had?

1. Betere samenwerking 

Heel logisch, dat is ook waar men het meeste tegenaan loopt. Bij de respondenten zit het vooral in enthousiasme van collega’s, dat het gaat leven binnen de organisatie, dat mensen er gebruik van maken en dat hoe we met elkaar werken duidelijk wordt.

2. Makkelijk updaten en doorontwikkeling 

Hoe updaten we een component en hoe voegen we een component toe? Dat moet sneller en eenvoudiger kunnen.

3. Koppeling tussen design en front-end  

Het lijken nu soms wel twee aparte werelden.

4. Single source of truth  

Simpelweg: waar staat het? Eén plek die voor de hele organisatie toegankelijk is, met goede structuur en waar je alles kunt bekijken.

5. Betere onboarding  

Men wil vooral dat proces en tooling goed beschreven staan. Dat het niet maanden duurt voordat een nieuw teamlid is ingewerkt.

6. Tooling en uitbreiding 

Wat onze respondenten vooral willen is uitbreiding van hun Design System. Bijvoorbeeld het toevoegen van flows, design principes, gebruikers inzichten, brand guides, micro interactions en coding standaarden.

Opnieuw beginnen met je Design System

Wat als je opnieuw mocht beginnen? 

Terug naar inhoud

Zoveel mensen die al een Design System hebben en bijna allemaal al een jaar verder zijn. Met alle kennis van vandaag, als ze nu terug kijken, wat zouden ze dan anders doen?

Met stip op nummer 1: goed begin is het halve werk. Bijna iedereen zou eerder in het proces meer mensen betrekken. Daarom beginnen we zelf altijd met 4-daagse take-off

Vanaf het begin meer mensen betrekken in het proces voor meer betrokkenheid en gedeeld ownership.

We zijn net opnieuw begonnen. Voorheen hadden we een frontend styleguide. Altijd up to date, maar raakte in onze lean ux omgeving enorm vervuild. Nu zijn we gestart vanuit de design rationale met als basis de Sketch Library. Nu is niet langer het eindresultaat, maar de bedoeling leidend.

Dit gebeurd als je design naast een modulaire front-end omgeving hebt. Je wilt vanuit design ook werken op component basis. Denk aan: typografische schaal, spacing en design tokens. Je wil in design de basis ook goed opzetten, niet proberen het naar front-end componenten om te vormen. Dan groeit het snel uit elkaar. En dit natuurlijk goed documenteren. Zorg dat jet niet alleen in je hoofd zit.

Toegevoegde waarde?

Heeft een Design System toegevoegde waarde?

Terug naar inhoud

Zoveel mensen die het al hebben, maar heeft het ook toegevoegde waarde?

96% zegt ja! 

Diegene die ‘nee’ zeiden waren 2 van onze respondenten waar van één back-end developer die niet betrokken werd en een respondent die het hele Design System eigenlijk te veel gericht vond op visual design.

Wanneer je goed bepaalt waarom je een Design System wilt en wat je hiermee wilt bereiken, daarbij rekening houdt met processen, afspraken en eisen waar het aan moet voldoen. Heeft het op termijn enorm toegevoegde waarde voor je organisatie. Het zorgt voor snelheid, consistentie en helpt je niet het wiel opnieuw uitvinden.


Wat hebben we geleerd

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

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.

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. Benieuwd hoe de Gemeente Den Haag een vliegende start maakte met hun Design System? Bekijk dan de case over het Design System van de gemeente Den Haag.

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!


Up-to-date blijven?

Deze questionnaire is nog maar het begin. Nu we zoveel informatie hebben verzameld over de manier waarop de design en front-end community Design Systems bouwt en onderhoudt, zullen we het komende jaar aanvullende artikelen, inzichten en tools delen. 

Meld je aan voor onze nieuwsbrief om up-to-date te blijven over Design Systems.


Download volledige rapportage

Slidedeck van 52 pagina’s met alle bevindingen (PDF).

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

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