P1 Travel
Design System – Efficiëntie en Consistentie in UX & Development
Bij P1 Travel werken zowel designers als developers dagelijks aan het verbeteren van de website en gebruikerservaring. Echter, zonder vaste richtlijnen of een gestandaardiseerd systeem ontstonden er grote inconsistenties in kleuren, typografie en componenten. Dit leidde tot inefficiëntie en extra werk, omdat er telkens opnieuw keuzes moesten worden gemaakt en bestaande stijlen onbedoeld veranderden.
Om dit probleem op te lossen, heb ik een design system opgezet dat zorgt voor een efficiënte en consistente werkwijze. Dit systeem stelt designers in staat om sneller en eenduidiger te werken met gestandaardiseerde componenten, terwijl developers een duidelijke codebase hebben met vaste regels. In deze case beschrijf ik hoe dit design system is opgezet en welke impact het heeft gehad op de workflow binnen P1 Travel.
Het probleem
Binnen P1 Travel was er geen centraal design system, waardoor er geen vaste richtlijnen waren voor kleuren, typografie, componenten en afstanden. Dit leidde tot een inconsistente workflow voor zowel designers als developers.
Designers moesten continu zoeken naar de meest up-to-date versies van componenten en kleuren, wat leidde tot kleine, maar impactvolle afwijkingen in kleurcodes, tekstgroottes en afstanden. Omdat nieuwe designs zonder vaste regels werden toegevoegd, groeide de lijst met varianten en inconsistenties steeds verder.
Ook voor developers was dit een probleem: in de code ontstonden tientallen variaties van dezelfde accentkleur en verschilden marges en paddings tussen elementen zonder duidelijke reden. Dit maakte het onderhoud van de codebase onnodig complex en leidde tot extra werk bij het implementeren van wijzigingen.
Uiteindelijk had deze situatie een negatief effect op de workflow. Er ging veel tijd verloren aan het zoeken naar de juiste versies en het oplossen van inconsistenties. Bovendien maakte het ontbreken van een gestandaardiseerde aanpak het lastig om een eenduidige en herkenbare user experience te waarborgen.
De oplossing
Om de workflow van zowel designers als developers te stroomlijnen en de wildgroei aan stijlen en componenten tegen te gaan, heb ik een centraal design system opgezet. Dit begon met een uitgebreide analyse van de bestaande website en het in kaart brengen van alle varianten op kleur, typografie, componenten en afstanden. Hierdoor werd inzichtelijk hoeveel verschillende stijlen er in gebruik waren en welke elementen gestandaardiseerd moesten worden.
Een duidelijk voorbeeld hiervan was de accentkleur, waarvoor tientallen varianten in gebruik waren. Ik bracht dit terug tot één vaste kleur, met aanvullende tinten voor specifieke toepassingen. Ditzelfde principe werd toegepast op andere designaspecten, zoals tekstsoorten, knoppen, iconen en layout-grids.
Op basis van deze analyse heb ik een style guide opgesteld waarin alle fundamentele stijlen en richtlijnen werden vastgelegd. Hierin staan elementen zoals:
🎨 Kleurgebruik (primair, secundair, ondersteunende tinten)
🔤 Typografie (lettertypen, groottes, wegingen)
📏 Afstanden en marges (standaard spacing tussen elementen)
🖼 Iconen en afbeeldingen (formaten, schaling, gebruik)
📐 Grid en lay-out regels (voor responsief design)
Deze style guide vormde de basis voor het design system. Vervolgens heb ik alle componenten gedefinieerd die op de website voorkomen. Dit varieerde van kleine elementen zoals radio buttons en knoppen tot grotere componenten zoals tickettegels die uit meerdere onderdelen bestaan en verschillende variaties kunnen hebben. Elk component werd opgebouwd volgens de regels van de style guide, zodat consistentie werd gewaarborgd.
Om het design system direct bruikbaar te maken, heb ik een Figma-bibliotheek opgezet waarin alle stijlen en componenten beschikbaar zijn voor designers. Dit stelt hen in staat om snel en efficiënt te werken zonder telkens opnieuw stijlen te moeten bepalen. Voor developers is parallel hieraan een componentenbibliotheek in de code opgebouwd, waarin dezelfde regels zijn verwerkt.
Naast de visuele componenten bevat het design system ook documentatie waarin wordt uitgelegd waarom bepaalde keuzes zijn gemaakt en hoe elementen zich moeten gedragen. Dit omvat:
• Interactiestaten zoals hover-effecten en inactieve/actieve weergaven
• Schaalbaarheid en responsive gedrag van componenten
• Regels voor het meeschalen van afbeeldingen binnen componenten
Dankzij deze gestructureerde aanpak is er nu een duidelijke, consistente basis voor zowel designers als developers. Dit voorkomt fouten en bespaart tijd, omdat iedereen binnen het team werkt met dezelfde standaarden.
Rol
UX/UI Designer
Team van 4
Proces
• Analyseren
• Structureren
• Implementatie
Tools
• Figma
Proces en aanpak
1. Analyseren huidige website
De eerste stap in het opzetten van het design system was het in kaart brengen van de bestaande situatie. Dit deed ik door de huidige website grondig te analyseren en alle gebruikte stijlen en componenten te verzamelen. Hierdoor werd inzichtelijk waar de grootste inconsistenties zaten en welke elementen gestandaardiseerd moesten worden.
2. Structureren en definieren
Na de analysefase heb ik de kernprincipes van het design system gedefinieerd en een style guide opgesteld waarin alle fundamentele stijlen en regels werden vastgelegd. Vervolgens werden alle componenten gedefinieerd die binnen de website voorkomen, zodat deze op een gestructureerde manier konden worden opgebouwd.
3. Ontwikkeling & Implementatie
Met de style guide en componenten gedefinieerd, begon de implementatiefase. Ik creëerde een Figma-bibliotheek, waarin alle stijlen en componenten beschikbaar werden gemaakt voor designers. Tegelijkertijd werkten de developers aan een componentenbibliotheek in de code, waarin dezelfde regels en structuren werden vastgelegd.
Om ervoor te zorgen dat het design system correct gebruikt zou worden, voegde ik bij elk component duidelijke documentatie toe. Daarnaast organiseerde ik een introductiesessie voor het team om hen wegwijs te maken in het nieuwe systeem.
Het resultaat
Met de introductie van het design system is er een enorme verbetering in efficiëntie en consistentie ontstaan binnen P1 Travel.
✔️ Designers kunnen nu sneller en eenvoudiger werken met vaste componenten.
✔️ Developers hebben een gestructureerde codebase, waarin elke stijl en component vastligt.
✔️ De user experience is consistenter, doordat alle UI-elementen volgens dezelfde principes zijn opgebouwd.
Dankzij deze verbeteringen besparen zowel designers als developers tijd, verminderen we fouten en zorgen we voor een gestroomlijnd ontwerpproces dat schaalbaar is naar toekomstige uitbreidingen.
Learnings
Het opzetten van een design system heeft me geleerd hoe belangrijk structuur en schaalbaarheid zijn in UX-design. In plaats van losse componenten te ontwerpen, leerde ik systematisch denken en ontwerpen met herbruikbaarheid in gedachten.
Daarnaast heb ik me ontwikkeld in documentatie en samenwerking met developers. Het vastleggen van designregels en interacties hielp niet alleen bij een consistente UI, maar zorgde er ook voor dat developers sneller en efficiënter konden werken.
Dit project heeft me ook doen inzien dat een design system nooit af is. Het vereist doorlopende evaluatie en aanpassing, wat mij leerde om niet alleen oplossingen te ontwerpen, maar ook op lange termijn na te denken over schaalbaarheid en onderhoud.
Door dit proces ben ik gegroeid als UX-designer, waarbij ik niet alleen focus op visuele verbeteringen, maar ook op hoe design kan bijdragen aan efficiëntere samenwerking en consistente merkervaringen.