Después de más de 10 años sin renovar las interfaces de los cajeros, la experiencia del usuario estaba desactualizada. Sin embargo, el usuario estaba tan acostumbrado a estas interfaces antiguas que un cambio radical podría ser demasiado perjudicial. Era neceseario mejorar la interfaz y los flujos sin asustar al usuario con un cambio excesivamente radical.

Aunque al final las nuevas interfaces eran muy diferentes de las antiguas, los flujos variaban lo necesario para mejorar y acelerar el proceso. Las pruebas de usuario mostraron que, al ser una operación simple y repetitiva, las interfaces podrían ser muy diferentes de las anteriores.

Proceso de retirada de dinero

El banco Santander decidió que querían ofrecer un look & feel diferente dependiendo de si el usuario era del Santander o había introducido una tarjeta de otro banco.

Los bancos (BBBVA, Caixa, Santander, ING, Sabadell...) querían conocer su posición respecto a los demás, por lo que diseñamos una aplicación de benchmarking. El usuario final de esta aplicación sería un usuario avanzado, familiarizado con los datos bancarios, pero la gran cantidad de datos era muy caótica y debía ordenarse de alguna manera.

La primera tarea fue darle sentido a toda esa gran cantidad de datos. Necesitaba saber qué era realmente relevante y qué no, qué era imprescindible para el usuario y de qué podíamos prescindir.

Una vez filtrada la información, necesitábamos mostrarla gráficamente, eligiendo qué gráfico usar para cada caso y ordenando estos datos.

La arquitectura de la información era un poco compleja de entender incluso para usuarios acostumbrados al lenguaje bancario. Realizamos técnicas de card sorting y prototipados lo-fi para testar.

Formé parte de todo el proceso UX excepto en las pruebas de usuario (research, diseño visual, diseño de interacción y maquetación). Disfruté especialmente innovando en el flujo del proceso de compra, alcanzando una mezcla entre seguridad y facilidad de uso

La interfaz antigua tenía bastantes aspectos que mejorar. Había muchas cosas que no eran necesarias y sólo generaban ruido en la pantalla.

Además de cambiar completamente la estructura y look & feel, necesitábamos pensar en algo para cambiar la principal barrera de entrada (clave Bizum). Buscamos algo que el usuario ya conociese de antemano antes de comenzar el proceso de compra, su número de teléfono y el login en su app.

El reto principal al que nos enfrentamos es el de conocer a sus clientes para ofrecer soluciones a sus necesidades, haciendo que éstas se integren de manera imperceptible dentro de sus servicios habituales. La simplicidad debe ser el eje principal sobre el que pivote la experiencia digital de EVA y que permita a los clientes, a través de una interfaz sencilla, ágil e intuitiva acceder a servicios útiles y de valor antes, durante y después de su viaje, fidelizando su experiencia al servicio ofrecido.

Después de la fase de research, que hicieron mis compañeros, estuve en las primeras fases de ideación de concepto, más tarde volví a incorporarme al proyecto para desarrollar a fondo el diseño de interacción de la aplicación

En tiempos en los que la banca se está digitalizando, marcar la diferencia creando una app es todo un reto. Teníamos que traducir el complejo lenguaje bancario en una simpre y liviana interfaz.

Realicé el diseño UI y el diseño de interacción para diferentes bancos. Mi tarea era crear prototipos que pudieran encajar en la marca de cualquier banco.

Conclusiones

1La sensación de seguridad se obtiene mediante conciencia de que los datos se manejan de manera segura por la entidad, se le pide al usuario autenticarse y el usuario entiende en todo momento lo que está sucediendo

Buenas prácticas

• Disponer de información clara y breve de los costes
• Disponer de información clara y breve de cómo se maneja la información
• Autenticar al usuario
• Onboarding: Proporcionar ayuda Contextoual explicando lo que sucede en cada paso
• Mostrar el número de teléfono y nombre del destinatario
• Permitir al usuario configurar un nivel de seguridad más restrictivo

