Pasar al contenido principal

Schär

Pensando a lo grande

Scroll to keep reading

Crecer. Redefinir. Mejorar. Extender. 
Una actualización de Drupal 8 a 9. Una buena oportunidad para cambiar.

Schär es uno de los principales fabricantes de alimentos para personas con necesidades nutricionales especiales, especialmente celiaquía.

Su historia comienza en 1922 en la zona del Tirol del Sur, en Italia. Desde el inicio se trata de una empresa familiar y con una fuerte relación con el territorio. Todo cambió cuando Ulrich Ladurner se unió a la empresa farmacéutica de su padre y, con 23 años, se hizo cargo de la gestión. Ulrich estaba muy interesado en la alimentación y comercializó una línea de productos fáciles de digerir desarrollados por un doctor de Innsbruck: el doctor Anton Schär. 

En 1979, Ladurner tomó el control de la propia marca Dr. Schär y profundizó en la investigación de nuevos productos, en concreto adaptados a la celiaquía. Desde 1981 la marca se reintrodujo en el mercado bajo esta nueva dirección, con gran reconocimiento y resultados.

Hoy día Schär continúa siendo una empresa familiar, pero tiene un gran alcance global, con 18 sedes repartidas por todo el mundo que hacen que la marca esté disponible en más de 100 países.

Image
Productos de los inicios de SCHÄR

El proyecto

Metadrop recibió el encargo de actualizar y modernizar la web oficial de la marca de productos Schär.

Este encargo era, sin duda, un gran reto, ya que la web está disponible en 27 idiomas y debe de satisfacer las necesidades de una audiencia global, todo ello desde un único sitio web.

Además, la actualización de Drupal 8 a 9 debía de servir para una reestructuración completa del sitio web, del modo que el nuevo sitio se pudiera beneficiar de las mejoras introducidas en las nuevas versiones de Drupal, así como añadir nuevas funcionalidades a petición del cliente.

Más que migrar, transformar

Las actualizaciones pueden ser fácilmente aprovechadas para mejorar sensiblemente la arquitectura de un sitio. En este caso, también habrá que migrar los viejos contenidos a los nuevos formatos, de modo que no se pierda ningún dato. El proceso es arduo, pero el resultado es espectacular.

  • Reduce, recicla, reutiliza: La economía circular también puede aplicarse al código. En Schär, reducimos sensiblemente el número de tipos de contenido (de 26 a 13), componentes (de 88 a 24) y categorías (de 35 a 7). Lo hacemos a través del reciclaje (refactorizado) y la reutilización (fusión). El resultado es una web mucho más sencilla, mejor organizada y, al mismo tiempo, más potente.
     
  • Automatiza y olvídate: El mayor problema de acometer un cambio de calado es la necesidad de adaptar los viejos contenidos a los nuevos formatos. Si la web tiene un tamaño considerable, la tarea se vuelve titánica para un humano, pero no para una máquina: es el momento de las migraciones automatizadas. En Metadrop somos expertos, y los números de Schär son una prueba de ello: nada más y nada menos que 99.700 contenidos, 124.661 categorías y 71.150 paragraphs (componentes) fueron correctamente migrados de la noche a la mañana.
     
  • Adaptación del código legado: Schär es un proyecto de gran tamaño, con más de 105 módulos personalizados ya desarrollados, incluyendo integraciones con terceros como Zendesk, envío de newsletters o autenticación via oAuth. Garantizamos el correcto funcionamiento de estos módulos en Drupal 9 y los extendimos con las nuevas funcionalidades necesarias.

Queremos que nos entiendas

Todo este esfuerzo debía demás de ser reproducible en los 27 idiomas de los países en los que tiene presencia Schär. Para hacerlo más complicado, Schär tiene especial atención en localizar correctamente sus contenidos por lo que los idiomas internacionales - como el inglés, español o alemán - pueden tener diferentes variantes dependiendo de la región geográfica, como el alemán de Austria, el inglés de Canadá o el portugués de Brasil.

  • Una web que habla como tú: Metadrop desarrolló nuevas capacidades para permitir esta diferenciación por idioma y variante local, de modo que cada combinación de idioma y área geográfica obtenga su propio dominio y sus propias traducciones personalizadas y adaptadas a los usos del hablante.
     
  • Autodetección: Al ser un sitio web único, el usuario podría aterrizar en la versión equivocada. Para evitarlo, utilizamos la autodetección del idioma del usuario y le ofrecemos automáticamente su idioma y, en el caso de haber varias versiones, la versión de su área geográfica.
     
  • Traducción asíncrona, traducción inteligente: Traducir no es solo un ejercicio de transformar A en B. Las diferencias culturales también deben de ser tenidas en cuenta, y es por eso que utilizamos traducciones asíncronas cuando es necesario. De este modo, un contenido puede responder a las diferencias entre culturas y países. Por ejemplo, una receta puede variar en ingredientes según la zona, respondiendo tanto a los gustos locales como a la disponibilidad de ciertos ingredientes o a factores culturales, religiosos o de cualquier otro tipo.
     
  • Protección frente a errores: Por defecto, el sistema muestra el contenido original si una traducción no existe. Con 27 idiomas y un total de 41 variantes, esto podía suponer que el visitante acabara confuso al saltar de un idioma a otro sin aparente motivo. Cambiamos el comportamiento por defecto del sistema de modo que por cada idioma solo se puedan visitar los contenidos propios.
Capturas de pantalla de Schär.

