Pinea: diseño web a la altura de uno de los mejores vinos del mundo
Cliente
Bodegas PINEA
Competencias / servicios
Investigación
Arquitectura de la información
Copywriting
Diseño visual
Diseño de interacción
Desarrollo web
Año
2023
El contexto
Pinea, un lujo en la Ribera
Bodegas Pinea es un ejemplo en muchos sentidos. Por un lado, su planteamiento arriesgado, que valoriza el territorio desde una nueva mirada. Por otro, una constante búsqueda de la excelencia en todos los aspectos de la marca para ir más allá de lo evidente.
En poco tiempo el proyecto de Vicente Pliego y Hugo Del Pozzo en la Ribera del Duero ha conseguido, en una categoría acostumbrada a las sagas, convertirse en una propuesta respetada y con una marca orientada al lujo sencillo, que reinterpreta en clave actual las características de venta y comunicación de grandes marcas como Vega-Sicilia o Pingus.
Vicente, junto a un equipo comprometido, han conseguido dar forma a un sueño que, a la vez, se enfrenta a los enormes retos de una categoría en constante evolución.
La problemática
Una web a la altura del relato
Después de diversas malas experiencias en digital, el equipo de Pinea se enfrentaba a una necesidad cada vez más acuciante: transmitir a un público internacional el valor, el esfuerzo y la diferencial propuesta enológica de la bodega… a través de una web.
Tras los anteriores trabajos, la sensación de urgencia por parte de la dirección era cada vez mayor pero, a la vez, el equipo interno cada vez tenía más claro lo que quería expresar y cómo lo quería expresar:
La plataforma elegida sería WordPress
No contaría con un ecommerce.
La web, junto a un posterior club, debía ser la primera pieza de un desarrollo de marca que hasta ahora había sido bastante limitado.
A la vez, la bodega se enfrentaba en paralelo a una categoría cambiante, en la que el alcohol parece perder terreno frente a propuestas alternativas (sin alcohol, derivados, vinos con gas, etc) que compiten por un usuario que en un mundo conectado cada vez tiene más alternativas.
Con este planteamiento el reto pasaba por articular una narrativa en torno a una estructura digital que contuviera las particularidades del sector y ordenara la información disponible para permitir al usuario imbuirse de la propuesta de Pinea a través de un relato consistente, fluido y de alto valor.
Una solución
Estructura. Copy. Y 3D.
Como siempre, abordamos el proyecto desde una perspectiva multidisciplinar basada en:
- Investigación y búsqueda de referencias en la categoría y la competencia.
- Copy y creación de una arquitectura de la información coherente
- Elaboración de un sistema de diseño
- Desarrollo a medida de la web en WordPress.
Investigación para encontrar una mirada nueva
Tras definir junto al equipo de la bodega los objetivos de la web y en paralelo a la creación de una arquitectura web consistente realizamos una de las partes más importantes de este tipo de proyectos: la búsqueda de referencias visuales y el análisis de la competencia, sus códigos y formas de plantear la información y trabajar el aspecto visual de su marca.
Como siempre en este tipo de proyectos, la mirada debe ser abierta: no se trata solo de mirar hacia la competencia sino más allá, tanto en categorías cercanas como alejadas para encontrar caminos visuales y creativos que puedan aportar diferenciación a nuestro cliente.
En esta fase, lo importante además no es solo nuestra mirada, que recomienda o abre caminos, sino la del cliente, que debe “sentir” la marca para marcar el rumbo estético de lo que quiere llegar a ser.
Así, en este caso, se tomaron varias decisiones relevantes durante que afectarían a la parte de diseño:
- Fuerte peso de mensajes y, por tanto, de tipografías
- Estilo clásico pero trayéndolo a nuestros días.
- El diseño de interacción, clave para transmitir la experiencia Pinea.
Arquitectura de la información y copy para entendernos mejor
Uno de los principales retos en todos los proyectos web es igualar la carga entre la parte visual, que es lo que el cliente muchas veces espera ver, y la parte de contenidos.
Una web, en la mayoría de los casos es un reflejo de la organización a la que representa y, de paso, suele ser la primera puerta de entrada de futuros a clientes hacia nosotros.
Explicar bien quién eres, qué haces y cómo lo haces es una parte del reto.
La otra es estructurarlo bien para que ese orden permita el crecimiento futuro a la vez que facilita al usuario encontrar la información que busca y, fundamentalmente, entender lo que encuentra y comprender el mensaje que la organización espera transmitir.
Con este planteamiento, se realizó una estructura que fundamentalmente ponía en el centro el producto generando nuevas subpáginas que contuvieran las distintas añadas de cada vino, algo que en vinos con potencial de guarda cobra especial relevancia.
A la vez, se trabajó durante la fase de wireframing con el excelente contenido elaborado por el equipo de comunicación de la Bodega para transmitir las múltiples metáforas asociadas al producto pero a través de mensajes cortos y potentes que pudieran acompañar el trabajo de diseño que estaba por llegar.
Diseño de interacción para transmitir lo que somos
Con los textos y la estructura ya aprobadas por el cliente, llegó el momento de comenzar a trabajar en el diseño de la futura web junto con todos los aportes gráficos ya seleccionados por la bodega.
En este punto cobró especial importancia la colaboración del equipo de colaboradores de vídeo y 3D de la bodega que fueron parte clave en la conceptualización de una visión creativa ambiciosa pero compleja.
A partir de aquí, definimos los elementos de navegación más importantes, otorgando una especial importancia a los movimientos y a la navegación a través de varios elementos clave:
- La interacción con las botellas a través de vídeo en la cabecera y 3D en el selector.
- La creación de un mapa interactivo que permitiera a los usuarios ubicar la bodega en el mundo
- La fuerza de una página de producto completa, muy visual y replicable en estructura entre los diferentes vinos.
Desarrollo a medida pero usable
En la parte técnica el principal reto consistió en aplicar esa carga de diseño de interacción a través de WordPress y de Gutenberg, su editor visual.
Aunque se crearon maquetaciones ciertamente complejas para la web, al usar el editor visual del propio Gutenberg, es fácil para el cliente o usuario final reutilizarlo ya que es posible hacer, literalmente, un copiapega, con lo que el usuario únicamente tendría que modificar textos/imágenes excepto en aquellas secciones más complejas, como el mapa, cuyas animaciones están creadas con javascript
A la vez, con un importante peso tipográfico y varios elementos diferenciales de navegación, la clave estaba en permitir al equipo de la bodega una cierta autonomía en la creación de nuevos contenidos, definiendo bloques y estructuras reutilizables en el futuro.
Resultados
Una web premiada
En un tiempo relativamente record y gracias a un trabajo espectacular de los dos equipos tanto en la gestión como en la creación, conseguimos generar una web que cumple las expectativas que el producto está ofreciendo y, a la vez, permite establecer un punto de partida tangible y real para una narrativa de marca que aún tiene mucho camino por delante.
95p.
Rendimiento
81p.
Accesibilidad
96p.
Prácticas recomendadas
92p.
SEO
Suscríbete a la única newsletter que no molesta.
