project_cover_bankia_acid

PROYECTO

Bankia Online Empresas

Rediseño UX

 

ROL

Product Designer (UX/UI)

PROYECTO

Bankia Online Empresas

Rediseño UX

 

ROL

Product Designer (UX/UI)

PROYECTO

Bankia Online Empresas

Rediseño UX

 

ROL

Product Designer (UX/UI)

RESPONSABILIDADES

Research

User flow

Wireframes y prototipado

Diseño de interacción

Diseño UI y apoyo en visual

RESPONSABILIDADES

Research

User flow

Wireframes y prototipado

Diseño de interacción

Diseño UI y apoyo en visual

RESPONSABILIDADES

Research

User flow

Wireframes y prototipado

Diseño de interacción

Diseño UI y apoyo en visual

COMPAÑEROS DE EQUIPO

Jorge Arriola (Diseñador UX)

Andrea Sanz (Diseñadora UX)

Adrián L. Viamonte (Diseñador UI)

Álvaro Paricio (UX lead)

COMPAÑEROS DE EQUIPO

Jorge Arriola (Diseñador UX)

Andrea Sanz (Diseñadora UX)

Adrián López Viamonte (Diseñador UI)

Álvaro Paricio (UX lead)

COMPAÑEROS DE EQUIPO

Jorge Arriola (Diseñador UX)

Andrea Sanz (Diseñadora UX)

Adrián L. Viamonte (Diseñador UI)

Álvaro Paricio (UX lead)

Contexto

El rediseño de Bankia Online Empresas (BOL-E) viene como paso natural dentro del plan de evolución de la entidad. El cliente había detectado cierta variabilidad en los arquetipos de sus usuarios, por lo que entendió la necesidad de un rediseño de la plataforma poniendo el foco en la personalización, la mejora en la usabilidad, sin olvidar el reto de aumentar las ventas de productos y captar a nuevos clientes. 

Contexto

El rediseño de Bankia Online Empresas (BOL-E) viene como paso natural dentro del plan de evolución de la entidad. El cliente había detectado cierta variabilidad en los arquetipos de sus usuarios, por lo que entendió la necesidad de un rediseño de la plataforma poniendo el foco en la personalización, la mejora en la usabilidad, sin olvidar el reto de aumentar las ventas de productos y captar a nuevos clientes. 

Reto

Comenzamos este proyecto con un objetivo claro: redefinir por completo la experiencia de usuario de BOL-E, una plataforma planteada inicialmente como un catálogo de productos y servicios, poco optimizada y con procesos complejos y tediosos.

¿Cómo podríamos conseguir que cada tipología de usuario consiguiera tener una experiencia ágil y personalizada, basada en la información que necesita en cada momento concreto (consultas) y en las tareas que realiza con más frecuencia (operaciones)? 

Reto

Comenzamos este proyecto con un objetivo claro: redefinir por completo la experiencia de usuario de BOL-E, una plataforma planteada inicialmente como un catálogo de productos y servicios, poco optimizada y con procesos complejos y tediosos.

¿Cómo podríamos conseguir que cada tipología de usuario consiguiera tener una experiencia ágil y personalizada, basada en la información que necesita en cada momento concreto (consultas) y en las tareas que realiza con más frecuencia (operaciones)? 

Metodología

Metodología

Fases metodología

01 Inmersión

01 

Inmersión

Análisis documentación del cliente

Análisis estado actual

Entrevistas a usuarios

Análisis tendencias globales UX

Benchmarking

Análisis documentación del cliente

Análisis estado actual

Entrevistas a usuarios

Análisis tendencias globales UX

Benchmarking

/Entrevistas

/Entrevistas

11 Empresas visitadas: 2 Grandes empresas, 3 empresas, 3 pymes, 3 Micros.

18 Usuarios entrevistados en su propio espacio de trabajo durante 1 h.

11 Empresas visitadas: 2 Grandes empresas, 3 empresas, 3 pymes, 3 Micros.

18 Usuarios entrevistados en su propio espacio de trabajo durante 1 h.

PROBLEMAS DETECTADOS