"Nada más y nada menos que 99.700 contenidos, 124.661 categorías y 71.150 paragraphs fueron correctamente migrados de la noche a la mañana"

Con luz propia

El proceso de modernización de la web de Schär no podía no contar con un completo rediseño. Moderno, elegante, detallista, claro y muy usable, el nuevo diseño fue proporcionado por el cliente a Metadrop, que se encargó no solo de implementarlo, sino de participar activamente en la introducción de mejoras y nuevas ideas.

  • Orientado al rendimiento: El cliente manifestó la importancia de un rendimiento excelente, por lo que nos pusimos manos a la obra. Usamos utility classes en la mayoría del CSS, cargamos solo el código que es necesario, aplicamos formatos de nueva generación a las imágenbes, deferimos la carga (lazyload) y añadimo el CSS crítico dentro del marcado para reducir los tiempos de carga.
     
  • Al píxel: Cuando un cliente entrega un diseño con gran carácter y personalidad, sabemos que respetarlo es importante. Implementamos correctamente todos los detalles tipográficos y de color, respetamos tamaños y espacios, usamos los iconos definidos y medimos con mimo y detalle cada intervención. 
     
  • Responsive por defecto: Una web pensada para recibir una gran interacción por parte del usuario no puede permitirse fallar en dispositivos de menor tamaño como móviles y tablets. En Metadrop trabajamos el diseño en todas las pantallas desde el principio, de modo que nunca haya desagradables sorpresas en la entrega.

Un buscador excepcional

El sitio web de Schär gira en torno a la participación del usuario, muy especialmente a través de las recetas que el usuario puede seguir, valorar y reseñar y que sirven como puerta de entrada a los productos de la marca. Es por ello que el buscador ha de ser una pieza fundamental.

  • Autocompletado inteligente y veloz: Tener una interfaz avanzada de búsqueda está bien, pero no tener que usarla está mejor aún. El motor de autocompletado, optimizado para arrojar resultados de modo inmediato, permite al usuario navegar directamente al contenido de su preferencia directamente.
     
  • Búsqueda facetada: En ocasiones el usuario no sabe exactamente lo que busca o quiere cruzar información de manera más compleja. La búsqueda facetada, incorporada en el potente buscador de recetas, nos permite ofrecer una serie de filtros sincronizados con los resultados que permiten al usuario ir acotando o extendiendo la búsqueda según una serie de criterios. Una interfaz amigable y nada intrusiva hace el resto.
     
  • Ayúdame a ayudarte: No hay experiencia más frustrante en la búsqueda que el temido "No hay resultados". Para evitarlo, la página de búsqueda ofrece varias ideas alternativas y modos de conseguir mejorar los resultados.
Design showcase

Nuevas necesidades, nuevas herramientas

Además de garantizar el funcionamiento correcto del código recibido y adaptarlo a Drupal 9, Metradrop también desarrolló módulos para cubrir las nuevas necesidades del proyecto.

  • Roles integrados con el sistema multilenguaje: Reducimos el número de roles de usuario y creamos la figura del Editor Local, un editor con permiso tan solo para editar y crear contenidos en uno o varios idiomas.
     
  • Integración con OneAll: Desarrollamos una integración personalizada del login social OneAll basada en módulos contribuidos pero adaptada a las necesidades de Schär.
     
  • Búsqueda rápida: Creamos un sistema de autocompletado de búsquedas altamente optimizado que evita la carga de entidades en Drupal y funciona directamente con Solr, proporcionando un rendimiento y velocidad muchísimo mayores.

Cubrimos todos los flancos

Además de las funcionalidades que forman parte del núcleo de la web y de la migración, en Metadrop no dejamos al azar ninguna funcionalidad crítica del sitio web:

  • SEO optimizado: Garantizamos todas las herramientas necesarias para un buen seo: sitemaps actualizados, metaetiquetado para redes sociales y buscadores, robots.txt y la capacidad del editor de definir las informaciones a compartir en redes.
     
  • Cumplimos con la GDPR: Integración del sistema de cookies OneTrust para garantizar el cumplimiento de la Ley de Protección de Datos europea.
     
  • Imprime, que algo queda: Proporcionamos hojas de estilos optimizadas para la impresión de modo que el usuario pueda descargarse en formato PDF e imprimirse las recetas en un formato legible y adaptado al formato físico.
     
  • Cobertura de tests: En nuestra infraestructura, añadimos tests a varios niveles para garantizar la buena marcha del proyecto y evitar regresiones: análisis estático del código, tests funcionales, tests de regresión visual y - en el caso de Schär - tests de rendimiento usando Lighthouse para asegurar que los objetivos marcados se cumplen.
     
  • Administración intuitiva: Como en otros proyectos, proporcionamos configuraciones que hagan la vida más sencilla al editor: previsualización de contenido en tiempo real, buscadores integrados de componentes, interfaces de administración modernas...

El futuro

Gracias al trabajo realizado por Metadrop, Schär se encuentra en una posición mucho más favorable para afrontar su crecimiento y expansión internacionales.

Con una web más potente y al mismo tiempo aligerada y reformulada, Schär podrá continuar añadiendo fácilmente nuevos idiomas y contenidos, así como aumentando la base de clientes y usuarios satisfechos que encuentren en el sitio web información útil, actualizada, accesible y bien diseñada.

¿Tienes un proyecto en mente?

Duración
Escribe tu mensaje aquí...
He leído y acepto la política de privacidad respecto al tratamiento de datos.