Estudio de caso de UI/UX: pruebe los zapatos en casa antes de comprar en línea (2023)

Como un proyecto final para la investigación de investigación y diseño de UI/UX en Binar Academy, yo, junto con otros miembros del equipo de UI/UX, tuvieron la oportunidad de colaborar con el equipo de gestión de productos para crear una solución digital para un cierto problema.Utilizamos el método Scrum durante nuestras 3 semanas de colaboración.Juntos, creamos una aplicación donde los usuarios pueden probar sus zapatos favoritos en línea antes de hacer una compra utilizando el proceso de pensamiento de diseño.

La pandemia Covid-19 ha hecho que las personas restrinjan sus actividades y se queden en casa.Esta condición afectó a la industria del comercio de la moda.La forma en que las personas compran artículos de moda se han trasladado a la ventaja digital.Antes, la gente llegaría a una tienda de moda convencional, miraría su colección, probaría algunos artículos que llamaron su atención y realizarían una compra.En este momento, con la restricción de salir, la gente compraría cosas en línea.

Incluso si muchas personas ni siquiera salen de la casa durante casi un año, es comprensible que la gente todavía quiera comprar un nuevo par de zapatos, para ser zapatos deportivos precisos.Con todo el tiempo extra en casa y la necesidad de mantener la salud durante una pandemia, ¡un nuevo par de zapatos deportivos para acompañar su sesión de entrenamiento podría ser una buena compra!

Para ayudar a las personas a comprar zapatos en línea, diseñamos una aplicación llamada "Coolkicks.id" con la existencia de la función Prueba donde los usuarios pueden probar prácticamente sus zapatos en casa antes de realizar una compra, y también brindamos facilidad el proceso de regreso para mejorar los usuariosExperimentar compras en línea.

Alcance

En este proyecto, diseñamos un proceso de extremo a extremo que comenzó en el punto en que los usuarios se inscribieron en la aplicación, buscan sus zapatos favoritos, experimenten la función de prueba para saber qué tamaño se ajustaría a sus pies, realizarán una compra, hasta queEl usuario obtuvo su artículo y otorga calificaciones o solicita para devolver su artículo.

Herramientas

Durante nuestra colaboración, estas son las herramientas que utilizamos:

• Telegram: comunicarse con los miembros del equipo
• Google Meet: para hacer el standup diario
• Nación: para administrar los documentos del proyecto y la línea de tiempo
• FIGJAM: Hicimos nuestro tablero Kanban aquí para poder rastrear el nuestro y el progreso del otro
• Figma: para diseñar y crear prototipos de la aplicación
• Mazer: probar nuestro prototipo a los participantes
• Diapositivas de Google: para hacer nuestro mazo y presentar nuestro proyecto.

En este proyecto, utilizamos el proceso de pensamiento de diseño como marco.Se incluyeron cinco fases en este proceso, a saber, empatizar, definir, idear, prototipo y prueba.

Empatizarse

Para esta fase, el equipo de PM ha hecho personal de usuario junto con los resultados de la encuesta y los hallazgos para ayudarnos a comprender a los usuarios.

Estos son los hallazgos para ayudarnos a comprender a los usuarios:

• 29 de 40 personas compran zapatos en línea, especialmente en esta pandemia.
• 11 de las 21 personas dijeron que la limitación de comprar zapatos en línea se preocupa por la probabilidad de que el tamaño de los zapatos que compraron no se ajusten a sus pies.
• El 100% de los participantes dijeron que la información sobre los tamaños es importante.
• 18 de cada 31 personas han tenido problemas al comprar zapatos en línea y la mayoría respondió que el proceso de regreso tomó mucho tiempo.

Definir

De los hallazgos anteriores, tratamos de definir el problema al comprar zapatos en línea.Algunos hallazgos adicionales también proporcionados por el equipo de PM para ayudarnos a definir el problema.Estos son algunos de los hallazgos:

