Cómo diseñamos el listado de movimientos en la sección de Tu dinero

En el último año trabajamos en cómo mejorar el listado de movimientos en Tu dinero. Sí, esa lista de cosas que te cuenta qué pasó con tu plata. Durante ese tiempo sumamos personas al equipo, nos despedimos de otras. Trabajamos codo a codo con colaboradores repartidos en diferentes provincias y países. Hablamos con los equipos de back, front, producto, research y, por supuesto, con nuestras personas usuarias. En esta nota te contamos algunos de nuestros desafíos.

Un listado en UX

Antes de empezar es importante saber dónde encontramos listados en interfaces digitales. Por ejemplo, tus playlists en Spotify, la bandeja de entrada de tu mail, tus mensajes de WhatsApp, las descargas en tu computadora y las transacciones con tu dinero en Mercado Pago son, en definitiva, listados.

¿Por qué un listado? Porque permiten organizar grandes cantidades de información como mails, canciones y, también, movimientos de dinero. Además, en una lista la información es más fácil de escanear y ordenar.

Primero, lo primero: nuestras personas usuarias

Al momento de empezar a trabajar en el nuevo diseño del listado de movimientos de Tu dinero surgieron muchas preguntas:

• ¿Por qué ingresan al listado de movimientos nuestras personas usuarias?
• ¿Qué vienen a buscar?
• ¿Cómo lo buscan? ¿Por fecha, monto, contraparte?
• ¿Lo encuentran?

Para poder responder esos interrogantes fuimos a buscar a quienes tenían las respuestas: nuestras personas usuarias.

Para eso nos reunimos con nuestro equipo de research y definimos dos estrategias. Por un lado, pedir feedback dentro del listado de movimientos. Por otro, hacer entrevistas en profundidad con personas usuarias.

Poco a poco fuimos respondiendo a las preguntas del inicio y empezamos a pensar en una experiencia que se ajustara mejor a esas necesidades.

¿De lo general a lo particular? ¿O al revés?

Muchas veces al momento de encarar un nuevo proyecto vamos de lo general a lo particular. Otras, como en este diseño, empezamos por lo particular. Nos dimos cuenta de que teníamos que ir a la célula más pequeña del listado: la fila o row.

Si lográbamos entender y definir la morfología de ese componente podríamos trasladar esa solución a los diferentes casos de uso de nuestro listado.

En esta etapa comenzó la exploración. Hacer wireframes y diseños en baja, reuniones con otros uxers y equipos, recibir feedback, iterar y volver a probar. Cuando terminamos, las exploraciones en Figma se parecían al mapa de Game of Thrones: inabarcable.

Sin embargo, habíamos definido nuestro componente estrella y, por lo tanto, gran parte de nuestro listado. El esfuerzo había valido la pena. Aunque todavía quedaba mucho por hacer.

Mapear, mapear, mapear

Todas las operaciones que se realizan con dinero disponible impactan en el listado de Tu dinero. Eso incluye cientos de operaciones. Por eso, para poder entender los impactos reales que iba a tener el listado nos juntamos con personas referentes de esos equipos. Porque al fin de cuentas, el listado es el resultado de una historia que se empieza a contar mucho tiempo (o pantallas) antes. Por ejemplo: cuando una persona compra algo en Mercado Libre, hace una transferencia, vende con QR, paga un peaje, pide un préstamo, recarga su celular o se suscribe a un servicio de streaming.

Las reuniones con esos equipos nos permitieron no solo entender cómo funciona cada flujo, sino también conocer qué palabras se utilizan para poder tener consistencia con nuestras personas usuarias.

Algunas decisiones que tomamos

Diseñar y escribir es también tomar decisiones. En definitiva, elegir un camino en detrimento de otro. Y, el diseño de este listado, no fue una excepción.

· ¿Sustantivos o verbos? Esa es la pregunta

¿Cómo iba a “hablar” nuestro listado? ¿Con verbos conjugados o con sustantivos? ¿Iba a decir “pagaste” o “pago”? ¿Quién era el protagonista de esa historia? ¿Los movimientos del dinero? Como verán por cada respuesta surgían más preguntas.

De nuevo nos sentamos a entender la situación. Si en una pantalla siempre hay poco espacio, en un listado ese lugar todavía es menor. Por eso, decidimos cambiar la morfología de verbos conjugados que tenía el listado original por sustantivos que nos dejaban contar lo mismo en menos caracteres. Además, descubrimos que los sustantivos nos permitían escalar más fácilmente a nuevos features.

Para tomar esa decisión hicimos benchmarks, análisis de métricas, content reviews y reuniones de equipo.

· Un listado más accesible

Incorporamos signos de +/- para diferenciar ingresos y egresos de dinero. Además, de un color coding (los ingresos se indican en verde para poder diferenciarlos rápidamente). Esto permitía que nuestro listado no solo sea más escaneable sino también más accesible.

· Línea principal + línea secundaria = 1 fila

Al momento de pensar el contenido de cada fila quisimos que la información más importante estuviese siempre visible: el tipo de movimiento y la contraparte. De esta manera, las personas usuarias podrían responder las preguntas de ¿qué? y ¿a quién? sin necesidad de ingresar en el detalle.

Además, utilizar una línea principal y una secundaria nos permitía, no solo jerarquizar la información, también optimizar el espacio. En la mayoría de los casos, la información de las filas no se corta (como sucedía antes) y está siempre disponible para las personas usuarias.

Un equipo multidisciplinario y diverso

¿El diseño del listado fue solo un trabajo de UX? ¡Claro que no, mi ciela! Este proyecto no fue un cambio de chapa y pintura, fue mucho, mucho más. Porque no se trató solo de cambiar la UI. También incluyó crear una nueva fuente de información (o capability) que hiciera posible nuestro listado. Para eso contamos con nuestras heroínas y héroes sin capa: ¡nuestro equipo de back y front! que lo hizo posible. Aunque, cómo se construyó esa nueva fuente de información y cuáles fueron esos desafíos es parte de otra historia que explicará mucho mejor el equipo de desarrollo.

Por eso, este listado (o historia) continuará…

El nuevo diseño del listado de movimientos de Tu dinero está productivo en Brasil. Próximamente estará disponible también en otros países.

¡Gracias Carolina Querino Castro por la ayuda y magia con las ilustraciones de esta nota!