PROBLEMAS DETECTADOS

COMPLEJIDAD

Los usuarios entienden el portal como complicado, cuesta encontrar las cosas, no facilita las opciones más utilizadas a primer nivel y los procesos en las operativas son complejos 

TRANSFERENCIAS

Se demanda mucha más agilidad a la hora de realizar las transferencias y la incorporación de funcionalidades prácticas existentes en la competencia     

MENÚ/NAVEGACIÓN

Los usuarios identifican multitud de fricciones con el comportamiento del menú, encontrando carencias que afectan notablemente a la usabilidad del sitio       

MOVIMIENTOS

Los clientes se quejan de dificultades a la hora de buscar y gestionar los movimientos de cuenta, descargarlos, así como poder operar desde los mismos                        

/Análisis tendencias UX

/Análisis tendencias UX

De este análisis extrajimos 3 puntos clave a incorporar en nuestro modelo de experiencia para solucionar los problemas detectados:

De este análisis extrajimos 3 puntos clave a incorporar en nuestro modelo de experiencia para solucionar los problemas detectados:

1
EXPERIENCIA FOCALIZADA EN LA TAREA

Provocar que el usuario atienda solo a lo que está haciendo, sin distracciones. Al incluir una sola tarea en la pantalla disminuimos la carga cognitiva, facilitando la realización del proceso

EXPERIENCIA FOCALIZADA EN LA TAREA

Provocar que el usuario atienda solo a lo que está haciendo, sin distracciones. Al incluir una sola tarea en la pantalla disminuimos la carga cognitiva, facilitando la realización del proceso

2
PERSONALIZACIÓN ESTRATÉGICA

Ahorrar tiempo al usuario y evitar el contenido irrelevante aprendiendo del uso que hace de la herramienta

PERSONALIZACIÓN ESTRATÉGICA

Ahorrar tiempo al usuario y evitar el contenido irrelevante aprendiendo del uso que hace de la herramienta

3
DISEÑO PARA LA OPTIMIZACIÓN

Eliminar tareas iterativas para ahorrar tiempo y esfuerzo

DISEÑO PARA LA OPTIMIZACIÓN

Eliminar tareas iterativas para ahorrar tiempo y esfuerzo

02 Empatía

02 

Empatía

Personas

User Journeys

Personas

User Journeys

/Personas

/Personas

Las entrevistas nos ayudaron a establecer un acercamiento en cuanto a los tipos de empresas que utilizan BOL-E y a los diferentes perfiles profesionales y responsabilidades dentro de sus empresas que tienen sus usuarios. Para profundizar en la definición de los User Personas de BOL-E, decidimos hacer un Workshop de Design Thinking en Bankia con sus expertos.

Las entrevistas nos ayudaron a establecer un acercamiento en cuanto a los tipos de empresas que utilizan BOL-E y a los diferentes perfiles profesionales y responsabilidades dentro de sus empresas que tienen sus usuarios. Para profundizar en la definición de los User Personas de BOL-E, decidimos hacer un Workshop de Design Thinking en Bankia con sus expertos.

postits_2
User Persona

ARQUETIPOS ENCONTRADOS

ARQUETIPOS ENCONTRADOS

EMPRESA Y GRAN EMPRESA

Departamento Contabilidad

Departamento Financiero

Apoderado / Directores

EMPRESA Y GRAN EMPRESA

Departamento Contabilidad

Departamento Financiero

Apoderado / Directores

MICRO EMPRESA Y PYME

Administrativo Contable

 Propietario / Dir. Financiero

 Apoderado

MICRO EMPRESA Y PYME

Administrativo Contable

 Propietario / Dir. Financiero

 Apoderado

/User Journeys

/User Journeys

Nos ayudaron a detectar los principales momentos en los que se producen los puntos de fricción de los usuarios, para poder diseñar posteriormente las funcionalidades que necesitan para mejorar su experiencia.

Nos ayudaron a detectar los principales momentos en los que se producen los puntos de fricción de los usuarios, para poder diseñar posteriormente las funcionalidades que necesitan para mejorar su experiencia.

