Design system: solide basis voor digitale transformatie

De ‘nieuwste’ buzz in de online wereld is het design system. Misschien gebruik je het al. Misschien zoek je nog naar manieren om het in je bedrijfsvoering te integreren. Maar wat zeker is: als digitale onderneming met groeiambities kun je niet zonder.

Het design system is een solide basis voor de digitale transformatie. Ook als je nu (nog) een kleine organisatie bent. Een design system is een centrale omgeving waarin de bouwstenen van digitale diensten en producten staan voor de verschillende bouwteams – inclusief de webredactie, communicatieafdeling en marketingafdeling – die een organisatie kent. Dit is de bron van waaruit ontwikkeld wordt: the one single source of truth.

Doordat iedereen in de basis dezelfde bouwstenen gebruikt, ontstaat consistentie in bouw van digitale producten en dus consistentie in gebruikerservaring.

‘Nieuw’

Hoe innovatief het idee van een design system is? Niet heel nieuw. Verre van. Ook in de vorige eeuw begrepen grote bedrijven dat consistentie en een vaste basis om vanuit te werken, belangrijk waren. Misschien wel een van de beste voorbeelden van een analoog design system is het grafische handboek van ruimtevaartorganisatie NASA. Tot 1975 had NASA een logo dat gekscherend ‘the meatball’ werd genoemd, naar de gelijkenis met een gehaktbal. Let wel: tot de jaren tachtig was een logo niet per se iets waar heel consistent mee om werd gesprongen. Elementen werden toegevoegd of verwijderd. Kleuren werden aangepast. Mensen speelden er naar hartenlust mee.

Als onderdeel van het ambitieuze Federal Graphics Improvement, bedoeld om de visuele identiteit van Amerikaanse overheidsinstellingen te versterken, ging de New Yorkse ontwerpstudio Danne & Blackburn voor NASA aan de slag. Een 90 pagina’s tellend handboek met een futuristisch nieuw woordmerk voor NASA was het resultaat.

Het logo van lijnen en schreefloze A’s die doen denken aan de neuzen van raketten vormde het middelpunt. Het document als geheel schetste hoe logo en alle andere elementen van het grafische systeem moesten worden geïmplementeerd op alles. Van briefpapier tot astronautenpakken en ruimteschepen. Zoals wetenschaps- en technologiejournalist Elizabeth Stinson recent nog opmerkte: ‘The manual perfectly encapsulates a defining moment in scientific and graphic design history.’

Meer, meer, meest

In de jaren ’80 en ’90 voldeed een geprint handboek om de consistentie in huisstijlelementen en organisatie-uitingen te bewaken. Maar door digitalisering en globalisering hebben bedrijven anno nu ontelbare online kanalen tot hun beschikking, waar consumenten hen 24/7 op vinden. Software blijft groeien, het aantal digitale diensten neemt toe. Veelvoorkomende problemen binnen organisaties zijn het gebrek aan overzicht van de uitingen op alle owned-, paid- en earned-kanalen, de vele variaties in producten of diensten.

Geen wonder dat ruis ontstaat. Twintig verschillende kleurcodes die her en der gebruikt worden in plaats van de oorspronkelijke merkkleuren, is dan nog een klein en relatief onschuldig voorbeeld. Het resultaat is dat nieuwe producten steeds verder afdrijven van de kern van het bedrijf. Om de onnodige dubbele handelingen en ontwikkelingen, de hoge kosten (tijd, energie en geld) en slechte gebruikerservaring nog niet te noemen.

Het design system anno 2018

Feit: softwareontwikkeling is complex. Er zijn vele wensen en behoeften van de verschillende disciplines die erbij betrokken zijn, maar er zijn vaak ook meerdere oplossingen en systemen mogelijk. Nog een feit: de complexiteit van nieuwe software, producten en diensten neemt enorm toe bij een organisatie die meerdere merken of labels voert over verschillende afdelingen. Er zijn immers meerdere bouwteams en leveranciers (intern en extern) en meerdere communicatiekanalen.

De behoefte aan een design system ontstaat vanuit deze verregaande digitalisering en groei en de wens voor een optimale, digitale klantbediening.

Consistentie

Legostenen. Atomen. Componenten. Design system-expert Nathan Curtis definieert het design system als ‘een bibliotheek waarin visuele stijlcomponenten zijn opgeslagen. Deze code- en basisontwerpen zorgen ervoor dat het overnemen ervan efficiënter en meer samenhangend gebeurt.’

De uitkomst van een goed design system is altijd consistentie. Consistentie in werkwijzen intern, een consistente beleving bij de doelgroepen en een consistente oplossing. Het is bovendien naar behoefte schaalbaar. In kleine vorm bestaat het uit bijvoorbeeld een online styleguide. In een uitgebreide vorm bestaat het uit een bibliotheek gevuld met designprincipes, styleguide, UX en visual-design, frontend-componenten, technische documentatie, tone of voice-documenten, short- en microcopy.

Het design system in de praktijk

Bij theFactor.e hanteren we de design thinking-methodiek om informatie te verzamelen, oplossingen te vinden en alle betrokkenen op één lijn te krijgen. Het is een dynamisch proces, met terugkerende sessies voor het bedenken van  oplossingsscenario’s voor de behoeften van alle betrokken stakeholders.

Een tool die daarnaast duidelijkheid kan scheppen is dat van eerdergenoemde Nathan Curtis, met daarin de parts, people and products. Let op, zo benadrukt hij, voor elke organisatie is dit anders in te vullen!

Zijn voorbeeld concretiseert de onderdelen, tooling, uiting, deelnemers en het doel:

