Zo creëer je de missing link tussen designers en developers: designsystemen zijn de next big thing voor digitale optimalisaties

Designsystemen zijn de next big thing in User Experience (UX) design. “Ze vormen de missing link tussen designers en developers”, zegt UX-experte Lonneke Spinhof. “Daardoor kunnen digitale optimalisaties veel sneller, eenvoudiger en goedkoper geïmplementeerd worden.” Wat zijn designsystemen dan precies en hoe zet je er één op voor jouw onderneming?

Dit is hoe het er vandaag vaak aan toe gaat: het nieuwe design voor een webpagina staat klaar, en heeft na een lang proces de zegen gekregen van het management. Er zitten een aantal nieuwe elementen in, net herkenbaar genoeg om bestaande gebruikers niet af te schrikken. Een paar weken en heel wat meetings later blijkt alles toch een pak moeilijker te implementeren dan aanvankelijk gedacht, en nog eens een paar weken later gaat een pagina live die niet helemaal lijkt op het design zoals was afgesproken.

Het development team heeft hard gewerkt om binnen de mogelijkheden toch zoveel mogelijk in de buurt van het design te komen, en daar was heel wat complex programmeerwerk voor nodig. Zo gaat er heel veel tijd en energie verloren aan slechte communicatie tussen teams.

Een andere taal

“Je ziet meteen waar het fout loopt”, reflecteert Lonneke Spinhof, UX-experte bij Humix. “De communicatie tussen de ontwerpers en het development team loopt niet. Zelfs al zitten beide teams in dezelfde meetings, vaak spreken ze vanuit hun verschillende expertises een andere taal. Marketing wil een video in de header van een website of app. De designer kijkt dan naar hoe die video in de header zal ogen terwijl de developer vooral geïnteresseerd is in de video controls (pause, play, mute,...). Het design systeem verenigt die verschillende invalshoeken door te definiëren hoe de video moet werken en waar development rekening mee moet houden. We zullen bijvoorbeeld nooit een video automatisch laten afspelen tenzij we een pauze/stop knop voorzien. Dit is voor accessibility is echt heel belangrijk.”

Go with the flow

Als alle betrokken partijen elkaar echt begrijpen, zal het proces sneller, eenvoudiger en efficiënter verlopen. Dat werkt motiverend om verder te gaan optimaliseren. En dat zie je dan weer terug in de gebruikersdata: mensen vinden gemakkelijker hun weg op de website of in de app, ze zijn meer tevreden over hun ervaring, en komen sneller terug.

“Zo kan je echt beginnen bouwen.”, legt Spinhof uit. “Je hebt als bedrijf een stap in de goede richting gezet, en daarop kan je verder werken. Op die manier wordt optimalisatie een constant proces, en kunnen je digitale kanalen constant mee evolueren met de veranderende verwachtingen van je gebruikers.”

Startpunt gebruiker

Humix optimaliseert sinds 2010 websites en applicaties op basis van data en gebruikersgedrag. “De inzichten die we uit data en onderzoek halen, koppelen we aan concrete designoplossingen, zodat de gebruiker er zich naadloos en vloeiend in kan bewegen”, legt Spinhof uit. Afhankelijk van de vraag ontwerpt Humix onder meer wireframes, full redesigns, informatie-architecturen, en customer journeys. De optimalisaties leiden tot hogere conversieratio en meer omzet.

Operatie designsysteem

Voor een aantal klanten werkte Humix recent een designsysteem uit. Jeroen Dom, UX designer bij Humix, rolt er momenteel één mee uit bij Belfius. Hij legt uit wat de stappen zijn om een designsysteem op te zetten.

1. Orde scheppen in de chaos

De eerste stap bestaat uit het inventariseren van alle designelementen. “We breken een website of app volledig op tot we een lijst hebben van alle afzonderlijke bouwblokken: de verschillende soorten buttons, invulformulieren, menu’s, kleuren, illustraties, ...”, zegt Dom. Vaak bestaan websites en apps uit pagina’s en delen die op verschillende momenten door verschillende teams zijn ontworpen. “Er zijn bijvoorbeeld heel wat uiteenlopende soorten formulieren, die allemaal een gelijkaardige functie hebben maar net anders in elkaar zitten”, legt Dom uit. “We categoriseren en groeperen de elementen, zodat we hun bruikbaarheid kunnen onderzoeken.”

2. Gebruikersdata analyseren

Stap twee bestaat uit het analyseren van alle verschillende soorten elementen op basis van gebruikersdata. Welke buttons werken het beste? Welke formulieren vullen mensen volledig in? En hoe snel doen ze dat? “Op basis van die analyse selecteren we de beste individuele componenten, en de beste combinaties ervan op een bepaalde pagina of deel van de app”, aldus Dom.

3. Strategie uitwerken

Het opstellen van een designsysteem kan niet rond de vraag: wat willen we als bedrijf uitdragen via onze digitale dragers? Wat zijn onze waarden? Stap drie bestaat uit het heel precies omschrijven van de doelstellingen. “Dat maakt het gemakkelijker om keuzes te maken over de te volgen designrichting”, aldus Dom. “Omschrijf daarna de doelstellingen van de digitale dragers: wat willen we dan dat gebruikers precies op de website of binnen de app doen? Willen we dat ze een afspraak maken? Is het doel om hen op die buy-button te laten klikken? Door vanuit de strategie en gebruikersdata te kijken, kunnen we gefundeerde beslissingen maken over het design.”

4. Stijlgids opmaken

Stap vier is het opmaken van een design stijlgids. Die is uitgebreider dan de huisstijlgids. “Een design stijlgids omschrijft welke button, met welke tekst en in welke kleur waar precies op de website of in de app moet komen”, legt Dom uit. “Je maakt een overzicht van de te gebruiken elementen, inclusief waarvoor ze exact dienen en hoe je ze kan inzetten in het design. Op die manier creëer je een welomlijnd kader voor verschillende functies van je website, geoptimaliseerd voor jouw gebruikers. Een bijkomend voordeel is dat je templates kan beginnen maken, die bestaan uit verschillende vaste componenten in een bepaalde volgorde. Het opmaken van de stijlgids gebeurt in nauwe samenwerking met het development team en dit al van bij het begin. Op die manier weet je zeker dat alle elementen ook technisch haalbaar zijn.”

5. Opzetten van een platform

Wanneer je een designsysteem uitwerkt, zorg er dan ook voor dat alle informatie voor alle partijen toegankelijk is. “Als je alle componenten, de stijlgids, de strategie, de assets,...ontsluit via een centrale locatie dan zijn alle gegevens voor iedereen op elk moment raadpleegbaar”, vertelt Dom. “Alleen zo garandeer je dat je hele team op dezelfde lijn zit en dezelfde taal spreekt.”

Winstinvestering

Een designsysteem neem je er niet zomaar even bij. Het is een investering, zegt ook Spinhof. “Het wordt vooral interessant als je grotere teams begint te hebben, waar verschillende subteams parallel werken. Dan heb je duidelijke structuren nodig.” Ook als de customer journey langer en complexer wordt, kan een designsysteem enorme added value opleveren.”

Veel ondernemingen overwegen een designsysteem bij een rebranding, hét moment waarop alles kritisch tegen het licht gehouden wordt. “Al valt er wel iets voor te zeggen om er gewoon mee van start te gaan”, denkt Dom. “Zodat het van dan af kan meegroeien en mee evolueren met je bedrijf.”

Lijkt een designsysteem precies wat jouw bedrijf of team kan gebruiken? Neem dan hier contact op met het team van Humix.