Rediseñando una dashboard bancaria
Arquitectura y Design System
Afrontamos esta vez el estudio de un diseño de página transaccional de un usuario de banco y su operativa online.
El modelo del que partimos es un ejemplo desactualizado de este tipo de dashboard en concreto de Deustche Bank 👇🏻👇🏻👇🏻
Para la recomposición nos encomiendan tener en cuenta los siguientes puntos:
• Disponer de más información de valor añadido para el cliente.
• Mejorar Usabilidad.
• Mejorar el look&feel.
• Mejorar la venta cruzada.
• Mejorar navegación.
• Más engagement y proximidad con el cliente.
• Añadir nuevas funcionalidades.
Nuestro proceso
Me gusta empezar cualquier reto con post it en la mesa, rotuladores, portaminas y mi cuaderno, que soporta estoicamente los primeros apuntes del research.
En este caso establezco las principales líneas de actuación y asigno a cada una de ellas varias dinámicas que me permitirán extraer lo que buscamos para rediseñar la dashboard de Deustche.
En base a las primeros esquemas de trabajo seguiré los siguientes pasos para desarrollar la nueva imagen del banco en tiempo reducido:
- Desk research
- Benchmark
- insigths y user persona
- Análisis heurístico
- Arquitectura y wireframes
- Prototipo
- Design System
- Conclusiones y futuribles
¡Vamos allá!
Desk Research
Los clientes de banca online crecerán más del 50% en el mundo en 2021
Con este titular se resume la tendencia global, especialmente atendiendo a factores pre, during y post pandemia. No podemos ignorar que ganarán la batalla aquellos que estén mejor preparados para adaptar totalmente sus servicios a una buena usabilidad y una experiencia altamente personalizada.
Es por eso que fijamos nuestra atención en un desk research que nos aporte una amplia visión de lo que más valoran los usuarios de banca online y los datos que definen la situación actual de servicios.
El avance tecnológico que ha experimentado en los últimos años ha hecho casi innecesario el desplazamiento a la oficina. El informe State of Mobile 2020 elaborado por la plataforma de análisis App Annie señala que en 2019 los consumidores accedieron a aplicaciones relacionadas con las finanzas más de un billón de veces a nivel mundial, un 100% más que en 2017.
Otros informes y estadísticas confirman desde hace años una tendencia que salpica también a las entidades financieras:
Puntos claves extraídos del Desk Research
Estos son los aspectos más destacados de nuestra inmersión en el tema mediante una investigación exhaustiva y necesaria siempre para empezar a formar un escenario real sobre el que trabajar:
- Un 83% de los españoles con cuenta bancaria operan a través de algún dispositivo online.
- El número de oficinas decrece, más de un 40% entre 2008 y el primer semestre de 2018 en España.
- El número de usuarios de banca online supone el 53% del total de internautas.
- La crisis del Covid-19 ha disparado los pagos digitales, tendencia que se mantendrá en el futuro, según el último informe elaborado por Capgemini, Covid19 y el Consumidor de Servicios Financieros.
- Un 47% de los españoles consultados afirma haber aumentado el uso de pagos digitales durante la pandemia.
- El segmento de consumidores de entre 61 y 65 años ha elevado su uso un 36% (37% a nivel mundial) y los de más de 66 años, un 30% (33% a nivel mundial)
- Cada vez con mayor frecuencia, se está utilizando para obtener información y comprar y solicitar productos financieros, donde el móvil está siendo el canal más utilizado.
- Según el Índice de Economía y Sociedad Digital (DESI), las operaciones más habituales que realizan los clientes de banca digital son la consulta de saldo y de movimientos, transferencias y el pago de facturas y recibos.
- State of Mobile 2020 detalla que una buena experiencia de usuario puede hacer que comprar acciones o transferir dinero mediante un smartphone sea tan divertido como subir de nivel en un juego o tan atractivo como las redes sociales.
- El éxito de la banca móvil deriva de su accesibilidad, transparencia, facilidad y el crecimiento imparable de los servicios.
- De cara al futuro inmediato, en el caso de España, el informe de Capgemini destaca en general el alto uso de los cajeros (un 47% los seguirá usando tras la pandemia versus un 33% mundial) y de apps del banco (61% frente al 55% en todo el mundo), aunque el uso de los asistentes de voz es más bajo (15% en lugar del 21%).
Insight 🔍: Según el Índice de Economía y Sociedad Digital (DESI), las operaciones más habituales que realizan los clientes de banca digital son la consulta de saldo y de movimientos, transferencias y el pago de facturas y recibos.
Benchmark
El entorno: en busca de la mejor usabilidad del mercado…
Mejores valorados por los usuarios
Tal y como afirma un estudio sobre calidad bancaria elaborado en julio de 2020 por el comparador financiero HelpMyCash.com, la operativa online es el servicio bancario mejor valorado durante el confinamiento y el banco con la mejor nota es Openbank, una entidad exclusivamente digital.
1.-Openbank, el banco con la mejor operativa online.
De los servicios bancarios valorados en la encuesta del comparador, la operativa online fue el mejor puntuado. “Los clientes están satisfechos con la banca online de su entidad, por lo que la banca anda en la buena dirección”, opinan desde HelpMyCash.com, y es que los clientes evaluaron con una nota media de 3,7 sobre 5 el servicio de banca online de las entidades en España.
Openbank, el banco de naturaleza puramente digital propiedad de Banco Santander, fue la entidad mejor valorada en la encuesta de satisfacción sobre la operativa online, con una puntuación de 4,1 sobre 5.
2.- El segundo del ranking fue Bankinter, que obtuvo una nota de 4 sobre 5. La entidad, que además comercializa la cuenta nómina más rentable del mercado, registró un crecimiento del 72% en la captación online de clientes desde el 13 de marzo de 2020.
3.- Le sigue ING, con una valoración de 3,8 sobre 5 en operativa online. Según el banco naranja, el nuevo escenario generado por el covid-19 ha permitido a la entidad batir un récord en la entrada de nuevos clientes. En julio, el 75% de las casi 24.000 aperturas de cuenta en ING se hicieron a través de Internet.
4 y 5.- BBVA y el Santander, por encima de CaixaBank.
De los tres gigantes bancarios, son BBVA y el Santander los que cuentan con una mejor operativa online según sus clientes. Ambas comparten una puntuación de 3,7 sobre 5.
No sorprende que BBVA obtenga una buena valoración en su negocio online. La entidad azul es un claro ejemplo de apuesta por la digitalización, estrategia con la que ha conseguido que más del 70% de sus clientes interactúen desde la banca digital. Banco Santander tampoco se queda atrás, ya que el 69% de sus clientes ya opera digitalmente.
6.- CaixaBank, por su lado, que ha obtenido una valoración de un 3,6 sobre 5 en operativa digital, contaba al cierre de junio de 2020 con casi un 65% de clientes digitales; sin embargo, es de las tres entidades la que suma un número más elevado de clientes digitales en España: siete millones en total, cifra que se ve aumentada en cuatro millones más tras la fusión con Bankia.
Atractivos de la banca digital y la operativa online
La inclusión de los pagos inmediatos a través de Bizum, la posibilidad de abrir una cuenta o realizar toda la operativa bancaria sin necesidad de acudir a una oficina de forma presencial, la modernización de cajeros (CaixaBank multiplicará el número de terminales que permiten retirar efectivo mediante el reconocimiento facial) o la identificación biométrica en las apps son algunas de las innovaciones tecnológicas que se han implementado para mejorar la experiencia del cliente al interactuar con el servicio de banca digital. En la encuesta de satisfacción de HelpMyCash.com, los clientes bancarios puntuaron a la banca española con una nota media de 3,6 en innovación tecnológica.
La seguridad en las transacciones online también ha sido una prioridad para la banca durante la pandemia, cuando se disparó el número de compras online y también el de ciberestafas. BBVA, por ejemplo, ha sido el primer banco en desplegar de forma masiva el nuevo proceso de autenticación en las transacciones electrónicas recogido por la normativa PSD2, que exige una doble verificación del cliente para validar la compra.
EVO Banco fue pionero en la creación de un asistente bancario que utiliza inteligencia artificial y machine learning, y que es capaz de responder y asesorar con un lenguaje natural en lengua castellana. En breve presentará algunos avances en este servicio, así como otros nuevos.
La preocupación y el trabajo realizado para dar una respuesta adecuada al cliente en la disrupción tecnológica en la banca han tenido el reconocimiento internacional de The World Finance, que concedió a EVO el premio como el banco más innovador de Europa en 2019. El jurado valoró positivamente, “la propuesta de EVO con soluciones que los clientes pueden integrar directamente en su vida diaria para ayudarles a gestionar su dinero de forma sencilla y eficaz”.
Destacados del benchmark🔍:
1.-Pagos bizum
2.-Abrir cuenta de manera sencilla
3.-Operativa online de transferencias+consulta saldo+recibos domiciliados.
Comparativa de ventajas y desventajas por entidades
Una vez hemos tomado nota de los aspectos más llamativos para los usuarios de cara a destacar aquello que más utilizan o sobre lo que más valoran a una entidad bancaria, hacemos un recorrido visual inspiracional de la competencia.
Moodboard: capa visual de la competencia
La banca online ha impulsado a todas las entidades a modernizar su imagen. En un sector donde hasta ahora se ha apelado a la seriedad y a la sobriedad en todo lo referente al branding, la imparable revolución tecnológica se ha ligado de forma muy estrecha a la captación de un público más joven y dinámico.
En el caso de Deutsche tenemos que apelar aún al tono elegante y robusto de la banca, ¡y además alemana! menuda combinación. No podemos pasar por alto que se quiere mantener un enfoque estético marcado por la sensación de estar en una entidad seria y fuerte.
Sin embargo el nuevo público pide algo más de cercanía y frescura.
Por eso recorremos algunos de los bancos con las propuestas más interesantes:
Con estas muestras recogidas mi siguientes pasos son traducir con la extracción de insights, elaborar un user persona básico, y finalmente realizar un análisis heurístico de la pantalla que vamos a retocar. Debemos tener claro lo que sobra y lo que falta para poder accionar los mecanismos adecuados en el diseño final, siempre pensando en la usabilidad.
Insights y User persona
Recopilamos las claves de la investigación en una serie de insights y eso nos permite además abocetar un par de arquetipos bien diferenciados que trasladamos a unos sencillos user persona.
Insights:
- Operaciones más realizadas online: Transferencias, consulta saldo, gestión de recibos.
- El segmento de consumidores de entre 61 y 65 años ha elevado su uso un 36%.
- Aumenta exponencialmente el uso de pagos digitales y el uso de las app.
Protopersona:
En base a los tres insights que hemos extraído de la investigación secundaria realizada mediante desk research y benchmark, componemos una idea muy básica del usuario de nuestra futura dashboard.
Hemos supuesto en base a hipótesis informadas que tendríamos dos tipos de arquetipo, dividiendo de forma muy general sobre todo en base a rango de edad.
El target más joven de la entidad tendría posibilidad de operar en oficina pero es una dinámica eliminada de las rutinas de este tipo de público. Sus horarios de trabajo no son compatibles con la apertura de los bancos, entre otros factores. Operar desde la app es cómodo y rápido. Está interesado en invertir y en la compra de nuevos productos como la criptomoneda.
Herminia representa al usuario de más edad. Apegado al trato directo en oficina, pero ya con dificultades y pereza para trasladarse para operaciones pequeñas. Se aventura con la operativa online pero necesita que la ayuden, diseño intuitivo y simple, además de accesibilidad óptima por su visión reducida.
Análisis Heurístico
Comenzamos a trabajar en el tablero que nos ocupa.
Para obtener claridad en la recomposición de la dashboard del nuevo usuario de DB, hacemos un análisis heurístico tomando como referencia en esta ocasión las 10 reglas de Nielsen. No contamos con toda la información sobre la navegación por una cuenta particular de DB, con lo que nos limitamos a analizar las funcionalidades y la imagen de la que disponemos. Lo hacemos en base esos diez principios que comentaba:
Volvemos a la dashboard original y empezamos a recorrer los pain points que resultan más visibles y sobre los que aplicaremos posteriormente la mejora. Como veremos resulta necesario en particular aplicar una intensiva acción de reorganizar la arquitectura de la información, prácticamente inexistente en la originaria.
Todo el desarrollo tecnológico que una entidad bancaria se proponga llevar a cabo, debe traducirse en una amplia oferta de productos y servicios para el cliente. Pero éstos deben poder contratarse a través de la app y de los canales digitales de forma muy sencilla.
Para fomentar el uso y la conversión debemos atacar los puntos débiles de la dashboard rediseñando cada uno de ellos, reorganizando para que el ahorro y las finanzas resulten accesibles a los clientes, con una gestión que podrán hacer en cualquier momento y lugar, desde su banca móvil o electrónica.
Envío de dinero, gestión de cuentas, solicitar un préstamo, suscribir un fondo… las posibilidades son casi infinitas. Por eso nos ponemos el mono de trabajo para las siguientes tareas:
- Reagrupar y renombrar en grandes bloques de operativa bancaria
- Simplificar el diseño aplicando la estética mediante el minimalismo
- Fijar referencias y estándares.
Pasamos a establecer flujos de navegación plausibles y comenzamos con los wireframes.
Arquitectura de la información y Wireframes
En un caso tan claro como este, en el que tenemos que reorganizar mucha información que está muy diseminada, la mejor opción es realizar diferentes dinámicas para experimentar con la clusterización de los conceptos y no caer en los mismos errores de la original.
Aquí mis pasos con la arquitectura y los wireframes 👇🏻
1-Decidir con qué nos quedamos y por qué.
Un Moscow resulta siempre esclarecedor. Es la mejor manera de ir equilibrando las decisiones de lo que escogemos. Anteriormente ya habíamos definido cuáles son los insights y los imprescindibles de la dashboard. Con esta dinámica nos enfocamos para completar información y añadir funcionalidades que el tablero no tenía. Para no abigarrar demasiado y volver a confundir al usuario no nos queda más remedio que elegir.
2-Mapa de sitio
Una vez tenemos clara la lista de funcionalidades componemos el mapa de sitio que nos dará una idea de los flujos de navegación que seguiría el usuario para acceder a la operativa o consulta que requiere en cada momento.
3-Wireframes
Traducimos todo eso en wireframes para colocar según las leyes del diseño y la arquitectura, observando escrupulosamente que la nueva propuesta ofrezca una correcta usabilidad y accesibilidad que estudiaremos también junto a la guía de estilo y sistema de diseño.
Estamos preparados. ¡Abrimos Figma!
Prototipo
Hemos trasladado nuestros apuntes y wireframes a alta fidelidad con la herramienta Figma, y lo hemos hecho facilitándonos la tarea durante el proceso y para posteriores revisiones e iteraciones.
- Eligiendo los fundamentals para el sistema de diseño
- Componetizando
Este es el resultado con el que facilitamos y personalizamos la usabilidad de la dashboard de Deustche Bank:
Hemos implementado los valores añadidos que se requerían en el briefing, como mejorar la venta cruzada y añadir nuevas funcionalidades:
Para finalizar trabajamos el Sistema de diseño de DB con el que sentaremos las bases de unificación de la imagen corporativa, y con el que se obtiene una optimización de los recursos y tiempo de los equipos de diseño, así como el mantenimiento del soporte digital de la entidad bancaria.
Sistema de diseño
Realizamos un benchmark recorriendo algunas de las web de DB a lo largo del mundo y enseguida vemos que no hay consistencia y que el sistema de diseño no está todavía unificado.
Aunque se ha producido un cambio de letra (con la creación de una tipografía específica para el banco) y podemos observar una tendencia hacia la simplificación, parece que resulta necesario introducir un sistema único.
Hago un ejercicio muy elemental de definición teniendo en cuenta que sólo hemos diseñado una pequeña parte de lo que sería el sistema de soporte digital del banco, que admite mucho desarrollo en cuanto a justificación conceptual y por supuesto una amplia biblioteca de componentes.
🌐 Fundations: must have de la capa visual
Los básicos de cualquier sistema de diseño que se precie son al menos cinco grandes pilares en los que se sustenta todo un sello de identidad (Colores, tipografía, grid, espaciado y elevación). Podríamos añadir el tono en base al copy. Para este caso de estudio nos hemos quedado con cuatro conceptos que nos sirven por el momento para recopilar los fundamentos de nuestra pantalla de Deustche:
-Colores: hemos partido del primario del logo original para crear una gama en consonancia. Se apoya en los valores de seguridad, fortaleza y seriedad con la que esta entidad bancaria se ha vinculado. Nos permitimos colores de acento más llamativos en alguna tipografía y en cards o CTas.
-Tipografía: Mantenemos la arial original del Logo que se perpertúa en la actualidad en DB, pero introducimos la Lato en el resto de la pantalla. Es clara y algo más redondeada pero no disruptora con la imagen de marca.
-Grid: El Grid Full Width se construye dividiendo la anchura de la pantalla en 12 columnas del mismo tamaño, con 30 de gutter.
-Elevación: Dos tipos de sombra especificadas en fundations, para botones o cards.
🔲 Components
Cuando diseño lo primero que voy haciendo sea cual sea el proyecto, más o menos grande o pequeño, es ir componetizando elementos. Siguiendo los conceptos del Atomic Design voy creando:
- Los átomos.
- Las moléculas.
- Los organismos.
Así se traduce esta componetización en Figma:
Vemos en detalle algunos de los elementos que hemos creado y que formarían parte de un sistema de diseño con muchos más componentes:
Átomos/ #iconos
Moléculas/ #Buttons
Organismos/ #Menus.selectores
Organismos/ #cards
Conclusiones y Futuribles
Reflexiones
Tras el research y la toma de contacto con el mundo financiero a nivel usuario medio, las sensaciones con respecto a la captación de clientes y la conversión hacia la compra de nuevos productos tiene una palabra clave: una mayor personalización.
En el caso de Deutsche más si cabe, porque es una entidad muy ligada a la imagen de banco de toda la vida. Marcado por el ámbito en el que opera, su rentabilidad, y la sobriedad de su tono e imagen corporativa, podemos pensar que sólo conseguirá atraer a un cliente de edad madura o avanzada.
Es por eso que me he centrado en mantener una imagen sólida, pero adaptada a nuevas necesidades, y sobre todo iterable.
Futuro
Como futuribles estudiaría la posibilidad de crear una línea exclusivamente online, una cuenta 100% digital de DB, al igual que ya hacen entidades como Bankia que tienen su línea de negocio basada en los nuevos bancos que operan solamente online.
Sería interesante además contar con un espacio colaborativo de opiniones y encuentros, tanto de usuarios como empleados en la plataforma, donde intercambiar impresiones se convirtiese en una herramienta útil para recoger la experiencia de usuario y mejorar la calidad del servicio.
Por último asistencia virtual más desarrollada y que suponga una verdadera ayuda, cercana y de uso intuitivo, mejoraría significativamente la atención y por lo tanto toda la user experience.
Gracias por leerme 📉💙
