Mehrsprachige Multisite zur Präsentation des Unternehmens Mubea U-Mobility (https://www.mubea-umobility.com) und zur gezielten Vermarktung der Produkte Cargo (https://cargo.mubea-umobility.com) und XBoard (https://xboard.mubea-umobility.com).
Wenn die letzte Meile zum coolen Erlebnis wird, kann man von einem innovativen Produkt sprechen. Und fast so lässig ist uns auch der Launch der XBoard Website gelungen. Ganz nach dem Motto #drivethewave. Aber lasst uns am Anfang beginnen:
Die Reise mit Mubea begann im Jahr 2022. Für Mubea U-Mobility, die Mikromobilitätstochter des Leichtbauspezialisten und globalen Automobilzulieferers Mubea, haben wir auf Basis unserer eigenen Distribution »Brandcoded« mehrere Websites mit Drupal 9 entwickelt. Von Anfang an war klar, dass für die verschiedenen Produkte eigenständige Websites benötigt werden, um die sehr unterschiedlichen Kundensegmente gezielt anzusprechen zu können.
Ende 2023 wurden alle Seiten auf Drupal 10 umgestellt und haben mit dem Gin-Theme auch im Backend eine ansprechende und benutzerfreundliche Oberfläche.
Obwohl die Kernidee aller Produkte auf innovativen, nachhaltigen und vor allem kundenorientierten Mobilitätslösungen im Bereich der urbanen Mikromobilität und Logistik basiert, sind die Anforderungen sehr unterschiedlich. Die Cargo-Website ist B2B-orientiert und integriert eine Schnittstelle zu Salesforce. Die XBoard-Website hingegen richtet sich an Endkunden, ist erlebnisorientiert und nutzt eine Shopware-Komponente als Shoplösung. Unser Ziel war es, alle Website-Bausteine und Features so zu entwickeln, dass die drei aktuellen Auftritte von den Funktionalitäten profitieren können und die Redakteure eine einheitliche Oberfläche vorfinden, um sich nicht immer wieder neu orientieren zu müssen.
Im Frontend setzen wir auf ein einheitliches Grundlayout, das sich je nach Auftritt in Stil und Intensität der Oberflächenelemente unterscheidet. Das stringente Erscheinungsbild schafft eine konsequente Einbindung in die Markenarchitektur von Mubea U-Mobility und trägt dazu bei, dass alle Produktlösungen des Unternehmens als Teil einer gemeinsamen Marke wahrgenommen werden. Dennoch hat jede Produktmarke ihren eigenen Spielraum in der zielgruppenspezifischen Ansprache und in der Gestaltung der Inhalte. Um eine hohe Flexibilität bei der Pflege der Websites zu gewährleisten, steht der Redaktion ein umfangreiches Set an Inhaltsbausteinen (Paragraphs) zur Verfügung.
Trotz der zum Teil grafisch intensiven Inhalte lag unser Fokus stets auf der Qualitätskontrolle im Hinblick auf schnelle Ladezeiten und die kontinuierliche Verbesserung der User Experience, insbesondere auf mobilen Endgeräten. Eine Aufgabe, die ständiges Monitoring, Analyse und Optimierung erfordert. Um dies zu erreichen, wurden unter anderem responsive Bildstile, optimierte Bildkomprimierung und Ladegeschwindigkeit sowie ein schlanker Code implementiert.
Die besondere Herausforderung bei der XBoard-Website bestand vor allem darin, die Videoinhalte sowohl performant als auch barrierefrei und benutzerfreundlich zu integrieren. Das bedeutet, ein flüssiges und interaktives Nutzererlebnis zu schaffen, das durch den Einsatz moderner Technologien und Medien unterstützt wird. Ein besonderes Highlight, das leider noch nicht live zu sehen ist, ist ein interaktives Modul, das Klick- und Mouse-Scroll-Interaktionen mit Video-Elementen kombiniert.
Bei der Cargo-Website lag der Fokus auf der Flexibilität des Backends bei der Erfassung von Produkteigenschaften und Kombinationsmöglichkeiten, die dann über einen Konfigurator das Baukastenprinzip des Produkts erlebbar machen. Ziel war es, die Backend-Architektur so zu gestalten, dass unterschiedliche Kombinationen ausschließlich über die Pflege verwaltet werden können. Dies beinhaltet verschiedene Abhängigkeiten der Spezifikationen über alle Produktkategorien hinweg.
Der Konfigurator wurde als React-Anwendung (headless) umgesetzt und erhält die Daten von Drupal über eine REST-Schnittstelle. Die Website übergibt am Ende des Konfigurationsprozesses die Informationen und Benutzerdaten an Salesforce. Die Salesforce-Anbindung ist auch im Bereich der Leadgenerierung relevant und wurde nahtlos in das Frontend-Design der Website integriert, um keine Brüche in der User-Journey in Kauf nehmen zu müssen.
Klein aber fein: Besonders hervorheben möchten wir auch die Integration der Double Opt-In-Funktionalität in das Brevo-Modul, die bisher fehlte und nun von uns ergänzt wurde.
Unsere Motivation ist es, Projekte zu realisieren, bei denen keine Kompromisse gemacht werden müssen – weder bei der Flexibilität in der Erstellung und Bearbeitung von Inhalten, noch bei der Vermarktung, z.B. durch Performance-Kampagnen. Und schon gar nicht bei der technischen Qualität und Barrierefreiheit der Seiten.
Die Produktseiten von Mubea U-Mobility wurden entsprechend den Zielen unseres Kunden gezielt auf Performance und Marketing optimiert. Darüber hinaus erreichen aber alle Seiten einen WUX (Website User Experience) Score von über 95%. Dieser Score bewertet die Website nach den Kriterien SEO, Qualität, Webperformance, Nachhaltigkeit, Barrierefreiheit und Compliance.
In den letzten Monaten haben wir die Seiten intensiv unter dem Aspekt der Barrierefreiheit optimiert, und streben eine nahezu 100% Barrierefreiheit nach EN 301 549 und WCAG 2.2 an. Unser Ziel ist es, nicht nur die Konformitätssiegel durch einen BITV-Test der BIK zu erhalten, sondern Drupal auch in der Liste der empfohlenen Systeme auf den Seiten der BIK weiter nach oben zu bringen – einen Platz, den Drupal für Projekte in Deutschland verdient.
