Die Website als Backbone der Digitalisierung – Relaunch der reflex.de zu

www.reflex-winkelmann.com

Person, die an einem Laptop mit Architekturplänen arbeitet, einen Schutzhelm und Zeichenutensilien auf einem Schreibtisch hat und durch große Fenster auf eine Stadtlandschaft blickt.

Reflex Logo

Branche
Gebäude- und Versorgungstechnik

Projektzeitraum
2022–2023

Topics

  • Headless

  • Storyblok

  • agile Umsetzung

  • Multi-Language-Rollout

Reflex Winkelmann gehört zu den führenden Anbietern hochwertiger Systeme für die Heizungs- und Warmwasser-Versorgungstechnik. Sie ist Teil der Division Winkelmann Building+Industry (WBI), der größten der vier Geschäftsbereiche der inhabergeführten Winkelmann Group mit der starken internationalen Marke Reflex. Mit über 1.800 Mitarbeitenden weltweit, 7 Produktionsstandorten und 25 Vertriebsgesellschaften, ist die Reflex Winkelmann damit einer der maßgebenden Player in der SHK-Branche. Zu dem umfangreichen Produktsortiment gehören unter anderem Membran-Druckausdehnungsgefäße, Warmwasserspeicher, Plattenwärmetauscher sowie Systeme für Druckhaltung, Nachspeisung, Entgasung und Wasseraufbereitung. 

Seit 2022 unterstützt UDG als Partner bei der Digitalisierung des Hidden Champion.

Herausforderung

Als Reflex Winkelmann sich zum Relaunch seiner Website entschloss, war das Projekt zentraler Bestandteil einer Digitalisierungsstrategie, an die viel mehr als nur das Erscheinungsbild der Corporate Website im Internet geknüpft war. Die Website, schon damals auch genutzt als Produktkatalog für die fast 3000 Produkte, Dienstleistungen und systemischen Einzellösungen, sollte zukünftig zum Zentrum aller digitalen Interaktionen mit Kunden werden, einschließlich bereits integrierter Weichenstellung für geplante direkte Angebotsszenarien.

Konzeptionell und technisch wurde das Projekt frei von jeder existierenden Struktur ganz neu gedacht. Dabei wurde eine weitgehend neue Infrastruktur sowie eine aktuelle, zukunftssichere Software- und CMS-Lösung gewählt, um der ambitionierten Roadmap für die nächsten Jahre eine valide und ausbaufähige Grundlage zu geben.  

Verschiedene Website-Typen für diverse internationale Märke waren ebenfalls direkt zu Beginn Umfang des Rollouts. Ebenso wie ein umfassendes und zielgruppen-gerechtes Kontakt-Routing, das neben weiteren thematisch passenden inhaltlichen Services und Software-Applikationen in die übergreifende Customer Journey integriert werden sollte. Der Relaunch war also nur erster Schritt und sichtbare Visualisierung für die im Hintergrund stattfindende weitere Digitalisierungsstrategie. 

Vorgehensweise

Es wurde schnell entschieden, die neue zentrale Plattform durch einen Headless-Ansatz technisch zukunftssicher und skalierbar aufzustellen und den Website-Relaunch auf dieser Basis durchzuführen. Tool der Wahl war Storyblok, das alles mitbrachte, was an Anforderungen – auch seitens des anspruchsvollen UX-Konzepts – im Raum stand. 

Das war dann auch Startpunkt des Projekts, mit dem entsprechenden UX-Research, um Anforderungen an die Technik sauber aus einer Customer-first-Perspektive ableiten zu können. Nach einer Phase umfangreicher Stakeholder-Interviews und gemeinsamer Workshops waren Anforderungen der verschiedenen internen Player – national und international – an die neue Website erfasst. Es entstand ein weitgehend vollständiges User-Story-Mapping aller Zielgruppen auf die Customer Journey, dass in Bezug auf den MVP priorisiert werden konnte und darüber hinaus das Backlog der agilen Umsetzung füllte. Bis heute können weitere Maßnahmen strategisch aus initialem Research und Requirements Assessment abgeleitet werden. 

