Tierra de Sabor: un rediseño web para potenciar la marca de garantía alimentaria de Castilla y León

Cliente

Instituto Tecnológico Agrario de Castilla y León

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

Una marca reconocida a nivel nacional

Tierra de Sabor es la marca de garantía alimentaria de Castilla y León y uno de los sellos de calidad más reconocidos de España.

Con más de 900 empresas adheridas y más de 6000 productos comercializados bajo el sello, Tierra de Sabor nace en 2009 con el objetivo de impulsar el valor de las empresas agroalimentarias de Castilla y León. El sello cuenta con un market online, promueve iniciativas de patrocinio para sus productores, cuenta con tiendas y gastrobares donde degustar sus productos y distingue a los restaurantes que ofrecen elaboraciones con alimentos de Tierra de Sabor.

En definitiva, Tierra de Sabor no es solo una marca de garantía; abarca todo un universo donde descubrir desde diferentes prismas la riqueza agroalimentaria de Castilla y León.

Alex Sanz

La problemática

Una web poco intuitiva y difícil de utilizar.

Tierra de Sabor necesitaba una nueva web que se alineara con los estándares de calidad y prestigio que representa como sello de calidad. Un nuevo site que de verdad comunicase de forma clara y efectiva todos los valores que representa la marca y las acciones que lleva a cabo para hacer más grande el sector agroalimentario de Castilla y León. Una nueva web que aportase soluciones precisas a las necesidades de stakeholders y usuarios.

Tras 15 años de actualizaciones muy puntuales, su web necesitaba un cambio profundo a nivel estético y funcional, ya que se había quedado obsoleta. Entre los problemas estructurales que presentaba su antigua web nos encontramos con los siguientes insights:

Una navegación compleja que afectaba a la facilidad para encontrar contenido por parte de los usuarios, internos y externos.

Una adaptabilidad a diferentes formatos y dispositivos casi inexistente, por lo que afectaba de manera muy negativa a la experiencia de usuario.

Una estructura poco flexible que impedía a los stakeholders ampliar contenidos según sus necesidades

Una apariencia visual obsoleta que no transmitía el prestigio y valor de marca de Tierra de Sabor como sello de calidad referente en España.

Alex Sanz

Con todos estos problemas identificados, se hacía necesaria la creación de una nueva web que situase a Tierra de Sabor en el lugar que se merecía, para trasladar al ecosistema digital el valor de la marca que sí tenía, y tiene, en el mundo físico.

Una solución

Nueva imagen. Nuevas funcionalidades. Nuevas posibilidades.

Para ayudarles en este proceso, abordamos el trabajo desde un enfoque multidisciplinar para conseguir el objetivo planteado: crear una página web actual, accesible, con una organización de los contenidos sencilla y útil y con una estructura sólida con capacidad de crecer y adaptarse en el tiempo.

¿Cómo lo hicimos? Trabajando las tres patas principales para la creación de un nuevo proyecto web: una organización efectiva de los contenidos para conseguir una experiencia de usuario óptima, una UI que proyectase la esencia de la marca y la modernizase y, finalmente, un desarrollo capaz de mejorar el rendimiento y que hiciese brillar todo lo anterior.

Arquitectura web para mejorar la experiencia

El primer paso para abordar el proyecto fue realizar una auditoría de la web con la que contaban. Análisis de estructura, inventario de contenidos y reuniones con los stakeholders para comprender la raíz del problema y proponer soluciones específicas teniendo en mente los objetivos de la marca para su web: un portal donde pudiesen convivir diferentes tipologías de usuarios, un lugar para que profesionales encontrasen la información necesaria para pertenecer a la marca de garantía y, a la vez, un espacio dinámico y divulgativo donde un público generalista pudiese descubrir el sello desde otro punto de vista.

A partir de aquí, comenzamos una de las fases decisivas que articularon todo el proyecto: la generación de la nueva arquitectura web para hacer que los usuarios encontrasen el contenido deseado a través de una mejor experiencia.

Una vez cerrada la arquitectura final de la web, comenzamos con el contenido y los wireframes, de cara a tener una base sólida para planificar la nueva identidad visual de la web. Desde microbio, también se elaboró todo el copy de la nueva web y siempre teniendo presente el tono que buscaba la marca: un lenguaje cercano, que transmitiese ese cariz que impregna el sello, artesanía y origen, que busca defender lo local, al productor y su trabajo.

