Haciendo que la experiencia de compra resulte fluida para Adidas

Un rediseño enfocado en la conversión que convierte un recorrido de producto denso en una experiencia de compra clara y segura, en escritorio y móvil.

Prototipo de escritorio Prototipo móvil

Diseño UI/UX
Diseño web
Design System
Wireframing
Prototipado

Decisiones clave de diseño

Claridad, diseñada en cada capa

Wireframes de baja fidelidad

Los wireframes de baja fidelidad simplifican el recorrido del producto y establecen un flujo de compra claro en escritorio y móvil.
Diseño final

Una jerarquía visual clara y detalles de producto enfocados ayudan a los compradores a decidir con confianza en escritorio y móvil.
Prototipado

Los prototipos interactivos dan vida al recorrido de compra y aclaran las interacciones clave en escritorio y móvil.

Enfoque y proceso

Primero la evidencia. Después la expresión.

Mapeé el recorrido de compra de Adidas e identifiqué tres áreas por mejorar: orientación, confianza en el producto e impulso en el checkout. Guiaron los wireframes, el diseño visual, el sistema de diseño y los prototipos interactivos para escritorio y móvil.

Wireframes en escala de grises de la portada, el listado y la página de producto de Adidas en escritorio y móvil

Diseños finales de Adidas en escritorio y móvil: portada con zapatillas destacadas, página de categoría y listado de productos

Design system

Reglas de consistencia para un gran diseño

Fundamentos de tipografía y color: estilos AdineuePRO y AdihausDIN en regular y negrita, y la paleta de color del negro al blanco, morado, turquesa, verde, amarillo, naranja y rojo

Muestras de componentes: selector de miniaturas de zapatillas, estilos de titular, opciones de precio, menús desplegables de características y filtros, orden, control deslizante de precio, filtros de deporte y color, y una tarjeta de reseña

Logotipo, íconos y botones: el logotipo de Adidas, íconos de flecha, chevron, valoración y corazón, y estados de botones primarios, secundarios y casillas

Componente de tarjeta de producto: una fila de imágenes de zapatillas y una cuadrícula Shop All de tarjetas con valoración, nombre, categoría, precio y botón Shop Now

Prototipado

Flujos interactivos para cada pantalla

Conexiones del prototipo sobre la hoja de componentes: titulares, opciones de precio, filtros y miniaturas unidos por flujos de interacción

Conexiones del prototipo sobre la navegación: megamenús de Hombre y Mujer con columnas de Calzado y Deporte y tarjetas promocionales unidos por flujos de interacción

Conexiones del prototipo sobre las galerías de imágenes de producto: varias vistas de la zapatilla unidas por flujos de interacción

Conexiones del prototipo sobre la cuadrícula de productos: tarjetas de zapatillas con valoración, precio y botones Add to Cart unidos por flujos de interacción

Responsive por diseño

El mismo flujo de compra, en cada pantalla.

Cada pantalla se diseñó para escritorio y móvil a la vez, desde la página de inicio y la navegación de Hombre y Mujer hasta las galerías de producto y la cuadrícula de productos. Los prototipos interactivos conectan estos flujos de principio a fin, para poder probar cada interacción en ambos dispositivos.