Project
Design System voor interne applicaties. Plus het design van twee applicaties.
Periode
April 2019 tot Juni 2021
Werkzaamheden
Interaction design en Visual design

Opdracht.

Bij Randstad werd ik voor het eerst gevraagd om mee te helpen een Design System op te zetten. Ik deed dit samen met een Product Owner en een Developer.

Het betrof een Design System voor interne tooling. Een Enterprice Design System zou je kunnen zeggen. Interessant was dat het Design System naast Randstad ook de merken Tempo-Team en Yacht zou bedienen. De naam 'Brandshift' was dan ook zeer toepasselijk.

Aanpak.

Om goed in kaart te brengen wat er allemaal ontwikkelt moest worden ben ik eerst een Spreadsheet gaan vullen. Dit deed ik op basis van het Atomic design principe. Zo kon ik, nog voor ook maar 1 component te hebben ontworpen, afstemmen met de developer over structuur en naamgeving.

Met het spreadsheet als leidraad ben ik alle stijl elementen en component gaan uitwerken in Sketch. Tijdens het uitwerken heb ik meerdere keren met designers afgestemd om mijn design keuzes toe te lichten. Deze designers konden zich abonneren op de Sketch Library en zodoende gebruik maken van alles wat Brandshift te bieden had.

De documentatie rondom stijl elementen en componenten schreef ik zelf. Deze documentatie was terug te lezen in een online documentatie omgeving. Het toffe is dat we deze documentatie omgeving hebben opgebouwd op basis van Brandshift zelf! Ik kon de componenten die ik ontwierp dus ook direct zelf toepassen. In de documentatie omgeving hadden bezoeker vervolgens de mogelijkheid om met 1 druk op de knop het thema te wisselen. Dan werden de kleuren, lettertypes en border-radius van Randstad aangepast naar die van Tempo-Team of Yacht.

Na een aantal maanden namen mijn werkzaamheden voor het Design System af. Kort daarna ben ik gevraagd om als designer twee interne tools te ontwerpen op basis van Brandshift. Hierdoor kreeg ik de mogelijkheid om Brandshift in de praktijk toe te passen.

Het Brandshift dashboard.
'Button' component voorbeeld pagina.
'Button' component documentatie pagina.
Brandshift dashboard template.
Brandshift multi-step form template.
Brandshift. A multi-brand Design System.

Geleerd.

Tijdens dit project heb ik continu kunnen overleggen met een product owner en een developer. Hoewel de developer vanuit portugal werkte ging de communicatie goed. Met de product owner kon ik lezen en schrijven. Het was een mooie ervaring om een design system als team aan te pakken. Ook het afstemmen met DS users (designers in mijn geval) heeft mij sterker gemaakt in het verantwoorden van design keuzes.