ContactoCaso de estudio
Cómo pasar de una tienda lenta y genérica a una web con carácter para una finca de aceite ecológico, en cuatro idiomas.
El encargo
Pobill Ecològics cultiva sus olivos en el Maestrat y elabora su propio aceite, sin intermediarios. Vende aceites y productos gourmet, y organiza visitas y catas en la finca.
Su web, construida con un maquetador antiguo, tenía 49 plugins, fichas de producto pobres y un proceso de compra con fricción. En móvil tardaba 26 segundos en mostrar lo principal de la portada, que pesaba 12,5 MB.
El encargo: una web con identidad, rápida y que venda, con una condición, que todo lo que se dice del producto lo valide el cliente.
Decisión 1
La portada abre con la finca y el aceite («Oli ecològic nascut al Maestrat»), no con una parrilla de productos. El catálogo llega después. Y para quien no sabe qué elegir, un quiz que el cliente puede editar él mismo desde el panel (preguntas, opciones y recomendación), en los cuatro idiomas.
Decisión 2
Una franja de reconocimientos en la portada, entre el hero y el quiz, reúne los premios reales del cliente: 24, con una cinta animada de cinco destacados que enlaza a una cronología por campaña en «Nosaltres». La cifra pasó de 22 a 24 al contarlos uno a uno: un dato que se publica se cuenta, no se copia.
Decisión 3
El mapa de cómo llegar se tiñó con el terracota de la marca mediante un modo de mezcla que conserva el relieve del mapa (se descartó «multiplicar», que lo aplana), y su botón va en ámbar. Se aprobó tras tres rondas de ajuste.
Decisión 4
Cada texto técnico sobre el producto se acordó con el cliente, y los términos que él descartó se eliminaron en los cuatro idiomas. Lo que no se puede afirmar con soporte, no se escribe.
Y después, los detalles
Cinco decisiones de detalle, con su razón.
En el diseño de «Más allá del aceite», los productos gourmet van en chips pequeños con una foto cuadrada, no en tarjetas grandes: tienen que respirar menos que los aceites. Una imagen decorativa de fondo competía con los chips, así que se eliminó, y las fotos se asientan sobre un fondo crema.
Cinco chips, sin tarjetas grandes
Un bloque de confianza en la ficha de producto cuenta el compromiso social y el proceso «de la oliva a la botella». Cambia de peso: va solo en los productos gourmet y acompañado del proceso en los aceites.
Dos pesos según el producto
La página de experiencias parte el precio, avisa de la venta de alcohol, explica el proceso en tres pasos y reúne la información práctica en siete filas. La reserva y el formulario, que competían, se fusionaron en un único cierre.
Siete filas de información práctica
Para el blog «Diari del Maestrat» se probaron cuatro cabeceras: la actual, una oscura de marca, un lomo vertical de periódico y un collage atrevido. Se eligió la oscura y se fueron quitando adornos: la inicial gigante, el número de edición y el borde lateral. Sin boletín, el cierre del blog lleva a los productos.
Cuatro cabeceras, una elegida
En los productos simples (regalos, caviares, mermelada, crema y polvo) el selector de cantidad y el botón de compra aparecían en filas separadas. El fallo estaba en la plantilla compartida, y un único arreglo lo corrigió en todo el catálogo.
Una plantilla, todo el catálogo
Antes y después
Capturas del 24/10/2026: a la izquierda, la web actual; a la derecha, el rediseño en el entorno de pruebas. Mismo contenido, otro sistema.
En el móvil
Primera pantalla de la portada y de una ficha de producto, en la web actual y en el rediseño.
Verde, ámbar y tierra
Verde oliva oscuro, crema y ámbar como base, con un marrón tierra para el texto. Titulares en Cormorant Garamond, texto en DM Sans y etiquetas y precios en JetBrains Mono.
| Muestra | Combinación | Contraste | Para texto |
|---|---|---|---|
| Texto y botones | |||
| Tinta marrón sobre crema | 15,69:1 | ✓ Apta | |
| Tinta marrón sobre crema cálida | 14,68:1 | ✓ Apta | |
| Verde oliva sobre ámbar (botón principal) | 5,19:1 | ✓ Apta | |
| Crema sobre verde oliva | 12,54:1 | ✓ Apta | |
| Ámbar sobre verde oliva (etiquetas) | 5,19:1 | ✓ Apta | |
| Categoría | Web actual | Rediseño |
|---|---|---|
| Portada, rendimiento | 32 | 73 |
| Portada, accesibilidad | 78 | 96 |
| Portada, LCP | 26,6 s | 5,2 s |
| Portada, peso | 12,5 MB | 0,9 MB |
| Portada, desplazamiento de diseño (CLS) | 0,49 | 0 |
| Tienda, rendimiento | 54 | 88 |
| Tienda, LCP | 23,0 s | 2,3 s |
| Tienda, peso | 4,4 MB | 0,7 MB |
| Ficha de producto, rendimiento | 50 | 93 |
| Ficha de producto, LCP | 21,6 s | 2,7 s |
| Ficha de producto, peso | 4,9 MB | 1,3 MB |
| Categoría | Web actual | Rediseño |
|---|---|---|
| Portada, rendimiento | 56 | 99 |
| Portada, accesibilidad | 82 | 96 |
| Portada, LCP | 5,4 s | 0,7 s |
| Portada, peso | 13,0 MB | 6,0 MB |
Medido en laboratorio sobre el entorno de pruebas, sin la caché de producción. Una primera medición dio 6 MB en la portada móvil porque el vídeo de la portada también se descargaba en móvil; ya no, y el peso bajó a 0,9 MB con un desplazamiento de diseño de 0. El rediseño mejora mucho, pero aún no cumple en todo: la portada en móvil sigue tardando 5,2 s en mostrar lo principal, y la tienda tiene un desplazamiento de diseño de 0,197 (el límite recomendado es 0,1). Quedan pendientes de optimizar antes de pasar a producción. SEO no es comparable, porque el entorno de pruebas va con noindex.
¿Tu marca tiene un código así de ordenado? Te contamos cómo lo haríamos con la tuya: qué se queda, qué se mide y qué se decide contigo.