Looking For Fashion?




Monee Bank: un banco inclusivo


Primero vamos a desarrollar un breve índice de aquellas técnicas que vamos a usar para afrontar esta challenge.

El objetivo consiste en realizar un dashboard para milenials que contenga:

  • Saldo actual
  • Visión global de Cuentas y Tarjetas
  • Un control de los gastos mensuales del usuario.
  • Ofrecer producto del banco.

Para ello, decidí:

  1. Realizar un benchmarking para informarnos de lo que están realizando otras personas.
  2. Definir a los usuarios y las problemáticas principales.
  3. Realizar un desarrollo de wireframes para establecer una buena arquitectura de la información.
  4. Desarrollar una guía de estilos que seguir de la marca.
  5. Desarrollar un prototipo.
  6. Establecer futuribles de aquellas cosas que aún nos quedan por hacer.

Y ahora ¡manos a la obra!

Benchmarking

¿Qué están haciendo otros?

Los nuevos neobancos están apostando por aplicaciones para llamar la atención de las nuevas generaciones. En resumen, los puntos más llamativos que se emplean son:

  1. Optan por un diseño muy sencillo y limpio.
  2. Usan las imágenes para tener un apoyo visual y facilitar la comprensión de los contenidos
  3. Apuestan por guiar al usuario durante la navegación por la app.
  4. Utilizan colores en tonalidades pastel.

Dashboard

La mayoría de los bancos han decidido usar un menú local de navegación, que siguiendo la ley de Fitts, es una buena práctica ya que se trata de la zona más cercana al usuario.

Por otro lado, divide el dinero en distintos espacios divididos con imágenes que ayudan al reconocimiento y comprensión de los apartados.

Asimismo, de un modo muy claro, en la parte superior de la pantalla se le da feedback al usuario de donde se encuentra haciendo caso a los recorridos visuales que seguimos.

Asimismo, se ofrecen distintas garantías que son importantes a la hora de fidelizar al cliente.

‌Tus movimientos‌

A la hora de comunicar los movimientos de la cuenta optan por usar una forma visual.

Un ejemplo de esto es lo que realiza Simple que, mediante fotos, te permite llevar un seguimiento más claro de tus movimientos. Como se dice: “una imagen vale más que mil palabras”.

Otro ejemplo es emplear motivaciones para fomentar el ahorro y el empleo de distintas herramientas que tiene la aplicación.

Otro claro ejemplo es esta buena práctica que emplea Monese que muestran un gráfico claro de los ingresos que han tenido que se explica más en la parte inferior. Esto permite que las personas tengan de un modo muy accesible la información global y que, si el usuario lo desea, pueda ver de un modo más específico.

Seguridad

Obviamente, una de las principales preocupaciones de los usuarios es que su dinero esté seguro, por ello, es muy importante hacer hincapié en este aspecto.

Sin embargo facilitar lo máximo posible que esta seguridad no sea muy tediosa también es importante para los usuarios.

Una buena práctica la encontramos en N26 que emplean las huellas dactilares tanto para entrar en la cuenta bancaria como para hacer algunas transacciones. A parte de ser seguro, es muy cómodo debido a que muchos dispositivos móviles e incluso ordenadores llevan incorporado un lector de huellas digitales.

User persona

El usuario en el centro del proceso de diseño.

Sabiendo que nuestro target es un público entre los 22 y 35 años y con todo el research que se nos ha proporcionado a la hora de realizar esta prueba he sintetizado toda al información desarrollando un arquetipo de un usuario promedio.

Sintetizando además aquellos problemas que nos trasmitían los jóvenes se desarrolla un breve journey de cuáles son sus principales pain points a la hora de tener en cuenta y realizar una solución.

Accesibilidad

Un banco inclusivo

El 15% de la población son personas con algún tipo de diversidad funcional. Y sabiendo que los requisitos de accesibilidad cada vez son más estrictos para los bancos e instituciones públicas, por ello es importante seguir unas breves recomendaciones para lograr mejorar estos aspectos:

‌Discapacidad visual:‌

Para cumplir con ello, se ha empleado una tipografía que facilita la legibilidad y un color que cumple con el contraste necesario para facilitar la legibilidad. Asimismo, se emplea un tamaño de párrafo 18 píxeles que es lo que se recomienda para evitar que éste no se pueda leer con claridad, y aquellas de un tamaño inferior se encuentran con un peso superior.

