Viajando a mi universo...David Langarica © 2025

0
Proyectos / Lace

Lace

Diseño UX y UI | Caso de estudio

Lace thumbnail
Rol
Diseñador UX y UI
Responsabilidades
Realización de estudios de usuarios, entrevistas, mapeo del recorrido del usuario, estudios de usabilidad, wireframing, prototipos de alta y baja fidelidad, iteración del diseño.
Lace thumbnail

La moda tan sencilla como las redes sociales

Lace es una tienda de ropa local, la cual se especializa en producir y distribuir prendas para hombres, mujeres y niños, así como ropa unisex. Sin embargo, actualmente no tienen una app de comercio electrónico para la venta online, el cuál es uno de los principales problemas a los que se enfrentan.

Objetivo

Crear una aplicación para Lace que permita a los usuarios retener temporalmente las prendas añadidas a la cesta.

Lace main mockup

Investigación de usuarios

Resumen

Para comprender mejor las necesidades y frustraciones de los compradores de ropa por Internet, se realizaron entrevistas individuales con usuarios de diversas edades. Se partía de la base de que los usuarios solo encontraban dificultades cuando los artículos se agotaban mientras aún estaban en el carrito, lo que les llevaba a buscar alternativas o a abandonar la compra.


Sin embargo, es bien sabido que los usuarios suelen tener frustraciones que van más allá de la mera usabilidad de un producto. Por ejemplo, pueden tener dudas sobre la fiabilidad de las reseñas del producto o la exactitud de las medidas de las tallas. Al crear una persona y analizar los comentarios de los usuarios, es posible comprender mejor sus objetivos y frustraciones y empatizar con sus experiencias.

Lace Persona [es]

Primeras fases de diseño

Wireframes de papel

Analizando el recorrido de compra online de Grecia, pude determinar el valor de las opciones de reserva de ropa y mejorar su experiencia de compra basándome en las reseñas de los productos.

Con esto en mente, realicé un proceso de wireframing en papel y se me ocurrieron varias ideas para las pantallas principales de la aplicación. Marqué las mejores características de cada idea con estrellas rojas y las combiné en una sola pantalla. El resultado es un diseño muy fácil de usar y limpio, con un mínimo de clics.

Wireframes digitales

Tras varias rondas de iteraciones, desarrollé un diseño final que se ajustaba completamente a los comentarios de los usuarios que participaron en las pruebas de usabilidad.

Además, para garantizar que el usuario no tenga que salir de la página actual para comprobar si sus productos se han puesto en espera, implementé un mensaje pop-up que aparecerá en la pantalla e informará al usuario de que su producto está ahora en espera.

Prototipo de baja fidelidad

De un wireframe a un prototipo

Más tarde, creé prototipos de baja fidelidad para mostrar el flujo de compra de una prenda, desde la pantalla de inicio hasta la pantalla de confirmación del pedido.

Lace Low fidelity Prototype

Estudios de usabilidad

Realicé dos rondas de estudios de usabilidad sobre un prototipo con cinco personas. El objetivo era determinar lo fácil que le resulta a un usuario realizar un pedido y confirmarlo. Antes de realizar los estudios, elaboré un documento con todas las especificaciones necesarias, como las preguntas de investigación, los indicadores clave de rendimiento, la metodología, las características de los participantes y el guión.


La primera ronda arrojó los siguientes resultados:

  • Los usuarios quieren subcategorías de productos

  • Los usuarios no consideran adecuado el icono del carrito para una tienda de ropa

  • Los usuarios necesitan más confianza en la fiabilidad de las reseñas de productos

Mientras que las siguientes conclusiones procedían de la segunda ronda:

  • Los usuarios necesitan saber cuánto tiempo se guarda la prenda/accesorio en el carrito

  • Los usuarios consideran que la barra de herramientas principal ocupa mucho espacio en general

Puliendo el diseño

Después de los estudios de usabilidad

Repasé los diseños y mejoré la experiencia del usuario en general basándome en los comentarios recibidos de los estudios de usabilidad anteriores. En esta fase, también comencé la creación de las maquetas de la aplicación: añadiendo color, imágenes, iconos y detalles para mejorar la experiencia de cara al siguiente estudio de usabilidad.

Soluciones

En cuanto reconocí los principales retos y sus posibles soluciones, me puse manos a la obra y los resolví de inmediato para la siguiente ronda de estudios, ya con el prototipo de alta fidelidad.

LACE challenges

Prototipo de alta fidelidad

Pantallas finales

Tras completar las iteraciones anteriores, creé las pantallas finales y completé el prototipo de alta fidelidad (Hi-Fi) para la app de Lace. Mantuve un flujo similar al del prototipo anterior, pero con las mejoras necesarias, para que los usuarios puedan satisfacer fácilmente sus necesidades, desde la selección inicial de artículos hasta la confirmación final de su pedido.

Lace Final Screens

Accesibilidad

  • Se dio prioridad al uso de iconos comunes y descriptivos para facilitar la navegación.

  • Se utilizaron contrastes superiores a una puntuación de 4,3 para garantizar que cualquier persona pueda leer el texto.

  • Se utilizó un espacio mayor para los gráficos con el fin de ofrecer al usuario una primera percepción visual general.

Conclusión

Próximos pasos

Trabajé duro en el proyecto de la aplicación Lace, investigando a los usuarios y desarrollando un prototipo Hi-Fi para garantizar la mejor experiencia de usuario. Sin embargo, aún quedan algunos ajustes por hacer para satisfacer las necesidades de los usuarios finales y garantizar que esté lista para futuras versiones.

Nuevas funciones

Se añaden funciones para acelerar el proceso de selección de tallas mediante mediciones fieles a la talla.

Expectativas de la ropa

Una de las principales frustraciones de los usuarios es temer que, una vez recibida la ropa, ésta no cumpla sus expectativas ¿Cómo podríamos permitirles probarse la ropa antes de comprarla a través de la app?

Aprendizajes

Desarrollé la aplicación Lace para responder a las necesidades iniciales tanto de los clientes como de los usuarios finales. Los clientes pueden utilizar la aplicación como una plataforma de comercio electrónico, mientras que los usuarios finales se benefician de soluciones a problemas comunes a los que se enfrentan cuando compran ropa en línea.

El proceso de diseño de la app para el Certificado de Diseño UX de Google me enseñó la importancia de dar prioridad a las necesidades del usuario. Me di cuenta de la importancia de dedicar tiempo a comprenderlos y empatizar con ellos, así como de la importancia de diseñar soluciones que satisfagan mejor sus necesidades. Asimismo, el proceso también me introdujo en nuevas herramientas como Figma.

"La aplicación tiene un diseño estupendo y moderno. Es intuitiva y fácil de usar".

- Cita de una opinión de un usuario