Auf dieser soliden Basis wurde die User Experience entlang der Journeys neu konzipiert. Auch das Corporate Design bedurfte für die digitale Umsetzung einer Neugestaltung, um Anforderungen an eine einheitliche, webtaugliche Markenerscheinungsbildes mit Kriterien wie Barrierefreiheit gerecht zu werden. Ein während des Projekts mitwachsendes UI-Kit bildete den ersten Schritt in Richtung eines Design-Systems und damit die Grundlage für Konsistenz innerhalb der digitalen Kommunikation. Auch Assistenz bei Texting und Content-Entwicklung waren Teil der UDG-Leistungen.

Das technische Konzept zur Entwicklung der neuen Website beinhaltete unter anderem das CMS Storyblok, als AWS SaaS Lösung gepaart mit einem Headless-Ansatz

Die Umsetzung erfolgte innerhalb eines Jahres und umfasste – nach Livegang der Mutter-Website – den Rollout in 24 Sprachvarianten weltweit

Umsetzung und Erfolge

Eine internationale Web-Lösung, die Usability und Klarheit mit einer ebenso frischen wie funktionalen Appearance verbindet. Eine digitale Plattform, die verschiedenste Zielgruppen bedient: von Verarbeitern im handwerklichen Bereich über Architekten und Planern bis hin zu Betreibern im industriellen wie öffentlichen Sektor. Eine flexible und umfassende technische Lösung, die Erweiterungen in Richtung Commerce-Lösungen ebenso ermöglicht wie die Entwicklung von Personalisierung.  

Auf der anderen Seite stehen einfache Pflegeprozesse mit niedriger Einstiegshürde, verbunden mit der Möglichkeit, Rollen und Rechte sehr trennscharf und komfortabel zu managen. Komplexe Pflegefunktionen ermöglichen ein hohes Maß an Kontrolle über die Veröffentlichung. 

Seit dem Relaunch wird die Website gemäß Roadmap kontinuierlich weiterentwickelt, um Teil einer ganzheitlichen Vision zu sein: eines digitalen Informations-, Produkt- und Serviceportals für die Kunden und Partner von Reflex.  

Key Facts

2900
Bis zu 2900 Produkte pro Länderwebsite
24
Länderwebsites / Sprachvarianten
2023
Umsetzung von Juli 2022 bis September 2023


Technische Highlights

Flexibilität und Skalierbarkeit
Technische Basis des Reflex Ökosystems ist das CMS Storyblok mit Nuxt 3 im Hybrid Rendering Mode, Tailwind und TypeScript ergänzen das Setup. Durch diese Entscheidung waren von Anfang an die Parameter gesetzt für:

  • hohe Performance durch gecachtes HTML,  

  • flexible Skalierbarkeit durch die JAMstack-Architektur, dadurch 

  • unkomplizierte, effiziente Internationalisierung

Frontend- und Backoffice-Darstellung
Die weitreichenden Möglichkeiten von Storyblok konnten funktional ausgereizt werden, um bzgl. Frontend- und Backoffice-Darstellung Folgendes zu erreichen: 

  • unkomplizierte Internationalisierungsmechanik 

  • individuelle, flexible Seitenstrukturen für ein maximal adaptives UX-Design 

  • feingranulares Rollen-und Rechtemanagement 

  • niedrige Einstiegshürden in die Pflege. 

Pflege
Die Pflege wird unterstützt von speziellen Backoffice-Funktionen wie z.B.:

  • Content-Historie 

  • integrierte Publizierung auf mehrere Environments (dev, stage, live),  

  • Management API, die programmatische Pflege von Content out-of-the-box ermöglicht  

  • Image-Service für Resizing, Reformating und Qualitätsoptimierung des Bildmaterials 

Kontrolle
Zusammen ermöglichen diese Funktionen den Redakteuren ein hohes Maß an Kontrolle

  • über die Veröffentlichung

  • bei ebenso mächtigen wie bequemen Editier-Möglichkeiten. 

Perspektive

Die richtigen Entscheidungen im technischen Setup, strategisches Vorgehen während des Projekts und ein konsequenter Customer-first-Ansatz haben zu einer zukunftssicheren Plattform geführt, die jetzt in Richtung One-stop-Shop für alle Belange der weit gestreuten Zielgruppen des Unternehmens entwickelt wird.

Storyblok Logo

Storyblok – Joyful Headless is Here

Storyblok ist ein innovatives Headless-CMS, das sowohl Entwicklern als auch Content-Teams ermöglicht, herausragende digitale Experiences zu gestalten. Als zertifizierter Solution Partner unterstützt die UDG Sie dabei, das volle Potenzial von Storyblok auszuschöpfen.