BSB - headless e-commerce
RETO
BSB opera una flota de 16 barcos de pasajeros en el lago más grande de Alemania, el Constanza. Para poder adaptarse a las necesidades de sus clientes y seguir el ritmo de las últimas tecnologías, BSB necesitaba dar un paso importante en su transformación digital implementando un sistema de comercio electrónico para vender tickets online.
SOLUCIÓN
El proyecto se llevó a cabo en dos fases: en primer lugar, la creación de un sitio web centrado en el usuario que se basa en personas y user journeys, y a continuación la integración de un sistema de comercio electrónico headless con mecanismos de análisis y seguimiento para obtener información sobre el comportamiento de los usuarios e impulsar las ventas.
HIGHLIGHTS
El nuevo sitio web centrado en el usuario, con un proceso de compra optimizado, dio lugar a un aumento significativo de las ventas de tickets online, pasando de 8.000 transacciones en 2019 a más de 32.000 en 2022, lo que demuestra un crecimiento cuádruple en un corto período de 3 años.
Bodensee Schiffsbetriebe GmbH
Bodensee Schiffsbetriebe GmbH (BSB) se fundó en 1824. Su primer servicio de transporte marítimo se remonta a los tiempos de la monarquía. Desde el 15 de mayo de 2003, Bodensee Schiffsbetriebe GmbH se convierte en una filial de Stadtwerke Konstanz GmbH. BSB opera una flota de 16 barcos de pasajeros, tiene más de 200 empleados a jornada completa y genera un ingreso anual de 16 millones de euros. En 2022 se estrenó el primer barco totalmente eléctrico (E-ship).
Un sitio web centrado en el usuario y un sistema de comercio electrónico headless basado en Drupal
El principal objetivo del proyecto era crear un nuevo sitio web con un enfoque centrado en el usuario, así como integrar un sistema de tickets/tienda online en Drupal 9.
Para BSB era especialmente importante rediseñar su sitio web y mejorar la interfaz de usuario del sistema de venta de tickets online para que los usuarios pudieran comprar los tickets de forma digital y, sobre todo, que les facilitara la compra. La antigua tienda online de BSB tenía que ser actualizada e integrada en el sitio web.
Para el relanzamiento de su sitio web, Bodensee Schiffsbetriebe buscaba un socio que, además de contar con las competencias técnicas para el desarrollo de un sitio web moderno y optimizado para dispositivos móviles, también tuviera una experiencia considerable en online marketing y comercio electrónico.
En la primera fase de desarrollo, realizamos talleres con Bodensee Schifffahrt para desarrollar perfiles de usuarios (personas) y recorridos del usuario (user journeys). Los resultados se utilizaron para desarrollar un concepto holístico para el nuevo sitio web. La intención era mostrar contenidos relevantes para los distintos grupos objetivo.
En la segunda fase, se implementó una tienda online para ofrecer tickets para viajes de punto A a punto B, así como varios tickets para eventos y viajes de ida y vuelta con un número limitado de participantes (tickets de eventos eventuales), tickets combinados (tickets de transporte que incluyen la entrada a destinos turísticos), tarjetas de temporada (tickets anuales) y vales de regalo.
En segundo plano, se implementaron herramientas de análisis y seguimiento para evaluar el comportamiento de los usuarios. A partir de los datos obtenidos, se realizó la actualización del diseño y optimización de la experiencia del usuario.
"Un sitio web y una tienda online que funcionan de forma segura..."
"Hemos creado un sitio web y una tienda online que funcionan de forma segura y permiten un control sobre el rendimiento. Ambos están diseñados para que todo esté técnicamente actualizado y pueda adaptarse a los cambios tecnológicos de los próximos años. Con la nueva tienda online, ya hemos duplicado los ingresos anuales de nuestras ventas online. Otro factor de éxito para mí es la sintonía que existe entre nosotros y el alto nivel de confianza que hemos logrado durante los años de nuestra colaboración".
David Conrad, Responsable de Online Marketing, BSB
Sitio web de alto rendimiento con funciones interactivas
ElasticSearch / ReactiveSearch
Para la búsqueda de texto completo, que está disponible en todas las páginas, así como para la búsqueda de experiencias, se implementó ElasticSearch en el backend que permite realizar sugerencias de búsqueda relevantes. En el front-end se utilizó ReactiveSearch, que permite a los usuarios obtener los resultados de búsqueda rápidos sin necesidad de refrescar la página para cada nueva consulta.
Renderizado progresivo
El sitio web de BSB utiliza imágenes de gran resolución. Era importante mostrarlas lo más rápido posible en el navegador. Al utilizar el renderizado progresivo, las imágenes de menor resolución se cargan primero y, mientras el usuario ya puede ver el resto del contenido del sitio web, se sustituyen sucesivamente por versiones de mayor resolución.
Calendario y mapa interactivos
BSB ofrece a los usuarios un calendario online, que fue optimizado en el proceso de relanzamiento con React, manteniendo intocable el backend de la función de búsqueda. En su lugar, las interfaces de búsqueda se implementaron como REST endpoints. Además de mostrar las diferentes rutas y tiempos de viaje del calendario interactivo, se implementó un mapa interactivo.
Premiado por la experiencia de usuario personalizada
Al ser reconocido como un sitio web excepcional que ofrece una experiencia de usuario personalizada, "El relanzamiento de "Bodensee-Schiffsbetriebe: Personalización de contenidos y rendimiento web con Drupal"" ganó un premio en los Splash Awards Alemania/ Austria 2020.
Más información sobre los ganadores de los Splash Awards 2020
Headless e-commerce con mecanismos de análisis y seguimiento
Integración avanzada con Stackpath CDN
La integración de Stackpath CDN facilita la carga de la tienda online y de la página web entera. Esto previene la sobrecarga del servidor durante la reserva de tickets.
Drupal Commerce
La integración de Drupal Commerce headless hace posible la función de compra de tickets. Drupal Commerce incluye la gestión de productos, pedidos y pagos. La estructura de datos, similar a la del propio Drupal, es flexible y puede ser modificada, lo que permite el mapeo de escenarios de venta específicos.
La visualización headless de todos los widgets y productos se implementó utilizando React apps, los datos necesarios se alimentan de las API de Commerce.
Analytics & Tracking
Google Analytics se utiliza para registrar y evaluar de forma continua el comportamiento de los usuarios con el fin de optimizar la página web.
Selección de varios tickets
El sistema POS (punto de venta) de BSB se conectó a través de la API para poder ofrecer diferentes tipos de tickets.
Online tickets en formato PDF
Los tickets comprados se envían al usuario por correo electrónico en formato PDF con un código QR que facilita el proceso de check-in en el barco. Además, se ha habilitado la función de "correo fallido". De este modo, se informa a los usuarios cuando una reserva no se realiza correctamente, no se carga el dinero ni se crea el ticket. A través de un enlace, se invita al usuario a repetir la compra.
Carrito de la compra personalizado
Un análisis del carrito de la compra, basado en el comportamiento del usuario, facilita la venta cruzada y proporciona a los usuarios sugerencias personalizadas de productos complementarios.
Un aumento de cuatro veces en las ventas online en 3 años
En 2019, se realizaron unas 8.000 transacciones con el anterior sistema de venta de tickets; esta cifra ya había aumentado a más de 20.000 con la nueva tienda web en 2021, y en 2022 fue aún mas alta, con más de 32.000 compras online. En este periodo de tres años, estamos hablando de una cuadruplicación de las ventas online. Hay que tener en cuenta que en 2021 no todos los tipos de tickets aún estaban disponibles. Las ventas de productos y categorías individuales se rastrean con Google Analytics y se comparan con las cifras de ventas en Drupal Commerce, se identifican los principales vendedores y se analizan los tiempos de permanencia en el proceso de compra de los productos individuales para poder seguir optimizándolos.
Reflexiones sobre la colaboración con 1xINTERNET
Para BSB, la comunicación y la confianza son factores importantes a la hora de trabajar con una agencia digital. Este proyecto funcionó de manera muy positiva con 1xINTERNET. Debido al aumento de las ventas online, la tienda online, especialmente en épocas de temporada alta, se convierte en un canal de ventas imprescindible.
"Con 1xINTERNET, hemos encontrado una agencia digital con la que podemos trabajar a gusto y con la que nos entendemos. Juntos hemos desarrollado un flujo de trabajo en el que colaboramos a través de un sistema de tickets y videollamadas semanales", afirma David Conrad, responsable de online marketing de BSB.
Las despliegues regulares conducen a un desarrollo continuo y a una forma de trabajo dinámica. "La tienda online funciona de forma muy estable y no ha tenido ninguna incidencia grave en absoluto".
CMS de código abierto Drupal
Después de haber realizado una amplia investigación de mercado sobre varios sistemas de gestión de contenidos, BSB se decidió por el CMS de código abierto Drupal. BSB buscaba una agencia que tuviera años de experiencia y buenas referencias trabajando con Drupal.
Otros proyectos
Eldum Rétt - sistema de comercio electrónico avanzado
Integración de Decoupled Drupal Commerce con la App React Native para una experiencia de usuario única, flexibilidad y escalabilidad del sistema.
Transgourmet - solución multisitio y headless e-commerce
Desarrollo de un sistema de gestión multisitio con Drupal y Commercetools para ofrecer a clientes y proveedores las últimas tecnologías digitales.