Rediseño de e-commerce
Rol
Diseño UXDiseño UISistema de componentes
Marca
Quokka
Botellas y recipientes, Madrid
Descripción
Quokka vende cientos de referencias entre botellas, vasos, termos y recipientes, y lo hace a particulares y a empresas a la vez. La tienda había crecido hasta convertirse en un catálogo ordenado como piensa el almacén. El rediseño la reordenó alrededor del uso real que la gente le da al producto.
Ver el sitio en vivo →La misión
Una tienda que se dejara comprar
La tienda anterior te hacía recorrer un pasillo para llegar a cualquier sitio: shop, botellas, térmicas, una línea, un acabado y por fin el producto. Esa estructura refleja cómo se construye un catálogo por dentro y le exige al cliente conocer el vocabulario antes de comprar.
Había un segundo público que lo complicaba: Quokka vende a particulares y a empresas desde la misma tienda. Dos personas que llegan con intenciones opuestas, tratadas como si fueran una sola.
Arquitectura
Ordenado por uso, no por almacén
El primer nivel ya no nombra materiales ni tipos de producto. Nombra momentos: hidratación, café y té, recipientes, kids. Nadie se levanta queriendo un recipiente de acero de doble pared; quiere llevarse el café a la oficina.
Por debajo, las familias (Solid, Tide, Stream, Mist, Core) funcionan como gamas y no como carpetas, así que una familia crece en colores y tamaños sin añadir otro nivel al árbol.
Ficha
Una ficha, todas las variantes
La misma botella existe en varias capacidades, muchos colores y estampados, y con correa o sin ella. Partir eso en una ficha por combinación entierra la gama y reparte su posicionamiento.
La ficha mantiene la familia junta y deja cambiar tamaño, color y correa sin salir de ella. Cada elección se escribe en la URL, así que una variante concreta se puede compartir o enlazar desde una campaña y abre exactamente como se dejó.
Empresas
Una tienda para quien compra por palés
Un comprador de empresa no navega. Llega con una lista de referencias y quiere meterla en el carrito de una vez. Por eso la tienda tiene una zona de compra rápida aparte, con tres entradas: un buscador pensado para referencias, un pedido subiendo una hoja de cálculo y un listado plano para añadir cantidades en bloque.
Sacar ese flujo de la experiencia de compra principal es justo el objetivo: ninguno de los dos públicos tiene que atravesar la tienda del otro.
Sistema
Pensado para que se mantenga
Una tienda con este catálogo la edita cada semana gente que no es diseñadora. Trabajé en componentes y no en pantallas: tarjetas de categoría, fichas en rejilla, selectores de variante, banners.
La tienda funciona en español e inglés y tiene una declaración de accesibilidad publicada. Ninguna de las dos cosas es decoración: son la diferencia entre una tienda que sirve a todo el mundo y otra que va perdiendo clientes sin enterarse.
Siguiente proyecto