Hero-Bild Platzhalter
BRZ 365 Design System
Challenge
BRZ hatte über 20 verschiedene Softwareprodukte im Portfolio, die alle unterschiedliche UI-Patterns und Designsprachen verwendeten. Dies führte zu Inkonsistenzen, längeren Entwicklungszeiten und einer schlechten User Experience über die Produktpalette hinweg.
Stakeholder
- Produktentwicklungs-Teams (20+ Entwickler)
- UX Designer-Team (4 Designer)
- Management und Produktverantwortliche
- End-User (Baufirmen und öffentliche Auftraggeber)
Ziele
- Einheitliche Designsprache über alle BRZ-Produkte
- Reduzierung der Entwicklungszeit durch wiederverwendbare Komponenten
- Verbesserung der User Experience durch Konsistenz
- Skalierbare Design-Dokumentation für zukünftige Produkte
Process
Methoden
Tools
Team
1 Lead UX Designer (ich), 2 UX Designer, 4 Frontend-Entwickler, 1 Product Owner
Dauer
18 Monate (2017-2019)
Solution
Entwicklung eines umfassenden Design Systems nach Atomic Design Prinzipien mit über 50 wiederverwendbaren Komponenten, vollständiger Dokumentation und Integration in die Entwicklungs-Pipeline.
Key Features
- 50+ UI-Komponenten (Buttons, Forms, Tables, Navigation, etc.)
- Design Tokens für Farben, Typografie, Spacing und Shadows
- Responsive Grid-System für alle Breakpoints
- Barrierefreie Komponenten (WCAG 2.1 Level AA)
- Figma Component Library mit Auto-Layout
- Zeroheight-Dokumentation für Entwickler
- Storybook-Integration für Code-Komponenten
Design-Entscheidungen
Atomic Design: Aufbau von Atoms → Molecules → Organisms → Templates
Component Variants: Flexible Komponenten mit Props statt vieler einzelner Components
Design Tokens: Zentrale Definition aller Design-Werte für einfache Theme-Anpassung
Mobile-First: Alle Komponenten zuerst für Mobile designed
Impact
40% schnellere Entwicklungszeit für neue Features
90% weniger Design-Inkonsistenzen über Produkte
100% WCAG 2.1 Level AA Konformität
15+ neue Produkte nutzen das Design System (Stand 2024)
Business Impact
Das BRZ 365 Design System wurde zum Standard für alle neuen BRZ-Produkte und ermöglichte es, schneller auf Marktanforderungen zu reagieren. Die Entwicklungskosten für neue Features wurden signifikant reduziert.
Lessons Learned
- Design System ist nie "fertig" - kontinuierliche Pflege ist essentiell
- Enger Austausch mit Entwicklern von Anfang an spart später Zeit
- Dokumentation ist genauso wichtig wie das Design selbst
- Design Tokens ermöglichen flexible Theme-Anpassungen ohne Komponenten-Änderung