Rediseño de tienda online para un distribuidor de ingredientes gourmet

Antes de diseñar revisamos la web en escritorio, a 1440 px, y en móvil, a 375 px: la portada, el menú, la tienda, las once categorías, la subcategoría Bitters, la búsqueda, las colecciones, una ficha de producto en sus dos formatos, el alta de cuenta, las recetas, el blog, las condiciones de envío y las preguntas frecuentes. Los problemas se agrupan en nueve puntos, y cada uno tiene su respuesta en la propuesta.

La web tiene once categorías al mismo nivel y de tamaños muy distintos, y en escritorio solo se ven al abrir el menú. La propuesta no cambia el catálogo: agrupa las once categorías en cuatro entradas según su uso (despensa, pastelería y chocolate, barra y bebidas, y menaje) y las deja siempre a la vista, junto a New arrivals, Brands, Recipes y un acceso propio al programa mayorista.

La portada actual abre con tres tarjetas del mismo peso (catálogo, mayorista y recetas) y ningún titular. La nueva empieza con un único H1, «Gourmet ingredients right at your fingertips», y una línea que lo concreta: más de 2000 productos de todo el mundo, para cocinas profesionales y para quien cocina en casa. Debajo van dos llamadas, una para comprar y otra para abrir una cuenta mayorista, y una franja con lo que la empresa ya ofrecía y la portada no contaba: la mayoría de los pedidos salen en 24 horas, la entrega suele llegar al día hábil siguiente en seis ciudades y se puede recoger en los almacenes de Toronto y Vancouver.

En la web actual, Bitters tiene 80 entradas porque cada formato es un producto: la botella de 150 ml y la caja de doce aparecen por separado, con su nombre, su foto y su precio. No hay filtros ni precio por unidad, y la página abre con un titular de 16 px y un párrafo largo.

En el listado propuesto, los formatos se agrupan: 46 productos, cada uno con sus tamaños como opciones, su precio y su precio por 100 ml. A la izquierda, filtros por marca, dieta, origen, formato y precio, con el número de productos de cada opción. Arriba, las subcategorías hermanas, con su número de productos. Y al final, en lugar de páginas, un contador y un botón para ver más productos.

En la web actual, la botella de Aztec Chocolate Bitters y la caja de doce son dos fichas distintas, y nada indica que la caja sale más barata. En la ficha propuesta son dos opciones de la misma compra, cada una con su precio, su precio por 100 ml y su SKU. La caja muestra además lo que cuesta cada botella, 16,61 $ frente a 21,87 $, y el ahorro: un 24 %.

Junto al botón están el plazo de envío, la entrega y la recogida. Los sellos dietéticos suben a la primera pantalla, las migas recuperan el grupo y la subcategoría, y un recuadro explica a los profesionales qué ganan con una cuenta mayorista. La ficha termina con productos que combinan con este.

En un móvil de 375 px, la web actual se sale de la pantalla: la cabecera desborda y corta el carrito, y en las tarjetas de la portada el botón «Add to Cart» se parte en cuatro líneas y se sale de la tarjeta. En Bitters, la primera pantalla se va en las migas, el titular, el párrafo y las subcategorías: el primer producto aparece a 850 px.

La web actual usa un mismo naranja, #FFA800, para botones, marcas y pestañas, y en tres de esos usos no llega al contraste mínimo: el texto blanco de los botones de la portada se queda en 1,93:1, las marcas de las tarjetas en 1,89:1 y la pestaña activa de las recetas en 1,85:1. Para texto normal, WCAG AA pide 4,5:1. La tipografía tampoco ayuda: una sola familia, Geist, casi siempre entre 14 y 16 px.

La propuesta separa el color de los titulares del de la interacción. El coral #E05A46 se reserva para titulares grandes, donde basta con 3:1. Botones y enlaces usan un coral más oscuro, #C53621, que llega a 5,35:1. Los titulares pasan a DM Serif Display, y el texto y la interfaz, a DM Sans.