DSW heeft als ‘ICT-zorgverzekeraar’ veel verschillende scrum teams die te maken hebben met Web. Om deze zo goed mogelijk op elkaar aan te laten sluiten zijn wij met een team van drie designers en een architect bezig aan een design system.

Een wát?

Steeds meer bedrijven maken het zichzelf een stukje makkelijker door een design system te bouwen. Een design system is een verzamelbak aan componentjes, zoals knoppen, cards, form elementen of tabellen. Dit zijn de ‘digitale legosteentjes’ die de scrum teams van DSW kunnen gebruiken om de front-end van hun project op te bouwen. Zo hoeft niet elk project opnieuw het wiel uit te vinden en dat gaat een hoop tijd schelen!

Deze componenten gaan door veel projecten gebruikt worden. Een eis is wel dat ze met Angular werken, waarin onze componenten gebouwd zijn. DSW heeft zowel interne systemen als externe websites die gebruik gaan maken van het design system. Elk van de componenten moet daarom zorgvuldig uitgedacht worden, zodat alle verschillende teams en gebruikers er goed mee kunnen werken.

Maar hoe ziet zo’n component er dan uit? Even een kort voorbeeld: de expander. Een expander is een component waarmee je bepaalde content kan in- en uitklappen. Vaak zijn expanders initieel ingeklapt, dus moet het voor de gebruiker duidelijk zijn dat ze er op kunnen klikken om meer informatie te tonen. Om die klikbaarheid aan te geven, is er een chevron icoontje toegevoegd, wat draait tijdens het openklappen. Dit icoontje wordt alleen gebruikt voor componenten waarbij iets opengeklapt kan worden, zodat dit herkenbaar wordt voor de gebruiker. Ook heeft de expander een schaduw, zodat het lijkt alsof deze iets naar voren komt. Dit wordt bij webapplicaties vaak gebruikt om aan te geven dat een component klikbaar is.

Naast het maken van die componenten maken wij ook een styleguide. Deze webpagina is als het ware de handleiding bij de legosteentjes. Hierin staat welke componenten er zijn en wanneer en hoe je ze gebruikt. Ook komt daarin te staan hoe we omgaan met de styling van onze labels: DSW, Stad Holland en InTwente.

Als team zijn we dus veel aan het discussiëren over wat elk component wel en niet moet doen, hoe we deze het beste kunnen bouwen en hoe we alles het beste kunnen uitleveren aan andere teams. Voor het opstellen van zoiets groots is natuurlijk een geoliede machine nodig: we zijn dan ook goed op elkaar ingespeeld! Zo bestaan onze dagen uit componenten bespreken, uitzoekwerk, bouwen, maar zeker ook thee drinken en grapjes maken.

Net als Marieke aan de slag als UX / UI Designer? Bekijk hier de vacature.