Insignia de ganador de los Splash Awards

Transgourmet - solución multisitio y headless e-commerce

Industria
Comercio minorista
Solución
Solución e-commerce, Solución multisitio
Tecnología
Drupal, React, React Native, Elasticsearch, Design system, Web components

RETO

Transgourmet necesitaba consolidar sus sitios web, tiendas online y aplicaciones de todas las marcas y empresas de Europa en una única plataforma de marketing online y comercio electrónico. El objetivo era aumentar la eficiencia en la gestión de sitios web reduciendo el número de tecnologías utilizadas y, por tanto, los costes empresariales. Necesitaban ofrecer una apariencia de marca coherente a los consumidores y una experiencia de usuario intuitiva para agilizar el proceso de compra.

SOLUCIÓN

El software de código abierto Drupal fue elegido como plataforma CMS por su funcionalidad a nivel empresarial y la ausencia de costes de licencia. Para las compras online se eligió el headless commerce framework Commercetools. Una arquitectura de microservicios integra perfectamente el proceso de compra en el sitio web, permitiendo a los usuarios pasar de la página web a la tienda online con un solo clic. Para garantizar la coherencia de la marca, todos los elementos se crearon en un sistema de diseño corporativo.

HIGHLIGHTS

El sistema multisitio y la solución de comercio electrónico integrada aumentaron considerablemente la eficacia de la gestión multisitio. Las bibliotecas de diseño que utilizan componentes web forman parte del sistema de diseño de Transgourmet, garantizando un aspecto visual unificado en todas las plataformas. Esta tecnología unificada también alimenta el backend de las aplicaciones nativas para clientes B2B y B2C. Transgourmet consiguió una transparencia total en las actividades de marketing y experimentó un aumento significativo en las ventas online.

EL CLIENTE

Transgourmet Deutschland GmbH & Co. OHG

Transgourmet Deutschland GmbH & Co. OHG (Transgourmet) es un comercio mayorista de alimentos para hostelería, restauración y consumidores al por mayor con un volumen de ventas de más de 3.000 millones de euros al año.

Forma parte de Transgourmet Holding, que a su vez forma parte del Coop Group. Transgourmet Deutschland GmbH & Co. OHG atiende a una amplia cartera de clientes, entre los que figuran restaurantes, hoteles, comedores y empresas de catering. Una de las marcas más conocidas para los mercados mayoristas, que está representada en Alemania y otros países, es Selgros Cash & Carry, cuya gama de productos online ofrece más de 60.000 artículos alimentarios y no alimentarios.

Entre nuestros clientes actuales se encuentran Transgourmet Deutschland GmbH & Co. OHG, incluido Selgros Cash & Carry, así como las filiales de Transgourmet como Frische Paradies y Niggemann.

Camiones de Transgourmet junto al almacén
EL PROYECTO

Estrategia para los sitios web de Transgourmet

En 2018 Transgourmet solicitó revisar todos sus sitios web y su marca Selgros Cash & Carry para crear los mismos requisitos y estándares técnicos para ellos. La tarea consistía en crear una solución coherente y flexible que permitiera el relanzamiento de todos los sitios web de la empresa. Por lo tanto, debía utilizarse un CMS robusto, seguro y eficaz, cuyo desarrollo y mantenimiento pudieran ser desacoplados. Para una empresa como Transgourmet un proyecto como este es una parte esencial para completar la estrategia digital.

Transgourmet tiene varios sitios web y marcas en distintos países. Entre ellas destacan:

Todos los sitios web anteriores funcionaban de forma independiente, con funcionalidades y diseños diferentes, y soluciones de comercio electrónico desconectadas.

En la primera iteración, todos los sitios web se consolidaron en una única tecnología. A continuación, se creó la solución de comercio electrónico, se integró en los sitios web y se extendió a todas las marcas y países relevantes.

Por último, los sistemas creados se reutilizaron para proporcionar los datos necesarios para relanzar las aplicaciones nativas B2B y B2C.

Captura de pantalla de la homepage del sitio web Transgourmet