Fue en esta fase también en la que se empezó a hablar de plasmar un estilo magazine para lograr captar a esos usuarios generalistas que lo que buscan es conocer esas otras facetas de Tierra de Sabor.

Alex Sanz
Alex Sanz Alex Sanz

Un sistema de diseño para actualizar la imagen

La fase de diseño visual tuvo como objetivo conseguir una experiencia en la que se identificase de manera inequívoca la identidad de Tierra de Sabor y todo lo que representa y, a la vez, aportar un toque diferenciador y único respecto a otras webs de sellos de calidad.

Para ello, creamos el Design System de la marca, herramienta imprescindible para hacer que todo el diseño fuese escalable: además de establecer la apariencia visual, proporcionamos una estructura coherente y escalable para el diseño web, facilitando la consistencia y eficiencia en el desarrollo de interfaces a medida que creciese.

Alex Sanz

Otro de los objetivos ya planteados en la fase de wireframing fue el de lograr una navegación similar a un formato tipo magazine, una idea que surge del concepto de comunidad y como recurso para dinamizar la página, dando lugar a una Home en la que se destacan artículos y noticias que se actualizan constantemente. Para trasladar el concepto a diseño, realizamos un extenso trabajo de moodboarding para tomar inspiración de revistas online, combinando este tipo de elementos con secciones de carácter corporativo y llamadas a la acción.

Alex Sanz
Alex Sanz
Alex Sanz Alex Sanz

Desarrollo custom en WordPress:
Gutenberg como brazo que articula la experiencia web

A nivel técnico, el proyecto demandaba ciertos requerimientos que debíamos cumplir: por un lado, facilidad para editar y crear cualquier tipo de contenido de la web y, por el otro, un diseño muy personalizado que plasmase de manera fiel el trabajo realizado por el equipo de diseño.

Estas dos particularidades hicieron que nos decantásemos por WordPress como plataforma para contener la web. Para ello, desarrollamos un tema personalizado desde cero con Gutemberg por las ventajas que iba a proporcionarle al proyecto: rapidez para maquetar cualquier contenido y sencillez para generar bloques personalizados. Y todo, con el beneficio de desarrollarlo dentro del entorno de WordPress sin necesidad de utilizar ningún complemento externo. Una solución para aportar solidez y conseguir una optimización excelente del proyecto.

Además de lo anterior, otro de los retos a los que se enfrentó el equipo técnico fue la necesidad de desarrollar un buscador/filtrador en el que incluir los más de 600 productores adheridos a la marca, además de generar una página propia para cada uno de ellos.

La dificultad aquí para atender las necesidades de ese último punto fue la de manejar un gran volumen de información sin poder contar con una API que se pudiese consultar dinámicamente; los datos nos venían dados en una serie de ficheros JSON estáticos –aunque actualizados habitualmente– con diferentes tipos de información que no podíamos consultar a demanda.

Definido el problema, optamos por simplificar el proceso realizando una pequeña automatización propia: desarrollamos una pequeña API intermedia para convertir todos esos ficheros JSON independientes en una única respuesta con todas las relaciones necesarias para poder generar a medida esas páginas de productor requeridas en el proyecto. Por último, la puesta en marcha de un cron que se ejecutase a diario para actualizar las páginas de productores.

Para abordar la implementación del buscador, lo desarrollamos 100% desde el front de la página con JavaScript, lo que nos permitía modificar datos a demanda directamente en un archivo js.

Resultados

Un producto usable, sólido y visual, hecho para durar.

¿Qué nos ha permitido este abordaje técnico? Obtener un rendimiento sobresaliente de 95 puntos en PageSpeed para escritorio, tras reducir al máximo el número de dependencias de nuestro WordPress. Además, también hemos reducido al máximo los posibles problemas de mantenimiento a largo plazo, ya que todo lo que hemos podido desarrollar de forma nativa en WordPress, se ha hecho.

95p.

Rendimiento

100p.

Accesibilidad

100p.

Prácticas recomendadas

100p.

SEO

Contacto

¡Eh! ¡Lo de las cooooookies!

La vida es eso que pasa entre aceptación y aceptación de cookies. Pero es lo que hay: las necesitamos para saber si presentamos bien lo que hacemos (para que puedas entendernos mejor). Controla o cámbialas en la página de preferencias o lee más sobre nuestra Política de Cookies.

Cookies