Mubea U-Mobility: Multisite für urbane Mikromobilitätslösungen
Enterprise Nat.
Projektbeschreibung
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.
Projektziele und -ergebnisse
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.
Herausforderungen
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.
Community-Beiträge
Unsere Leidenschaft für Open Source und unser Engagement in der Drupal-Community sind fest in unserer Arbeit verankert. Dabei geht es uns nicht nur darum, Code beizusteuern, sondern auch darum, Drupal in Deutschland bekannter zu machen und zu fördern. In den letzten Jahren haben wir aktiv an Patches sowohl für den Core als auch für Contrib-Module gearbeitet und mehrere eigene Module für unsere Distribution und unsere Projekte entwickelt. Die wichtigsten Module für dieses Projekt sind im Folgenden aufgelistet.Core/Contrib
• Multi-Site mithilfe von Config Split
• Salesforce, Salesforce Mapping, Salesforce Push
• Brevo (davor Mailchimp)
• Image Widget Crop, Media Bulk Upload / DropzoneJS, Svg Image
• Translation Management Tool, TMGMT DeepL Integration
• Webform
Custom
• Products Serializer (REST-Schnittstelle für Produktkonfigurator)
• Paragraph Anchors (Deeplinks auf Inhaltsbausteine)
• SVG Favicon (Support für Dark & Light Mode im Favicon)
• Text Formatters (Sammlung von Field Formatters für das Styling von Feldern im Frontend)
• Video Poster (Posterbild für Videoelemente)
Beiträge zu Issues
• Drupal Core: https://drupal.org/i/3048458, https://drupal.org/i/2834546, https://drupal.org/i/3096790
• Brevo Marketing Tool: https://drupal.org/i/3424946, https://drupal.org/i/3442783
• Salesforce: https://drupal.org/i/3307571
• Mailchimp: https://drupal.org/i/3310435
• Webform Conversion-Tracking: https://drupal.org/i/3387290
• Webform Mailchimp: https://drupal.org/i/2385763
• Media PDF Thumbnail: https://www.drupal.org/i/3308857
• Google Adwords Lite: https://drupal.org/i/3362125
• Linkit: https://drupal.org/i/3359375
• Optional End Date: https://drupal.org/i/3458951, https://drupal.org/i/3312834
• Paragraphs: https://drupal.org/i/3084934
• Entity Reference Integrity: https://drupal.org/i/3106850
• Menu Block: https://drupal.org/i/3007225
• Menu Trail by Path: https://drupal.org/i/2870738
• Obfuscate: https://drupal.org/i/3226644, https://drupal.org/i/3226914, https://drupal.org/i/3312913, https://drupal.org/i/3366415
• SVG Image: https://drupal.org/i/3227734, https://drupal.org/i/3257729, https://drupal.org/i/3185492
• Views Reference Field: https://drupal.org/i/3372622
Warum sollte dieses Projekt die Splash Awards gewinnen?
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.