Hintergrund & Zielsetzung
Agentenportal basierte auf Bootstrap, jedoch ohne darauf aufbauendes Design System.
Komponenten wurden ad hoc in Figma angelegt, ohne zentrale Vorgaben oder Dokumentation.
Zusammenarbeit zwischen Design und Entwicklung war erschwert, da Standards, Patterns und Zustände nicht einheitlich definiert waren.
Ziel war es, ein Design System zu schaffen, das konsistente UI-Patterns definiert, Wissen zentralisiert und die Zusammenarbeit in Echtzeit unterstützt, damit alle Beteiligten mit denselben Bausteinen arbeiten.
Vorgehen & Lösung
Aufbau des Lynqtech Design Systems auf Basis des bestehenden Bootstrap-/Metronic-Stacks.
Etablierung von Figma als zentrale Kollaborationsplattform für Wireframes, UI-Design und Komponentenbibliothek.
Abbildung der Komponenten in Storybook, um ein sauberes Mapping zwischen Design und Code sicherzustellen.
Nutzung von Confluence als zentrale Quelle für Guidelines, Interaction Patterns und Dokumentation.
Bootstrap blieb als technische Basis erhalten, wurde aber durch klar definierte Komponenten, States und Interaction Guidelines ergänzt, die festlegen, wie einzelne Elemente aussehen und funktionieren sollen.
Ergebnisse
Konsistentes, flexibles Design System als gemeinsame Grundlage für Design und Entwicklung.
Schnellere Umsetzung von UI-Änderungen und neuen Features, da auf wiederverwendbare, dokumentierte Komponenten zurückgegriffen werden kann.
Deutlich stimmigeres Erscheinungsbild des Agentenportals und verbesserte User Experience durch klare Patterns statt individueller Einzellösungen.
