Brava Fabrics Web

Brava Fabrics diseña camisas, sudaderas y accesorios con estampados propios, y colabora con marcas como Peanuts o Kodak. Tiene tiendas en Barcelona, Madrid y Palma, además de su tienda online en Shopify.

La web funcionaba, pero no convencía. Casi la mitad de las visitas llegaba desde Instagram, sin saber qué era Brava, y se encontraba un pop-up de descuento antes de ver una sola prenda. Además, las ventas del Outlet habían caído respecto al año anterior.

El reto era rediseñar la tienda con datos y no con gustos: entender por qué la gente se iba, ordenar un catálogo muy amplio y muy colorido, y hacer que el Outlet volviera a vender sin que la marca pareciera una tienda de saldos. Y no bastaba con la portada: de las visitas que llegaban a una ficha de producto, menos de una de cada diez añadía la prenda a la cesta.

Antes de dibujar nada, auditamos la web actual: las diez heurísticas de Nielsen, un recorrido completo de compra de la home al checkout y los mapas de calor de Clarity. La nota global fue de 6,8 sobre 10, con el descubrimiento como fase más débil.

Encontramos trece problemas y los priorizamos por impacto y esfuerzo. Los críticos estaban en el primer contacto: un pop-up de newsletter nada más llegar, la barra de cookies compitiendo con él y el código de descuento repetido en cada tarjeta de producto. Con un scroll medio que no pasa del primer tercio de la página, todo lo importante tenía que estar arriba.

En el móvil, que es donde está la gran mayoría de las visitas, el mapa de calor de la web actual se apagaba enseguida: casi todo el mundo veía el hero, cerca de la mitad llegaba a los best sellers y muy pocos pasaban de la mitad de la página. Todo lo que había más abajo, incluida la prensa y el Outlet, era casi invisible.

La propuesta ganadora reordena la home a partir de esos datos. Selector de Hombre y Mujer dentro del hero, best sellers justo debajo, colaboraciones en un bloque compacto y el Outlet como un módulo propio, rojo y a pantalla completa, en la zona donde todavía hay atención.

Brava vende hombre, mujer, accesorios, colaboraciones y cápsulas creativas, y en la web todo convivía al mismo nivel. Tomando como referencia el orden de Arket, separamos el catálogo en tres niveles: Destacados para lo que se mueve, Catálogo para buscar por tipo de prenda y Colecciones para las cápsulas y colaboraciones.

Las colaboraciones pasan a tener una sección propia, para no sobreexponer a los partners en cada página, y el Outlet sube al menú principal con su color. En el móvil, el menú arranca con la elección entre Hombre y Mujer y despliega cada nivel sin perder de vista la campaña.

En lugar de una home cerrada, diseñamos un sistema de cabeceras intercambiables para cada momento comercial: imagen única para las campañas, pantalla partida para hablar a la vez a hombre y mujer, módulos para combinar colección y Archive sale, y texto flotante para los lanzamientos.

El Outlet recibe un tratamiento especial: un módulo a pantalla completa en el que la prenda acompaña al scroll, ultraclicable y con su propio color. Los pop-ups de comunidad y del sorteo comparten la misma pieza azul, para que la marca suene siempre igual.

La página de colección ya tenía buenas fotos y precios a la vista. Le faltaba contestar a la pregunta que más se repite en una tienda de ropa: si queda mi talla. Por eso la talla sale del menú de filtros y se queda siempre visible, como una fila de botones. Un toque y la rejilla enseña solo lo que te puedes llevar.

Cada tarjeta dice lo justo: nombre, precio, valoración y, cuando quedan pocas, qué tallas quedan. El código de descuento ya no se repite en todas las fotos. Entre prenda y prenda aparece una imagen de campaña a doble ancho, para que una rejilla de cuarenta camisas estampadas tenga dónde descansar.

La ficha es donde quien mira se convierte en quien compra, y lo hacían muy pocas visitas. La auditoría la daba por sólida, así que no la reinventamos: fotos grandes en dos columnas, como un editorial, y a la derecha una columna de compra que acompaña al scroll y no desaparece nunca.

Lo que cambia es lo que faltaba. Las tallas agotadas se ven tachadas y se pueden pedir con un aviso. Si quedan dos unidades, se dice. La guía de tallas deja de ser un enlace perdido y pasa a ser un botón, junto a la altura del modelo y la talla que lleva. Y el precio va escrito dentro del botón de compra.

La cesta lateral funcionaba y se queda. Cambia lo que cuenta: el mensaje del envío gratis era un texto gris y ahora es una barra de progreso que se llena. Debajo, una sola sugerencia con sentido, la prenda con la que llegas al envío gratis, en lugar de un carrusel de recomendaciones.

En el pago, el coste del envío dejaba de ser un misterio solo después de rellenar la dirección. Ahora las tres opciones aparecen con su precio y su fecha desde el principio, la recogida en tienda incluida. El pago exprés va arriba, el resumen del pedido no se mueve y los sellos de confianza están donde hacen falta: pegados al botón de pagar.

La auditoría terminaba en una matriz de trece problemas ordenados por impacto y esfuerzo. El rediseño contesta a todos, uno por uno, y deja escrito dónde.

Ocho de los trece son de esfuerzo bajo: se resuelven con configuración y diseño, sin tocar la plataforma. Por eso van primero en la hoja de ruta.

Una base de blancos y grises claros que deja todo el color a las prendas, con dos acentos de marca: el azul Brava para la comunidad y los destacados, y el naranja para todo lo que tiene que ver con el Outlet y las rebajas.

Una grotesca en negrita y mayúsculas para los titulares, que se reconoce incluso en tamaño pequeño, e Inter para la interfaz, los precios y la navegación. Los componentes son rectos y sobrios, y los enlaces van subrayados.