User Journey: realizar transferencia
User Journey: realizar transferencia
user_journey

CLAVES EXTRAÍDAS

CLAVES EXTRAÍDAS

RECURRENCIA

Los usuarios tienden a realizar las mismas acciones todos los días, por tanto estas deberían estar muy a mano. La plataforma debería ayudarles presentando accesos directos a operativas y consultas frecuentes, memorizando los destinatarios habituales y posibilitando que reutilicen operaciones

RECURRENCIA

Los usuarios tienden a realizar las mismas acciones todos los días, por tanto estas deberían estar muy a mano. La plataforma debería ayudarles presentando accesos directos a operativas y consultas frecuentes, memorizando los destinatarios habituales y posibilitando que reutilicen operaciones

GESTOR

La existencia de un canal de comunicación directa con el gestor para solventar dudas, aporta humanización y confianza

GESTOR

La existencia de un canal de comunicación directa con el gestor para solventar dudas, aporta humanización y confianza

TRAZABILIDAD

Los usuarios deben saber en qué estado está cada proceso u operativa lanzada

TRAZABILIDAD

Los usuarios deben saber en qué estado está cada proceso u operativa lanzada

AVISOS Y MENSAJES

Es importante que aparezcan en el momento que el usuario los necesita y en un lenguaje que pueda entender fácilmente

AVISOS Y MENSAJES

Es importante que aparezcan en el momento que el usuario los necesita y en un lenguaje que pueda entender fácilmente

03 Ideación

03 

Ideación

Claves estratégicas

Modelo mental

Arquitectura de la información

Modelo de navegación y flujo de interacción

Prototipado

Diseño visual

Claves estratégicas

Modelo mental

Arquitectura de la información

Modelo de navegación

Flujo de interacción

Prototipado

Diseño visual

/Claves estratégicas

/Claves estratégicas

¿Cuáles han sido las claves para abordar un diseño estratégico de BOL-E que satisfaga las necesidades de nuestros clientes, soluciones sus problemas y nos diferencie de la competencia?

¿Cuáles han sido las claves para abordar un diseño estratégico de BOL-E que satisfaga las necesidades de nuestros clientes, soluciones sus problemas y nos diferencie de la competencia?

PERSONALIZACIÓN

Adaptación estratégica a cada usuario en función del uso que hace de BOL-E. Adaptación a las necesidades de la estructura de su empresa y del tipo de productos y servicios que utiliza

SIMPLIFICAR PROCESOS

Reducir pasos en las operativas optimizando el esfuerzo del usuario a la hora de realizarlas. BOL-E debe generar flujos intuitivos que mejoren la navegación y la eficiencia del trabajo del día a día                         

PROACTIVIDAD

Dotar de inteligencia a la herramienta para que progresivamente pueda anticiparse a las acciones y operativas del usuario a través de su uso histórico y recurrente  

TRAZABILIDAD

Aumentar la transparencia en las operaciones realizadas, permitiendo al usuario realizar un mayor seguimiento sobre las tareas en curso, pendientes y realizadas                        

COMUNICACIÓN

Generar herramientasde valor alrededor de la figura del Gestor, el Driver mas potente que tiene Bankia con sus clientes, potenciando sus capacidades de asesoramiento, ayuda y facilitación        

/Arquitectura de la información: Modelo mental

/Arquitectura de la información: Modelo mental

Tras las investigaciones realizadas validamos la idea de proponer una categorización basada en las acciones que puede hacer el usuario, en lugar de basarla en el catálogo de productos y servicios del banco. 

A partir de este modelo mental, realizamos nuestra propuesta de arquitectura de la información, que después validamos a través de una encuesta y un card sorting. Esto nos permitió discriminar la utilidad de ciertas categorías y accesos directos. 

Tras las investigaciones realizadas validamos la idea de proponer una categorización basada en las acciones que puede hacer el usuario, en lugar de basarla en el catálogo de productos y servicios del banco. 

A partir de este modelo mental, realizamos nuestra propuesta de arquitectura de la información, que después validamos a través de una encuesta y un card sorting. Esto nos permitió discriminar la utilidad de ciertas categorías y accesos directos. 

