Cómo trabajé
Era la Lead UX Designer y reportaba al responsable global de e-commerce. Lideraba un equipo interno de UX y una agencia creativa, y trabajaba a diario con product owners, desarrolladores, el equipo de CRO y negocio.
Reporta a
Lidera
- Senior UX designer, freelance
- Senior UI designer, freelance
- 2 UX/UI designers en prácticas
- Project manager
- 2 UX designers
- UX researcher
Trabaja con y entrega a
Estos son dos de los proyectos que lideré allí.
Caso de estudio 1
Selector de corte
¿Cómo podríamos aumentar la conversión y reducir las devoluciones ayudando a los compradores a elegir el corte adecuado en la página de listado?
El proceso
Análisis de la competencia
Analicé 25 competidores. De todas las páginas de listado que revisé, ninguna tenía un banner tradicional (una imagen grande con texto).
Historial del producto
Cuando propuse un selector de corte visual para sustituir el banner, los product owners me contaron que ya lo habían probado: un selector de corte con imágenes de vaqueros, en 2021. Había perdido su test A/B.
Test A/B de 2021: el selector de corte (izquierda y centro) frente al banner clásico (derecha). Ganó el banner: el valor medio del pedido aumentó un 1,9 %.
En mi opinión, el test de 2021 fracasó por el diseño, la interacción y el contenido, no por la idea:
- Los vaqueros del selector se parecían demasiado entre sí.
- Al seleccionar un corte, las demás opciones parecían desactivadas, así que los compradores tenían que volver atrás en lugar de pasar de un corte a otro.
- Nadie había comprobado si los compradores entendían los nombres de los cortes (tapered, straight, relaxed…).
Wireframes e interacción principal
Exploré dos maneras de que el selector funcionara con los filtros.
Concepto 1 · Seleccionar un corte y luego otro
Concepto 1
Cuando el usuario selecciona un corte, se le redirige a una subpágina dedicada dentro del listado de vaqueros. Así puede aplicar filtros adicionales sobre el corte seleccionado.
Concepto 2
Cuando el usuario selecciona un corte, el filtro de corte correspondiente se aplica automáticamente. Después puede añadir otros filtros, que se combinan así: corte Y [filtro] O [filtro].
En este concepto, seleccionar un nuevo corte deselecciona automáticamente el anterior.
Concepto 2 · Seleccionar un corte y luego otro
Primer test con usuarios
- Objetivos
- Validar el concepto de diseño
- Observar los flujos y las interacciones
- Recoger feedback sobre los textos
- Recoger feedback sobre las imágenes
- Configuración
- UserTesting.com
- 15 participantes
- EE. UU.
- Hombres de 20 a 35 años
- Ingresos del hogar de 50.000 a 100.000 $
El flujo probado: un participante busca vaqueros en Google, llega a la página de vaqueros y cambia de un corte a otro.
Lo que dijeron los participantes
- «Me gusta la idea general del slider de cortes y el caso de uso.»
- «El slider de cortes era justo lo que querría ver al comprar vaqueros.»
- «Me encantó tenerlo arriba, porque fue lo primero que vi.»
- «Me gustó porque casi hago clic en el botón de filtros, pero el slider estaba justo encima y se me fueron los ojos directamente a él.»
- «No me queda clara la diferencia entre regular y straight, ni entre tapered y regular.»
- «Algunos términos son subjetivos, así que estaría genial añadir descripciones para aclararlos.»
- «Las [imágenes] con fondo oscuro hacían más difícil ver bien el estilo, porque los vaqueros también eran de color oscuro.»
Lo que descubrimos
- Solo el 53 % de los usuarios estuvo de acuerdo con que «las fotos ilustran claramente los distintos tipos de vaqueros».
- Los términos «relaxed», «tapered» y «regular» eran los más confusos.
- Solo 7 usuarios se dieron cuenta de que se habían aplicado varios filtros tras seleccionar el corte «Relaxed».
Acciones
A los usuarios les confundían términos como straight, regular y relaxed. Para entender el impacto, trabajé con el departamento comercial sobre los datos de ventas y devoluciones. Los productos más devueltos, como «Relaxed Straight», «Regular Straight» y «Straight», coincidían con los términos que más confundían a los usuarios.
Solución propuesta: dejar claro que straight y tapered describen el acabado de la pierna, y dar a cada corte una descripción breve.
A partir del feedback de los usuarios, también pedí al equipo de contenido nuevas fotos que mostraran con claridad el corte concreto de cada vaquero.
Nuevas pautas para la sesión de fotos
- Fondo claro (para ver mejor el producto).
- La pose debe resaltar la particularidad de la categoría (ver flechas).
- El look completo no debe reflejar claramente una estación (nada de gorro ni chaqueta de invierno).
- El foco debe estar en los vaqueros (sin accesorios largos).
Diseño final
Volvimos a probar el diseño final con usuarios. Esto es lo que dijeron, con sus propias palabras:
El nuevo selector de corte sustituyó al banner en la parte superior de las páginas de vaqueros. Esta vez ganó su test A/B, con más conversión, y sigue en producción desde entonces.
Caso de estudio 2
Nueva página de producto
¿Cómo podríamos mejorar la página de producto para que los productos resulten más atractivos, reforzar la marca e impulsar las ventas?
Lideré el rediseño completo de la página de producto, poniendo por delante la narrativa visual y el propio producto. Fotos más grandes y en alta resolución muestran los detalles de cada prenda, mientras una columna de información fija mantiene a la vista la talla, el corte, el tejido y los cuidados mientras el comprador hace scroll. El resultado es más impactante y, a la vez, más fácil de usar.