2La máxima rapidez se obtiene poniendo en un primer nivel la operativa más usada y reduciendo las acciones/datos requeridos al usuario

• Accesible
• Recordar el usuario
• Login con huella
• Operativa de envío en la home
• Reducir los taps al mínimo y Minimizar los datos solicitados al usuario
• Utilizar la cuenta por defecto
• Facilitar el acceso a usuarios Bizum en la agenda (presentándolos primero o indicados con un icono)
• Mostrar destinatarios frecuentes/recientes
• Evitar el uso del teclado (selección por taps)
• Utilizar un concepto por defecto
• Impedir los errores deshabilitando ‘continuar’ hasta que los campos obligatorios están rellenos
• Firma/OTP autorellenada
• Facilitar el acceso a operaciones frecuentes
• Permitir lanzar operaciones desde los movimientos
• Prescindir del código de confirmación para operaciones de pequeño importe o no críticas

3La facilidad requiere unos pasos basados en cosas que ya se conocen, un lenguaje llano y unos iconos descriptivos, de tal manera que no es necesario un tutorial de uso. También requiere no complicar la aplicación con funcionalidades que no aportan valor a la operativa esencial

• Utilizar conceptos familiares al usuario
• Utilizar flujos familiares al usuario
• Utilizar lenguaje llano (sin tecnicismos)
• No saturar la aplicación de funcionalidades superfluas

Nuestro objetivo era aumentar el ratio de conversión, tanto en el alta de nuevos usuarios como en la finalización del proceso de compra. La mayor dificultad era competir contra gigantes como PayPal, Google Wallet o Stripe. A nuestro favor contábamos con el respaldo de los mayores bancos en España.

Por motivos de negocio, Iupay se lanzó demasiado rápido, sin cuidar demasiado la experiencia del usuario. Un año después pudimos entrar en el proyecto y hacer un análisis heurístico para solventar los problemas más "obvios", pero aún necesitábamos conocer los hábitos y comportamientos del usuario.

Home page anterior

Wallet page anterior

Necesitábamos comenzar por optimizar el ratio de conversión en el enrolamiento en el servicio. Dejando sólo los campos esenciales en el formulario de alta (de 10 a 4 campos) y cumpliendo con los fundamentos generales de estructuración/diseño del análisis heurístico, pudimos agilizar el proceso de registro y con ello aumentar el ratio de conversión en el proceso de alta.

ANTES

DESPUÉS

Proceso de compra

iOS Login

iOS detalle de compra

Cientos de miles de transacciones son recogidas por Redsys cada día, el trabajo consistía en filtrar esa valiosa información, organizarla y moldearla en una interfaz de usuario

En este proyecto, por parte de UX, sólo estuvimos involucrados dos personas. Yo me encargué de todo el diseño de interacción, diseño visual y maquetación front. La fase de de wireframing y prototipado la hicimos conjuntamente.

The final design had to be very sober, since it would be personalized with the corporate image of the corresponding banks.

Aunque lleva años en auge, el e-commerce sigue aumentando y la mayoría de comercios eligen la solución ofrecida por su banco frente a servicios de terceros como PayPal o Stripe, que cargan una comisión al comercio por cada venta. Al tener que diseñar una solución común para todos los bancos (ING, Santander, Popular, Caixa, Sabadell, Bankinter...) el diseño debía ser neutro, nuestro entregable sería una "marca blanca".

We left only the necessary elements to make the payment. We get rid of the steps, the commerce info, the other payment methods, the language... Besides, we avoid to launch another window to fill the card number, we launch a modal window instead, this way the user doesn't feel that is leaving the e-commerce to complete the payment and it feels more secure.

The button to make the payment was the perfect place to put the price. When the user push the button knows perfectly how much is paying.

Para introducir los datos de la tarjeta de manera más sencilla usamos una máscara en el input para separar los números de la misma manera que aparecen en la tarjeta física. Además utilizamos un algoritmo para predecir la marca de la tarjeta y el algoritmo de Luhn para validar la tarjeta y evitar errores antes de pulsar el botón de continuar.