ai_modelo_mental_grafico

/Modelo de navegación

/Modelo de navegación

Planteamos una plataforma BOL-E que centre la atención en la tarea, ayudando al usuario con elementos y herramientas de navegación para que pueda realizar acciones consultivas y operativas de forma sencilla e intuitiva.

Estos elementos son lienzos y paneles auxiliares que ofrecen y recogen información que el usuario va necesitando durante la realización de una consulta u operativa.

Planteamos una plataforma BOL-E que centre la atención en la tarea, ayudando al usuario con elementos y herramientas de navegación para que pueda realizar acciones consultivas y operativas de forma sencilla e intuitiva.

Estos elementos son lienzos y paneles auxiliares que ofrecen y recogen información que el usuario va necesitando durante la realización de una consulta u operativa.

Planteamos una plataforma BOL-E que centre la atención en la tarea, ayudando al usuario con elementos y herramientas de navegación para que pueda realizar acciones consultivas y operativas de forma sencilla e intuitiva.

Estos elementos son lienzos y paneles auxiliares que ofrecen y recogen información que el usuario va necesitando durante la realización de una consulta u operativa.

Lienzos y paneles auxiliares
Lienzos y paneles auxiliares
Lienzos y paneles auxiliares
Modelo de navegación: Funciones de acciones
Modelo de navegación: Lienzos
modelo_navegacion_p2
Modelo de navegación: paneles
Flujo de interacción
Flujo de interacción
Flujo de interacción
Flujo de interacción

/Prototipado

/Prototipado

En esta fase pusimos a prueba nuestro modelo. Nos permitió testar tanto si la ubicación de los accesos era intuitiva, como si nuestro sistema basado en lienzos y paneles de ayuda era realmente útil a la hora de consultar y operar. 

En esta fase pusimos a prueba nuestro modelo. Nos permitió testar tanto si la ubicación de los accesos era intuitiva, como si nuestro sistema basado en lienzos y paneles de ayuda era realmente útil a la hora de consultar y operar. 

Página de Inicio/Posición Global
Página de Inicio/Posición Global
Prototipo Inicio
Consulta de movimientos en tarjetas
Consulta de movimientos en tarjetas
prototipo_2_2
Navegación
Navegación
Navegación

En el vídeo se muestra el modelo de navegación a la hora de realizar nueva transferencia desde el acceso directo del menú, consultar movimientos y realizar acciones desde ellos (financiación y descarga).

En el vídeo se muestra el modelo de navegación a la hora de realizar nueva transferencia desde el acceso directo del menú, consultar movimientos y realizar acciones desde ellos (financiación y descarga).

/Diseño visual

/Diseño visual

El principal reto a la hora de plantear el diseño final de BOL-E era la óptima visualización de la información en el espacio disponible. Los datos debían visualizarse en el orden y el tamaño precisos y, en cualquier dispositivo. Las iteraciones en este sentido fueron constantes, ya que los clientes con menos productos contratados o menor capacidad económica no podían ver la interfaz vacía, ni los más capacitados tener problemas para visualizar las grandes cifras.

El principal reto a la hora de plantear el diseño final de BOL-E era la óptima visualización de la información en el espacio disponible. Los datos debían visualizarse en el orden y el tamaño precisos y, en cualquier dispositivo. Las iteraciones en este sentido fueron constantes, ya que los clientes con menos productos contratados o menor capacidad económica no podían ver la interfaz vacía, ni los más capacitados tener problemas para visualizar las grandes cifras.

Paleta de colores
Tipografía
Tipografía secundaria
Mockup diseño visual
bnkia_mbl_mckups_001

Posición Global

bnkia_mbl_mckups_02

Menú desplegado

bnkia_mbl_mckups_03

Panel asistente: Info de la cuenta

Otros trabajos

EVOApp

Repsol PasswordExperiencia Digital

EcoEuropeProducto Digital

hello@jorgegarcia.pro

hello@jorgegarcia.pro

hello@jorgegarcia.pro 

Linkedin          Behance          Instagram

Linkedin          Behance         Instagram