pattern-randstad--white

De uitdaging

Medewerkers van Randstad, Yacht en Tempo Team (allemaal onderdeel van de Randstad Group) gebruiken elke dag een handvol interne applicaties om mensen aan een baan te helpen. 

Teams van designers en developers zijn er op hun beurt mee bezig om deze applicaties zo fijn en snel mogelijk te laten werken. Zo is Brandshift’ ontstaan: een (multi-brand) design system die gebruikt wordt voor zowel Randstad, Yacht als Tempo Team.

Maar: de romantische beloftes van een design system – dezelfde bron van componenten voor alle teams, een efficiënter ontwerpproces en uiteindelijk betere digitale producten – kwamen niet uit. Brandshift was niet praktisch genoeg. Teams gingen hun eigen gang en werkten alsnog in silo’s aan hun designs.

Randstad heeft ons gevraagd om Brandshift nieuw leven in te blazen. Om het opnieuw te ontwerpen en tot leven te laten komen binnen alle teams.

De oplossing

We hebben ons ondergedompeld in de teams, interne applicaties, processen en bestaande ontwerpen van alle drie de merken. Van daaruit hebben we Brandshift opnieuw opgebouwd en stapsgewijs geïmplementeerd.

Services

UX design
Design system

Een design system: een investering die zich makkelijk terugverdient

Stel je voor dat je aan allerlei interne applicaties werkt (van applicant tracking- en administratieve systemen tot CRM systemen), voor drie merken, met teams verspreid over verschillende landen. Zijn we je al kwijt? Een design system is essentieel in zo’n complexe omgeving.

Door te werken met een design system, zoals Brandshift, kunnen we snel ontwerpen en ons focussen op het testen en valideren van nieuwe ideeën bij onze gebruikers.’

Isabel Verhoef – UX designer @Randstad

Laten we eerst vlot door de voordelen van een design system heengaan: het is een set herbruikbare componenten en patronen en maakt design werk makkelijker, sneller, meer consistent en beter. Omdat de bouwstenen klaarliggen, kunnen designers zich richten op het oplossen van problemen in plaats van zich druk te maken over pixels en de grootte van buttons. En niet alleen dat: doordat alle applicaties vanuit dezelfde bron worden ontworpen, gaan medewerkers onderdelen herkennen. Hierdoor zijn applicaties voor hen makkelijker te gebruiken en begrijpen en gaat de productiviteit omhoog.

Randstad Brandshift displayed on laptop, tablet and smartphone devices

3 stappen om te starten met je design system

We weten dat het verleidelijk is om meteen in Figma te duiken en te beginnen met ontwerpen. Dat vinden wij ook het leukst. Maar het is belangrijk om het grondiger aan te pakken. Dit zijn de eerste stappen die wij hebben genomen:

  1. Stel een veelzijdig team samenEen multi-brand design system (her)ontwerpen, betekent teamwork. Het eindproduct moet namelijk aansluiten op bestaande processen en verschillende disciplines moeten ermee kunnen werken. Het design system team’ moet op zijn minst bestaan uit een UX designer, front-end developer en een product owner. Verschillende perspectieven zijn belangrijk.

  2. Ga met stakeholders in gesprek – Voor Brandshift werkten we met teams in verschillende landen die aan verschillende apps werkten voor verschillende merken. Goede communicatie met alle stakeholders was daardoor belangrijker dan ooit. We wilden hun doelen, visie en verwachtingen rondom Brandshift begrijpen. Minstens zo belangrijk was het definiëren van processen: aan wie leggen we verantwoording af? Wie beslist? Wanneer en hoe stemmen we af met development? Hoe communiceren we?

  3. Maak een interface inventory’ – In een aantal workshops hebben we de huisstijl besproken en een interface inventory gedaan. Een interface… wat? Een interface inventory is een simpel spreadsheet met daarin screenshots van alle elementen die op een website of in een app terugkomen. Van buttons tot invulvelden en iconen. Hierdoor begrepen we precies welke elementen we moesten gaan ontwerpen en waar overlap zat tussen de verschillende merken en applicaties.
Img brandshift inventory

Klaar om te ontwerpen

Het team is samengesteld, de context is helder, procesafspraken zijn gemaakt en de eerste interface inventory is gedaan. Het was bijna tijd om naar de tekentafel te gaan. Maar eerst hebben we de interface inventory verder uitgewerkt en gedefinieerd. We hebben screenshots gemaakt van alle pagina’s en componenten, het idee erachter bepaald en ze van een naam voorzien. Dat klinkt suf, maar een gedeelde definitie en taal is essentieel – zo ontstaat er minder verwarring in meetings, user stories, of chatgesprekken. In de kern draait het uitwerken van de interface inventory om het bepalen van de scope: wat moeten we allemaal maken en waarom? En hoe staat het met elkaar in verband? Het is belangrijk om dit niet te overhaasten.

Met het antwoord op bovenstaande vragen op zak, zijn we aan de slag gegaan. We begonnen bij typografie, kleur en spacing – dit noemen we de stijl; de basis van al het designwerk. Vervolgens zijn we volop gaan experimenteren met allerlei componenten en patronen vanuit de principes van atomic design – van atomen, naar moleculen, organismen, templates en uiteindelijk pagina’s. Stapsgewijs werkten we toe naar een uitgewerkte componenten library in Sketch en een Stickersheet’. Een Stickersheet is een concrete vertaling van de Sketch library. Het zorgt ervoor dat designers samengestelde componenten gemakkelijk kunnen kopiëren en uitleg bij bepaalde interacties kunnen krijgen.

