Celler del Cambium
Celler del Cambium It is an online shop specialising in wines from Aragon and other Spanish regions. The project involved designing and developing an e-commerce site from scratch, creating a modern digital experience focused on the product, visual identity, and ease of purchase.
The proposal sought to convey closeness, quality, and authenticity, combining a refined aesthetic with clear navigation, and was designed to intuitively showcase a broad catalogue.
UX/UI Designer y desarrolladora frontend — investigación, arquitectura de información, UI, sistema de diseño e implementación
Diseño y desarrollo en solitario, en coordinación directa con el cliente
Investigación · Arquitectura de información · Flujos de compra · Wireframes · Sistema de diseño · UI final · Desarrollo WordPress/WooCommerce
El problema
Desde el usuario
Comprar vino online tiene una barrera que no tiene comprar casi ningún otro producto: la mayoría de quienes compran no saben de vino. Se enfrentan a catálogos organizados por denominación de origen, variedad de uva y añada —el idioma del productor— cuando lo que traen en la cabeza es otra cosa: «algo para una cena con amigos», «un regalo que quede bien», «un tinto que no falle».
Esa distancia entre cómo se organiza el catálogo y cómo piensa quien compra genera parálisis: el usuario entra, no sabe por dónde empezar a filtrar, y se va a un marketplace grande donde al menos hay reseñas que decidan por él.
A eso se suma un segundo punto de fricción propio del sector: el vino es pesado y frágil, así que el envío encarece la compra. Descubrir ese coste al final del proceso es uno de los motivos de abandono más frecuentes en este tipo de tienda.
Desde el negocio
Celler del Cambium es una bodega pequeña que arrancaba su canal online desde cero, compitiendo por atención con marketplaces que tienen catálogo infinito, envío gratuito y una marca ya conocida.
Competir por precio o por variedad no era una opción. El canal online tenía que sostenerse sobre lo único que un marketplace no puede replicar: el origen, el productor y el criterio de selección. El objetivo era convertir ese valor —difícil de comunicar en una ficha de producto estándar— en una experiencia de compra que justificara pagar más por una botella que se puede encontrar más barata en otro sitio.
Además, al partir de cero, el sitio debía quedar preparado para crecer: catálogo ampliable y estructura mantenible por el propio cliente sin depender de desarrollo para cada cambio.
Restricciones del proyecto
- Proyecto de cero: sin datos históricos, sin analítica previa y sin base de clientes online
- Bodega pequeña compitiendo con marketplaces en catálogo, precio y envío
- Verificación de edad obligatoria por normativa de venta de alcohol
- El cliente debía poder mantener catálogo y contenidos sin depender de desarrollo
- Diseño y desarrollo a cargo de una sola persona
Necesidades del cliente
Create a robust e-commerce experience
Develop a clear, functional online store adapted for a smooth shopping experience on both desktop and mobile.
Enhance catalogue and navigation
Organise categories, product sheets and filters correctly to facilitate the exploration and search for wines.
Conveying identity and trust
To build a visual identity capable of reflecting the brand's quality, proximity and personality within a modern digital environment.
Investigación
Entrevistas con el cliente para entender el producto, el proceso de elaboración y el criterio de selección; análisis de 4 tiendas online del sector (bodegas pequeñas y marketplaces) y revisión de los puntos de fricción habituales en el checkout de e-commerce de alimentación y bebidas.
La decisión difícil
La decisión más difícil fue relegar los filtros técnicos —denominación de origen, variedad, añada— a un segundo nivel de navegación.
Es exactamente lo contrario de lo que pedía la intuición del cliente, y con razón: son los datos que definen su producto y de los que está orgulloso. Además, el comprador experto —el que más gasta por botella— sí busca así.
Prioricé al comprador no experto, que es mayoría y el que abandona antes. El experto sabe encontrar su filtro técnico aunque esté en segundo nivel; el no experto, si no ve una puerta de entrada que reconozca, no llega a explorar el catálogo. Asumí perder algo de inmediatez para el usuario avanzado a cambio de no perder al mayoritario en la primera pantalla.
Fue también una decisión que hubo que argumentar ante el cliente, y esa conversación —con el hallazgo de investigación delante— es la que la sostuvo.
Sistema visual
Estados contemplados
Se mantiene visible con la etiqueta clara y ofrece alternativas similares en lugar de desaparecer del catálogo
Sugiere búsquedas próximas y da acceso directo a la navegación por intención
Indica en el carrito la cantidad exacta que falta para alcanzarlo
Accesibilidad
- Contraste verificado contra WCAG AA en todas las combinaciones de texto y fondo, incluidas las superposiciones sobre imagen de producto.
- Proceso de compra completo navegable por teclado, con foco visible en cada paso del checkout.
- Formularios con etiquetas asociadas y mensajes de error descriptivos junto al campo, no solo por color.
- Imágenes de producto con texto alternativo descriptivo.
- Jerarquía de encabezados coherente en catálogo y ficha de producto para navegación por lector de pantalla.
- Áreas táctiles de 44px mínimo en los controles del checkout.
Resultado
El proyecto está [en desarrollo / recién publicado], así que todavía no hay datos de producción consolidados.
Lo que sí queda resuelto en la entrega:
- El canal online existe: la bodega pasa de no tener venta directa a tener una tienda propia, con la estructura preparada para ampliar catálogo sin rehacer el sitio.
- Los dos puntos de fricción identificados como críticos —coste de envío oculto y verificación de edad en la entrada— están resueltos por diseño, no parcheados al final.
- El cliente puede mantener catálogo y contenidos de forma autónoma, sin depender de desarrollo para cada cambio.
Las métricas a vigilar una vez en producción, definidas con el cliente, son la tasa de abandono del carrito, el ticket medio respecto al umbral de envío gratuito y la conversión de la ficha de producto.
Del diseño al desarrollo
Al diseñar y desarrollar el proyecto, el sistema de diseño no era un entregable para otro equipo: era la herramienta con la que iba a construirlo. Definí tokens de color, tipografía y espaciado, y componentes con todos sus estados (normal, hover, focus, agotado, error de validación) que luego se trasladaron directamente a la implementación.
Eso permitió trabajar sin la desviación habitual entre diseño y código: lo que estaba definido en Figma es lo que existe en el sitio. El desarrollo se hizo sobre WordPress con plantillas a medida, dejando catálogo y contenidos editables por el cliente sin tocar código.
Conocer la implementación desde el diseño también evitó proponer soluciones que luego resultaran caras de mantener: cada componente se pensó sabiendo cómo iba a construirse y quién iba a actualizarlo.
Qué aprendí
Empecé a diseñar el catálogo con la estructura que me dio el cliente sin cuestionarla. Era la estructura correcta para él —conoce su producto mejor que nadie— pero no para quien compra. Rehacer la navegación a mitad de proyecto costó tiempo que me habría ahorrado con una conversación previa sobre a quién estábamos diseñando.
Hoy arrancaría cualquier e-commerce definiendo primero el perfil de comprador mayoritario y contrastando con él la arquitectura, antes de dar por buena la estructura interna del negocio. La forma en que una empresa organiza su producto rara vez coincide con la forma en que su cliente lo busca, y asumir que sí coinciden es el error que más caro sale.
También aprendí que diseñar sabiendo que vas a desarrollar tú cambia las decisiones: descartas antes lo que sabes que será frágil de mantener, y eso es una ventaja siempre que no se convierta en una excusa para no proponer lo ambicioso.
Mahezasa
