Bessere Website-Usability für Commerz Real

In 10 Wochen zum neuen CMS

Die Besucher von Websites erwarten heute übersichtliche Informationen, eine einfache Navigation und ein modernes Design. Um diese Anforderungen effizient erfüllen zu können, führte Commerz Real innerhalb von zehn Wochen das neue Content-Management-System Typo3 CMS 8 ein.

  • Commerz Real

    Commerz Real steht für 45 Jahre Erfahrung in der Finanzierung und im Asset-Management von Mobilien und Immobilien.

  • Anke Gillmann, Commerz Real AG

    Anke Gillmann, Bereichsleiterin Marketing und Communications Commerz Real AG

  • Webseite von Commerz Real

    Die neue Webseite von Commerz Real

Commerz Real steht für 45 Jahre Erfahrung in der Finanzierung und im Asset-Management von Sachwert-Investments. Die Leistungspalette reicht von Fondsprodukten für private und institutionelle Anleger über individuelle Finanzierungslösungen für gewerbliche Projekte bis hin zu bedarfsgerechten Mobilien-Leasing-Konzepten für Firmenkunden.

Das Unternehmen der Commerzbank-Gruppe setzte bislang eine frühere Typo3-Version als Content-Management-System (CMS) für seine Website ein. Dieses war nicht mehr State of the Art und erzeugte zunehmenden Management-Aufwand. Über eine Ausschreibung suchte man einen neuen Partner, der eine zukunftsfähige Gesamtlösung bot. Hier konnte die Digital-Agentur Comwrap mit seinem Enterprise-Content-Management-Ansatz auf Basis von Typo3 CMS 8 überzeugen.

„Eigentlich wollten wir das CMS aufgrund unserer Erfahrungen mit der veralteten Version nicht mehr nutzen, doch Comwrap überzeugte uns, dass die neue Version alle unsere Anforderungen erfüllte“, sagt Anke Gillmann, Bereichsleiterin Marketing und Communications bei Commerz Real. „Die Bedienung ist nun einfacher, das CMS besitzt moderne Funktionalitäten und erhöht die Sicherheit. Großen Vorteil bietet auch die mögliche Nutzung von Content-Elementen, die auf einfache Weise flexibel veränderbar, kombinierbar und erweiterbar sind. Mit einer modernen, lebendigen Website können wir nun aktuelle und künftige Erwartungen der Besucher erfüllen.“ Bei dem Open-Source-CMS sind beispielsweise zur Umsetzung einer Multi-Site- und Multi-Language-Corporate-Website keine technischen Entwicklungen erforderlich, sondern nur Anpassungen an die individuellen Wünsche.

Design Thinking für Content-Strategie

Zu Projektbeginn fand ein Design-Thinking-Workshop mit der Digital-Agentur, der Design-Agentur Brandtec und Testnutzern statt, um die optimale Ausrichtung der Website anhand der Nutzerwünsche festzulegen. Hier bewerteten Anwender den Web-Auftritt und zeigten ihre aktuellen Bedürfnisse auf. Damit konnten man feststellen, welche Funktionen nötig sind und in welche Richtung sich die Website entwickeln sollte. Dieser Workshop war wertvoll, da er teils überraschende Rückmeldungen der Nutzer aufdeckte und dabei viel Wert auf die Content-Strategie legte.

Diese Informationen bildeten die Basis für das anschließende „Growth-Driven-Design“. Der Ansatz fokussiert auf die Funktionen mit dem größten Geschäftswert, die durch kontinuierliches Lernen und Optimieren in Form eines iterativen, fortlaufenden Prozesses weiterentwickelt werden. Er steht damit in Kontrast zum traditionellen Website-Relaunch, der ein abgeschlossenes Projekt darstellt.

Aufgrund des engen Zeitrahmens von nur zehn Wochen für die CMS-Migration musste das Projekt zügig abgewickelt werden. So gestaltete die Digital-Agentur einen eigenen Atomic-Design-Workflow zur Bereitstellung von Content-Elementen. Dies erfolgt auf Basis von Nunjucks und Mask. Dabei werden Webprojekte in möglichst kleine Designbausteine, den Atomen, zerlegt. Diese lassen sich auf unterschiedliche Arten zusammensetzen, um eine komplette Webseite aufzubauen. Mit dieser Komponentenbibliothek konnte die Digital-Agentur das Templating deutlich schneller als mit anderen Methoden durchführen.

