Design challenge, UX/UI fintech para millenials en un sólo día

Disponía de una sola jornada para llevar a cabo el reto de crear el dashboard y el flujo de interacción de transferencia de una App para un banco ficticio.

¿Cuál era el reto?

En sólo un día de trabajo, crear el branding para nuevo banco dirigido a jóvenes que únicamente ofrecerá servicios mobile y online. Esta entidad pretende ser una alternativa a la banca tradicional que cuenta con oficinas, comisiones y trámites complejos.

Quiere ser un banco cercano, creativo y moderno, que mejore la experiencia de sus clientes en el sector Fintech, por eso, debe tener un diseño limpio y actual, adaptado a las nuevas tecnologías y que rompa todas las barreras vistas hasta ahora.

¿Y los objetivos?

En primer lugar había que diseñar una solución creativa y usable para el dashboard de la App en Android en la que apareciesen los siguientes enlaces:

• Estado de mis finanzas / Saldo
• Cuentas: Mostrar mis cuentas y el saldo de cada una de ellas
• Tarjetas (débito, crédito, etc.)
• ¿En qué gasto mi dinero? Categorías de mis gastos
• Mi préstamo contratado

En segundo lugar había que crear un flujo de navegación para cubrir el proceso de realización de una transferencia bancaria a través de la App.

También había que conseguir que datos complejos como lo son los financieros pareciesen amigables y que tuviese un diseño limpio y actual.

¿Cuál era el target?

Millenials, personas nacidas entre 1981–1996.‌

Overview

La mayoría de los usuarios no se sienten satisfechos con los bancos tradicionales, pero especialmente la generación millenial, acostumbrados a utilizar la tecnología de manera cotidiana y constante. Por eso, era de vital importancia en este proyecto despojar al aspecto y a la funcionalidad de la App de ese aire tradicional que hasta ahora poseen la mayoría de los servicios de este tipo.

¿Cuál fue el proceso de trabajo de research?

1. Realizar un desk research

Una parte muy necesaria a la hora de poner en marcha un proyecto de este tipo es recoger información a partir de estudios e investigaciones ya realizadas y que han publicado sus resultados.

Fuentes consultadas

• ¿Qué son las ‘fintech’ y por qué transforman a la banca?
• Las ‘fintech’ están transformando los servicios financieros y los bancos desarrollan estrategias para adaptarse mediante alianzas con las startups.
  Análisis del Informe creado por BBVA en el que habla sobre el mundo de las FinTech para poder comprender cómo están transformando el mundo financiero.
• Marketing Insider: How To Make Fintech Attractive To Millennials.
  Artículo que expone puntos importantes a tener en cuenta antes de diseñar productos FinTech para millenials.

2. B‌enchmarking

Decidí dividir en dos vías la tarea de benchmarking, por un lado analizar servicios novedosos como Revolut y por otro lado servicios financieros más tradicionales.

‌Revolut

Pone al usuario al centro del proceso de uso de la App. Ofrece notificaciones de gastos instantáneas, personalizar presupuesto, comprar e intercambiar criptomonedas en segundos y poder gastar y enviar dinero al extranjero al tipo de cambio real. Además da la opción de congelar y descongelar la tarjeta física.

‌

Banca tradicional

Analicé las características de las Apps mobile de las siguientes entidades financieras:‌

• BBVA
• CaixaBank
• ING
• EVO
• Ibercaja
• Banco Santander

Lo que pude comprobar al detenerme a analizar su contenido, los comentarios de los usuarios en Google Play y su aspecto visual es que todas ellas tratan de transmitir agilidad, fluidez y sencillez de uso pero la mayoría distan bastante de conseguirlo. El flujo de interacción que observé en estas Apps es rígido, largo y poco intuitivo, tal vez fruto de que parten de servicios físicos que se producen en oficinas a pie de calle y que no surgen de un comienzo virtual desde cero.‌

Este es el aspecto visual que poseen las Apps de dichas entidades:

3. MoSCoW

Utilicé la técnica de priorización MoSCoW para resolver los puntos “Must”, “Shoud”, “Could” y “Won’t” que el proyecto debería contemplar.

Esta técnica me permitió explorar otras funcionalidades que aunque no venían especificadas en el briefing podrían aportarle valor a la aplicación. Destacaban:

• Opción de realizar pagos a otras personas.
• Poder integrar pagos con Google Pay.
• Opción de comprar o intercambiar criptomonedas.
• Recibir dinero de personas cercanas a través del móvil.
• Realizar gastos en el extranjero con cambio real del país.

Y llegó el momento de buscar un nombre…

Para poder dar una solución al tema del naming recurrí a realizar un brainstorming, una lluvia de ideas que se lanzan cuando ya se tiene definido el reto.

Realicé una búsqueda de términos positivos que definiesen a la generación millenial y de todos los que encontré me quedé con los que me transmitieron más optimismo, frescura y sonasen mejor para incluir como nombre y leitmotiv del proyecto. Debía ser en inglés para que el abanico de público fuese más amplio.

Realicé pruebas y finalmente la palabra que sentí que mejor definía el concepto que se quiere transmitir fue UPBEAT. Tenía como sinónimos cheerful, optimistic. En música, up beat, significa ritmo, algo que también me parece muy adecuado para indicar que la App sigue el ritmo de una persona joven. Al pronunciarse el nombre también podría acercarse a la palabra App y resultar parecido a AppBeat.

