Cómo visualizar gastos e ingresos en la web de tu banco
Un reto de 3 días explicado paso a paso
🎯 El reto
Hace unas semanas me propusieron un reto que consistía en lo siguiente:
En primer lugar, diseñar una sección de gastos e ingresos en versión app mobile y web responsive para Openbank que contenga:
- Visualización de ingresos y gastos mensuales.
- Comparación de datos entre diferentes períodos de tiempo (meses/años).
- Agrupación de movimientos por categorías consultables.
- Evolución en el tiempo de gastos e ingresos.
En segundo lugar, crear una guía de estilo y aplicarla al diseño anterior.
Para realizar este proyecto, he llevado a cabo un pequeño benchmark. Con los datos recabados, he definido las oportunidades de mejora así como las necesidades que podría tener el usuario medio. Posteriormente he realizado un userflow antes de pasar a los wireframes de baja y media fidelidad y finalmente he aplicado un estilo visual a los wireframes de la versión mobile y desktop.
🔍 Benchmark
Para comenzar la challenge, he realizado un benchmark para analizar cómo presentan los datos de gastos e ingresos bancos como Revolut o BBVA y también el propio Openbank.
Oportunidades de mejora
Como conclusiones al benchmark he extraído las siguientes conclusiones:
- Falta de claridad en las categorías. Algunos gastos no están bien clasificados y no pueden ser editados por el usuario.
- Estadísticas de gastos. Poder comprobar de un simple vistazo si los gastos del periodo actual son similares al anterior o si no se están cumpliendo las previsiones.
- Los usuarios acceden a su banco desde la app móvil por lo que deberían poder acceder a toda la información y funcionalidades desde ahí sin tener que recurrir a la versión de desktop.
🙋🏻♀️ Mi usuaria
Antes de realizar un userflow, elaboré un user persona que representase las necesidades del usuario medio de Openbank:
A continuación realicé el userflow de mi user persona basándome en su POV.
En el user flow reflejé cómo debía ser el recorrido que un usuario recorrería para consultar sus gastos e ingresos.
🏗 Wireframes
Wireframes low-fidelity
Comencé realizando unos wireframes en papel para dar forma a la versión desktop primero y mobile después.
Wireframes mid-fidelity
Decisiones de diseño
- Al pasar el diseño de baja a media fidelidad me di cuenta de que aunque una gráfica circular es una forma sencilla y visual de representar los gastos del mes, su interpretación es más difícil si el usuario quisiera comparar los gastos con otro periodo de tiempo como el último año. Es por eso que en el diseño mid-fi he añadido un apartado de “evolución de tus gastos” donde se ven en una gráfica de barras y he modificado la gráfica circular por una semiesfera a la derecha para la sección “gastos del mes” donde comparar por categorías es más fácil de representar de esta forma.
- Para mejorar el análisis de datos por parte del usuario he añadido la opción de seleccionar subcategoría en la tabla con las entradas. De esta forma ahora se podría elegir visualizar solamente los cobros de “música y TV online” por ejemplo.
- Filtros a la vista. Bajo la categoría aparecen los filtros aplicados. En este caso el periodo de tiempo detallado y la cuenta de la que proceden los gastos.
- He incluido la posibilidad de editar la descripción del cobro para añadir una descripción personalizada a los gastos que facilite su clasificación por parte del usuario.
Wireframes high fidelity
🎨 Guía de estilo
Decisiones de diseño
He creado una guía de estilo utilizando los colores primarios, secundarios y neutros de la web de Openbank. También he utilizado su misma fuente tipográfica (Mark OT) para mantener la consistencia dentro del producto.
En cuanto al diseño, he utilizado una grid de 1366px de ancho para la versión desktop y una grid de 360px de ancho para la versión mobile.
La versión mobile está diseñada para dispositivos iOS siguiendo las Human Interface Guidelines de Apple.
Por último, los iconos utilizados pertenecen a la librería de Bootstrap para garantizar la consistencia de toda la familia de iconos utilizada tanto en mobile como desktop.
Conclusiones y futuribles
Y hasta aquí llegó el desarrollo del proyecto. Los siguientes pasos en mi opinión serían:
- Diseñar la sección de ingresos que acompaña a la de gastos
- Analizar y mejorar el sistema de categorías. Propongo hacerlo con un Design Sprint para ver de forma rápida y con un riesgo mínimo si existe una mejor forma de plantear las categorías de gastos e ingresos.
Gracias por leer hasta aquí. Yo me despido, no sin antes recordarte que puedes leer más artículos sobre mis proyectos aquí mismo.
