Case: Toxic | Sandra Belder

Sdu Toxic

Toxic is erop gericht om arbeiders die met toxische stoffen werken een gezonde werkomgeving te bieden. Het is een online register van Sdu waarin je gevaarlijke stoffen verzamelt. Je kunt er werkplekinstructiekaarten (WIKs) maken. En je kunt berekenen hoeveel je je medewerkers blootstelt en hoe je die blootstelling terug kunt dringen.

Toen ik ging werken aan Toxic bestond de oplossing al meerdere jaren. Ik ontwierp in het begin voornamelijk aanpassingen of kleine functionele toevoegingen. Terwijl ik dit deed liep ik er steeds meer tegen aan dat het inmiddels wel een product van zijn tijd geworden was. Er was nergens een stijl gedefinieerd en dit zorgde voor veel inconsistenties door de gehele applicatie heen.

In 2020 waren er plannen om Toxic uit te breiden met nieuwe modules. Iedereen was zich ervan bewust dat het belangrijk was dat de applicatie nog altijd als één geheel zou aanvoelen. Ik was dan ook opgelucht dat ik vanuit design wel drie verschillende sporen mocht aanpakken. Namelijk het samenstellen van een nieuwe styleguide, quick fixes in de bestaande applicatie in kaart brengen, en de nieuwe module ontwerpen.

Om de bestaande gebruikerservaring in kaart te brengen heb ik samen met het Toxic team een SWOT-analyse opgesteld, interviews met gebruikers afgenomen en usability tests uitgevoerd. Hiermee kon ik een user journey van de huidige ervaring opstellen, zodat we duidelijk konden zien waar de pijnpunten en kansen lagen.

Voor het opstellen van de nieuwe styleguide ben ik begonnen met het doorlopen van iedere pagina van Toxic en daarbij alle elementen vast te leggen, dus van kleuren en fonts tot inputs en buttons. Hier kwam een enorme hoeveelheid data uit. Zo kreeg ik een goed overzicht van waar de inconsistenties zaten en wat juist belangrijke terugkerende elementen waren.  Eén van de uitkomsten was dat er letterlijk 50 tinten grijs gebruikt werden in de applicatie. Ik heb de meest gebruikte kleuren hiervan geselecteerd en op basis daarvan nieuwe paletten opgesteld. Ook heb ik alle lettertype stijlen opgeschoond en gedefinieerd. Toen deze basis klaar was, kon ik in Figma de componenten gaan opzetten. Tijdens het omzetten van de bestaande pagina’s naar de nieuwe styleguide hield ik al rekening met de nieuwe module.

Naast een user journey van de bestaande applicatie maakten we er ook één voor de applicatie met de nieuwe toevoegingen. Vanuit ons team werd er ook gekeken wat er inhoudelijk en technisch mogelijk was. Zo konden we heel soepel de nieuwe functies ontwerpen en inbouwen.

Door veel te sparren en constant de uitkomsten van de onderzoeken bij de hand te hebben, kon ik compleet nieuwe modules inbouwen zonder dat deze anders aanvoelde. De gehele applicatie kreeg een facelift en voelde veel consistenter aan, wat de algehele gebruikerservaring omhoog tilde.