Consolidación de los sitios web

Antes de que comenzara el proceso de consolidación, los distintos sitios web y micrositios corporativos estaban gestionados por diferentes equipos que utilizaban distintas soluciones de gestión de contenidos. Esto generaba unos costes de desarrollo y mantenimiento innecesariamente elevados. El uso de los sitios web era difícil para los editores de contenidos, porque todos los sistemas funcionaban de manera distinta.

Además de los costes y las complicaciones del uso de los sistemas, las diferentes marcas de Transgourmet no podían gestionarse de forma centralizada. Históricamente, Transgourmet / Selgros, pero también las otras marcas, tienen un diseño corporativo bien definido y unos estándares elevados. Con tantos sistemas y equipos diferentes, no era posible mantener una experiencia de marca unificada en todos los sitios web.

Por lo tanto, se eligió una única tecnología CMS para estandarizar el desarrollo, el mantenimiento, las operaciones, el alojamiento web y el aspecto visual de todos los sitios web. Se eligió Drupal como tecnología central porque es un software CMS de nivel empresarial que se distribuye como software de código abierto y, por tanto, no tiene coste de licencia.

Más sobre software de código abierto vs software propietario

Drupal proporciona una excelente funcionalidad para operar múltiples sitios web utilizando el mismo código base. Esto también se conoce como estrategia multisitio. En la actualidad, más de 20 sitios web corporativos de Transgourmet funcionan con Drupal, incluidas los sitios web más visitados que también contienen soluciones de comercio electrónico con un tráfico elevado.

Captura de pantalla de las homepages de Transgourmet y Selgros

Comercio electrónico con una gran experiencia de usuario

Transgourmet / Selgros es una empresa mayorista y el objetivo de los sitios web es impulsar las ventas online. Se creó una estrategia para integrar las tiendas online directamente en los sitios web. El objetivo era que los visitantes pudieran navegar por contenidos de marketing como catálogos, promociones, recetas, etc. y, sin salir del sitio web, acceder a la tienda online.

Este objetivo se consiguió seleccionando Commercetools como tecnología de comercio electrónico, ya que podía integrarse fácilmente con el sitio web consolidado al tratarse de una solución headless.

Además, todos los elementos visuales, tanto para el frontend del sitio web como para el de la tienda online, se integraron en un sistema de diseño basado en componentes web, que se utiliza para ambos frontends. Todos los elementos de marca, como logotipos, tipografías, diseños, botones, tarjetas, encabezados, etc., se desarrollan de forma centralizada y se distribuyen como una biblioteca de componentes. En los distintos frontends, estos componentes se utilizan para mostrar el contenido y así se consigue un aspecto visual unificado.

Más información sobre el funcionamiento de los sistemas de diseño

Hoy en día, cuando los usuarios visitan los sitios web, no pueden distinguir si están viendo contenidos del CMS o del backend de comercio electrónico, y tienen un recorrido de usuario totalmente integrado en los sitios web, desde la visualización de contenidos de marketing hasta la compra de productos.

Captura de pantalla de la interfaz de la tienda online Transgourmet

Aplicaciones móviles nativas para clientes B2B y B2C

Dado que tanto el sistema CMS Drupal como la plataforma de comercio electrónico Commercetools son frameworks basados en APIs, podrían utilizarse para proporcionar contenido a aplicaciones nativas para Android e iOS.

Para Transgourmet / Selgros es importante ofrecer experiencias de compra de alta calidad tanto a sus clientes B2B como B2C. Por lo tanto, se crean aplicaciones nativas para ambos grupos objetivo.

React Native fue la tecnología elegida en función de las sinergias con las tecnologías existentes en el sitio web. 

La app para B2B se lanzó en 2021 y las principales funcionalidades para los usuarios son:

  • Escáner de productos (EAN, QR)
  • Función de compras recurrentes
  • Navegación intuitiva por la tienda online desde la aplicación
  • Comunicación bidireccional entre componentes nativos y web (añadir artículos escaneados a la cesta, búsqueda, autenticación, opción de continuar la compra)
  • Catálogo de productos en el dispositivo (con precios específicos para cada cliente)
  • Navegación interactiva por el catálogo de anuncios (catálogos en PDF)

