Tlf :
+34 680 28 05 85
Email :
diegovillarroelzaballos@gmail.com

Introducción.

Este es uno de los proyectos que lideré para mejorar la experiencia de nuestros usuarios durante su proceso de compra. En este caso me centré en mejorar el UX en términos de usabilidad, analizando los 3 KPI's más importantes en una experiencia de delivery.

Rol

Design Leader

Fecha

18 de Mayo, 2021

Categoría

Proyectos reales

TAGS

App móvil, Proyectos reales, Experiencia de usuario

Diseño antiguo

Diseño nuevo

Diseño UI.

Botón mal posicionado

Al tener el botón encima del propio producto, los usuarios experimentan muchísimos missclicks durante su compra.

La tarjeta del producto tiene 2 eventos:

1. Abrir el detalle de producto.
2. Añadir el producto al carrito.

Lo que está ocurriendo es que en muchas ocasiones el usuario está queriendo añadir un producto al carrito, pero está tocando sin querer en la zona que abre la pantalla del detalle de producto. Esto genera una gran fricción cognitiva y se convierte en un problema de usabilidad grave cuando se repite varias veces durante el proceso de compra, ya que aumenta considerablemente el tiempo total invertido.

Eventos Detalle de Producto
Eventos Add to Cart

Diseño antiguo

Diseño nuevo

Con la nueva localización del botón ATC, podemos proteger y separar correctamente las zonas de los 2 eventos. De esta forma ayudamos al usuario a no cometer el error mostrado en el anterior ejemplo.

Tamaño insuficiente

El tamaño del botón es excesivamente pequeño (32px) para la importancia que éste tiene en la conversión. Yo siempre recomiendo seguir la buenas prácticas para este tipo de botones, los cuales deberían ser finger-friendly (44px) para asegurarnos que el usuario toca en el botón sin problemas y no en otro sitio.

Puede parecer un simple detalle, pero diseñar atendiendo a la ley de Fitts mejora el UX de esta acción, ya que optimizamos su efectividad y eficiencia a la hora de llevarla a cabo.

Definición de KPIs

Para abordar correctamente la fase del proyecto donde evalúo la usabilidad de los diseños, lo primero que hago es definir cuales son los KPIs más importantes en la experiencia en la que estoy trabajando.

En este caso, durante una compra online en groceries, existen 3 KPIs de altísima importancia para determinar la experiencia global del usuario:

Una vez tenemos los KPIs que vamos a analizar, podemos pasar a realizar una evaluación heurística para hacer una comparativa entre el diseño que estamos intentando mejorar y la nueva solución. De esta forma podemos demostrar cuantitativamente cual de ellos es mejor en términos de usabilidad.

01

Taps / Clicks

necesarios para completar una determinada tarea.

02

Pantallas / Estados

por los que se tiene que pasar durante la ejecución de una tarea.

03

Tiempo

que se debe invertir para completar una tarea.

Evaluación heurística

En esta evaluación heurística debemos identificar las tareas en las que podamos medir los KPIs que hemos definido anteriormente. De esta forma podremos construir gráficos y comparativas entre el diseño que queremos mejorar y la nueva solución.

Para entender mejor esto, dejo a continuación como ejemplo una comparativa de los 3 KPI's con una tarea muy recurrente durante las compras online: Modificar las unidades de un producto.

Taps / Clicks

My Skill
3
My Skill
1

Pantallas / Estados

My Skill
4
My Skill
2

Tiempo (segundos)

My Skill
0.75
My Skill
0.25
Diseño antiguo
Diseño nuevo

Análisis de datos.

Definiendo los eventos

El siguiente paso es analizar la experiencia completa donde esos indicadores entran al terreno de juego.
En este punto debemos encontrar los eventos con los que podamos medir los KPIs anteriormente citados, que en este caso son:

01

Sumar unidades

Ejemplo: Pasar de 2 uds. → 3 uds.

02

Restar unidades

Ejemplo: Pasar de 4 uds. → 2 uds.

03

Eliminar producto

Ejemplo: Pasar de 1 ud. → 0 uds.

Una vez tenemos eso, ya sólo queda montar en Amplitude las queries que necesitemos para acceder a los datos.

Análisis masivo