Carbon Design System

Apple, IBM, Microsoft, Google, Airbnb, Lonely Planet, Salesforce… Stuk voor stuk bedrijven die design systems succesvol hebben geïntegreerd in hun bedrijfsvoering. IBM heeft bijvoorbeeld het Carbon Design System. Daarmee hebben zo’n 130 bouwteams alle gestandaardiseerde bouwstenen voor IBM-applicaties binnen handbereik. Een enorme besparing van tijd voor het productteam bij IBM: geen herhalende briefings, niet keer op keer huisstijlelementen aanleveren, veel minder controle en bijsturing op de o zo belangrijke brand identity-details. Zoals typografie, beeldgebruik, beleving en uitstraling.

Tegelijkertijd bespaart het Carbon Design System externe ontwikkelaars ook veel tijd, omdat zij een bibliotheek hebben met daarin al geteste en goed bevonden componenten waarvan de brand identity-details sowieso kloppen. Het Carbon Design System was een interessant groeiproces, zo vertelt door designer Bethany Sonefeld.

Een ander mooi voorbeeld is het design system van Airbnb. En dan niet alleen het systeem op zichzelf, maar ook hoe het bedrijf nadenkt over de tooling om designers en developers dichter bij elkaar te brengen.

Het design system introduceren in de organisatie

Ook in Nederland wordt hard gewerkt om design systems van de grond te krijgen. Een persoonlijk voorbeeld: theFactor.e werkt samen met een grote zorgverzekeraar aan een design system in hun voornaamste contentmanagementsysteem (Sitecore). In zo’n grote organisatie merk je goed dat een design system niet zozeer een kant-en-klaar product is, maar een doorlopend en dynamisch proces. Verschillende disciplines komen bij elkaar in het projectteam dat het design system op poten zet. UX’ers, marketingmedewerkers, developers…

De behoefte aan een design system kan zich onderhuids profileren: er zijn bijvoorbeeld frustraties tussen UX/design en front end. “Die designer heeft weer wat bedacht, maar dat kan toch helemaal niet!” Bemerk ook stagnaties, inefficiëntie en herhalende fouten. Allemaal tekenen dat een design system uitkomst kan bieden.

Uiteindelijk profiteren alle disciplines van een goed geïntegreerd design system. Hoe completer het design system, hoe meer medewerkers ontlast worden van de kleine, repetitieve en ‘saaie’ of frustrerende klusjes. Elke keer weer een formulier designen en bakkeleien over het ontbreken van de foutmeldingen? Verleden tijd. Als developer keer op keer de designer moeten uitleggen dat dat toch écht niet kan? Verleden tijd.

Het design system vereist een multidisciplinaire samenwerking. Je kunt nu geen design meer over de schutting gooien en tegen de developers zeggen: “zoek het maar uit”.

De valkuilen van het design system

Als organisatie koop je met een design system geen klip-klare oplossing. Je adopteert een proces dat nooit af is, omdat je nu eenmaal in een sterk dynamische markt zit. Neem de invoering van de AVG. Nieuwe frameworks en de doorontwikkeling van bestaande. Nieuwe software-releases. En een organisatie waarin waarschijnlijk door de jaren heen ook het een en ander verandert.

Voordat een organisatie toe is aan de stap naar het design system, zullen ze de design thinking-mindset eigen moeten maken. In het proces wordt soms gevraagd om het maken van harde keuzes: consistentie in naamgeving, opzet en archiveren van designbestanden, het kiezen van een frontend framework… Lastig, omdat medewerkers vaak gewend zijn aan hun eigen werkwijze en het moeilijk vinden om iets anders te adopteren. Ze moeten niet alleen zelf, maar ook in relatie met elkaar, anders gaan werken.

Ontzettend belangrijk bij de introductie in het bedrijf is dat alle betrokkenen leren dezelfde taal te spreken. Sarah Federman, designer van het design system bij Adobe, ontdekte dit al eerder: “Als elke keer dat iemand lid wordt van je team [..], je hetzelfde gesprek hebt over waarom een ontwerpsysteem niet de style guide is of wat een pattern library is. En zijn componenten hetzelfde als modules en zijn design tokens niet gewoon variabelen… dan verlies je kostbare tijd.”

Ben jij klaar voor de toekomst?

Een digitaal design system is essentieel voor een ijzersterke strategie. Begin je op tijd, dan groeit het systeem met je mee. Wel zo duurzaam. Door eenmalig te investeren in een degelijke basis, kun je gemakkelijker doorontwikkelen. Ook een redesign wordt eenvoudiger omdat alle bouwstenen aanwezig zijn.

Ook NASA heeft niet stilgezeten na het publiceren van hun Graphics Standard Manual in 1976. Net als IBM hebben zij een digitaal design system opgezet voor de ontwikkeling van snelle, toegankelijke en responsive NASA-websites. Interne bouwteams, onderaannemers en externe leveranciers bouwen zo eenvoudig goede websites (‘backed by user research’) die volledig overeenkomen met de huisstijl van NASA.

De ideale situatie? Dat het design system de blauwdruk is voor alle ontwikkeling. Een degelijke front end-basis die aan uiteenlopende back end-systemen gekoppeld kan worden. Zover zijn we nog niet. Toch is daar wel een ontwikkeling in te verwachten. Dat een design system kan linken naar meerdere leveranciers en systemen. Zodat als bijvoorbeeld een huisstijlkleur organisatiebreed veranderd moet worden, het met één release op alle sites aangepast is.

Wat zijn in jullie ogen geslaagde (of minder geslaagde) voorbeelden van een design system?