DXP trifft Design System:
Zukunftsweisende digitale Infrastruktur mit FirstSpirit

Die SonnenLichtManager der Warema Group sind europaweit führende Hersteller für Sonnenschutzprodukte wie Markisen und Jalousien samt innovativer Steuerungstechnologien und entsprechenden Architekturlösungen. In Zukunft möchte Warema ganz auf die umfassende Digital Experience Plattform FirstSpirit in der Cloud setzen.

Um alle künftigen Warema Websites für die FirstSpirit Cloud als neue Technologiebasis vorzubereiten, startete Logic Joe mit dem Neuaufsetzen der bisherigen Warema Group Seiten unter Weiterentwicklung eines Design Systems und neuen visuellen Konzepts.

Moderne Infrastruktur und aktuellster Technolgiestack

Technisch wurden hier die modernsten Webtechnologien zugrunde gelegt. So wird der neue Warema Group Webauftritt als SaaS-Modell in der e-Spirit Cloud gehostet. 
Dank einer cleveren Kombination aus statischen und dynamischen Content-as-a-Service-Inhalten in der neuesten Version „CaaS Connect” entsteht eine robuste und zugleich hoch dynamische Lösung. So ist es beispielsweise möglich, sofort eine neue Pressemeldung in diverse Kanäle zu publizieren.

Die Lösung ist dabei auf modernste Security-Anforderungen vorbereitet. Ein skalierbarer Service-Proxy auf node-Basis für Filter & Facetten, News, Pressemitteilungen etc. sorgt auch für eine optimale Performance für alles, was dynamisch nachgeladen wird.

Für das Redaktionsteam von Warema wird so die für FirstSpirit typische zentrale Contenterstellung und -verwaltung möglich. So kann für die Ausspielung auf unterschiedlichsten Kanälen auf die zentralisiert verwalteten Medien und Inhalte zugegriffen werden. Konkret in Form einer contentserv DAM-Integration.

Stets im Blick: Was kommt danach?

In dieser Pilotphase weiterer geplanter Projektstufen wurden sämtliche Ausbaustufen gleich mitgedacht. Die existierenden Corporate Inhalte wurden konzeptionell in neue funktionale Module überführt. Für grundlegend neuen Funktionalitäten wie die Navigation oder den Newsroom wurden neue Module kreiert und mit Blick auf die gesamte digitale Portalstruktur so konzipiert, dass sie maximal wiederverwendbar sind.

Gemeistert: Projektparallelisierung

Das Atomic Design Konzept und ein sauberer agiler Projektprozess erlaubt es dem Projektteam, vorausschauend Anforderungen zu sammeln und dabei flexibel genug zu bleiben, Anpassungen innerhalb kürzester Zeit global ausrollen zu können.

Parallel zur Migration der Warema Group Seiteninhalte in FirstSpirit arbeitet das Warema-eigene Team an mehreren weiteren Projekten, die auf das zentralisierte Design System zugreifen.

Gerade für die Parallelisierung der Projekte sind Libraries und Kontrollmechanismen besonders wertvoll. Ebenso wie ein konsolidiertes Commitment auf konzeptionelle und gestalterische Grundlagen über alle Projekte hinweg, sowie eine enge Abstimmung bei der Umsetzung von Komponenten, die in mehreren Projekten zum Einsatz kommen.

Gemeinsame Arbeit zentralisieren

Die Warema Group hat sich mit einem umfassenden eigenen Designsystem schon gut für all die in der Digitalisierung zu bespielenden Kanäle in Position gebracht. Zahlreiche Designelemente sind darin schon passgenau definiert. Die Ergänzung dieses umfassenden und globalen Design Systems für flexible Anwendungsformen ist anspruchsvoll und vor allem aufgrund der engen und guten Abstimmung zwischen Logic Joe und Warema geglückt. Im Ergebnis entsteht so ein Professionalisierungsgrad, der einer effizienten gemeinsamen Arbeit eine gute Basis gibt.

Effizienzfaktor: Wiederverwendbarkeit

Sämtliche Webkomponenten werden in der Stencil-Library gecodet. WebComponents erlauben eine Kapselung und Interoperabilität einzelner HTML-Elemente und sorgen durch diesen Wiederverwendbarkeitsfaktor für Effizienz. Das hat den enormen Vorteil, dass die einzelnen Elemente in einem PatternLab zentralisiert verwaltet und damit überall einbindbar werden. Eine einheitliche Designsprache wird so nachhaltig etabliert und gleichzeitig Aufwand im Backend gespart.

Unser glücklich-Garant: regelmäßige Quality Gates

In unserem Prozess gibt es festgelegte Phasen, sog. Quality Gates, die sinnvoll aufeinander aufbauen. So garantieren wir im Sinne agiler Anforderungsdefinitionen, dass das, was umgesetzt wird, auch wirklich den Bedarf unseres Kunden Warema trifft und Inhalte so gepflegt werden können, wie sie sollen.

Für eine flüssige Zusammenarbeit und Qualitätssicherung der dezentral zusammenarbeitenden Entwickler setzen wir auf Snapshot-Tests. Hier wird fertiger Code auf Elementebene konserviert/abfotografiert, um Überschreibungen und unerwünschte Seiteneffekte zu vermeiden bzw. nachvollziehen zu können.

Es ist uns gemeinsam mit dem Warema-Team gelungen, bereits in diesem Auftaktprojekt ein Set an technischen wie an gestalterischen Grundlagen zu schaffen, die große Effizienz für die folgenden Projektstufen zugrunde legen. Im nächsten Schritt soll die warema.de samt der dazugehörigen Länder-Varianten für neueste Customer Experience Ansprüche angepasst werden.