4U
Rediseño de una banca mobile, online y moderna.
Metodología
Research + Método Pure + Wireframing + Prototipo
Skills
Benchmarking · Método Pure · Accesibilidad · Wireframes · Guidelines · Prototipo
Herramientas
Gitbook · Papel y lápiz · Figma · Marvel · Zeroheight
Duración
3 días
Con 4U nace un banco cernano, online y preocupado por la experiencia de los usuarios. Para este reto, se propone diseñar un dashboard actual y un proceso de bizum mejorado.
¿Cómo es la banca tradicional?, ¿y la banca online más moderna?
Benchmarking
El primer paso fue hacer un estudio de mercado de bancos como BBVA, CaixaBank, Santander, Revolut, N26 y Monese.
Método Pure
A continuación, gracias al método Pure se buscaba identeficar qué tareas son más complicadas de realizar por los usuarios en las apps de banca tradicional, para poder aplicar esta mejoras a nuestra app de 4U.
El método Pure se basa en analizar un proceso, es decir, una acción desarrollada en varias fases.
Un experto da una puntuación y clasifica la usabilidad de dicho proceso. Para este análisis debemos:
- Ponernos en lugar del usuario.
- Determinar la tarea. "Quiero ver mis gastos".
- Separar en pasos dicha tarea. "Abrir la app, introducir el usuario, buscar en el menú...".
Estas tareas se valorarán con una puntuación de 1 a 3 según:
A continuación aparece la parte más relevante del análisis:
Hacer un bizum
Pantalla 1: Usuario y contraseña. Fácil, además te permite entrar con reconocimiento facial.
Pantalla 2: Dashboard principal. Fácil, te permite ver de un primer vistazo el dinero de tus cuentas y tus tarjetas.
Pantalla 3: Abrir menú lateral. Difícil, hacer un bizum es algo habitual en nuestro target y la opción está escondida en el menú lateral.
Pantalla 4: Bizums realizados. Medio, se le da más importancia a los bizums realizados que al hecho de hacer uno nuevo: Enviar.
Pantalla 5: Enviar (contactos). Fácil, agenda y contactos recientes. Pantalla 6: Importe y concepto. Fácil, pantalla simple conlos dos inputs necesarios.
Gastos
Pantalla 1: Usuario y contraseña. Fácil, además te permite entrar con reconocimiento facial.
Pantallas 2: Dashboard principal. Fácil, te permite ver de un primer vistazo el dinero de tus cuentas y tus tarjetas. Además viene un enlace directo a tus gastos.
Pantalla 3: Gastos. Fácil, ves tus gastos organizados por categorías.
Pantalla 4: Gráfica evolución ingresos/gastos. Difícil, no se ve una gráfica de tus gastos de primeras, por lo que tienes que buscarla. Además en la gráfica no aparece ningún tipo de clasificación como si lo hacía en la pantalla anterior.
Para el rediseño se ha tenido en cuenta la accesibilidad, referida al color con su contraste y al tamaño de la tipografía.
Rediseño del dashboard: Wireframes
Gracias al research (benchmarking + método Pure) se busca:
- Mostrar las diferentes cuentas bancarias del usuario en el dashboard. Hacer scroll horizontal, la primera que sale es la principal.
- Mostrar la cuenta no solo con su número, sino con un nombre/ilustración a cada una de ellas, para que sea más fácil de identificar.
- Mostrar las tarjetas de forma visual. Hacer scroll horizontal, la primera que sale es la principal.
- Gráfica de gastos categorizados en el dashboard principal. Se hará scroll vertical.
- Indicar los últimos 2-3 gastos de cada una de tus cuentas a modo de listado.
- Pequeña gráfica de cómo va el mes.
- Menú inferior con labels, que nada quede escondido. Introducir la opción de bizum.
Rediseño del dashboard: Alta fidelidad
Prototipo
El diseño respeta el wireframe anterior, de modo que tiene las siguientes secciones:
Menu en sticky: Iconos familiarizados con el usuario acompañados de sus labels.
Tus cuentas: Cards con cada una de las cuentas de usuario. El nombre, junto con el icono, lo elige el usuario para que sea más fácil identificarlas. Además van acompañadas con los últimos movimientos según la cuenta que elijas.
Tus tarjetas: Cada una tiene la imagen real de la tarjeta física. Al igual que las cuentas, van acompañadas con los último movimientos.
Gastos: En primer lugar aparecen representados con una pequeña card donde se muestran los gastos e ingresos del último mes. Además, incluye una segunda sección más detallada donde puedes elegir la cuenta y el mes, apareciéndote los gastos desglosados por categorías.
Rediseño del proceso de Bizum: Wireframes
El wireframe tiene que tener:
- Opción de Enviar/Solicitar
- Agenda de contactos con bizum/introducir manualmente
- Input persona a la que se envía/solicita el bizum
- Input cantidad €
- Input concepto
- Opción de donación
- Una pantalla nueva después de introducir todos los datos que solicite en código para confirmar la transacción.
- Elección de la cuenta bancaria desde la que queremos hacer el bizum
Pantalla 1
- Enviar/Solicitar/Donar
- Seleccionar la cuenta desde que hacemos la transacción
- Opción para introducir el destinatario desde la agenda o manualmente CTA de Siguiente
Pantalla 2
La agenda es propia de la app. Aparecerán al principio 3 contactos recientes y todos los contactos que tenga bizum a continuación. (Se hace scroll vertical)
Pantalla 3
Es la pantalla 1 completada, con todas las opciones seleccionadas (Enviar + Cuenta de ahorros) y el destinatario elegido en la agenda.
Pantalla 4
- Resumen: Desde y Para.
- Input para introducir el importe. Aparecería el teclado numérico en la misma pantalla.
- Input para introducir el concepto. Aparecería el teclado de letras en la misma pantalla.
El usuario tiene que sentir seguridad, que tenga total libertad a la hora de moverse por la app bancaria, por ello era importante crear un dashboard y un proceso de bizum limpio y sencillo. Respecto a los futuribles serían:
- Testear el dashboard.
- Aplicarle las condiones para que sea el nivel más alto de accesibilidad.
- Mejorar la sección de gastos: establecer más categorías.
- Introducir el logo/nombre de 4U, ya que ahora no aparece y podría servir para cualquier banco.
- Crear un "camino" alternativo para hacer transferencias.