Case study: Openbank
Reto resuelto en 5 días
¿Qué es la vida sin un reto a corto plazo que nos ponga las pilas?
A veces estos retos nos ponen contra las cuerdas y es en ese momento cuando sin previo aviso superamos nuestras propias espectativas.
Bien, el caso que nos ocupa hoy no era uno fácil:
¿Podríamos crear para Openbank una sección responsive para gestionar nuestros gastos e ingresos?
Dicho así no parece algo muy complicado, pero eso es sólo un resumen, el briefing pedía más, bastante más, pero en vez de enseñaros el briefing, creo que es mejor que veáis un breve análisis de lo que considero que son los puntos más importantes:
🔎 Breve análisis Briefing
Para el desarrollo del reto, centré mis esfuerzos en objetivos concretos, poniendo el foco en:
- Que el cliente pueda visualizar sus ingresos y gastos mensuales de una manera intuitiva y sencilla, y que pueda compararlos fácilmente con otros periodos.
- Que tanto los gastos cómo los ingresos estén categorizados y estas categorías sean fáciles de identificar y localizar
- Que pueda verse una evolución de los gastos e ingresos en el tiempo y que esta evolución se entienda con sólo una mirada y que acceder a sus detalles sea un proceso lo más simple posible.
Después de analizar el Briefing, ya pude empezar a pensar en qué herramientas podía utilizar para enfrentarme al reto. De las múltiples opciones que hay me decidí por una serie de herramientas que creo que han sido fundamentales en el desarrollo de este proyecto:
Este es el Framework que seguí para su implementación:
Pero ¿cómo gestionar todas estas herramientas?, ¿en qué orden?¿qué tiempo le dedicar a cada una de ellas?
⌛️ Gestión del tiempo
Para ayudarme a priorizar herramientas y dinamizar el proceso utilicé un diagrama de Gantt, esta herramienta es fundamental para la organización de proyectos y la gestión del tiempo:
Después de organizarme arranqué con un Benchmark para sondear que hacen los competidores de Openbank, si tienen funcionalidades similares, y si es así, cómo las resuelven. También para ver los distintos dashboards de los que disponen y cómo son. Descubrí que sí, que en el mercado hay muchas apps que incorporan estas funcionalidades, ademas no son necesariamente apps de banca. Estas Apps ofrecen inspiración para algunas de las funcionalidades que buscaba para este proyecto.
Estas son algunas de ellas:
Fintonic
Fintonic es posiblemente una de las aplicaciones de gestión de finanzas personales más conocida que hay. Empresas como Amazon buscan colaboración/alianza con ella. Su funcionamiento es sencillo, básicamente con ella puedes llevar un control de gastos e ingresos.
Empecé a ver características que son comunes en casi todas las Apps/webs con este tipo de funcionalidades, y son dashboards con gráficas circulares que nos muestran los niveles de gasto e ingresos.
Goodbudget
Es otra App similar a la anterior, que permite controlar todos tus gastos y tus ingresos para llevar una buena contabilidad. Cuenta con un sistema de categorización de gastos e ingresos, que también veremos en otros ejemplos y que es uno de los objetivos de este reto.
Moneyhero
Esta aplicación tiene como funcionalidad conseguir tus objetivos de ahorro fijando los gastos e ingresos fijos de cada mes. Seguimos viendo gráficas/infografías en los dashboards con similares unas a otras.
Apps Banca Online
Hay muchas más Apps de este tipo, pero decidí centrarme en la que está considerada como una de las mejores app/web dentro del mundo de la banca y no es otra que BBVA.
BBVA
Estudié la web y la app de BBVA, y vi cómo resuelven los problemas que se planteaban en este proyecto. Sin duda BBVA los resuelven bien, pero aun así encontré cosas que podían mejorarse como mencionaré a continuación:
Tanto la app como la web contienen exactamente los mismos elementos, con pequeñas diferencias debidas al responsive. A continuación destaco los puntos fuertes y los puntos a mejorar de ambas:
El siguiente paso fue una investigación para recabar el máximo de información disponible, tanto de app como de web. Con ello aprendí cuales son los fundamentos de la interfaz de app y web.
Gracias esta investigación en profundidad pude aprender cómo aplican grids, cómo gestionan el color y la tipografía, como estructuran, tanto en web como en app. La extracción de toda esta información es fundamental a la hora de crear la capa visual, para que esta quede integrada y coherente con el trabajo previo.
Todo ello lo veréis más adelante, en el Sistema de diseño y en el prototipado.
Y es en este punto del proyecto cuando creé una:
User Persona
Para crearla hice una pequeña investigación sobre el perfil sociodemográfico de las usuarias de banca online:
- No hay una diferenciación entre el sexo en el uso de estas apps de bancas. Sin embargo, sí que hay una gran diferenciación en cuanto a edad
- Las usuarias de BBVA que tienen la app instalada son, en su mayoría, personas adultas de 25 a 34 años, seguidos por las de 35 a 44.
- La app de La Caixa la tienen instalada las usuarias de 25 a 44 años (27% en los dos rangos). La Caixa, además, es la más instalada por las jóvenes (20–24 años).
- Las personas que más se han instalado la app de Ing Direct tienen una edad de entre 35 y 44 años (39%). Aunque esta app es la más instalada (comparada con los otros dos bancos) entre la población de 45 a 54 años. De hecho, la app de Ing Direct supera en número de descargas a las otras dos.
La llamaremos Carla
Llegados a este punto, me puse a definir a nuestra User Persona, para tener presente al Target y poder empatizar con los destinatarios de nuestro proyecto.
“Soy un desastre con los gastos a fin de mes”
Carla tiene 35 años, trabaja en una gestoría, lleva prácticamente en ella desde que acabó la carrera. No está casada, pero sí tiene pareja estable. Le encanta hacer Yoga y salir a tomar algo con sus amig@s, también disfruta comprando, ya sea ropa, muebles para su piso y cualquier gadget que salga al mercado.
Es una persona inquieta, extrovertida y podríamos decir que Early Adopter. Sus metas y objetivos son entre otras cosas, tener un control sobre sus gastos y poder comparar que gastó en otros periodos con el actual. Le frustran las apps que no entiende a la primera, aunque suele hacer el esfuerzo y aprende rápido.
Objetivos de nuestro reto respecto a Carla
- Que Clara pueda ver sus ingresos y gastos de manera sencilla.
- Que pueda compararlos de una manera fácil con otros periodos.
- Que pueda acceder a las categorías en todo momento y pueda hacer comparativas al instante.
- Que pueda ver una evolución de sus gastos e ingresos con gráficas que le ayuden a entenderlo mejor.
Flowcharts (flujos de usuaria)
Bien, ahora que ya tenia a nuestra User persona en mente, me puse a hacer los flujos de usuaria para tener clara la estructura de la app.
En el primero vemos el flujo de cómo consultar la evolución de los gastos y la de los ingresos. Y en el segundo, la utilización de un dropdown para comparar los gastos y los ingresos con otros periodos.
El objetivo de hacer flowcharts y el sitemap de la sección era visualizar estos procesos y tenerlos claros antes de empezar con los wireframes, gracias a esto todo es más fácil de desarrollar.
Sitemap
Utilicé esta herramienta para simplificar el proceso al máximo en la versión Desktop. Finalmente todo se redujo a 3 pantallas, en las que sucedía todo. El objetivo era facilitar las tareas a la user y hacer más eficiente el proceso. Como hemos visto en la web de BBVA, incrementar pantallas puede perjudicar la experiencia. Tenemos herramientas como los modales o dropdowns que nos facilitan no tener que cambiar de pantalla innecesariamente.
Antes de prototipar, para tener una idea clara de cómo van a ser las pantallas dibujé wireframes low, después seguí con este proceso pero ya en pantalla, desarrollando wireframes mid. Este proceso me ayudó a visualizar los elementos y a probar distribuciones diferentes.
Aquí vemos algunos de los wireframes low hechos a mano, en los que gracias al proceso hecho hasta ahora ya tenia bastante claros 😋.
Wireframes low
App
- Podemos ver el Dashboard en el que aparecen las dos secciones principales (gastos e ingresos), donde vemos el estado actual de nuestras finanzas. Podemos ver también las categorías y el acceso a la comparativa.
- En la sección de evolución de gastos e ingresos (ahorro), ya está definida la gráfica que nos permitirá seguir de manera sencilla nuestro ahorro seleccionando el mes que queramos en la barra superior.
- Podemos ver cómo será el proceso para seleccionar las fechas y hacer la comparativa con otros periodos.
Web
- Se puede apreciar la simplificación del Dashboard, así como ver las dos secciones en la misma pantalla.
- De esta manera resolví la sección de categorías, haciendo pequeñas cards que cambian de color cuando son seleccionadas.
Wireframes mid
Con los wireframes low definidos, el siguiente paso era pasarlos a mid, y dejarlos listos para darle la capa visual en high.
Este es un breve resumen del sistema de diseño que confeccioné durante el proyecto.
Durante el prototipado utilicé Atómic design para la organización de los elementos, de esta manera el diseño quedó mas consistente y se optimizó la organización durante el proceso del mismo. Pero vamos a ver el sistema:
Estilo — Colores
Estilo — Tipografías
Estilo — Grid
Utilicé una grid 1169px de 12 columnas para la versión Desktop combinada con una retícula de 8px, para app una de 2 columnas combinada con una retícula de 4px.
Componentes
Antes de dar la capa visual en alta, componeticé la mayoría de los elementos que aparecen en los wireframes. De esta manera se optimizó el flujo de trabajo en figma.
Veamos algunos ejemplos:
Desktop
Finalmente aquí tenemos el desglose de la versión Desktop, pantalla a pantalla. Los flujos comienzan en el dashboard (mi panel de control), desde aquí podemos ver ,ya en detalle, la información de los gastos e ingresos, seleccionando las categorías en la infografía interactiva, pero aun podemos profundizar mucho más.
Si entramos en cualquiera de las dos secciones nos encontraremos con cards de las categorías, en las que si hacemos click podremos ver todos los movimientos. Siempre podremos hacer comparaciones con otros periodos gracias al enlace que siempre tendremos presente. En las pantallas podemos ver cómo sería el proceso.
También vemos las secciones de evolución de gastos y evolución de gastos e ingresos (ahorro). Estas secciones cuentan con gráficas interactivas en las que se pueden activar y desactivar las características.
App
Y aquí tenemos el desglose de la versión App. En esta se puede apreciar la simplificación de los procesos, así como los modales y los dropdowns que nos permiten no tener que cambiar de pantalla constantemente. En este caso las gráficas están mas simplificadas que en su versión desktop, pero mantienen los elementos principales para que sean comprensibles.
Prototipo interactivo
Grabación del prototipo interactivo de la App, en el vemos como una user navega por varios de los flujos creados para este reto
Gracias a este reto he podido sumergirme y conocer de cerca Openbank, ver sus lineas de diseño, sus colores primarios, su tipografía, cómo están construidos sus layouts. La fase de research me permitió conocer un poco de su historia, su rediseño y el dinamismo del que ahora dispone su branding.
Después de analizar, desglosar, construir, pensar, idear, dibujar y crear una sección totalmente funcional que cumple los objetivos que el briefing planteaba, puedo decir que el reto está superado.
Futuribles
Cómo futuribles podríamos implementar nuevas funcionalidades que dieran mas detalle, por ejemplo gráficas a tiempo real, o una previsión de gastos e ingresos a futuro.
Sin más, me despido, nos vemos en la próxima, ¡gracias por la atención!
¡En breve más!
