--- title: "Digitale Transformation mit Headless CMS & UX-Optimierung | Ergosign GmbH" description: "Entdecken Sie, wie die Stadtwerke Düsseldorf ihre Web-Plattform modernisiert haben – für mehr Flexibilität, Skalierbarkeit und eine verbesserte Customer Experience." canonical_url: "https://www.ergosign.de/projekte/stadtwerke-duesseldorf" locale: de meta: "og:description": "Entdecken Sie, wie die Stadtwerke Düsseldorf ihre Web-Plattform modernisiert haben – für mehr Flexibilität, Skalierbarkeit und eine verbesserte Customer Experience." "og:title": "Digitale Transformation mit Headless CMS & UX-Optimierung" "twitter:description": "Entdecken Sie, wie die Stadtwerke Düsseldorf ihre Web-Plattform modernisiert haben – für mehr Flexibilität, Skalierbarkeit und eine verbesserte Customer Experience." "twitter:title": "Digitale Transformation mit Headless CMS & UX-Optimierung" --- > Index of every page on this site: [llms.txt](https://www.ergosign.de/llms.txt) # **Digitale Transformation** für exzellente User Experience ## **Ganzheitliche digitale Lösungen** für die Energieversorgung Um sich in einem wettbewerbsintensiven Markt abzuheben, setzen die Stadtwerke Düsseldorf neben exzellentem Service auf eine erstklassige digitale Kundenerfahrung. Um langfristige Kundenbeziehungen zu stärken, sollte die bestehende Web-Plattform zu einer nahtlosen Digital Experience Platform (DXP) weiterentwickelt werden. Seit 2019 treiben wir diesen Wandel als enger Partner der Stadtwerke Düsseldorf aktiv voran – mit strategischer Beratung, tiefgehendem Know-how und der Umsetzung innovativer, benutzerfreundlicher Lösungen. Durch die kontinuierliche Optimierung der digitalen Services entstand eine zukunftssichere, leistungsstarke Infrastruktur. ## **Iterative Modernisierung** eines komplexen Systems ### Die Ausgangslage Die Stadtwerke Düsseldorf standen vor einer komplexen Aufgabe: Ihre bestehende FirstSpirit-Website sollte modernisiert und auf eine neue Headless-Architektur im CMS Storyblok transferiert werden – ohne den laufenden Betrieb zu beeinträchtigen. Ein vollständiger Big-Bang Rollout der Neuentwicklung kam nicht in Frage. Stattdessen wurde ein schrittweiser, modularer Ansatz angestrebt, der sich nahtlos in bestehende Strukturen einfügen und diese sukzessive ersetzen sollte. **Zentrale Anforderungen und Projektziele:** - **Nahtlose Weiterentwicklung**: Modernisierung der Plattform, ohne bewährte Prozesse zu verändern, um Schulungsaufwand zu minimieren. - **Optimierte Customer Journey**: Verbesserung der User Experience durch eine intuitive Navigation und effizientere Bestellprozesse. - **Vereinfachte Verwaltung**: Ein Headless CMS sollte die Backend-Strukturen optimieren und eine reibungslose Integration ermöglichen. - **Bessere Employee Experience**: Modernes CMS mit intuitiver Bedienung für eine einfachere Content-Pflege. - **Digitale Zukunftssicherheit**: Migration auf moderne Technologien (Storyblok, Microsoft Azure), um Flexibilität, Sicherheit und langfristige Erweiterbarkeit zu gewährleisten. - **Barrierefreiheit und Self-Service**: Ausbau der Self-Service-Bereiche und konsequente Umsetzung digitaler Barrierefreiheit für eine inklusive Nutzung. ## Entwicklung eines **modularen Design Systems** ### Unser Vorgehen Im Zuge des Redesigns der Website wurde ein modulares Design System entwickelt, das eine einheitliche visuelle Sprache und hohe Skalierbarkeit ermöglicht. In Figma konzipiert, dient es als Basis für wiederverwendbare React Frontend-Komponenten, die in das Headless CMS Storyblok integriert wurden. Storyblok ermöglicht eine zentrale Content-Verwaltung, flexible Ausspielung über alle digitalen Kanäle hinweg sowie eine verbesserte Usability und Performance, die sich positiv auf das SEO-Ranking auswirken. Weitere Gründe, warum sich der Umstieg auf ein Headless CMS lohnt, beleuchtet [dieser Insights-Artikel](https://www.ergosign.de/insights/blog/swd-headless-cms). Zusätzlich wurde die Infrastruktur schrittweise von einer On-Premises-Lösung zu Microsoft Azure migriert. Die Kombination aus Microsoft Azure und Storyblok bietet Flexibilität, Skalierbarkeit und Sicherheit. Digitale Barrierefreiheit wurde von Beginn an berücksichtigt, indem das modulare Design System eine systematische Implementierung barrierefreier Komponenten ermöglicht. Um sicherzustellen, dass das Design den neuesten WCAG 2.2-Standards entspricht, wurde es in einem separaten Accessibility-Projekt weiter optimiert. Dank Storyblok kann diese aktualisierte Version nun einfach technisch eingebunden werden. ![Familie auf einem Feld mit Windkraftanlage im Hintergrund, daneben Stadtwerke Düsseldorf Logo und Smartphone mit Website-Anzeige von Stromtarifen.](https://a.storyblok.com/f/180740/1920x1080/51ea1d8349/cs_swd_slide1.jpg/m/3200x0) *© Ergosign* ## Integration **moderner Web-Technologien** Die Weiterentwicklung des Portals erfolgte mit modernen Web-Technologien wie React mit Next.js für die Website-Entwicklung und maßgeschneiderten Schnittstellen (REST, GraphQL) zur Anbindung weiterer Services. Dadurch konnten wir Self-Service-Bereiche, Empfehlungsmarketing-Lösungen und Vertriebspartner-Services für den B2B-Markt nahtlos integrieren. Datenbanken zur Speicherung von Produkten, Bestellungen und Adressen wurden in die bestehende Systemlandschaft eingebunden, um eine optimale Datenverwaltung zu ermöglichen und die User Experience weiter zu verbessern. ![Verschiedene Ansichten einer App auf mehreren Geräten zeigen Bestelldetails, Preis und Themen in einem übersichtlichen, grünen Design auf weißem Hintergrund.](https://a.storyblok.com/f/180740/1920x1080/e8bd1622a1/cs_swd_slide2.jpg/m/3200x0) *© Ergosign* ## **Hybride** Content-Migration Die Migration bestehender Inhalte stellte eine besondere Herausforderung dar. Um die Qualität und Konsistenz der Inhalte zu wahren, verfolgten wir einen hybriden Ansatz: Während niederkomplexe Inhalte automatisiert migriert wurden, erfolgte die Übertragung komplexerer Seiten manuell, inklusive inhaltlicher Optimierung. Mehr als 800 Seiten wurden so erfolgreich in das neue System überführt und Inhalte gezielt verbessert, um eine optimierte User Experience sicherzustellen. Weitere Einblicke zur hybriden Migration bei den Stadtwerken Düsseldorf finden Sie in [diesem Insights-Beitrag](https://www.ergosign.de/insights/blog/swd-hybride-migration). ![Webseite und Smartphone mit umweltfreundlichem Inhalt, grünen Symbolen für Erneuerbare Energien und einer Frau, die auf einem Sofa sitzt.](https://a.storyblok.com/f/180740/1920x1080/3b46cf7f89/cs_swd_slide3.jpg/m/3200x0) *© Ergosign* ## Erweiterte Services & **Agile Zusammenarbeit** Dank einer agilen Arbeitsweise konnten wir flexibel auf sich ändernde Anforderungen reagieren und eine enge Zusammenarbeit mit den Stadtwerken Düsseldorf etablieren. Neben UX-Konzeption, UI-Design und technischer Umsetzung umfasst das mehrjährige Projekt Support, Monitoring, Wartung und Software Testing. Derzeit arbeitet unser Team an der Entwicklung eines neuen Hilfe-Portals, das die Customer Experience weiter optimieren und Nutzenden zielgerichtete, effizientere Hilfestellungen zu den angebotenen Services ermöglichen soll. ## Ein **zukunftssicheres** digitales Erlebnis ### Die Lösung Unsere enge Zusammenarbeit mit den Stadtwerken Düsseldorf hat zu einer modernen, barrierearmen und nutzerfreundlichen Webplattform geführt. **Die wichtigsten Vorteile auf einen Blick:** - **Flexibilität & Skalierbarkeit**: Das modulare Design System ermöglicht eine schnelle Anpassung an neue Anforderungen und eine konsistente Darstellung über alle digitalen Kanäle hinweg. - **Optimierte Content-Verwaltung**: Durch die hybride Content-Migration konnten Inhalte effizient und qualitativ hochwertig in das neue System überführt werden. - **Nachhaltige digitale Transformation**: Die kontinuierliche Zusammenarbeit und iterative Modernisierung gewährleisten eine nachhaltige digitale Entwicklung und haben mit dem neuen CMS eine zukunftssichere technische Basis geschaffen. - **Schnellerer Go-to-Market**: Schnelle Anpassungen an Marktveränderungen durch agile Methoden. ## Stadtwerke Düsseldorf AG ### Über den Kunden [Die Stadtwerke Düsseldorf Dieser Link führt zu einer externen Seite](https://www.swd-ag.de) , ein führendes Energieunternehmen in Deutschland, setzen auf innovative digitale Lösungen, um ihren Kunden exzellente Services in den Bereichen Strom, Gas, Wasser und Wärme zu bieten. Gemeinsam mit Ergosign treiben sie ihre digitale Transformation voran, um auch in Zukunft maßgeschneiderte, nutzerfreundliche und nachhaltige Lösungen anzubieten. ## Weitere** Case Studies** [![Das Bild zeigt eine Gruppe von vier Personen in einem Besprechungsraum bei der Arbeit. Zu sehen ist außerdem ein Modell eines Windrades.]()

Innovative Web-App WAVE-H2 für die Universität Stuttgart

](https://www.ergosign.de/projekte/wave-h2) [![Eine Frau sitzt an ihrem Laptop auf dem die Website der Grünwerke geöffnet ist. Rechts neben ihr sitzt ein Mann, der ebenfalls auf den Bildschirm schaut.]()

Bessere Customer & Employee Experience: Relaunch der Grünwerke-Website

](https://www.ergosign.de/projekte/gruenwerke) [![Webseite der Maingau Energie mit Tarifrechner für Gas und Bild von Menschen in einer Küche.]()

Digital Experience Platform für Maingau Energie

](https://www.ergosign.de/projekte/maingau-energie) [![Screens aus den Brand Guidlines für Yippie von Ergosign.]()

Digital Experience Platform für den Energie-Allrounder Yippie

](https://www.ergosign.de/projekte/yippie) ## Bereit für den **nächsten Schritt**? Lassen Sie uns gemeinsam Ihre digitale Energiewelt gestalten. Wir freuen uns auf Ihre Ideen! ![Patrick Alt](https://a.storyblok.com/f/180740/500x500/b3daed66d9/patrick-alt.jpg/m/360x360) ### Patrick Alt Principal UX Designer & Software Engineer, Head of Site Saarbrücken [+49 681 95 98 20 0]() [projects@ergosign.de](mailto:projects@ergosign.de) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://www.ergosign.de/#website","@type":"WebSite","inLanguage":"de","name":"Ergosign GmbH","url":"https://www.ergosign.de/","publisher":{"@id":"https://www.ergosign.de/#identity"},"workTranslation":[{"@id":"https://www.ergosign.de/#website"},{"@id":"https://www.ergosign.de/#website"}]},{"@id":"https://www.ergosign.de/projekte/stadtwerke-duesseldorf#webpage","@type":"WebPage","dateModified":"2026-10-14T11:26:45.810Z","datePublished":"2025-03-05T15:10:00.000Z","description":"Entdecken Sie, wie die Stadtwerke Düsseldorf ihre Web-Plattform modernisiert haben – für mehr Flexibilität, Skalierbarkeit und eine verbesserte Customer Experience.","name":"Digitale Transformation mit Headless CMS & UX-Optimierung","url":"https://www.ergosign.de/projekte/stadtwerke-duesseldorf","breadcrumb":{"@id":"https://www.ergosign.de/projekte/stadtwerke-duesseldorf#breadcrumb"},"isPartOf":{"@id":"https://www.ergosign.de/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ergosign.de/projekte/stadtwerke-duesseldorf"]}],"primaryImageOfPage":{"@id":"https://www.ergosign.de/#logo"}},{"@id":"https://www.ergosign.de/#identity","@type":"Organization","name":"Ergosign GmbH","url":"https://www.ergosign.de","logo":{"@id":"https://www.ergosign.de/#logo"}},{"@id":"https://www.ergosign.de/#/schema/organization/#ergosign-organization","@type":"Organization","name":"Ergosign GmbH","url":"https://www.ergosign.de","logo":{"@type":"ImageObject","url":"https://www.ergosign.de/logo.png"}},{"@id":"https://www.ergosign.de/#/schema/organization/#case-study-client-organization","@type":"Organization","name":"Stadtwerke Düsseldorf","url":"https://www.swd-ag.de/"},{"@id":"https://www.ergosign.de/projekte/stadtwerke-duesseldorf#article","@type":"Article","about":"#case-study-client-organization","dateModified":"2026-10-14T11:26:45.810Z","datePublished":"2025-03-05T15:10:00.000Z","headline":"Digitale Transformation mit Headless CMS für die Stadtwerke Düsseldorf","inLanguage":"de","thumbnailUrl":"https://a.storyblok.com/f/180740/5367x3578/eed14365c7/cs_swd_header.jpg","author":{"@id":"https://www.ergosign.de/#/schema/organization/#ergosign-organization"},"image":{"@id":"https://www.ergosign.de/#/schema/image/1"},"isPartOf":{"@id":"https://www.ergosign.de/projekte/stadtwerke-duesseldorf#webpage"},"mainEntityOfPage":{"@id":"https://www.ergosign.de/projekte/stadtwerke-duesseldorf#webpage"},"publisher":{"@id":"https://www.ergosign.de/#/schema/organization/#ergosign-organization"}},{"@id":"https://www.ergosign.de/projekte/stadtwerke-duesseldorf#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Startseite","item":"https://www.ergosign.de","position":1},{"@type":"ListItem","name":"Projekte","item":"https://www.ergosign.de/projekte","position":2},{"@type":"ListItem","name":"Stadtwerke Düsseldorf","item":"https://www.ergosign.de/projekte/stadtwerke-duesseldorf","position":3}]},{"@id":"https://www.ergosign.de/#logo","@type":"ImageObject","caption":"Ergosign GmbH","contentUrl":"https://www.ergosign.de/logo.png","inLanguage":"de","url":"https://www.ergosign.de/logo.png"},{"@id":"https://www.ergosign.de/#/schema/image/1","@type":"ImageObject","contentUrl":"https://a.storyblok.com/f/180740/5367x3578/eed14365c7/cs_swd_header.jpg","inLanguage":"de","url":"https://a.storyblok.com/f/180740/5367x3578/eed14365c7/cs_swd_header.jpg"}]} ``` ## Sitemap See the full [sitemap](https://www.ergosign.de/sitemap.md) for all pages.