Samen met het team van Moneybird ontwikkelde ik de basis voor een design system, zodat Moneybird haar hoge kwaliteit voor software-ontwikkeling beter kan bewaken.
Omdat iedere Moneybirder zijn eigen behoeftes en manier van werken had, interviewden wij het team om een helder beeld te krijgen wat het design system nodig had. Verder onderzochten wij hoe andere bedrijven hun design systems toepassen en deden we een (visual) audit om te bekijken welke richtlijnen wij wilden vastleggen.
Het is belangrijk dat iedereen het design system gaat omarmen. Daarom stelden we onszelf de volgende vragen:
We waren er via brainstorm-sessies al snel uit dat dat het design system visueel voor iedereen beschikbaar moest zijn. Dat maakt het voor het hele team makkelijker om ermee te werken. Het gaat als een brein dienen voor alles wat visueel en interactief is in de software.
Een brein heeft hersencellen die constant nieuwe verbindingen leggen. Om hoogstaande kwaliteit van deze verbindingen te bewaken was er een toeziend oog nodig. Hiervoor bedachten wij een governance die duidelijke maakte aan het team hoe het design system werkt en hoe je er aan kan bijdragen.
De designers zorgden ervoor dat alle conventies en elementen in Figma kwamen te staan. Figma dient als schetsblok voor de interface van Moneybird. Vervolgens worden de Figma-componenten omgezet in code.
De engineers bouwden meerdere prototypes om ervoor te zorgen dat de code makkelijk inzetbaar was voor de gehele applicatie. Voor elk component schreven wij documentatie over hoe het wel en niet mocht worden gebruikt.
Samen met de designers ontwikkelden zij componenten die hergebruikt konden worden in de applicatie. Deze componenten zorgden voor meer consistentie en minder bugs in de interface.
Doorgaans het project lanceerden wij aangepaste interfaces onder de Instellingen-sectie van Moneybird. Dit stukje Moneybird wordt niet heel vaak bezocht, waardoor er ruimte was voor experimenten en optimalisaties.
Aan het einde van het project gaven wij een presentatie aan het gehele team. Om discussies over de inhoud en bijdragen van het design system overzichtelijk te houden, maakten wij bijvoorbeeld een Slack-kanaal aan.
Discussies in het team gaan nu over hoe een feature moet werken in plaats van welke middelen ervoor nodig zijn.
Het lukte ons om in 12 weken 100% van de bestaande componenten in kaart te brengen in Figma en deze om te zetten in code. We schreven in totaal 4,8% van alle schermen om van Moneybird.
Op het moment dat je dit leest worden er nieuwe componenten toegevoegd, bestaande componenten gewijzigd en geoptimaliseerd. Het design system speelt nu een belangrijke rol in Moneybird consistent te kunnen verbeteren.