Guía de estilos express

Como es lógico, en tan pocas horas es imposible definir una línea gráfica coherente, con nombre de marca, logotipo, colores, tipografía, etc. Pero bueno, en tan poco tiempo por lo menos conseguí darle un poco de forma a la capa visual.

Logotipo‌

Creé un logotipo muy sencillo y fácilmente reconocible. El gráfico con la flecha hacia arriba transmitía optimismo y se relacionaba con el término finanzas, a su vez tenía un toque positivo con la sílaba UP destacada con el magenta corporativo.

Tipografías

Las tipografias elegidas fueron la Ropa Sans y la Roboto. La Ropa Sans se utilizó en el logotipo y en títulos. Transmitía un aspecto actual y fresco, con formas redondeadas pero condensadas, con rasgos muy pecualiares y con personalidad. Aportaba un aire moderno y a su vez tenía buena legibilidad.‌

La Roboto Condensed combinaba de manera elegante con la tipografía de marca y daba mucho juego al tener ambas la altura de la “x” en igual proporción. Esta fuente se utilizaba para todos aquellos casos que no fueran títulos.

Colores

La gama de colores elegida hizo que la temática bancaria se viera aligerada y dotada de dinamismo. El público al que iba dirigida la aplicación agradecería que gráficamente se desmarcase de lo establecido hasta el momento.

UI Dashboard para Android

En primer lugar realicé el wireframe del dashboard en baja, para poder distribuir las distintas funcionalidades.

‌

El dashboard, al estar dirigido a un público que se manejaba bien con la tecnología, decidí hacerlo muy limpio, sin fondos que distrajesen ni artificios. El protagonismo se centró en las cifras, de un simple golpe de vista se podía pasar de una cantidad a otra, estas estaban destacadas en magenta. La iconografía elegida era sencilla pero con un toque joven y de humor.

Destacaba en la parte central superior el elemento que informaba sobre el saldo total y tres bloques inferiores con la información de las cuentas, los préstamos y los gastos. En el menú sticky inferior se podía acceder al gráfico de ahorros, información de tarjetas, opción de transferir dinero al instante y hacer transferencias.

¿Cómo resolví el proceso de transferencia?

Para realizar la transferencia primero realicé un flujo de interacción y después diseñé el prototipo en alta definición de las dos pantallas que serían necesarias.

Flujo de interacción

Para poder realizar el diagrama de flujo me apoyé en la información recogida en el Benchmarking y en el MoSCow, a través de esas dos técnicas pude comprobar que el proceso de realizar una transferencia en la mayoría de las Apps existentes es largo y tedioso para el usuario.

En la imagen inferior se muestra la ruta que seguiría el usuario para poder realizar una transferencia con las diferentes opciones en las que tendría que elegir entre tipos de cuenta de la que elegirá el dinero y si la cuenta a la que va a hacer la transferencia es una cuenta que ha utilizado en otras ocasiones o es una nueva cuenta. También tenía la posibilidad de programar que se estableciese una periodicidad para realizar esa transferencia, aunque esta funcionalidad no dio tiempo a reflejarla en el prototipo final.

‌

Prototipo de transferencia en alta

Interacción

Heurísticas que cumple el Dashboard de UpBeat

A menudo encontramos soluciones gráficas para Apps que visualmente son muy atractivas pero que distan mucho de las características que deben cumplirse desde la perspectiva de UX. Por eso abordé el tema del diseño y la interacción desde las siguientes heurísticas.‌

Visibilidad del estado del sistema

Tratándose de una aplicación que manejaba dinero, era de extrema importancia poder ver en todo momento que el sistema se estaba comportando de manera estable y si había algún problema, informarlo al usuario de manera clara y concisa.‌

El usuario, a la hora de realizar la transferencia, vería un menú de progreso horizontal sobre la operación en el color primario magenta que iría acompañando a cada paso que fuese cumpliendo hasta llegar al final al botón de “enviar”. Este menú le indicaría que todo está funcionando correctamente y aportaría seguridad en el proceso.

‌Coincidencia con el mundo real

El lenguaje utilizado sería fácilmente comprensible para el usuario, no se empleó terminología técnica sino un lenguaje llano y sencillo.

El usuario tiene el control

‌Una vez que hubiera elegido los datos y le hubiera dado a enviar, tendría la opción de volver atrás, cancelar o continuar. Si le hubiera dado a continuar, podría decidir si quería cancelarla eligiendo la opción “Deshacer”.

Conclusiones

Abordar un proyecto tan interesante en tan pocas horas genera mucha tensión y hace que te quedes con ganas de profundizar más en el tema para poder mejorar la calidad del proyecto.

Tanto el dashboard como el proceso de realizar una transferencia se podrían implementar y enriquecer si hubiera habido tiempo para realizar un test con usuarios. También me gustaría añadir que hay opciones muy interesantes que han aparecido en el MoSCoW que se podría estudiar añadir, tales como:

• Comprar e intercambiar criptomonedas.
• Realizar compras en el extranjero con el cambio real del país.
• Utilizar a Google como pasarela de pago.
• Poder recibir dinero de contactos frecuentes.