Als ontwerper vind ik niks leuker dan werken aan nieuwe, moderne stijlen voor verschillende producten en diensten. Dat hele traject, van uitdenken, testen, schaven en doorontwikkelen is wat ontwerpen één van de leukste beroepen maakt. Dit heb ik lang gedaan als freelancer voor verschillende klanten, en sinds enkele jaren doe ik dit met veel liefde voor zowel onze website als de producten die wij ontwikkelen.
Zo heeft ons grootste product, Hoy, al verschillende versies op het ontwerp gehad. Dankzij de vele gebruikers en constante dialoog met onze klanten sluit dit steeds beter aan bij de doelgroep en het gebruik van de app. Bij elke nieuwe functie trachten we als team met een innovatieve, visuele oplossing te komen.
Ook ons andere product, de Schoolwiki, heeft eenzelfde behandeling gekregen. Dit is ooit begonnen met een simpele Wordpress-installatie als backend, maar heeft zich door de tijd heen ontwikkelt tot een volwassen tool met honderdduizenden bezoekers per jaar.
Als laatste moest ons bedrijf, Infowijs, natuurlijk ook een goede stijl en website hebben. Dit is immers het merk van waaruit we naar buiten treden. Alle flyers, visitekaartjes, social media posts en andere uitingen gaan vanuit deze stijl.
En hierin zit dan meteen ook het probleem. Door het uitwerken en het continu aanpassen van drie verschillende stijlen, met verschillende lettertypes en kleurencombinaties, is er door de jaren heen een inconsistent en verouderd geheel ontstaan. Stijlen passen niet meer bij elkaar, op verschillende plekken worden andere ontwerpen gebruikt, posters zijn verouderd. Kortom, het was tijd voor iets nieuws. Dit werd mede aangedreven door het development team; die graag één consistente, herbruikbare en flexibele stijl wilde hebben. Zo zijn we de afgelopen maanden samen gaan werken aan een eigen Design System.
Wat is een Design System?
Kort gezegd is een Design System één bron aan kennis waar collega's informatie uit kunnen halen voor de verder ontwikkeling van producten. Hierin staan dus alle visuele elementen waaruit onze tools, websites en visuele uitingen bestaan. Het is bijna een woordenboek van een specifieke taal; alle woorden kan je erin vinden, maar je maakt nog geen logische zinnen.
Een ander metafoor vinden we terug in atom design. Alle losse elementen zijn de atomen, bijvoorbeeld een knop. Atomen samen vormen een molecuul, bijvoorbeeld een lijst van een inzending. En als laatste vormen alle moleculen samen een organisme; een volledig bruikbaar component wat je in de tool tegen kan komen.
Het doel van zo een systeem is dus om een consistente bibliotheek te maken waar je altijd op terug kan grijpen. Duidelijk beschreven en flexibel genoeg om op allerlei manier toegepast te worden. Wij zijn overigens zeker niet de eerste die dit doen. Er zijn verschillende, prachtige voorbeelden van publieke design systems online te vinden: https://atlassian.design, https://polaris.shopify.com, https://rizzo.lonelyplanet.com, https://baseweb.design.
Het Infowijs Design System
We zijn dus aan de slag gegaan om een volledig, eigen Design System te maken. Een handleiding die van toepassing is op al onze producten en uitingen. Het was van belang dat de bestaande producten vrij gemakkelijk een redesign konden ondergaan, zodat niet alles omgegooid moest worden, en dat nieuwe functies makkelijk vanuit dit Design System gebouwd konden worden.
En hoewel nog niet alle componenten hierin terug te vinden zijn, ben ik best trots op het resultaat. Het is een vrij omvangrijk document geworden, waarbij ook gedacht is aan Light/Dark mode, toegankelijkheid qua kleurgebruik, mobiele weergaves en snel een prototype kunnen maken. Uiteindelijk hebben we drie waarden aan het systeem verbonden, wat overal naar voren moet komen; Light, Flexible, and Accessible.
Teamwork
Met dit resultaat hebben we een consistent, visueel gelikt en centraal Design System. Maar hoe vertaal je dit in je producten?
Hier komt ons geweldige development team aan bod. Samen hebben we gezorgd dat alle nodige elementen terugkomen. Daarna zijn deze componenten vertaald naar codes die makkelijk herbruikbaar zijn en terug te vinden zijn in onze Component Library.
Om dit weer visueel te maken voor alle programmeurs gebruiken we een Storybook; een handboek waar alle gemaakte code-componenten verzameld worden en gemakkelijk te testen zijn. Dit kan je dan weer heel mooi naast het Design System leggen om te zien of deze écht overeenkomen. Daarnaast hebben we voor alle elementen themes gemaakt. Wanneer je een bepaald thema toepast op bijvoorbeeld een knop, krijgt deze de kenmerken mee die bij zo'n theme horen (voor Schoolwiki kan dat bijvoorbeeld een paarse kleur zijn, waar dit bij Hoy een groene kleur is).
Wat is het resultaat van al dit werk?
Na dit hele proces, snap ik ook best waarom bedrijven er voor kiezen dit niet te doen. Het is veel werk; je moet uiterst consequent zijn en alles goed uitdenken, en onze klanten zien hier pas op termijn het resultaat van terug in onze producten. Er zijn, zeker binnen een startup, altijd wel andere gebieden die meer aandacht verdienen. Toch ben ik enorm blij en trots dat we dit systeem hebben gebouwd en merken nú al de voordelen van ons werk. Er zijn minder discussies hoe bepaalde elementen eruit moeten zien, want je hebt een kennisbank waar dit te vinden is. We bouwen nu al aan nieuwe features die we binnen een paar weken pixel-perfect kunnen opleveren. De grootste winst zit dus voornamelijk in het toekomstbestendig maken van je huisstijl.
Benieuwd hoe we de stijlen van onze websites uiteindelijk gelijk hebben getrokken a.d.h.v. het Design System? Neem een kijkje op hoyapp.nl, schoolwiki.nl en infowijs.nl!