Auswahl und Implementierung eines technischen Design Systems für RWE
KUNDE:
RWE AG, Essen
KOMPETENZFELDER:
Bewertung von Technologien/Tools entlang von funktionalen und technischen Kundenanforderungen, Customizing
AUFGABENSTELLUNG:
Unser Kunde ist ein internationaler Konzern mit zahlreichen Tochtergesellschaften und verschiedenen Dienstleistern. Um zentral nicht nur relevante Gestaltungsregeln vorgeben, sondern die entsprechenden Ressourcen auch funktional bereitstellen zu können (Single-Point-of truth bis auf Code-Ebene), soll ein Design System eingeführt werden. Dafür standen verschiedene Tools zur Auswahl.
Unsere Aufgabe war, den Kunden bei der Tool-Auswahl zu unterstützen, das ausgewählte Tool zu implementieren und an die Kundenanforderungen anzupassen sowie – gemeinsam mit dem Kunden - die initiale Befüllung des Design Systems.
ERGEBNIS:
Ergebnis des noch laufenden Projektes ist eine zentrale Bibliothek relevanter Web-Komponenten, mit deren Hilfe künftige Web-Projekte einheitlicher, qualitativ besser, schneller und kostengünstiger realisiert werden können.
Spezifische Beratung von Anfang bis Ende
Zentrale Frage: welches Tool erfüllt die Anforderungen am besten
Der Schritt vom Styleguide zum Design System ist insbesondere für größere bzw. stark gegliederte Unternehmen nicht neu. Der Markt geeigneter Tools ist entsprechend vielfältig, mit durchaus unterschiedlichen Schwerpunkten. Um auf der Anbieter-Seite in Zukunft möglichst flexibel zu sein, haben wir uns in Abstimmung mit unserem Kunden auf Open Source-Tools fokussiert, die dem hierarchisch/systematischen Atomic Design Ansatz folgen. Nach einer ersten Grobauswahl wurden „Storybook“und „Pattern Lab“ im Hinblick auf die konkreten Anforderungen analysiert.
Im direkten Vergleich der Tools war unserem Kunden wichtig, dass das künftige Design System zunächst als schlanke Lösung implementiert und kundenspezifisch weiterentwickelt werden kann. Relevante Aspekte der Auswahl waren darüber hinaus die Abbildung des globalen (RWE) Designkontexts (z.B. Farben, Fonts, Grids, globale Designrichtlinien), das Zusammenwirken von Komponenten (z.B. mittels Demoseiten oder Templates), die Integrationsmöglichkeit in Azure und die Versionierung von Elementen im Frontend. Zudem sollte das künftige Tool einfach als lokale Entwicklungsumgebung auf den Webservern des Kunden aufgesetzt und gehostet werden können.
Vor diesem Hintergrund wurde schließlich Pattern Lab als Grundlage für das RWE Design System ausgewählt. Fehlende Features/Funktionalitäten hat ORÖ dann im Projektverlauf als Customizing des Tools ergänzt.
Aus dem Maschinenraum: Umsetzung des Projektes
Nachdem die Entscheidung für Pattern Lab gefallen war, ging es für unsere Entwickler ans Eingemachte: wir haben Pattern Lab mittels Node.js installiert und dahingehend angepasst, dass RWE Ressourcen (CSS und JavaScript) automatisch über ein npm Package bezogen und in Pattern Lab eingebunden werden.
Gleichzeitig haben wir das Tool so erweitert, dass es auch als Entwicklungsumgebung für neue Ressourcen genutzt werden kann. Neue Komponenten werden mit eigenem CSS und JavaScript aufgebaut, diese Ressourcen gebündelt und an ein RWE Repository ausgespielt. Im Ergebnis arbeiten Entwickler immer auf einer aktuellen RWE Code Basis und (Neu-) Entwicklungen stehen aktuell zentral zur Verfügung.
Nach dem Projekt ist vor dem Projekt
Design Systeme sind „work in progress“. Mit Weiterentwicklung des UI/UX kommen neue Elemente hinzu, fallen weg oder verändern sich. Im RWE Projekt haben wir gemeinsam mit dem Kunden die Erstbefüllung des neuen Tools realisiert und den Kunden in die Lage versetzt, hierauf aufsetzend das System auszubauen. Die nächsten Schritte sind bereits in der Planung und wir freuen uns, dabei zu unterstützen.
Projektleiterin – berät & entwickelt
Du hast irgendwelche Fragen zu diesem Projekt?
Dann nimm Kontakt auf!
