Base · De una parrilla de productos a una experiencia de marca

Durante mi etapa en Fail Fast, trabajé en la definición UX de una nueva experiencia de marca para Base. El encargo inicial era sustituir la entrada directa a una parrilla por una landing que organizara la exploración del catálogo. A partir de un benchmark, definí la arquitectura de contenidos, la validé con el cliente y desarrollé los wireframes. El alcance creció hacia las páginas asociadas y una propuesta de cards y previsualización de producto. Tras el trabajo visual del equipo de UI, preparé el prototipo final de la experiencia de marca.

Cuando un usuario entraba en una marca como Adidas, llegaba directamente a una parrilla de productos. Podía acceder al catálogo, pero no había una landing que presentara la marca y organizara distintas formas de explorar su oferta.

El encargo no debía resolverse solo para Adidas: la lógica tenía que poder aplicarse después a otras marcas, con catálogos y contenidos diferentes.

Los retos principales eran:

• Dar a cada marca un espacio propio de identificación y contexto.
• Hacer visibles las entradas por género, deporte y categoría.
• Combinar destacados, productos y contenidos de marca sin perder conexión con el catálogo.
• Definir una estructura flexible, sin depender de una campaña o selección fija de productos.

El objetivo fue facilitar el paso del contexto de marca a la exploración de productos relevantes.

Analicé referentes de ecommerce multimarca y retail deportivo que ya ofrecían este tipo de landings. Descompuse sus páginas en secciones y utilicé un código de color para comparar qué función cumplía cada contenido, cuánto espacio ocupaba y cómo se presentaba en móvil y escritorio.

La clasificación distinguía identificación de marca, navegación y búsqueda local, accesos generales o por género, destacados, recomendación de producto, contenidos promocionales y captación.

Criterios derivados del análisis:

• Distinguir orientación y exploración. Las breadcrumbs indican dónde está el usuario; el menú dentro de la marca ofrece rutas para continuar.

• Ofrecer varias entradas al catálogo. Género, deporte y categoría permiten organizar la exploración desde distintos puntos de partida.

• Combinar módulos con funciones diferentes. Destacados, accesos a categorías y listados de producto no cumplen el mismo papel.

• Separar estructura y contenido. La lógica debía mantenerse, aunque cambiaran la marca, los productos o las campañas.

  Proceso

  Referentes → clasificación de secciones → criterios → arquitectura de contenidos → wireframes.

Después del benchmark, elaboré un diagrama que relacionaba navegación, tipos de contenido y posibilidades de presentación. La propuesta diferenciaba elementos requeridos —como la identificación de marca— de opciones que podían variar, como banner, vídeo, carrusel o grid.

La navegación local contemplaba Inicio, Hombre, Mujer, Niño/a, Deportes y Ofertas. Cada destino cambiaba el contexto de los contenidos: una vista general de marca no debía mostrar lo mismo que una sección de género o un deporte concreto.

El diagrama también recogía reglas de aplicación:

• Adaptar los contenidos a la marca, categoría o género seleccionado.
• Utilizar títulos de sección acordes con ese contexto.
• Proponer diferentes patrones de presentación según la sección.
• No mostrar el módulo de ofertas si la categoría no tenía ofertas.
• Permitir la exploración de un deporte concreto desde la sección de deportes.

Una estructura común con prioridades adaptables

En esta etapa no contaba con métricas exactas de ventas o búsquedas. Por eso, el diagrama no fijaba una jerarquía como si ya estuviera respaldada por esos datos: proponía que la selección y el peso de los contenidos se ajustaran a lo más vendido o buscado dentro de cada contexto.

Validamos esta arquitectura con el cliente antes de pasar a wireframes. Además, el diagrama incluía sugerencias de patrones UI obtenidas del benchmark para que los equipos de UI y desarrollo entendieran cómo aplicar la lógica.

Con la arquitectura más clara, desarrollé los wireframes de la landing y de las pantallas asociadas: vistas de “ver todo” por género, parrillas generales de deportes, páginas de un deporte concreto, ofertas y resultados de búsqueda.

Los wireframes concretaban el orden y las relaciones entre módulos: desde la identificación de marca y los accesos al catálogo hasta destacados, más vendidos, ofertas y contenidos complementarios.

El trabajo incluyó versiones para móvil y escritorio. El propio diagrama ya sugería pestañas para desktop y un menú colapsado para móvil: distintas presentaciones para conservar el acceso a las mismas rutas.

El propósito no era diseñar pantallas aisladas, sino mantener una relación clara entre la entrada de marca y los niveles de exploración del catálogo.

Acercar la compra desde la parrilla

También definí una propuesta UX para la parrilla y las cards de producto. Los wireframes contemplaban filtros aplicados, ordenación y consulta de disponibilidad en tienda, junto con información comercial visible desde el listado.

Las cards reunían información comercial, stock y acciones de consulta rápida para evaluar el producto desde el listado. En desktop, propuse mostrar una imagen alternativa al hacer hover.

Definí dos rutas de compra según las opciones que requería cada producto:

• Compra directa: “Añadir a la cesta” para productos que no necesitaban elegir talla o color.
• Compra con selección de variantes: “Consultar opciones de compra” cuando era necesario completar esa selección.

Así, la acción de la card se adaptaba a las necesidades del producto, en lugar de ofrecer la misma compra directa para todo el catálogo.

La previsualización reunía imágenes, información resumida y selección de color y talla. La propuesta contemplaba un color preseleccionado y la activación de “Añadir a la cesta” una vez completadas las opciones necesarias. “Ver más detalles” conservaba el acceso a la ficha completa. Al mostrarse sobre la parrilla, mantenía el listado como contexto de exploración.

Exploré también distintas presentaciones para móvil: un producto por fila, dos columnas y una disposición horizontal.

Los wireframes pasaron al equipo de UI, que definió el lenguaje visual y las pantallas de alta fidelidad. Después, retomé esas pantallas para preparar el prototipo final, conectar los recorridos y facilitar la revisión con el cliente.

El prototipo permitió revisar la experiencia de marca como un recorrido conectado y sirvió de referencia para su paso a desarrollo, con un handoff ligero.

La experiencia de marca se implementó y su entrada dejó de depender únicamente de una parrilla genérica. La landing incorporó contexto de marca, rutas de exploración y módulos conectados con el catálogo.

La página actual de Adidas en Base (se abre en una pestaña nueva) permite ver la experiencia en vivo, aunque sus contenidos y campañas hayan evolucionado desde el proyecto.

Contexto del proyecto global: Fail Fast comunica que el rediseño superó los objetivos de venta del primer año (se abre en una pestaña nueva). Es un resultado colectivo del proyecto completo, no atribuible exclusivamente a esta intervención.