BSB - Headless E-Commerce
DIE ANFORDERUNG
Die BSB betreibt eine Flotte von 16 Fahrgastschiffen auf Deutschlands größtem See, dem Bodensee. Um sich mit den Bedürfnissen ihrer Kunden weiterzuentwickeln und mit den neuesten Technologien Schritt zu halten, entschloss sich BSB, ein E-Commerce-System für den Online-Verkauf von Fahrkarten einzuführen, um der Nachfrage der Kunden gerecht zu werden.
DIE LÖSUNG
Das Projekt wurde in zwei Phasen durchgeführt: zuerst wurde eine nutzerzentrierte Website auf der Grundlage von Personas und User Journeys erstellt, anschließend wurde ein Headless-E-Commerce-System mit Analyse- und Tracking-Tools integriert, um Erkenntnisse über das Nutzerverhalten zu nutzen, um so den Umsatz zu steigern.
DIE HIGHLIGHTS
Die neue nutzerzentrierte Website mit optimiertem Kaufvorgang führte zu einem deutlichen Anstieg der Online-Ticketverkäufe von 8.000 Transaktionen im Jahr 2019 auf mehr als 32.000 im Jahr 2022, was eine Vervierfachung in nur drei Jahren darstellt.
Bodensee Schiffsbetriebe GmbH
Die Bodensee Schiffsbetriebe GmbH (BSB) existiert seit 1824. Die erste regelmäßige Schiffsverbindung ist noch auf Zeiten der Monarchie zurückzuführen. Seit dem 15. Mai 2003 ist die Bodensee Schiffsbetriebe GmbH eine Tochtergesellschaft der Stadtwerke Konstanz GmbH. Die BSB betreibt eine Flotte von 16 Passagierschiffen, hat über 200 Vollzeitbeschäftigte und erwirtschaftet einen Jahresumsatz von EUR 16 Millionen. Im Jahr 2022 wurde das erste vollelektrische Schiff (E-Schiff) in Betrieb genommen.
Benutzerfreundliche Webseite und Headless-E-Commerce auf Basis von Drupal
Das Ziel des Web-Projektes war es, eine neue Webseite mit einem User-zentrierten Ansatz zu erstellen sowie die Integration eines Ticket-Systems / Webshops in Drupal 9.
Besonders wichtig war der BSB die Neugestaltung Ihrer Webpräsenz mit einer verbesserten Benutzerführung und die Anbindung ihres Online-Ticket-Systems, um den Besuchern den Kauf von Schiffstickets digital zu ermöglichen und vor allem zu erleichtern. Der vorherige Webshop der BSB sollte modernisiert und in die Webseite integriert werden.
Für den Relaunch ihrer Webseite suchten die Bodensee Schiffsbetriebe einen Partner, der neben den rein technischen Kompetenzen für die Umsetzung einer modernen, mobil optimierten Webseite auch reichlich Erfahrung im Online Marketing und E-Commerce mitbringt.
Im ersten Schritt wurden mit der Bodensee Schifffahrt Workshops zur Entwicklung von Personas und User-Journeys durchgeführt. Mit den Ergebnissen wurde dann ein ganzheitliches Konzept für die neue Webseite entwickelt. Dabei sollten für verschiedene Zielgruppen relevante Inhalte angezeigt werden.
Im zweiten Schritt wurde ein Webshop aufgesetzt, der zum einen Tickets für Fahrten von A nach B abbilden sollte, aber auch verschiedene Erlebnis- und Rundfahrt-Tickets mit begrenzter Teilnehmerzahl (kontingentierte Event-Tickets), Kombitickets (Schifffahrt Tickets inkl. Eintritt in touristische Destinationen), Saison Cards (Jahrestickets) und Geschenkgutscheine.
Im Hintergrund wurden Analytics- und Tracking-Tools implementiert, die es erlauben, das Besucherverhalten auszuwerten. Auf Basis der gesammelten Daten werden im nächsten Schritt ein Design-Update und weitere Optimierungen der Nutzerfreundlichkeit durchgeführt.
"Eine Webseite und ein zuverlässig funktionierender Webshop..."
"Wir haben eine Webseite und einen verlässlich funktionierenden Webshop auf die Beine gestellt. Beides lässt sich tracken, Erfolge messen und ist so konzipiert, dass alles technisch auf dem neuesten Stand ist und in den nächsten Jahren angepasst und weiterentwickelt werden kann. Unseren Online-Umsatz konnten wir mit dem neuen Webshop schon mehr als verdoppeln. Erfolgreich finde ich auch, dass wir gut zusammenarbeiten und eine Ebene gefunden haben, wie das für beide Seiten zufriedenstellend abläuft."
David Conrad, Online Marketing Manager, BSB
Leistungsfähige Webseite mit interaktiven Funktionen
ElasticSearch & ReactiveSearch
Für die Volltextsuche, die auf allen Seiten verfügbar ist, als auch für die Erlebnissuche wurde ElasticSearch im Backend implementiert. So werden vorausschauende Suchvorschläge ermöglicht. Im Frontend wurde ReactiveSearch eingesetzt, so kann der User Suchergebnisse ohne lästiges Neuladen für sich verbessern.
Progressive Rendering
Die BSB Webseite arbeitet mit großen, emotionalisierenden Bildern. Diese sollten so schnell wie möglich im Browser angezeigt werden. Durch den Einsatz von Progressive Rendering werden zunächst niedriger aufgelöste Bilder geladen und diese - während der Besucher die anderen Inhalte der Webseite bereits nutzen kann - sukzessive mit höher aufgelösten Versionen ersetzt.
Interaktiver Fahrplan & Animierte Karte
BSB bietet den Usern einen Online-Fahrplan an. Dieser wurde im Rahmen des Relaunchs mit React überarbeitet. Das Backend der Suche wurde dabei nicht verändert. Stattdessen wurden die Schnittstellen der Suche als REST-Endpunkte implementiert. Neben der Anzeige der verschiedenen Routen und Reisezeiten des interaktiven Fahrplanes, wurde eine animierte Karte implementiert.
Auszeichnung für personalisiertes Nutzererlebnis
"Der Relaunch der Bodensee-Schiffsbetriebe: Personalisierung und Performance mit Drupal" wurde bei den Splash Awards Deutschland/Österreich 2020 als herausragende Website mit hohem Nutzerkomfort ausgezeichnet.
Mehr zu den Gewinnern der Splash Awards Deutschland / Österreich 2020
Headless E-Commerce-System mit Analyse- und Tracking-Tools
Tiefe Integration mit Stackpath CDN
Durch die Integration von Stackpath CDN wird der Webshop, aber auch die Webseite schneller geladen. So wird eine Überlastung der Server bei der Ticketbuchung verhindert.
Drupal Commerce
Die Integration von headless-Drupal-Commerce macht die Funktion des Ticketkaufs erst möglich. Drupal Commerce umfasst dabei die Verwaltung von Produkten, Bestellungen und Zahlungen. Die Datenstruktur ist, ähnlich wie in Drupal selbst, flexibel und kann stark modifiziert werden, was die Abbildung von spezifischen Verkaufsszenarien ermöglicht.
Die Anzeige sämtlicher Widgets und Produkte wurde “headless” mittels React-Apps umgesetzt, die notwendigen Daten werden aus Commerce-APIs gespeist.
Analytics- und Trackingtools
Mittels Google-Analytics wird das Besucherverhalten stetig erfasst und ausgewertet, um die Webpräsenz zu optimieren.
Auswahl verschiedener Tickets
Das POS-System (Point-of-Sale, Kasse) von BSB wurde per API angebunden, um den Nutzern die verschiedenen Tickets anbieten zu können.
Online-Tickets via PDF
Die gekauften Tickets werden dem Nutzer via E-Mail im PDF-Format zugeschickt. In diesem befindet sich ein QR-Code. Das Einchecken auf dem Schiff ist somit ganz einfach möglich. Zudem wurde die Funktion einer “Failed-Mail“ eingerichtet. So werden die User darüber informiert, wenn eine Buchung nicht erfolgreich war und darüber, dass kein Geld abgebucht und kein Ticket erstellt wurde. Via Link wird der User noch einmal zum Kauf aufgefordert.
Personalisierter Warenkorb
Mit der Warenkorbanalyse, basierend auf dem Nutzerverhalten werden dem User personalisierte Up-Selling und Cross-Selling Produkte vorgeschlagen.
Vervierfachung der Online-Verkäufe in 3 Jahren
Während im Jahr 2019 mit dem bisherigen Ticket-System noch rund 8.000 Transaktionen getätigt wurden, waren es mit dem neuen Webshop 2021 bereits gut 20.000 und 2022 sogar mehr als 32.000 Onlinekäufe. Über diesen drei Jahreszeitraum betrachtet, sprechen wir hier von einem Anstieg des Online-Umsatzes auf das Vierfache. Dabei muss berücksichtigt werden, dass im Jahr 2021 noch nicht alle Ticketarten buchbar waren. Der Umsatz der einzelnen Produkte und Kategorien wird mit Google Analytics getrackt und mit den Umsatzzahlen in Drupal-Commerce verglichen, Top-Seller identifiziert, Verweildauern im Kaufprozess der einzelnen Produkte analysiert und dahingehend optimiert.
Reflektionen aus der Zusammenarbeit mit 1xINTERNET
Wichtig in der Zusammenarbeit mit einer Web-Agentur sind der BSB, die Kommunikation und die Verlässlichkeit. Das hat mit 1xINTERNET sehr gut funktioniert. Durch den steigenden Online-Umsatz wird der Webshop, vor allem in Saisonzeiten, zu einem unerlässlichen und wichtigen Vertriebskanal, der beständig funktionieren muss.
“Mit 1xINTERNET haben wir eine Web-Agentur gefunden, mit der wir gut und auf Augenhöhe arbeiten können. Wir haben gemeinsam einen Workflow entwickelt, mit dem wir digital über ein Ticketsystem und zur persönlichen Abstimmung in einem Weekly per Videocall einen Austausch finden”, sagt David Conrad, Online-Marketing Manager, BSB.
Regelmäßige Deployments führen zu einer stetigen Weiterentwicklung und zu einer dynamischen Arbeitsweise. “Der Webshop läuft sehr verlässlich und hatte bisher keine gravierenden Ausfälle.”
Open-Source-CMS Drupal
Nachdem BSB umfangreiche Marktrecherchen zu verschiedenen Content-Management-Systemen durchgeführt hatte, fiel die Entscheidung auf das Open-Source-CMS Drupal. Demzufolge suchte BSB auch nach einer Agentur, die Erfahrungen und gute Referenzen mit Drupal aufweisen konnte.
Weitere Projekte
Eldum Rétt - komplexer Webshop
Integration von Decoupled Drupal Commerce mit der React Native App für ein besonderes Kundenerlebnis, außergewöhnlich große Flexibilität und...
Transgourmet - Multisite und Headless E-commerce
Entwicklung einer Multisite-CMS-Plattform mit Drupal und Commercetools, um Kunden und Lieferanten den neuesten digitalen Service zu bieten.