Design system als tool voor jouw digitaal product en organisatie

Makers — zoals designers en developers — kunnen enorm veel voordeel halen uit een design systeem omdat ze een zelfde beginpunt hebben, maar aan een product werken ook vaak mensen met andere taken. Ze zijn misschien niet direct verantwoordelijk voor het maakwerk, maar geven meer richting of advies. Hoe kunnen zij een design systeem inzetten om het eindproduct beter te maken? Drie voorbeelden:

Design systems voor accessibility experts

Een accessibility expert kijkt met een heel andere bril naar de wereld, met het doel digitale ervaringen toegankelijk te maken voor iedereen. Om bijvoorbeeld te zorgen dat elke tekst leesbaar is, en elke interface goed te gebruiken is met allerlei ondersteunende technologieën, moet de expert veel testen en adviseren. Maar wat als je een groot deel van de kennis over dit onderwerp al bij elke discipline kunt inbakken vóórdat het bij jou als maker terecht komt?

Om terug te komen bij het voorbeeld van de knop uit deel 1: een accessibility expert onderzoekt bijvoorbeeld hoe je interactieve elementen bruikbaar maakt met alleen een toetsenbord, of een joystick (dit zijn veelgebruikte ondersteunende technologieën voor mensen met een fysieke beperking). Ook een onderzoek naar extra informatie toevoegen voor screenreaders (voor mensen met visuele beperkingen) is relevant bij de knop. Informatie over hoe je in video’s geen flitsende beelden wil gebruiken weer wat minder.

In plaats van één grote, misschien wat vage richtlijn over toegankelijkheid die (hopelijk) één keer vluchtig gelezen wordt en daarna nooit meer, kun je op deze manier juist heel gericht de juiste kennis overbrengen naar je team. Zo zal een copywriter altijd kunnen zien welk taalgebruik toegankelijk is op een knop, en zal een developer nooit vergeten om speciale toegankelijke code toe te voegen die de knop bruikbaar maken voor mensen die gebruik maken van speciale hulpmiddelen.

Design systems en internationale uitbreiding

Als je organisatie groeit, gaat het misschien de landsgrenzen over. In andere delen van de wereld gelden andere talen, andere valuta, andere culturen.

Als je op component-niveau nadenkt over deze uitbreidingen, ben je al snel voorbereid op zo’n uitbreiding naar de rest van de wereld. Nu klinkt het heel logisch om om te gaan met taalverschillen, maar hoe vaak denk je na over verschillende valuta’s? In ons artikel over localization gaven we al eerder aan dat er in Vietnam hele andere regels gelden: voor een brood dat hier € 2 kost, tik je daar al gauw 55.000 Vietnamese Dong af.

In een systeem kun je duidelijk vastleggen hoe je product omgaat met dit soort verschillen. Neem je meer ruimte om prijzen te laten zien? Of ga je formats nemen als “20k”, zoals Instagram met hun likes? In Nederland doen centen er nog toe, maar in Vietnam is de kleinste eenheid xu zó weinig waard dat hij niet meer gebruikt wordt. Heeft het dan nog nut om twee kleinere cijfertjes achter de komma in je designs op te nemen in de manier waarop je prijzen laat zien? Een design system kan deze vragen voor specifieke situaties beantwoorden.

Design systems voor Product owners

Als product owner ben je bezig met de business, prioriteiten stellen, stakeholders tevreden houden, je team motiveren, roadmaps, en ga zo maar door. Ondertussen wordt er ook nog van je verwacht dat je enige inhoudelijke kennis hebt, zodat wanneer je de laatste check uitvoert voor de taak naar done versleept wordt, de feature ook goed werkt naar de eisen die gesteld zijn.

Twijfel je of een primaire knop niet too much is op deze pagina? Zou het misschien beter een secundaire knop zijn? Kijk in het systeem naar wat de designers daar zélf over te zeggen hebben, en je hebt het antwoord.

‘De tekst in die knop, die klinkt wel héél wanhopig!’ Wat de beweegredenen zijn van copywriters over de tone-of-voice in een secundaire knop vind je in het systeem.

‘En deze link waar staat “klik hier!” Dat deden we toch niet meer? Iets met toegankelijkheid?’ Inderdaad, de accessibility expert geeft aan dat ‘klikken’ niet voor iedereen van toepassing is, en de marketeer geeft aan dat Google’s algoritme meer heeft aan inhoudelijke teksten in links.

