top of page

Herramienta de carga financiera

Colaboración con:

BANXICO | ATTI

portada banxico.jpg

El proyecto

Nuestro cliente deseaba crear una calculadora que le permitiera a las personas conocer la salud de sus finanzas en relación a su nivel de endeudamiento tanto presente como futuro.

Duración del proyecto:

5 meses

Mis responsabilidades durante el proyecto:

  • Pruebas de usabilidad

  • Diseño UX | UI

  • Accesibilidad

El problema

El Banco de México necesitaba recopilar datos específicos para poder aplicar las fórmulas necesarias para realizar el cálculo y poder determinar las recomendaciones. Por otro lado, en México, existe muy poca educación financiera. Era necesario simplificar la forma de presentarle la calculadora a las personas, ya que BANXICO tenía especial interés en llegar a usuarios de escasos recursos.

La meta

Crear un diseño con poca carga cognitiva para que usuarios, con pocos conocimientos en finanzas, pudieran completar los formularios e interpretar los resultados arrojados por la herramienta de manera autónoma.

Entendiendo al usuario

Se realizaron 3 estudios de usabilidad con pruebas moderadas y no moderadas vía remota. Que incluían a hombres y mujeres entre los 18 y 50 años de edad de los niveles socioeconómicos C, C+ y C-. Pertenecientes a diferentes partes de la República Mexicana (Yucatán, Veracruz, Coahuila, CDMX, San Luis Potosí, Guanajuato, Jalisco, Querétaro, Sinaloa,  Chiapas, Estado de México, Puebla, Campeche, Nayarit, Tabasco).

Con el objetivo de obtener retroalimentación relacionada a:

- Accesibilidad digital

- Experiencia de usuario

- Accesibilidad congnitiva

- Diseño de interfaz

Prototipo para primera ronda de pruebas

Para esta fase del proyecto se trabajaron dos prototipos interactivos en Figma con el objetivo de poder testear el flujo e interacciones que le interesaba al cliente, por un lado, y por el otro, testear una propuesta no apegada a la de Banxico pero que consideraba mejoras en cuanto a diminución de carga cognitiva, usabilidad y accesibilidad.

Características de las pruebas

Tipo de estudio:
Moderado | Remoto

Duración de las pruebas:
45-60 minutos

Lugar
México (Puebla, Campeche, Nayarit, Querétaro, Estado de México, Guanajuato, Tabasco, Coahuila).

Participantes:
6 hombres y 5 mujeres | C, C+, D+ | secundaria a maestría | Entre 27 y 70 años

download.gif

Hallazgos

Se detectaron las siguientes oportunidades de mejora:

Accesibilidad

Al observar las pruebas nos percatamos de que la carga cognitiva era muy alta debido a la complejidad de la herramienta. Determiné que era necesario colocar umbrales con información que recordara al usuario de dónde venía y cuál era el objetivo final.

También fue necesario realizar ajustes en la presentación de las gráficas de resultados para considerar a personas con daltonismo.

Interacción

Las personas nos compartieron que les resultaba tedioso llenar tantos datos, una interacción con la captura de datos más dinámica ayudaría a evitar el índice de deserción en la herramienta.

Diseño

Encontramos que existía un aumento en la carga cognitiva para llenar el formulario debido al uso del color y la extensión de los mismos. Lo que ocasionaba que los usuarios no pudieran diferenciar el cambio de un rubro a otro.

También encontramos problemas para que las personas pudieran comprender los resultados arrojados por la herramienta.

Redacción de textos

Detectamos que las personas, debido a la confusión e inseguridad que sentían por los temas financieros, necesitaban recibir un acompañamiento más extenso a través de los textos para poder completar el flujo principal.

segunda iteración.jpg

Prototipo para segunda ronda de pruebas

En esta segunda etapa se realizaron las pruebas en un prototipo funcional, lo anterior con el objetivo de evaluar si, con los nuevos ajustes, los usuarios eran capaces de completar el flujo de manera autónoma y de comprender los resultados arrojados por la herramienta.

Características de las pruebas

Tipo de estudio:
Moderado y no moderado | Remoto

Duración de las pruebas:
30-60 minutos

