Portfolio
Design System – Von proprietär zu MUI
Ein wachsendes Digital-Produkt-Unternehmen, mehrere Produkte in Entwicklung, fünf Frontend-Entwickler – und ein einziger Designer. Die Herausforderung war nicht nur konsistente UIs über Marktplatz, SaaS-Produkt und mehrere Backoffice-Anwendungen hinweg zu gewährleisten, sondern das mit minimalen Reibungsverlusten zwischen Design und Entwicklung zu tun. Die Lösung: ein Design System das von Anfang an so gebaut wurde, dass es mit dem Unternehmen wachsen kann.
Prozess
Phase 01
Aufbau des proprietären Systems
Von Null: Komponentenarchitektur, Button-Varianten, Dark- und Light Mode, Formularelemente, Alerts, Modals – konzipiert, designed und in Figma aufgebaut von einer Person. Klare Strukturprinzipien von Anfang an, die später die Migration erst möglich machten.
Phase 02
Betrieb & Skalierung
Zwei Jahre produktiver Betrieb mit zwei Frontend-Entwicklern. Das System wuchs mit den Produkten – neue Komponenten, neue Kontexte, kontinuierliche Pflege der Figma-Bibliothek und Entwickler-Dokumentation.
Phase 03
Migration zu MUI
Die strategische Entscheidung: Entwicklerkapazitäten schonen durch Umstieg auf MUI als technische Basis. Dank der strukturellen Qualität des proprietären Systems verlief die Migration reibungslos – ein minimal customiztes MUI-Theme mit angepasstem Farbschema reichte für einen optisch nahtlosen Go-live. Nutzer und Stakeholder merkten kaum einen Unterschied.
Phase 04
Parallelbetrieb & laufender Betrieb
Heute laufen beide Systeme parallel – MUI für neue Kontexte, das proprietäre System dort wo eine Migration business-seitig niedrig priorisiert ist. Fünf Entwickler, drei Produkte, ein Designer.
Methoden
Component Architecture
Klare, konsistente Komponentenstruktur als Fundament – nicht als Nachgedanke. Varianten, States, Dark/Light Mode von Anfang an mitgedacht.
Migrationsplanung
Eine Migration ist kein Neustart. Wer sein bestehendes System gut kennt, kann Äquivalenzen zu externen Systemen präzise mappen – und Risiken minimieren.
Design-Developer Collaboration
Ein Design System ist ein Kommunikationswerkzeug. Tokens, Dokumentation und Figma-Struktur so gestalten, dass Entwickler eigenständig und korrekt damit arbeiten können.
Systemdenken über Produktgrenzen
Marktplatz, SaaS, Backoffice – unterschiedliche Kontexte, ein zusammenhängendes System. Konsistenz als strategische Entscheidung, nicht als ästhetische Präferenz.
Visuals
Figma Komponentenbibliothek – Übersicht
Komponenten-Detail — Button-Varianten
Dark/Light Mode Gegenüberstellung
Click Heatmap der Registrierung
Das System läuft seit Jahren produktiv – über mehrere Produkte, durch eine technische Migration und mit wachsendem Entwicklerteam. Dass der Umstieg auf MUI optisch kaum auffiel, war kein Zufall: Es war das Ergebnis einer Systemarchitektur, die von Anfang an auf Klarheit, Konsistenz und Übertragbarkeit ausgelegt war.