Portfolio
Design System – From Proprietary to MUI
A growing digital products company, multiple products in development, five frontend developers — and a single designer. The challenge was not just to ensure consistent UIs across a marketplace, a SaaS product and several backoffice applications, but to do so with minimal friction between design and development. The solution: a design system built from the start to grow with the company.
Process
Phase 01
Building the Proprietary System
From scratch: component architecture, button variants, dark and light mode, form elements, alerts, modals — conceived, designed and built in Figma by one person. Clear structural principles from day one, which later made the migration possible in the first place.
Phase 02
Operation & Scaling
Two years of productive operation with two frontend developers. The system grew alongside the products — new components, new contexts, continuous maintenance of the Figma library and developer documentation.
Phase 03
Migration to MUI
The strategic decision: reduce developer overhead by switching to MUI as the technical foundation. Thanks to the structural quality of the proprietary system, the migration was smooth — a minimally customised MUI theme with an adjusted colour scheme was enough for a visually seamless go-live. Users and stakeholders barely noticed the difference.
Phase 04
Parallel Operation & Ongoing Management
Today both systems run in parallel — MUI for new contexts, the proprietary system where migration has been deprioritised from a business perspective. Five developers, three products, one designer.
Methods
Component Architecture
A clear, consistent component structure as foundation — not an afterthought. Variants, states, dark and light mode considered from the beginning.
Migration Planning
A migration is not a restart. Knowing your existing system well means you can map equivalences to external systems precisely — and minimise risk.
Design-Developer Collaboration
A design system is a communication tool. Tokens, documentation and Figma structure designed so developers can work with it independently and correctly.
Systems Thinking Across Product Boundaries
Marketplace, SaaS, backoffice — different contexts, one coherent system. Consistency as a strategic decision, not an aesthetic preference.
Visuals
Figma component library — overview
Component detail — button variants
Dark / light mode comparison
Click heatmap of the registration
The system has been running in production for years — across multiple products, through a technical migration and with a growing development team. That the switch to MUI went visually unnoticed was no coincidence: it was the result of a system architecture designed from the start for clarity, consistency and portability.