MyOnlineStore, designsysteem
Bricks,eendesignsysteemvanaf nul
Zevenentwintig verschillende stijlen voor één primaire button. Drie iconensets op dezelfde pagina. De beheeromgeving was jarenlang uitgebreid zonder afspraken. Ik heb die afspraken gemaakt en er een bibliotheek van gebouwd.
- Opdrachtgever
- MyOnlineStore
- Mijn rol
- UX/UI en designsysteem
- Looptijd
- 6 maanden
- Schaal
- De hele beheeromgeving
Eerst geteld
Ik begon met turven. Er waren merkrichtlijnen, maar die lieten zoveel ruimte dat iedereen zijn eigen invulling koos. Zevenentwintig varianten van dezelfde primaire button. Drie iconensets naast elkaar, soms op één scherm.
Dat is geen smaakkwestie. Het is een onderhoudsprobleem. Elke wijziging moet je zevenentwintig keer doorvoeren en je vergeet er altijd een.
Daarna de bouwstenen
Kleuren, typografie, iconen, ruimtematen, logo’s. Ik legde ze vast als tokens, zodat een waarde één keer bestaat en overal wordt opgehaald in plaats van overgetypt.
Ik hield rekening met wat er al stond. Alles in één keer omgooien was niet haalbaar, en het was ook niet nodig: een token kun je invoeren terwijl de oude waarden nog bestaan.

Toen pas componenten
Met die bouwstenen maakte ik samen met de frontenders de componenten die de beheeromgeving nodig had. In twee maanden stond de bibliotheek in Storybook.
Storybook was belangrijker dan het klinkt. Voor het eerst keken ontwerpers en ontwikkelaars naar hetzelfde ding. Een discussie over hoe een button eruitziet werd een discussie over de component in de bibliotheek.

Vervangen zonder dat iemand schrikt
We brachten de bestaande code en de nieuwe componenten naast elkaar en groepeerden de wijzigingen. Soms technisch, soms op basis van waar iets in beeld staat, meestal allebei.
Elke sprint verving een groep, met een test ervoor. Na een sprint of drie was de hele look-and-feel om, zonder dat er een grote aankondiging aan te pas kwam.

buttonstijlen. Eén wijziging kost nu één ingreep in plaats van zevenentwintig.
Wat het opleverde
De consistentie was het zichtbare resultaat, maar niet het belangrijkste. Een systeem maakt vooral de vólgende verandering goedkoper dan de vorige. Dat merk je pas een half jaar later, en dan blijf je het merken.
Zin om ergens over te sparren?
Over een ontwerpprobleem, een designsysteem of gewoon over het vak. Ik hou van een goed gesprek.
hello@luukhorsmans.com →