Entendiendo que existen personas con problemas de reconocimiento de colores, Para categorizar la información se emplean formas distintas (forma de los botones) y pesos distintos de la tipografía.

Discapacidad auditiva

Debido a que se trata de una app con vídeos tutoriales donde se explican de in modo claro las funcionalidades de la aplicación y distintas acciones que puedes llevar a cabo con el banco (préstamos, hipotecas, etc.) se pondrán subtítulos opcionales para aquellas personas con este tipo de discapacidad.

‌Discapacidad motora‌

Las personas con discapacidad motora presentan dificultad sobretodo a la hora de la interacción táctil. Por ello es muy importante ofrecer alternativas de entrada más simples como son los comandos de voz.

‌Discapacidad cognitiva

Los iconos son una forma visualmente atractiva de representar la función de un elemento de la interfaz. Sin embargo, no siempre son perfectamente reconocibles, por ello aparece una etiqueta que exprese el significado de los iconos.

Por otro lado, para tener en cuenta a aquellas personas con trastorno del espectro autista, se ha intentado usar unos colores con tonalidades no muy saturadas.

Por último, teniendo en cuenta a aquellas personas con dislexia, se tiene en cuenta que la app tiene mucho apoyo visual.

Wireframes

¡Hora de idear!

Para evitar la gran carga cognitiva, he desarrollar un menú con tres apartados principales:

  1. Mis cuentas: allí donde aparecerá lo actual y lo futuro.
  2. PFM: donde se encuentra el historial de gastos
  3. Tutoriales: donde se da un soporte externo para optimizar

Como se muestra en el wireframe, aquí se muestran las acciones presentes y las futuras. ‌Desde esta pantalla, con un simple vistazo, podemos ver el saldo actual, los espacios que tiene la persona para poder dividir su dinero y ahorrar más, y las transferencias favoritas y la posibilidad de hacer una nueva.

En la pantalla de ayuda se muestra una sección de tutoriales donde se explica de un modo visual. Así mismo, las preguntas más frecuentes y la posibilidad de ser un atendido por un asistente.

Por último, la sección de historial donde se muestra de una forma muy visual los gastos que se han tenido ese mes.

Guías de estilos

¡Ponle un poco de color a la vida!

Antes de ponernos a desarrollar la idea, es muy importante tener en cuenta que patrones de estilos vamos a seguir.

Se ha optado por usar un logotipo. Para darle mayor sensación de modernidad se han borrado los huecos de las letra y se ha redondeado las letras de la tipografía.

Se ha optado por la tipografía Inter debido a que tiene la altura de la x más alta lo cuál hace que sea más legible en tamaños pequeños y en pantallas.

Para dar una sensación de claridad se han empleado distintas tonalidades de blanco y grises como colores primarios. Además, se ha tenido en cuenta que tengan suficientemente contraste para que sea accesible para aquellas personas con visibilidad reducida.

Con respecto a los colores de acento, he tomado colores pastel para darle un poco de color a la aplicación. Para tener en cuenta a las personas del espectro autista, se ha intentado usar unos colores con tonalidades no muy saturadas.

El prototipo se ha desarrollado en un frame de IPhone con una grid de 8 px.

Prototipo

Tr tr tr… ¡tadá!

Os muestro el dashboard que he diseñado para Monee Bank.

Como se observa en el prototipo, se muestran las siguientes funciones: Saldo actual, una visión global de Cuentas y Tarjetas y la posibilidad de hacer transferencias.

‌Por el menú inferior se permitiría llegar a una pantalla donde se muestra el control de los gastos mensuales del usuario. Además, por otro lado se da acceso a la ayuda donde se ofrece productos del banco de un modo indirecto mediante tutoriales que te enseñan como usar la app y distintas formas de financiación.

Futuribles

¿Y después?

Sería muy interesante testar el prototipo con distintos usuarios. Por un lado sería realizar un test de usabilidad para poder medir la facilidad de uso del prototipo. Por otro lado sería también recomendable realizar un test de concepto para ver si los usuarios valoran de un modo positivo el mero hecho de que se hayan añadido tutoriales.

La funcionalidad de los tutoriales debería de estar más desarrollada y, debido a una limitación temporal, diseñar unos filtros para que sea más fácil encontrar la información que se desea.

‌Por último, nunca hay que olvidar que tras el testing siempre nos queda iterar el prototipo para poder seguir mejorando.

Gracias por leerlo hasta el final, espero que os haya gustado. 


Monee Bank: un banco inclusivo was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.