BSB - headless e-commerce
CHALLENGE
BSB operates a fleet of 16 passenger ships on Germany´s largest lake Constance. To evolve with the needs of its customers and keep pace with the latest technologies, BSB needed to take a significant step in its digital transformation by implementing an e-commerce system to sell tickets online.
SOLUTION
The project was carried out in two phases: first, the creation of a user-centric website based on personas and user journeys, and then the integration of a headless e-commerce system with analytics and tracking tools to gain insights into user behaviour and boost sales.
HIGHLIGHTS
The new user-centric website with an optimised purchasing process resulted in a significant increase in online ticket sales from 8,000 transactions in 2019 to more than 32,000 in 2022, demonstrating a four-fold growth in a short period of 3 years.
Bodensee Schiffsbetriebe GmbH
Bodensee Schiffsbetriebe GmbH (BSB), was established in 1824 and their first regular ship connection dates back to the times of the monarchy. Since May 15, 2003, Bodensee Schiffsbetriebe GmbH has been a subsidiary of Stadtwerke Konstanz GmbH. BSB operates a fleet of 16 passenger ships, employs more than 200 full-time staff and generates an annual turnover of EUR 16 million. In 2022, the first fully electric ship (E-ship) was put into service.
A user-centric website & headless e-commerce system based on Drupal
The objective of the web project was to develop a new website with a user-centric approach, integrating a ticket system and webshop in Drupal 9.
Of particular importance to BSB was the redesign of its web presence with an improved user interface for the online ticket system to enable visitors to purchase tickets digitally and, above all, to make it easier for them to do so. The old BSB online ticket shop had to be upgraded and integrated into the website.
For the relaunch, Bodensee Schiffsbetriebe were looking for a partner who, besides having the technical expertise for the implementation of a modern, mobile-optimized website, but also had considerable experience in online marketing and e-commerce.
In the initial development phase, we conducted workshops with Bodensee Schifffahrt to develop personas and outline user journeys. The results were used to develop a holistic concept for the new website, aiming to display relevant content tailored to the different target groups.
In the second phase, a web store was set up to display tickets for trips from point to point journeys, and also for various event and round trip tickets, with a limited number of participants (contingent event tickets), combination tickets (tickets which include admission to tourist destinations), season cards (annual tickets) and gift vouchers.
In the background, analytics and tracking tools were integrated to assess user behaviour. Based on the collected data, refinements are made to the design and additional enhancements are implemented to optimise user experience.
"A website and a reliably functioning webshop..."
"We have set up a website and a reliably functioning webshop. Both can be tracked, successes measured and are designed to keep everything technically up to date so it can be adapted and further developed in the years to come. With the new webshop, we have already more than doubled our online sales. Another success factor for me is that we work well together and have established a level of cooperation that is satisfying for both sides."
David Conrad, Online Marketing Manager, BSB
High performing website with interactive features
ElasticSearch & ReactiveSearch
Incorportating ElasticSearch in the backend facilitated the implementation of a comprehensive full text search available across all pages, alongside an enhanced experience search. This integration enables predictive search suggestions. On the frontend, ReactiveSearch was employed, allowing users to refine search results without the need for page reloading.
Progressive Rendering
The BSB website uses large, emotive images. It was important to display these images as quickly as possible in the browser. By using progressive rendering, lower-resolution images are loaded first and whilst the visitor explores the content on the website, these images are progressively replaced with higher-resolution versions.
Interactive timetable &
Animated map
As part of the relaunch, BSB enhanced the online timetable using React. It is important to note that the backend of the search was not modified; rather, the search interfaces were implemented as REST endpoints. In addition to displaying the different routes and travel times interactively on the timetable, an animated map was implemented.
Awarded for personalised user experience
Being recognized as an exceptional website offering personalised user experience, "The relaunch of “Bodensee-Schiffsbetriebe: Personalization and Performance with Drupal”" received an award at the Splash Awards Germany/ Austria 2020.
Headless e-commerce system with analytics and tracking tools
Deep integration with Stackpath CDN
The integration of Stackpath CDN makes the webshop, but also the website, load faster. This prevents server overload during ticket booking.
Drupal Commerce
The integration of headless Drupal Commerce makes the ticket purchase function possible. Drupal Commerce includes the management of products, orders and payments. The data structure, similar to Drupal itself, is flexible and can be modified, which enables the mapping of specific sales scenarios.
Headless display of all widgets and products was implemented using React, the data required is fed from Commerce APIs.
Analytics and tracking
Google Analytics is used for ongoing recording and analysis of visitor behaviour, enabling the continual optimisation of the web presentation based on collected data.
Selection of various tickets
BSB's POS (point-of-sale) system was connected via API in order to be able to offer various ticket types.
Online tickets as PDF
Purchased tickets are sent to the user via e-mail in PDF format with a QR code which facilitates the check-in process on the ship. Additionally, a "Failed Mail" function has been set up to inform users when a booking is unsuccessful, and neither payment has been debited nor a ticket created. User then receive a prompt via a link to retry the purchase.
Personalized shopping cart
An analysis of the shopping cart, based on user behavior, will suggest personalized up-selling and cross-selling of products to the user.
A fourfold increase in online sales in 3 years
In 2019, around 8,000 transactions were made with the previous ticketing system; this number had already risen to more than 20,000 with the new webshop in 2021, and in 2022 it was even higher at more than 32,000 online purchases. Over this three-year period, we are talking about a fourfold increase in online sales. It should be noted that not all ticket types were bookable in 2021. Sales of individual products and categories are tracked with Google Analytics and compared to the sales figures in Drupal Commerce. Through this analysis, top sellers are identified, and the dwell times in the purchase process of the individual products are scrutinised and optimised accordingly.
Reflections on the cooperation with 1xINTERNET
For BSB, communication and trust are the most important factors when working with a web agency. This project worked very well with 1xINTERNET. Due to the increasing online sales, the web store, especially in seasonal times, becomes an indispensable and important sales channel.
"With 1xINTERNET, we have found a web agency with whom we can work well and with whom we see eye to eye. Together we have developed a workflow in which we exchange digitally via a ticketing system and for personal coordination in weekly video calls", states David Conrad, Online Marketing Manager, BSB.
Regular deployments lead to continuous development and a dynamic way of working. "The web store runs very steadily and has not had any serious outages at all."
Open-source CMS Drupal
After BSB had conducted extensive market research on various content management systems, the decision was made in favor of the open-source CMS Drupal. BSB specifically looked for an agency that had years of experience and good references working with Drupal.
Other projects
Eldum Rétt - complex e-commerce system
Integration of Decoupled Drupal Commerce with the React Native App for a unique customer experience, overall flexibility & scalability of the system.
Transgourmet - multisite and headless e-commerce
Developing a multisite CMS platform with Drupal and Commercetools to offer customers and suppliers the latest digital convenience.