Bodegas Ysios

Una bodega icónica, una web a la altura.

No iba a ser un proyecto de WordPress normal, ni siquiera uno complejo. Iba a ser algo completamente diferente, icónico, porque Bodegas Ysios no es una bodega cualquiera. Ubicada en Laguardia, La Rioja Alavesa, es reconocible desde kilómetros de distancia por su edificio ondulante diseñado por Santiago Calatrava. Es arquitectura, es arte y es tradición vinícola de alto nivel.

Y cuando llegó a nosotros Pernod Ricard, uno de los grupos de bebidas espirituosas más importantes del mundo, no podíamos evitar pensar en construir algo igual de singular. Cuando una marca de este calibre te confía su presencia digital, sabes que cada píxel importa, aún más cuando la petición es: «Queremos que la gente sienta Ysios antes de visitarnos».

No es una web corporativa.

«Subir una foto bonita de la botella» no iba a ser suficiente esta vez. La mayoría de las bodegas tienen webs preciosas con fotografías profesionales e increíbles, pero Ysios buscaba ir más allá. Los visitantes tenían que ver las botellas en 360º, percibiendo cómo la luz se refleja en el vidrio, apreciando cada detalle de la etiqueta como si la tuvieran en sus manos. Junto con la necesidad de la bodega de poder jugar con los materiales para darle el aspecto deseado en la web, esta decisión convirtió el proyecto en un complejo reto técnico: WordPress no está pensado para renderizar 3D en tiempo real, y los archivos pesan mucho.

Para resolverlo trabajamos mano a mano con un especialista de 3D, con el que conseguimos crear los archivos de las botellas separados en capas y con menos de 5 mb, algo que aunque ralentizase ligeramente la carga de la ficha de cada vino, nos permitía jugar con three.js y los materiales para conseguir el efecto deseado en cada botella mediante unos sencillos controles. En definitiva, usamos modelos 3D de alta calidad, conseguimos animaciones fluidas y tiempos de carga bastante rápidos.

Otro de los retos del proyecto fue adaptarnos al ecosistema técnico del cliente, que necesitaba que trabajásemos en Pantheon.io, una plataforma con bastantes particularidades que hacía todo un poco más complejo.

Por último, la empresa Pernod Ricard, en su momento propietaria de la bodega, requería de la implementación de algunos plugins propios en la web para la gestión de productos o para la creación de formularios. Existen plugins más comunes, conocidos y sencillos para este tipo de tareas, pero el cliente manda, así que nos adaptamos a sus necesidades manteniendo conversaciones con su equipo técnico y aprendiendo a implementar y configurar sus plugins propios.

La tecnología invisible.

Buscamos para la web transiciones suaves y elegantes, sentido de movimiento y fluidez, y sobre todo lujo sin estridencias. Pero sobre todo usabilidad en el backend para gestionar los distintos tipos de contenido: imágenes, vídeos, textos… y archivos 3D con capas. Así el equipo de marketing podría en el futuro subir los archivos deseados y configurar a su gusto la visualización de las botellas, sin conocimientos técnicos, extensos manuales o explicaciones constantes.

Para ello construimos un motor 3D escondido: lo que sí pueden ver es una configuración simple y clara para los materiales y colores. Con nuestro sistema cualquiera en el equipo de marketing de la bodega puede hoy, desde el panel de WordPress, subir el archivo de la botella preparado por el diseñador, y configurar los colores y la opacidad de la botella y del líquido en cinco minutos.

El viñedo, geografía que cobra vida

Ysios tiene alrededor del edificio de la bodega una serie de viñedos específicos, cada una con su uva, su microclima, su orientación, o su carácter. Mostrar esto en un mapa estático sería… aburrido. Por eso creamos fue un plano interactivo del complejo en constante movimiento, donde las nubes o los pájaros sobrevuelan la ilustración para darle vida. Al pasar el ratón sobre una de las parcelas, ésta se destaca suavemente y mostramos un panel con información de la zona, todo ello con transiciones fluidas que guían la vista del usuario. Así la sensación del usuario no es «estoy viendo un mapa», sino «estoy explorando una bodega».

El catálogo de vinos, protagonista

Muchas bodegas usan una cuadrícula aburrida o unas simples cards para mostrar sus vinos. Nosotros queríamos crear una experiencia más animada, donde cada vino puede visualizarse de varias maneras, ya que aunque mostramos la imprescindible imagen de la botella, al pasar el ratón sobre ella aparece una imagen adicional, con un timing cuidadosamente orquestado, mostrando una nueva visualización que busca mostrar para cada vino el ambiente que se desea transmitir.

Integrando el ecosistema técnico del cliente

Pantheon.io no es un hosting cualquiera, es una plataforma de nivel empresarial, potente pero con sus propias reglas. Nos enfrentamos entonces a los siguientes desafíos: varios entornos donde cada cambio ha de pasar por tres fases (entorno dev > test > live) y git como única forma de desplegar código. Lo manejamos adaptando nuestro flujo de trabajo a su metodología, con testings exhaustivo en cada entorno y despliegues paso a paso.

Además, el proyecto requería del uso de los plugins propios de Pernod Ricard. Por ello creamos «puentes» entre nuestro desarrollo y sus sistemas, trabajamos conjuntamente con su equipo técnico e hicimos testings conjuntos.

El Proceso: obsesión por el detalle.

Las primeras semanas nos propusimos entender el alma del proyecto, donde la agencia y la empresa nos explicaron su visión, lo que buscaban con la nueva web. Posteriormente nos involucramos en entender la arquitectura técnica: el setup de Pantheon. Por último, solo quedaba plantear la estructura de datos para los vinos y el sistema de gestión de modelos 3D, la integración con los plugins del cliente y framework para las animaciones.

Durante el proceso de desarrollo, descubrimos que podíamos mostrar los modelos de las botellas de vino de forma inteligente, recogiendo del archivo 3D el mínimo de datos posibles, y aportando los colores e iluminaciones posteriormente en web, reduciendo así la velocidad de carga.

No vamos a mentirte, las primeras versiones eran funcionales, pero no perfectas: los reflejos no se veían reales, el vidrio parecía plástico y las transiciones eran bruscas. Pasamos semanas obsesionados con los detalles, ajustando el shader del cristal y probando ángulos de luz y reflexión hasta que todo pareciera real, y también midiendo tiempos de animación para que la visualización en la ficha fuera un baile sincronizado. Una vez perfeccionado el front, nos pusimos con el back para dejarlo simple y usable para cualquiera: drag & drop para archivos 3D, validación automática del formato y selectores de color intuitivos para los detalles visuales de la botella.

La empresa buscaba en la web representar la propia ondulación del característico edificio de la bodega. Para ello, implementamos animaciones en toda la web, porque cada elemento debía sentirse «vivo»: scroll parallax en las secciones, fade-ins coreografiados, microinteracciones en hovers y transiciones sutiles.

Lo que aprendimos en este proyecto.