Splash awards nominee


Splash award, nominee

Personalization and Performance with Drupal

Bodensee Schiffsbetriebe (BSB) runs a fleet of 13 passenger ships and ferries on Germany's largest lake and is a unique provider of local public transportation. Founded in 1824, BSB ships operate in many ports in all parts of Lake Constance. BSB is a 100% daughter company of Stadtwerke Konstanz which is owned by the city of Constance.

For the relaunch of its website, BSB was looking for a professional partner who was able to provide the technical expertise for the implementation of a modern, mobile-optimised website and who also had a great experience in online marketing.


Startseite Bodensee Schiffsbetriebe

To achieve this the team at 1xINTERNET developed a solution to personalize the content for certain user groups of the BSB website.

Visitors are segmented with targeted marketing campaigns or via the user behaviour on the website. To enhance the user experience through their whole stay on the website, preferred contents are displayed matching the interests of the visitors.

If, for example, a visitor is more interested in touristic offers,they will be shown special contents that advertise selected offers. If another visitor was more interested in current information about public transport, this content will be preferably be shown.

Analytics tools and tracking tools were set up to analyse. This makes possible to evaluate visitor behaviour and to further optimize the personalized content output.

Schnelle Suche

Fast search and interactivity

One of the most important goals of the relaunch was to create a modern and fast user experience. Special attention was paid to a very fast and user-friendly search.
We used ElasticSearch on the backend in order to speed up the search, to enable smart search functions such as "did you mean" (similar to Google search) and predictive search suggestions.

The search frontend was implemented with React, more precisely the ReactiveSearch library.

This allows the website visitor to change the search results at any time without having to reload the search results page. This is done with the help of facets or changes in the search query. The result is a very fast, error-tolerant search function that always returns the best results. 

Not only full page search was implemented with ElasticSearch and ReactiveSearch, also events search was implemented in the same way. In traditional Drupal development this would have been implemented with views with exposed filters.

The Event Search is available from the events page, the full text search is available on all pages.

Performance Optimization

To achieve good rankings in search engines, modern websites need to have very good performance both on desktop solutions and mobile devices.

The BSB website works with large, engaging images and these should be displayed in the browser as quickly as possible.

By implementing progressive rendering, lower-resolution images are first loaded and then replaced with higher-resolution versions - this allows visitors to start using the website without any interruption. Prefetching happens with Google's quicklink technology to load content from other pages linked to the current page in the background before the visitor switches to those pages. This speeds up the page load process for website visitors.

In order to deliver content from as fast as possible from the nearest servers (edge), Stackpath CDN was integrated. In order to fully exploit the functionality a new module was created by 1xINTERNET to integrate Drupal with the Stackpath.

Interaktiver Fahrplan Bodensee Schiffsbetriebe

Interactive timetable made with React

For many years BSB offer has been offering a modern system for all ship routes and travel times management and it also displays these as part of an online timetable.

The timetable search was redesigned as part of the relaunch. The backend of the search has not been changed. Instead, the search interfaces were implemented as REST-endpoints.

The search itself was then implemented with React. Beside all this an animated map was implemented to the display the different routes and travel times.

The search can be tested here .