Design system voor een consistente merkbeleving en gebruikerservaring

De functie van het design system

In een design system worden op een centrale plaats herbruikbare (design)elementen vastgelegd. Zo kunnen deze vaste onderdelen eenvoudig worden overgenomen, onder andere door development teams bij het ontwikkelen van een nieuw e-commerce platform. In het design system worden bijvoorbeeld typografie, kleurpaletten, logo’s, iconensets en elementen als buttons en formulieren vastgelegd. Ook kan het design system merkrichtlijnen bevatten en geeft het de merkidentiteit weer. Het grote voordeel: het is een dynamisch systeem dat continu aangescherpt en uitgebreid kan worden. En je kunt hierin zover gaan als je wil. Elementen worden slechts vastgelegd, dus dit laat vervolgens voldoende ruimte voor creativiteit.

Hoe wij het design system inzetten

Wij zetten design systems regelmatig in voor klanten tijdens de (door)ontwikkeling van een e-commerce platform. Hoe dit proces eruit ziet? We gaan met onze klant in gesprek en verzamelen informatie als huisstijlhandboeken en brandguides, áls deze er zijn. Is dit er niet? Dan gaan we zelf research doen door de fysieke winkels te bezoeken. Wat zijn de specifieke kenmerken van de winkel en welk gevoel roept dit op? Dit wordt gebruikt voor het samenstellen van het design system, dat vervolgens als basis dient voor de ontwikkeling van het e-commerce platform. Hierdoor komt de on- en offline merkbeleving dichterbij elkaar te liggen.

Vertaling van huisstijl naar e-commerce omgeving

Wat vaak opvalt is dat een huisstijl te veel gericht is op offline communicatie. Een font dat goed werkt in een geprinte brochure, is niet automatisch een goed font voor de webshop. Het design system vertaalt de merkidentiteit naar een e-commerce omgeving.

Bij de ontwikkeling van een e-commerce platform geeft het organisaties al een beeld van de te verwachten look-and-feel. Doordat we het design system al in een vroeg stadium toetsen, komt een nieuwe frontend niet uit de lucht vallen, maar is het een logische vertaling.

Een design system bestaat uit drie lagen: stijl, interface elementen en componenten.

• Stijl
  Binnen deze laag wordt de gewenste look-and-feel vastgelegd, gebaseerd op brandguides, gesprekken met de klant en eventuele winkelbezoeken. Zo doen wij een eerste aanzet voor de juiste merkbeleving.
• Interface elementen
  Met de interface elementen gaat de gebruiker werken of navigeren binnen een e-commerce omgeving, denk aan buttons en checkboxes. Deze hebben in de basis een bepaald uiterlijk, waardoor ze herkenbaar zijn voor de gebruiker. Hieraan wordt de stijl van de klant toegevoegd.
• Componenten
  Door stijl en interface elementen te combineren ontstaan componenten. Een header op een webshop is hier een goed voorbeeld van. Deze heeft in principe alles in zich: logo, huisstijlkleuren, juiste typografie, vormtaal en interface elementen.

Consistentie en efficiëntie

Hoe mooi is het als iedere keer dat een bezoeker in aanraking komt met jouw merk of product er consistentie is in de gebruikerservaring? Doordat alle personen die het design system hanteren uit dezelfde bron putten, ontstaat er eenduidigheid op het e-commerce platform en zorgt het ervoor dat de juiste (design)keuzes worden gemaakt.

Het design system zorgt voor efficiëntie, omdat direct de juiste elementen worden gebruikt. Het design- maar ook het doorontwikkelingsproces wordt vereenvoudigd en de kans op fouten neemt af.