En Rappi tenemos más de 50 millones de usuarios activos, por lo tanto tenemos a nuestro alcance una cantidad enorme de datos reales y valiosos con los que poder validar nuestras decisiones de diseño.

En este caso con Amplitude y algunos cálculos matemáticos saqué el siguiente dato:

Todas las modificaciones en las unidades de los productos en los últimos 30 días|

Modificación → Restar unidades

Modificación → Sumar unidades

Taps / Clicks

My Skill
21.6 millones
My Skill
7.2 millones

Pantallas / Estados

My Skill
28 millones
My Skill
14 millones

Tiempo (horas)

My Skill
1,500
My Skill
500
Diseño antiguo
Diseño nuevo

Guerrilla testing.

Plan de prueba

Para validar cualitativamente este proyecto decidí incluir unos test de guerilla, ya que a pesar de tener un gran impacto general, es un cambio de diseño que afecta a una tarea muy concreta: Añadir productos al carrito.

Los escenarios y tareas fueron los siguientes:

"Estás haciendo tu compra semanal y necesitas añadir algunos productos a tu carrito..."
Añade 3 unidades de Coca-Cola Zero
Añade 1 unidad de Coca-Cola Original
Añade 2 unidades de Pepsi
"Te das cuenta de que necesitas más Coca-Cola Zero..."
Añade 2 unidades más de Coca-Cola Zero (es decir, 5 unidades en total)
"Al final, no quieres comprar Coca-Cola Original ni Pepsi..."
Elimina todas las unidades de Coca-Cola Original
Elimina todas las unidades de Pepsi

feedback #1

Ignacio, 29 (Argentina)

" No pude eliminar fácilmente la Coca-Cola."

"Me pareció más cómodo este diseño. "

"El botón era muy pequeño. "

"El botón es más grande, eso me facilita la tarea de agregar y quitar productos. "

"El stepper se abre y cierra cuando pones las unidades, y esto me dificulta mucho la tarea. "

"Este diseño me resulta más claro porque los botones se mantienen siempre accesibles.

" El diseño me gusta pero me parece más útil el otro. "

feedback #2

Manuela, 26 (Argentina)

"Abrí la pantalla del Detalle de Producto sin querer.

"Es mucho más simple de esta manera. "

"Quizás el botón es demasiado pequeño. "

"Puedo ver claramente cuantas unidades tengo"

"Me resulta tedioso que esté arriba. "

"Puedo agregar, puedo restar... Es más claro. "

"A nivel visual me parece mucho más ordenado. "

feedback #3

Paula, 25 (Brasil)

"A veces no consigo modificar unidades desde la tarjeta de producto."

"Me gusta. Si hiciera todo desde la propia tarjeta este diseño me ayudaría más. "

No uso el botón, suelo abrir la pantalla del producto porque el botón es demasiado pequeño. "

En mi caso no me afectaría mucho, pero este diseño resulta más intuitivo. "

"Cuando tengo que hacer muchas modificaciones las hago desde el carrito, la tarjeta del producto es muy tediosa y lenta. "

feedback #4

Marina, 29 (Argentina)

"Abrí la pantalla del Detalle de Producto sin querer.

"El hecho de que los botones se mantengan fijos hace que sea más facil. "

"En mi opinión el botón es muy pequeño. "

"Me gusta que el botón sea más grande. "

"Este diseño me gusta visualmente pero es algo tedioso de usar. "

"Me parece mucho más funcional este diseño."

"Con este diseño no ocurría el problema de abrir sin querer la pantalla del producto. "

Takeaway.

A veces pasa (sobre todo en entornos Agile) que entramos en una dinámica en la que únicamente nos centramos en sacar continuamente nuevos proyectos y funcionalidades, pero nos olvidamos de dar seguimiento a los diseños que ya han sido implementados.

Esto es realmente importante, ya que si no lo hacemos, estaremos creando un producto con multitud de funcionalidades pero cada vez más difícil de usar o incluso menos útil para nuestros usuarios.

Otro punto muy importante es que por muy pequeño o básico que parezca un proyecto, éste puede tener un impacto enorme sobre el producto, ¡Como has podido ver!

¡Nos vemos!
© 2021 No hay derechos reservados.
De hecho, comparte, roba (like a pro) y obtén la inspiración que quieras.
¡Vivimos en un mundo libre!