Puerto la Fuente

Olivar de Puerto la Fuente — sustituye al vídeo de cabecera del sitio

Puerto la Fuente

Aceite de oliva virgen extra · Portal de marca y tienda online

Diseño de producto, arquitectura de información, interfaz e implementación · 2019

Una marca de aceite gourmet sin presencia digital previa necesitaba dos cosas incompatibles en el mismo sitio: contar su origen con calma y vender sin fricción. La solución fue separar la zona de marca de la zona de tienda y conectarlas de forma permanente. Sigue en producción sin rediseño, con más catálogo del que tenía al nacer.

Contexto

Puerto la Fuente produce aceite de oliva virgen extra en Granátula de Calatrava, Ciudad Real. Tres generaciones de la misma familia, cosecha propia, distribución nacional e internacional.

El encargo entró en el departamento de diseño de Asycom y se me asignó. El planteamiento era abierto —una web con tienda— y el rumbo se definió desde el departamento de diseño.

No había web previa. Pero tampoco se partía de cero: la marca llegaba con una identidad sólida, packaging muy cuidado y un banco de imágenes donde el producto aparecía siempre ligado a su territorio.

El material no era el problema. El problema era decidir qué hacer con él.


Home de puertolafuente.com.

Problema

El aceite es un producto cotidiano en España. Todo el mundo sabe lo que es y lo compra por precio. Puerto la Fuente es un producto de gama alta y no jugaba ahí: botellas de cerámica, ilustración propia, cada variedad con nombre del Quijote.

<Ese trabajo lo hacía el objeto físico. En pantalla desaparecen el peso, el tacto y la escala del envase, y con ellos la señal que justifica la diferencia. Un aceite no se cata a través de una web.

Y la web tenía que ser dos cosas a la vez: portal de marca, donde contar origen y territorio con el tiempo que eso pide, y canal de venta, donde comprar sin fricción. Dos ritmos opuestos en el mismo sitio.

Las dos zonas tenían que sostenerse a la vez.

Botella de cerámica, variedad Don Quijote, con el nombre pintado a mano

Botella de cerámica — variedad Don Quijote.

Sin relato, una tienda es un aceite más a 19,95 €.
Sin tienda, un buen relato no vende.

Decisiones

Dos personas con necesidades opuestas: quien descubre la marca y necesita entender por qué no es el aceite del supermercado, y quien ya la conoce y viene a reponer.

Resolverlo en una sola página obligaba a elegir. Un relato completo antes del botón convierte una recompra en un recorrido innecesario. Una ficha eficiente no tiene sitio para explicar de dónde viene el producto.


Estructura completa del sitio.

La arquitectura separó las dos zonas desde el principio, visibles a la vez en la navegación. Productos contiene el relato: gamas, variedades, notas de cata, usos. Tienda es el catálogo transaccional.

No están aisladas. Cada página narrativa mantiene salida permanente hacia la compra. El recorrido largo y el corto conviven sin estorbarse.


Dos intenciones de compra sobre la misma estructura.

Territorio en movimiento. La cabecera es un vídeo del olivar en bucle, sin sonido. Peso muy controlado para no penalizar la carga, e imagen fija en móvil.

Patrón a gran escala. En packaging es textura de fondo. En pantalla, bandas de ancho completo entre secciones.

Serifa en titulares. Contra la tendencia del momento en ecommerce, y una decisión de branding tanto como de interfaz.

Ilustración propia. Don Quijote y Sancho, los molinos, el mapa de la comarca.


Cabecera y banda de patrón geométrico.

El visitante no era solo el consumidor final. Era también el comprador profesional: quien descubre la marca en una feria y necesita saber si puede venderla en su negocio.

Definí una plantilla común para las cuatro variedades: nombre y porcentaje, nota de cata, características y usos en cocina. Traducirlas a platos concretos convierte una descripción sensorial en criterio de compra.

Quien busca sabor se queda arriba. Quien busca formato baja.


Página de variedades completa.

El cliente pedía español e inglés, con el chino ya identificado como necesidad comercial futura. Planteé la estructura para aceptar un idioma más sin rediseñar: selector siempre visible, bloques que admiten longitudes de texto muy distintas.

El chino se publicó más tarde, ya sin mi intervención, sobre esa misma estructura.



Home en español, inglés y chino.

Resultado

El sitio se publicó en 2019 y sigue en producción, sin rediseño. Desde entonces el cliente ha ampliado el catálogo con gamas y productos nuevos, incorporados tanto a la zona de marca como a la tienda sin tocar la estructura.

No dispongo de datos de negocio del proyecto. Lo que sí puede comprobarse es que el sistema aguanta: que una web de comercio siga funcionando años después, con más catálogo del que tenía al nacer y sin rediseño, dice más de las decisiones de estructura que una cifra de lanzamiento.

Qué haría distinto hoy

Repensar el checkout. El NIF/CIF/NIE es obligatorio sin indicar qué formato espera, así que un comprador internacional puede quedarse bloqueado justo antes de pagar.

Mejorar la experiencia en móvil. El carrusel muestra una botella y deja mucho hueco vertical. El bloque de gamas pierde las imágenes.

Facilitar la comparación y añadir filtros. Con el catálogo actual, más amplio, ya hacen falta.

Revisar el etiquetado. «Productos» y «Tienda» contiguos no comunican por sí solos que llevan a sitios distintos.