Img brandshift stickersheet components
Brandshift components
Img brandshift stickersheet templates
Brandshift templates

3 uitdagingen die we gaandeweg tegenkwamen

We kunnen je stap voor stap meenemen in hoe we het design system hebben uitgewerkt. Maar dat wordt een vrij design-technisch verhaal. En hopelijk spreken de bovenstaande platen voor zich. Het is veel interessanter om stil te staan bij een aantal grote uitdagingen die we gaandeweg tegenkwamen:

#1 Information dense’ schermen en touch’ combineren – In Randstad’s interne applicaties is vaak veel informatie nodig op één scherm. Tegelijkertijd moeten componenten groot genoeg zijn om ze te bedienen met touch. Dus we moesten zoeken naar een fijne balans. Begrip van dit soort kaders is essentieel om componenten te ontwerpen die uiteindelijk ook goed te gebruiken zijn.

Img brandshift touch

#2 Drie merken, één design system – Brandshift is een multi-brand design system. Enerzijds wilden we dat het duidelijk was dat alle applicaties onderdeel zijn van de Randstad Group. Anderzijds moesten ze wel de unieke Randstad, Tempo Team en Yacht look hebben. Een subtiel maar herkenbaar verschil dus. Daarom hebben we specifieke stijlelementen (dat noemen we Design Tokens) aangewezen die per merk verschillen: het font, de achtergrondkleur en border-radius van buttons en de kleur van de header.

Img brandshift brand tokens
Img brandshift brand screens

#3 Accessibility – Het is belangrijk dat medewerkers met bijvoorbeeld een visuele beperking ook goed uit de voeten kunnen met de apps. Dit betekent onder andere: zorgen voor genoeg kleurcontrast, een prettige lettergrootte en voldoende line-height’. Maar ook samen met developers nalopen of de juist HTML tags worden gebruikt, of het geheel goed te bedienen is via een toetsenbord en of er wel relatieve waardes in plaats van pixels worden gebruikt.

Als je Jeffrey (UX designer, Valsplat) aanhaakt, dan haal je gigantisch veel kennis naar binnen. De project brief was van te voren bekend, maar we kregen er zoveel meer voor terug. Hij nam een berg kennis over accessibility en front-end mee – dat heeft enorm geholpen tijdens het project.’

Deepak Birdja – UX designer @Randstad

Je moet je design system actief verkopen

We hebben het design system dusdanig opgebouwd dat teams vanaf dag één al met de componenten library aan de slag konden. Ook al was het work in progress. Deden ze dat meteen? Niet per se. We hebben dit gekanteld door met teams in gesprek te blijven, ontwerpen voor te leggen, ze mee te nemen in onze design keuzes, en door korte workshops en presentaties.

De meeste teams hebben meer nodig dan alleen een bibliotheek met mooie componenten om er daadwerkelijk mee aan de slag te gaan. Communiceer helder. Presenteer je ideeën. Bouw het op vanuit een onderliggend fundament (atomic design). En zorg dat je keuzes goed zijn onderbouwd.

The Storefront: waar alles samenkomt

In de eerste fase (+/- 3 maanden) van het project hebben we ons gefocust op het uitwerken van de interface inventory, de library en het Stickersheet. De laatste 3 maanden stonden in het teken van het Storefront’ en het schrijven van documentatie.

De Storefront is precies wat het woord doet vermoeden: een plek waar designers, developers en andere stakeholders componenten kunnen shoppen’. In de Storefront komen code en design samen. Developers kunnen gemakkelijk code kopiëren en de UX guidelines doornemen – bij sommige projecten zijn geen designers betrokken, dus de toepassing van componenten moet vanzelfsprekend zijn. Designers gebruiken de storefront op hun beurt om alle puzzelstukjes te verzamelen en nieuwe designs te maken.

Img brandshift storefront xl

Eén van onze favoriete onderdelen van de Storefront is de component request’. Dit is een ingebouwde tool waarmee designers en developers ontbrekende componenten aan kunnen vragen of suggesties kunnen doen om bestaande componenten aan te scherpen. Geen overbodige luxe, want het design system is een levend document en moet continu geoptimaliseerd worden.

Heb ik een design system nodig?

Als je het ons vraagt, is het antwoord altijd ja’. Om het iets genuanceerder te maken: als je de volgende vakjes aan kan vinken voor jouw team of organisatie, dan is een design system een must:

  • Er zijn veel verschillende designers en developers betrokken bij het product waar ik aan werk.

  • Onze designers zijn keer op keer met pixels bezig.

  • Onze developers vragen elke week waar ze dat ene icoontje’ kunnen vinden.

  • Onze producten hebben een inconsistente uitstraling.

  • We hebben plannen om toe te groeien naar verschillende producten en services.

  • Dezelfde interacties worden op verschillende manieren toegepast binnen onze producten/​services.

Heb je na het lezen van dit verhaal nog vragen over design systems? Laat het ons gerust weten.

Als je nog niet uitgelezen bent, bekijk dan ons andere werk of onze artikelen over research en design.

  • Jeffrey Lauwers