La app para B2C se relanzó en 2024 y las principales funcionalidades para los usuarios son:

  • Escáner de productos (EAN, QR)
  • Lista de la compra
  • Notificaciones push
  • Negociación automática del idioma, configuración automática del tema
  • Deslizador de incorporación
  • Consentimiento de seguimiento, valoración de la aplicación
  • Mecanismos de fidelización de cliente
  • Tarjetas de cliente
  • Cupones
  • Catálogos de promociones
  • Precios específicos para clientes
  • Widget de pantalla de inicio
Captura de pantalla de la aplicación móvil Selgros

Proceso de desarrollo eficaz

El desarrollo de los sitios web y las tiendas online se gestiona en diferentes equipos. Los equipos de desarrolladores se dividen en el equipo CMS, el equipo Commerce y el equipo frontend.

El equipo CMS desarrolla la solución CMS, el equipo Commerce la solución Commercetools y el equipo frontend la biblioteca de componentes web que utilizan los otros dos equipos.

Se estableció un proceso de entrega muy eficaz que permite lanzar nuevas versiones del CMS, las tiendas online y el sistema de diseño de forma independiente.

Proyecto en cifras

REFERENCIAS

"Escalabilidad a través de la consolidación..."

"A medida que ampliamos nuestra presencia online, nos hemos dado cuenta de la importancia de consolidar nuestras tecnologías. Al agilizar nuestras operaciones e integrar varias herramientas en un sistema cohesivo, no sólo hemos aumentado la eficiencia, sino que también hemos mejorado nuestra capacidad para adaptarnos a las necesidades del mercado. Nuestra nueva pila tecnológica nos permite centrarnos en la innovación y en ofrecer una gran experiencia de usuario a nuestros clientes, lo que impulsa nuestro crecimiento".

Jens Friedrich, Director de E-Commerce, Transgourmet Germany

Fotografía de Jens Friedrich
LO MÁS DESTACADO

Tecnologías robustas y funciones centradas en el usuario

Gran experiencia de búsqueda

El sistema de búsqueda permite a los usuarios buscar productos, recetas u otros contenidos en las distintas plataformas y servicios de Transgourmet desde una única interfaz.

Alojamiento web de Pantheon.io

Todos los sitios web están alojados en Pantheon.io. El sistema de diseño o el frontend de los sitios web se aloja en un repositorio independiente. Hay un repositorio para el propio sitio web y otro para todos los proyectos basados en él. Esto permite incorporar fácilmente características individuales a los proyectos, ya sean desacopladas o integradas.

Operaciones totalmente automatizadas

Todas las operaciones son sistemas CI/CD totalmente automatizados desde Gitlab y Azure. Los cambios en el frontend o en el propio perfil se despliegan automáticamente desde los sistemas de prueba del sitio web. Estos, a su vez, se implementan automáticamente en los sitios web de prueba de los proyectos.

Screenshot showing market pages on the Transgourmet website
Screenshot showing product catalogues on the Transgourmet website

Sitios web para diferentes mercados

Transgourmet reúne a numerosos proveedores de alimentos bajo un mismo techo. Tanto si está interesado en comprar pescado fresco en Frischeparadies.de, como si desea visitar Niggemann.de o Fruchthof.at para adquirir productos frescos de alta calidad o visitar su tienda Selgros más cercana, Transgourmet tiene el sitio web adecuado para todas las necesidades.

En cada uno de estos sitios web, por supuesto, puede seleccionar manualmente la tienda adecuada o utilizar su propia ubicación para encontrar la sucursal más cercana. Sólo Selgros cuenta con más de 90 tiendas en Alemania con diferentes anuncios, contenidos y eventos.

Catálogos de productos

