Figma
UI Design
Design System‑opbouw
Achtergrond
Voor NoLongerLost werkte ik aan meerdere losse, kleine projecten binnen de webshop. Eén van de eerste opdrachten was het ontwerpen van een Q&A‑sectie met een geïntegreerde chatbot. Hiervoor ontwierp ik zowel de contentstructuur als het visuele chatbotvenster. Tijdens dit proces werd duidelijk dat er behoefte was aan meer consistentie in stijl, componenten en interacties.
Om toekomstige projecten efficiënter en consistenter te kunnen ontwerpen, ontstond de noodzaak voor een volledig design system.
Doelstelling
Het doel was om een schaalbare, duidelijke en herbruikbare visuele basis te creëren die:
de bestaande merkidentiteit versterkt
consistente UI-layout bied voor nieuwe webshop features
ontwerp- en ontwikkelprocessen versnelt
Ruimte biedt voor groei van het platform
Bijdrage
Ik ontwikkelde de typografie‑structuur (H1 t/m H6, body, captions in Regular en Bold), stelde een schaalbaar kleurpalet samen en ontwierp alle primaire en secundaire buttons inclusief states zoals default, hover, pressed, disabled en danger. Vanuit deze fundamenten bouwde ik herbruikbare componenten die direct toepasbaar waren in nieuwe projecten, waaronder de receipt‑flow.
Het resultaat is een flexibel, uitbreidbaar design system dat zorgt voor visuele consistentie, efficiëntere workflows en een solide basis voor de verdere vernieuwing van de NoLongerLost‑website.
Contact
Portfolio
Work
About
Contact