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.

Sinds een half jaar is het UX team bezig met het opzetten van een Priva-breed Design System.

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

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.

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

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