Caso de éxito de diseño web ecommerce: de cinco pasos de compra a uno

Contexto y punto de partida

La tienda tenía producto excelente y una comunidad fiel en redes, pero su ecommerce había crecido por acumulación: complementos instalados encima de plugins, tres sistemas de imágenes distintos y una plantilla de catálogo que cargaba la biblioteca completa en cada página de producto.

La decisión de partida la tomó el cliente con nosotros: no íbamos a rediseñar todo el comercio, íbamos a arreglar el camino entre ver un producto y pagarlo. El catálogo, la marca y el producto se quedaban; la maqueta y el proceso de compra, no.

Sector

Retail · café de especialidad, venta online y suscripción

Tamaño

120 referencias · 4 categorías · 2 idiomas

Periodo

6 semanas de diseño, maquetación y migración

Métrica de éxito

Tasa de compra completada en móvil

Línea base: embudo de compra de los 90 días anteriores en la analítica del cliente, LCP móvil de los datos de campo y registro de pedidos por canal.

Qué encontramos

• Seis segundos hasta poder tocar la página. La plantilla cargaba un carrusel de portada con cinco imágenes de 900 KB, tres tipografías y dos bibliotecas de iconos. En un móvil de gama media, el primer minuto de compra se gastaba esperando.
• Cinco pantallas para pagar. Carrito, identificación, envío, método de pago y confirmación. La cuenta era obligatoria antes de ver los gastos de envío, que es exactamente el punto donde se abandona.
• La ficha de producto no respondía preguntas. Sin tueste, origen, altitud ni fecha de tostado. El cliente escribía por mensaje directo para preguntarlo, y esa venta no dejaba datos ni se podía optimizar.
• Filtros que no filtraban. El buscador interno devolvía resultados irrelevantes y los filtros por intensidad y tueste eran etiquetas de texto, no atributos consultables.
• Suscripción escondida. El producto de mayor valor recurrente —la suscripción mensual— estaba en el pie de página, sin explicación de cómo funciona ni de cuándo se puede cancelar.

La plantilla y su estructura

Elegimos una plantilla profesional orientada a comercio, con catálogo ligero y bloques de producto nativos, y la convertimos en tema hijo. El objetivo era conseguir una rejilla de producto que se pueda recorrer con el pulgar, con precio visible sin scroll y sin recargar scripts en cada ficha.

cafe-especialidad.es/tienda

Decisiones de diseño

1. Arreglar la velocidad antes de rediseñarEliminamos el carrusel, dos tipografías y una biblioteca de iconos, y sustituimos las imágenes por formatos modernos con tamaños declarados. Antes de cambiar un solo color, el LCP móvil cayó a la mitad. Diseñar sobre una base lenta es decorar un problema.
2. Un checkout de un paso, sin cuenta obligatoriaUnificamos carrito y pago, mostramos el coste de envío antes de pedir datos y dejamos la creación de cuenta como opción al final. La fricción se redujo a lo imprescindible para enviar un pedido.
3. La ficha responde antes de que se pregunteOrigen, altitud, tueste, fecha de tostado y notas de cata en una tabla corta y estructurada. La duda que antes llegaba por mensaje directo se resuelve en la propia página, y esa venta pasa a ser medible.
4. Filtros por atributo, no por etiquetaTueste, intensidad y formato se convirtieron en campos consultables. El cliente encuentra su café en dos toques y el catálogo se organiza solo, sin depender de que alguien etiquete bien cada producto.
5. La suscripción con su propia páginaUna página completa con qué incluye, cómo se elige el café, cuándo se envía y cómo se cancela sin llamar. La transparencia en la cancelación es lo que más aumentó la contratación, no el descuento.
6. Recuperar el control del correo y los datosFormulario de aviso de reposición y captura de correo con consentimiento, para que la venta no dependa del algoritmo de una red social. Los pedidos pasan a ser datos propios y atribuibles.

Entregables

• Auditoría de embudo de compra con el punto exacto de abandono en móvil y escritorio.
• Tema hijo documentado con rejilla de catálogo, ficha de producto y patrones de bloque reutilizables.
• Checkout de un paso configurado con envío visible antes de los datos y cuenta opcional.
• Atributos y filtros de catálogo migrados desde las etiquetas existentes sin perder referencias.
• Página de suscripción con condiciones, calendario y proceso de cancelación explicado.
• Informe de rendimiento y conversión antes y después, con datos de campo de móvil.

Resultados

Cifras de ejemplo con el formato de entrega real. La conversión se mide en la analítica del cliente con el mismo periodo comparable y el rendimiento en los datos de campo de Core Web Vitals del dominio. Sustituye estos valores por los verificados antes de publicar.

Antes y después

Preguntas frecuentes

Los umbrales de rendimiento que exigimos en la entrega son los publicados en la guía de Core Web Vitals de web.dev, y las recomendaciones de accesibilidad siguen las pautas WCAG 2.2 del W3C.

Servicio y método relacionados

Este caso corresponde al servicio de diseño y desarrollo web con WordPress. La medición del embudo que usamos aquí está en el servicio de datos y analítica.

Maqueta del sitio de este caso

La plantilla que se describe arriba, navegable y con su estructura completa: Origen Café. Es una demostración de diseño creada por nosotros para documentar el trabajo, no un sitio real publicado ni indexado.