Ausgangslage
Ein B2B-SaaS-Anbieter für Analytics betreute knapp 200 Enterprise-Kunden. Das Dashboard war über fünf Jahre organisch gewachsen, bestand aus drei inkonsistenten Design-Generationen und verursachte hohe Support-Last, weil Power-User Funktionen nicht mehr fanden.
Herausforderung
- Komplettes Redesign bei laufendem Betrieb
- Gleichzeitige Einführung eines Design-Systems
- WCAG 2.1 AA für den anstehenden Rollout im öffentlichen Sektor
- Performance-Ziele: Time-to-Interactive < 2 s auf Mid-Range-Geräten
Lösung
Wir haben das Projekt in drei parallele Tracks strukturiert: Research, Design-System und Implementation. Der Research-Track arbeitete direkt mit zehn Kunden aus drei Branchen, um die tatsächlichen Nutzungsmuster zu erheben — inklusive Screen-Recordings und Workflow-Interviews.
Das Design-System wurde als Token-basiertes Monorepo implementiert: Farben, Typografie, Abstände und Komponenten sind versioniert und generieren CSS-Variablen sowie TypeScript-Typen.
Die Migration des Dashboards erfolgte seitenweise hinter einem Feature-Flag, sodass einzelne Kunden neue Bereiche selektiv aktivieren konnten.
Ergebnis
- Lighthouse Accessibility Score: 100
- Time-to-Interactive: von 4,9 s auf 2,5 s (−48 %)
- Net Promoter Score +19 Punkte
- Support-Last durch „Wo finde ich…"-Fragen −33 %
Technologie
React · TypeScript · Design-Tokens · Storybook · Playwright · Chromatic · Vercel