Lugar
México (CDMX, Sinaloa, Querétaro, Chiapas, Estado de México).

4 mujeres y 6 hombres | C-,C,C+ | de secundaria a licenciatura completadas | de 18 a 50 años

download (1).gif

Hallazgos

Se detectaron las siguientes oportunidades de mejora:

Accesibilidad

Detectamos la necesidad de ajustes en el diseño para reducir la carga cognitiva para entender el funcionamiento de ciertos elementos, como los botones, así como la forma de presentar los resultados de las gráficas y los textos explicativos de cada indicador por resultar muy complejos para la mayoría de las personas.

Interacción

A pesar de los ajustes realizados en los flujos, concluimos que seguía siendo necesario reducir el tiempo para interactuar con la captura de montos, así como agregar funcionalidades para borrar de manera rápida la información capturada, editarla sin tener que recorrer todo el flujo, y visualizar de manera inmediata los cambios en el apartado de resultados.

Diseño

En general, nos dimos cuenta de que era importante para los usuarios poder interactuar con el contenido principal sin necesidad de estar haciendo scroll, ya que resultaba aún más tedioso en aquellos componentes que desplegaban el teclado debido a que el espacio para poder visualizar el diseño se reducía hasta el 30% en algunos dispositivos.

Redacción de textos

Al revisar las grabaciones de las pruebas notamos que la mayoría de las personas usaba la lectura de escaneo, lo cual, dificultaba la comprensión de los resultados en aquellos usuario que no tenían un vocabulario que les permitiera reconocer ciertos términos. 

Se determinó que se tenía que reducir la extensión de los textos y usar un lenguaje más sencillo para facilitar la comprensión del sitio.

tercera iteracion.jpg

Prototipo para tercer ronda de pruebas

Esta fue la última ronda de pruebas antes de desarrollar el producto final para entregar tanto el código como el diseño. Se le pidió a los usuarios que interactuaran en un prototipo funcional de alta fidelidad. Para evaluar si las mejoras aumentaban la comprensión de los flujos así como la interpretación de los resultados arrojados.

Características de las pruebas

Tipo de estudio:
Moderado y no moderado | Remoto

Duración de las pruebas:
30-60 minutos

Lugar
México (Yucatán, Veracruz, Coahuila, CDMX, San Luis Potosí, Guanajuato, Jalisco, Querétaro).

8 mujeres y 3 hombres | C+, C, C- | preparatoria a licenciatura | de 18 a 50 años

download (2).gif

Hallazgos

Se detectaron las siguientes oportunidades de mejora:

Accesibilidad

Se detectaron dificultades para poder interactuar con el sitio usando únicamente el teclado. También, al presentar una gráfica pastel con texturas para personas con daltonismo, algunos usuarios externaron su deseo de visualizar la gráfica en colores sólidos.

Interacción

El nuevo diseño facilito que los usuarios pudieran completar los dos flujos de manera autónoma en un tiempo promedio de:

2 minutos para la versión rápida

5 minutos para la versión larga

Diseño

Las personas tuvieron mayor claridad para completar las actividades con el diseño de tarjetas y globos de opciones.

Redacción de textos

Las personas reportaron que la cantidad de texto dentro del sitio era suficiente para poder entenderlo. Sin embargo detectamos que debido a la lectura de escaneo que solían utilizar era necesario resaltar visualmente las palabras clave.

Diseño final

Debido a que en la última ronda de pruebas la usabilidad del sitio fue muy buena, al diseño final únicamente se le hicieron ajustes para agregar funciones que mejoraran aún más la interacción con los componentes principales.

Paleta de color

La elegí pensando no solo en utilizar como base el color institucional de Banxico, también la ajuste para integrar colores que funcionaran como acentos visuales para los botones y  cuidé que la combinación de colores permitiera cumplir con el criterio AAA de accesibilidad.

Captura de pantalla 2024-05-07 a la(s) 4.42.26 p.m..png

Tipografía

La familia tipográfica que se usó para desarrollar este proyecto fue Poppins. 

Los estilos de texto usado fueron:

  • H1 40/48

  • Subtítulo 32/40

  • Text 16/24

  • Botón 16/24

  • Caption 16/10

Diseño

bottom of page