Wenn ein Kunde mit dem Design nicht zufrieden ist, müssen bei herkömmlicher Integration mit Typo3 entweder einzelne Code-Fragmente auf Unterschiede verglichen und manuell kopiert oder aber die Template-Integration erneut vorgenommen werden. Mit dem Ansatz von Comwrap können die Frontend-Designer ohne Hilfe von Backend-Entwicklern Design-Änderungen durchführen. Diese werden über die Versionierung direkt in die Mask-Komponenten übernommen und stehen sofort zur Verfügung. Dieses Vorgehen bringt übrigens auch einen Living-Styleguide mit sich. Das sind auf HTML, CSS und Javascript basierende grafische Repräsentationen der User-Interface-Bestandteile sowie beispielhafter Seitentypen. Das vereinfacht den Abnahmeprozess und spart in späteren Projektvorhaben eine Menge Zeit da die Umsetzungspartner den Quellcode der Komponenten einfach herauskopieren und verwenden können.

„Wir haben gemeinsam mit der Digital-Agentur die Content-Elemente so definiert, dass unsere Redakteure eine übersichtliche Auswahl aus fünf bis zehn spezifischen Elementen erhalten“, so Christopher Egold, Trainee Marketing und Communications bei Commerz Real. „Eine gut verständliche Namensgebung dieser Elemente und ein stringenter Aufbau der Website erleichtern das Content-Management. Außerdem erhöht sich die Usability für die CMS-Redakteure, da sie Content-Elemente intuitiv per Drag und Drop einfügen können. Der Rest läuft praktisch voll automatisiert.“

CMS-Zugriff von externen Apps aus

Zudem kommt Typo3 im Rahmen dieses Projekts auch als „Headless CMS“ zum Einsatz. Strukturierte Inhalte aus dem Backend werden über eine zentrale API auf Basis von REST ausgeliefert. Auf diese Weise werden Daten und Inhalte bereitgestellt, die sich mit verschiedenen Programmiersprachen von unterschiedlichen Anwendungen abrufen lassen. So können Inhalte aus dem CMS auch server-übergreifend entnommen und immer wieder an anderen Stellen in verschiedener Detailtiefe genutzt werden. Da diese strukturierten Inhalte als Datenobjekte in Typo3 vorgehalten werden, können zum Beispiel Apps – auch von Drittanbietern – auf diese Informationen zugreifen.

„Die Umsetzung der neuen Ansätze wie Headless CMS und Atomic Design durch die Digital-Agentur und die allgemeine Zusammenarbeit passten“, erläutert Anke Gillmann. „Die Agentur konnte den anspruchsvollen Zeitplan für die Einführung einer komplett neuen Instanz problemlos einhalten. Auch mit dem neuen CMS sind wir zufrieden. Es eignet sich für den Einsatz bei einer Multi-Language-Corporate-Website und unterstützt aktuelle Technologien und anspruchsvolle individuelle Konzepte.“

Commerz Real profitiert nun von standardisierten Content-Elementen, die zu einer deutlichen Zeitersparnis beim Einpflegen und Ändern von Inhalten führen. Die Bildgröße ist nun vordefiniert, so dass keine aufwendigen Anpassungen mehr erforderlich sind. So berichten die CMS-Redakteure von einem Quantensprung in der Usability, da sie zum Beispiel Pressemitteilungen mit wenigen Klicks SEO-optimiert auf der Website und sozialen Medien wie Facebook veröffentlichen können. Aber auch die externen Besucher der Website bemerken deutlich schnellere Ladezeiten, ein klares und strukturiertes Design sowie eine übersichtliche Navigation. Zudem wurden die Sicherheit und Skalierbarkeit des Internet-Auftritts erhöht.

„Im ersten Schritt haben wir die neue CMS-Version erfolgreich für unsere Corporate Website eingeführt. Weitere, wie die Seiten für unsere Institutional Investments, konnten bereits folgen. Derzeit erarbeiten wir die fachliche und technische Konzeption für unsere unternehmerischen Beteiligungen und Hausinvest“, resümiert Anke Gillmann. „Nach und nach sollen alle Auftritte von Commerz Real konsolidiert mit Atomic-Komponenten laufen. Diese stehen auch anderen Kreativ-Agenturen zur Verfügung, die anhand der Vorgaben Designs entwickeln können. Damit profitieren wir durch die offenen Schnittstellen von Typo3, denn unsere Website bleibt jederzeit anpassungsfähig, erweiterbar und skalierbar – unabhängig von Herstellern oder Partnern.“

©2018Alle Rechte bei MEDIENHAUS Verlag GmbH

Unsere Website verwendet Cookies, um Ihnen den bestmöglichen Service zu bieten. Durch die weitere Nutzung der Seite stimmen Sie der Verwendung zu. Weitere Infos finden Sie in unserer Datenschutzerklärung.

ok