• El 25% de todos los pedidos se devuelven (datos de comercio electrónico)
• 11 de 14 casos de devolución/reembolso por parte de los consumidores debido al tamaño incorrecto (datos de comercio electrónico)
• El 71% de los compradores sienten que la función de prueba será útil para ellos porque les ayuda a tener más confianza en decidir si comprar o no
• El 57% de los compradores sienten que tener una característica para medir los zapatos prácticamente usando un teléfono inteligente les facilitará elegir el tamaño de los zapatos y reducir las preocupaciones en la compra debido al tamaño incorrecto.
• El 92% de los consumidores volverá a comprar si el retorno es fácil

Intentamos definir cuál es realmente el problema de todos los hallazgos anteriores.Al menos, hay dos problemas en la compra de zapatos en línea:

Problema 1.No hay experiencia en probar zapatos antes de hacer una compra para asegurarse de que el tamaño de los zapatos se ajuste a los pies del usuario.

Problema 2.El proceso de retorno tardó mucho tiempo.

Diseñador

Prueba de la función

Para responder el problema número 1, se nos ocurrió la idea de proporcionar una característica donde los usuarios pudieran probar sus zapatos en casa antes de realizar una compra, por supuesto, virtualmente.Esta característica utilizará tecnología de realidad aumentada.Estados Unidos, el equipo de UI/UX, proporciona 2 ideas para esta característica que luego se probará en las pruebas de usabilidad para saber qué versión funciona mejor.

Prueba la versión 1

En esta versión, la idea es que los usuarios dispararán su cámara a sus pies, y habrá diferentes tamaños y colores de un par de zapatos que el usuario selecciona antes de una visualización virtual de un par de zapatos en sus pies a través de sus piespantalla.También hay una regla en la pantalla para asegurar a los usuarios sobre el tamaño de su.

Prueba en la versión 2

Esta versión en realidad tiene un flujo más simple.Primero, los usuarios tendrían que disparar su cámara a sus pies, esperar a que la aplicación se escanee los pies, y aparecerá una recomendación del tamaño correcto para sus pies a lo largo de la visualización del par de zapatos que han seleccionado.También pueden probar diferentes colores de los zapatos en esta función.

Proceso de retorno de seguimiento

Para el problema número 2, ese proceso de retorno a menudo tomó mucho tiempo, proporcionamos más transparencia sobre el proceso de retorno.De esta manera, los usuarios podrían ver cómo va el proceso en el tiempo.

Prototipo

Hecho con la fase de ideación, pasamos a la siguiente fase, es decir, construir un prototipo de nuestro diseño.Primero, decidimos cómo sería el estilo de la aplicación, y acordamos llevar el estilo de diseño limpio.

Posteriormente, diseñamos nuestro sistema de diseño como base para el diseño de la interfaz de usuario de la aplicación de General.Este sistema de diseño también se actualizaría a lo largo del proceso de diseño de la interfaz de usuario.Elegimos el color azul, porque la palabra "genial" de "Coolkicks" se asemeja al color azul.No usamos un color sólido, pero un color lineal de azul con un lineal de blanco construye una imagen futurista para que coincida con la imagen futurista de Coolkicks.

Continuamos diseñando el logotipo para Coolkicks.Este logotipo representa la característica principal de Coolkick, es decir, la función de prueba donde los usuarios pueden tomar sus pies usando la cámara, dejar que la aplicación escanee sus pies y una visualización de un par de zapatos aparecerá en la pantalla.

Posteriormente, los miembros del equipo UI/UX hicieron el diseño de UI para toda la aplicación.Tuve la oportunidad de diseñar la característica principal de Coolkick, esa es la función de prueba.

Aquí están el prototipo de alta fidelidad de Coolkick.

En páginas de embarque antes de ingresar a la aplicación.Estas páginas incluyen el punto de venta único de Coolkicks, para educar a los usuarios sobre esta aplicación.

Primero, los usuarios tendrían que registrarse en la aplicación o iniciar sesión en la aplicación si ya tienen una cuenta.