Los folletos publicitarios y los catálogos disponibles hoy en día desempeñan un papel importante en la industria alimentaria y por ello se han integrado en el sitio web. Algunos de estos catálogos se crean en el propio sitio web, otros los proporciona un software externo a través de API.  Además del gran número de activos multimedia, se implementaron en el CMS otros atributos de taxonomía y meta descripciones. 

Más información sobre el catálogo de productos

Banners personalizados

Determinados sitios web disponen de funcionalidades de compra B2B y B2C. Estas requieren personalización para presentar ofertas específicas para un grupo concreto, mostrar precios específicos para cada cliente o personalizar los banners.

Ejemplo de páginas de un catálogo en el sitio web Transgourmet
Configurador de postres PatiChef en el sitio web Transgourmet

Recetas personalizables 

Las recetas personalizables facilitan el trabajo diario a los clientes de los sectores de la gastronomía, la hostelería y la restauración. Los jefes de cocina y los compradores calculan sus cantidades de pedido para la compra de alimentos en función del número de personas y adaptan sus recetas en consecuencia.

La tienda online junto con el portal de recetas son un desarrollo propio que se consigue mediante enlazado profundo y cuentan con un módulo de llamada a la acción directa que sugiere productos de venta cruzada y venta complementaria.

Más información sobre el portal de recetas

PatiChef - configurador de postres

PatiChef simplifica la creación de postres, abordando retos de cocina como la planificación, el tiempo y la experiencia del personal de cocina. Permite a los chefs configurar postres online en función de las necesidades, el presupuesto, el esfuerzo y la cantidad.

Más información sobre PatiChef 
 

Eventos disponibles en el sitio web Transgourmet
Captura de pantalla de la homepage del portal de empleo Transgourmet IT

Inscripciones en eventos

Transgourmet y sus empresas ofrecen a sus clientes una amplia gama de eventos, seminarios y presentaciones internas. Algunos de ellos sólo se organizan en mercados específicos, otros en todos los mercados. Por este motivo, se ha creado un tipo de contenido de eventos que puede acomodar diferentes formatos de eventos. Para cada uno de ellos se ofrece una opción de inscripción. Esto ha permitido a Transgourmet mejorar su organización de eventos, pasando de un alto volumen de tráfico de correo electrónico a un flujo de trabajo eficaz.

Más información sobre la inscripción en eventos

Revista para los empleados

Transgourmet ofrece a sus empleados una revista con noticias de la empresa, actualizaciones, secciones dedicadas a los empleados y artículos relacionados con el sector.

Portal de empleo en IT

Sobre la base del CMS, se creó una plataforma online a través de la cual se pueden publicar las ofertas de empleo en el área de IT en Transgourmet. El portal se integró con la solución de RRHH de Transgourmet.

Más información sobre el portal de empleo de IT

Premiado por un proyecto innovador

Cuando se lanzaron las primeras versiones de la nueva pila tecnológica, el proyecto "Transgourmet Distribution - Solución multisitio" fue premiado por su enfoque innovador en los Splash Awards Alemania / Austria 2020.

Más información sobre los ganadores de los Splash Awards 2020

¿POR QUÉ DRUPAL?

Una solución eficaz adaptada a las necesidades de la empresa

Uno de los requisitos para seleccionar un CMS era una solución eficaz en función de los costes y que cumpliera los requisitos de nivel empresarial. Transgourmet necesitaba un framework altamente flexible y personalizable, capaz de crecer con la empresa, en lugar de limitarla a unas funcionalidades predeterminadas. También se eligió Drupal por su licencia de código abierto. Fue evidente que todos los requisitos se podían cumplir fácilmente utilizando Drupal.

Otros proyectos

Solución e-commerce

Eldum Rétt - sistema de comercio electrónico avanzado

Pollo korma con verduras sobre la mesa

Integración de Decoupled Drupal Commerce con la App React Native para una experiencia de usuario única, flexibilidad y escalabilidad del sistema.

Solución e-commerce

BSB - headless e-commerce

Un barco navega por el lago Constanza

Personalización del contenido y rendimiento web con Drupal: creación de un sitio web centrado en el usuario con un sistema de comercio electrónico...