Als je een systeem tot je beschikking hebt waarin vastgelegd staat hoe bepaalde keuzes gemaakt zijn, kun je makkelijker inhoudelijk feedback geven en de laatste check zijn. Je gebruikt de kennis van de andere disciplines dan als maatstaf voor het werk dat je team doet.

Op dit punt wordt het interessant om nóg abstracter te kijken naar een design systeem: hoe kan een systeem niet alleen bijdragen aan een beter proces, maar aan een beter product?

Achter een goed product gaat ook een filosofie of een geweldig idee schuil. Waarden die jou onderscheiden van je concurrenten, of uniek positioneren binnen een niche waar je je op richt. We zien ze terug in inspirerende praatjes van de CEO, of als overkoepelende termen aan het begin van presentaties en documenten, maar voor velen is het lastig deze waarden concreet te maken. Het helpt daarom je mensen én je product om deze abstracte waarden op een ander niveau vast te leggen.

Aan de hand van een design system, kun je onderzoeken of de onderdelen aansluiten bij de waarden die jij als product uitdraagt. Als dit niet het geval is, kun je heel gericht aan de slag om het stap voor stap, op een concreet niveau te verbeteren. Stel je de volgende business case voor:

? Internationale containervracht is een complexe wereld vol formulieren en regels waar maar weinig mensen expert in zijn, maar toch wil je als eigenaar van een klein bedrijf een container met spullen verschepen. Normaliter heb je dan twee opties: alles zelf uitzoeken — dat kost veel tijd en het brengt risico’s met zich mee — of een partij inhuren die het voor jou doet. Maar wát ze precies doen voor het geld dat ze vragen weet je niet.

Een product dat wil inspringen op het gat waar de klant de verscheping zelf kan regelen, maar tegelijk alle zorgen wil wegnemen, zou ervoor kunnen kiezen om transparantie een belangrijke productwaarde te laten zijn:

• Een transparant product verbergt niet graag belangrijke informatie achter een extra klik, of in kleine lettertjes. Je kunt je dan als designer afvragen of er in een transparant systeem wel plek is voor een tooltip, of dat je dat niet op een andere manier kunt oplossen die beter bij je waarden past.
• De logistieke wereld zit vol jargon en afkortingen. Transparantie op dit vlak betekent dat ook iemand zónder kennis van deze industrie het product kan gebruiken, en het is dan de taak van een copywriter om alles in simpelere taal op te schrijven.
• Transparantie op financieel vlak betekent zo min mogelijk onverwachte kosten bij de klant, en dat de klant precies weet waar ze voor betalen. Developers en designers kunnen samenwerken om componenten te ontwikkelen die de prijs altijd eerlijk communiceren.

Je kunt dus de componenten van een design system constant toetsen aan de waarden die je wilt uitdragen. Op die manier ga je het verweven in elke knop, tekst, mail en pagina, en daarmee je hele product.

Als je consistent bezig bent met je productwaarden te verweven tot in de kleinste onderdelen van het systeem, ga je als team ook sneller juist díe values gebruiken voor nieuwe ideeën. Zo kun je door consistent transparant te zijn, er een schepje bovenop doen. Je product kan zich proactief gaan gedragen, als ultieme vorm van transparantie.

In de business case van hierboven kan dat betekenen dat je belangrijke deadlines niet pas communiceert ná het bevestigen van een boeking, maar dat het product alvast een indicatie geeft van deze deadlines vóór het boeken begint. Op deze manier kunnen de klanten niet alleen zien of het logistieke product binnen hun budget past, maar ook weten ze beter wat haalbaar is binnen de planning. Het sluit dan beter aan op hun verwachtingen, en de klant heeft minder aanpassingen nodig op de boeking.

Daarin schuilt de échte kracht van een design system: als je minder bezig hoeft te zijn met kleine taakjes en processen, kun je meer focussen op de grote doelen. Als je in de kleinste componenten de grote abstracte concepten kunt vangen, kun je iedereens creatieve energie en talenten gebruiken om samen de allerbeste versie van je product te maken. Samenwerken gaat sneller en beter als je allemaal hetzelfde beginpunt hebt in de vorm van een design system.

Wat kan Soda doen?

We hebben een intern team hebben dat zich bezighoudt met de laatste (technische) ontwikkelingen op dit gebied en nauw samenwerkt met developers om te zorgen dat concepten ook werkelijkheid worden. We geven workshops en begeleiding aan teams, organisaties en bedrijven om deze ideeën in de praktijk te brengen, en waar nodig zetten we onze ontwerpskills in om het daadwerkelijke systeem op te zetten tot het niveau dat er verder gebouwd kan worden.