Al ingresar a la aplicación, los usuarios se aterrizarían en la página de inicio que incluyen saludos, barra de búsqueda, notificación y algunas categorías de productos como el producto más buscado, el producto en promoción y el último producto visto.

Cuando un usuario aproveche un producto que le gustaría ver, se dirigiría a la página Ver producto.Primero verían una información sobre herramientas, que lleva a los usuarios a notar el botón Prueba.Escrito en la información sobre herramientas es una breve educación sobre la función Prueba.Una vez que los usuarios tocen en cualquier lugar fuera de la burbuja de chat, podrían ver la página del producto.Esta página contiene toda la información sobre el producto, incluidas las variaciones de color, los tamaños disponibles, la descripción detallada y las revisiones de compradores anteriores.Los usuarios pueden seleccionar cualquier color disponible y ver el producto en una foto de 360 grados.Si quieren ver la tabla de tamaño, aparecerá una hoja inferior.

Estas son páginas donde los usuarios pueden consultar los zapatos de su deseo y terminar el pago.

Los usuarios pueden rastrear su pedido desde la página de notificación y perfil.

Prueba de la función

El flujo de prueba de intento 1. Cuando los usuarios hacen clic en el botón "Prueba" en la página del producto, se dirigirían a la función.Primero, verían en la pantalla de embarque que les contaba cómo funcionaba la función.Una vez que hagan clic en Aceptar, tendrían que disparar su cámara a sus pies y dejar que la aplicación escanee sus pies.Pronto verían una visualización de un par de zapatos a sus pies.Pueden "probar" diferentes tamaños y colores disponibles.Una vez que sienten que es suficiente, pueden tocar el tamaño o el color y se tomará una foto.Pueden guardar la foto, hacer clic en el botón "Comprar ahora" para consultar directamente el artículo o agregarla a su carrito.

Mira más cercano a la visualización de zapatos en la versión de prueba 1. De izquierda a derecha es cómo se ve cuando los usuarios eligen un tamaño que es más pequeño que sus pies, el tamaño correcto para ellos y un tamaño que es más grande que sus pies.

Pasando a la segunda versión.Arriba está el flujo para probar la versión 2. Apareció por primera vez cuando los usuarios tocan el botón "Prueba", es la pantalla de abordaje para decirles cómo operar la función.El siguiente paso sigue siendo el mismo que en la primera versión, donde los usuarios tuvieron que disparar su cámara a sus pies y dejar que la aplicación escanee sus pies.Y la diferencia viene en la siguiente parte.En esta versión, la aplicación que ha escaneado los pies del usuario daría recomendación directamente sobre qué tamaño se ajustaría a los pies del usuario.Los usuarios pueden probar diferentes opciones de color de los zapatos, y el siguiente flujo sigue siendo el mismo que en la primera versión.

Mira más de cerca cómo se ve cuando los usuarios probaron variantes de color de los zapatos en la versión 2 de la versión 2.

Proceso de retorno de seguimiento

En los casos en que ha llegado un pedido, pero los zapatos no se ajustan a los pies del usuario, los usuarios pueden solicitar su pedido.Para dar más claridad sobre este proceso que a menudo tomó mucho tiempo, Coolkicks proporcionó una página donde los usuarios pueden rastrear su proceso de devolución.

Puedes probar nuestro prototipoaquí.

y el prototipo para probar la versión 2aquí.

Pruebas

La siguiente fase del proceso de pensamiento de diseño es probar nuestro diseño para saber si funcionó o no.Debido a que tenemos 2 diseños para la función Prueba, utilizamos el método de prueba A/B para saber qué diseño funciona mejor.

Utilizamos Maze para probar nuestro prototipo con 19 participantes.Para esta prueba, les pedimos a los participantes que hicieran algunas tareas, que son:

• Se firmaron en la aplicación
• Explore la página de inicio y elija sus zapatos favoritos
• Prueba la versión de prueba de prueba 1
• Responda qué tamaño creen que les encantaría en función de su experiencia en la versión 1
• Pruebe la versión de prueba de prueba 2
• Responde qué versión de intento prefieren
• Responda si sienten que la función de prueba los ayudaría o no
• Rastrear su pedido y dar calificación

En general, las pruebas de usabilidad obtuvieron una tasa de éxito del 83.4% de 66.7% de éxito indirecto y 16.7% de éxito directo.Esto significa que los participantes logran hacer las tareas, pero sobre todo pasando por su propio camino, fuera del camino que hemos establecido en Maze.

Aquí, explicaría más detalles sobre las pruebas A/B en la función Prueba.

¡Prueba los zapatos que te gustaría comprar usando la versión de prueba de prueba 1!

Esta tarea obtuvo una puntuación de 56. Sin embargo, cuando miramos más cerca de las pantallas de prueba, aparentemente obtuvo una puntuación perfecta de 100. Esto significa que no hay ningún error en estas pantallas.Desde el punto de acceso, podemos sacar conclusiones de que los participantes pueden entender cómo operar esta función.

Según el intento anterior, ¿qué tamaño se ajustaría a sus pies?

Cuando preguntamos a los participantes si podían ver el tamaño correcto para sus pies, la mayoría de los participantes respondieron correctamente, lo cual es el tamaño 41. Sin embargo, también hay muchos participantes cuya respuesta es incorrecta.Esto es lo que consideramos más adelante en la fase de iteración, es decir, cómo hacer que los usuarios se den cuenta de qué tamaño se adapte mejor a sus pies.

¡Prueba la versión de prueba de la versión 2!

Esta tarea obtuvo una puntuación de 65. Cuando miramos más cerca del punto de acceso de las pantallas en esta función, veríamos que todavía hay algunos errores, a diferencia de la versión anterior.

¿Qué versión de prueba prefieres?

Cuando preguntamos a los participantes qué versión prefieren, la mayoría de ellos respondió que prefieren la primera versión.La razón es que incluso si la versión 2 tiene un flujo más simple, la versión 1 proporciona más experiencia en "probar zapatos" con diferentes opciones de tamaño y una regla en su pantalla.Este hallazgo lleva a la decisión de que la versión que continuaremos desarrollando es probar la versión 1.

¿Crees que la función de prueba te ayudaría?

Cuando preguntamos si la función de prueba podría ayudarlos antes de comprar zapatos en línea, la mayoría de los participantes (76.5%) respondieron que podría ayudarlos.

Iteración

Desde el resultado de la prueba de usabilidad, pudimos ver que todavía hay muchos participantes que no pueden ver qué tamaño se adapta a sus pies.En la fase de iteración, agregamos advertencia cuando el usuario elige el tamaño que es más pequeño o más grande que sus pies.

Lección aprendida

En general, durante este proyecto colaborando con el equipo de PM, aprendí mucho.Algunas de las lecciones que podría tomar son:

• Intenté unificar el sabor del diseño junto con otros miembros del equipo de UI/UX al diseñar UI para la aplicación.Dividimos la aplicación en algunas partes que tenemos que diseñar por separado.Sin embargo, al final, podríamos hacer que se mezclen bien entre sí y el diseño parece consistente a lo largo de la aplicación.Construir nuestro sistema de diseño al principio nos ayudó a hacer esto.
• Al principio, insistí en que la versión 2 de la versión 2 facilitaría a los usuarios, ya que tiene un flujo más simple en comparación con la versión 1. Sin embargo, resultó que a los usuarios tienden a gustarle mejor la versión 1, debido a la experiencia que proporciona.A veces, la simplicidad del flujo no es lo más importante que debemos considerar.Resulta que a los usuarios no les importa hacer algunos pasos adicionales si les proporciona más experiencia.

¡Eso es todo para este estudio de caso UI/UX!Grita a los miembros de mi equipo por su arduo trabajo y cooperación a lo largo del proyecto.Los comentarios siempre son bienvenidos.