Eng
Casos de estudio - UX/UI/Research
En 2018, Banco Santander decidió renovar la imagen de sus cajeros y confiaron en la experiencia de Redsys para realizar el rediseño.
Era un gran reto el poder renovar la interfaz de los cajeros más usados en España. Miles de personas usarían estas interfaces a diario.
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 necesario 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.
Realicé labores de investigación, analicé el mercado y la competencia para posicionarnos estratégicamente, aprovechando oportunidades de innovación y adoptando las mejores prácticas en las funcionalidades más básicas e indispensables, que son de vital importancia en el uso de cajeros automáticos.
También realicé el diseño de interacción, trabajé con el equipo de UX del banco Santander para definir iconografía y flujos finales de operaciones e incluso maqueté con tecnología web parte de la interfaz.
de españoles entre 20 y 65 años utilizan el cajero al menos una vez a la semana
España es el segundo país del mundo con más cajeros por persona
del uso total del cajero es para retirar dinero
Para extraer nuestros requerimientos, hicimos una comparación de las funcionalidades de la competencia (diseño visual, navegación, velocidad, accesibilidad ...) De esta manera logramos aislar las fortalezas y debilidades de cada banco.
Después de la fase de investigación pudimos concluir que la experiencia tenía que:
La retirada de dinero es la funcionalidad más importante para todos los bancos y la más utilizada por los usuarios. Decidimos darle la mayor importancia en la interfaz.
En los test de usuario demostramos que con pequeños cambios en el flujo se podían mejorar los tiempos en algunas operaciones. Para la mayoría de usuarios esto era crucial, querían pasar el menor tiempo posible delante de la pantalla del cajero.
Proceso de retirada de dinero
El look & feel de la interfaz está adaptada para ser personalizada a cualquier banco para así poder fomentar su evolución.
Redsys maneja mucha información valiosa sobre operaciones financiaras, así que pensamos el diseño de un producto que ofreciera esta información en una interfaz.
Los bancos (BBVA, 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.
Existía una gran cantidad de información que debía mostrarse de la manera más simple. Queríamos ofrecer a los bancos la posibilidad de compararse entre sí en una aplicación de referencia.
Participé en todo el proceso de UX; research, diseño UI, diseño de interacción y maquetación web.
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.
La solución final se diseñó para dispositivos móviles primero, aunque la perspectiva de uso era 50/50 de escritorio y dispositivos móviles. El desafío era simplificar tal cantidad de datos, era "más fácil" comprimirlos primero en dispositivos móviles para llevarlos más tarde a la versión de escritorio.
.jpg)
Después de ser la aplicación más usada para pagos entre personas en España, Bizum quería dar el paso al pago online en e-commerce.
Existen muchos competidores en los medios de pago online, así que teníamos que marcar la diferencia de alguna manera. El secreto estaba en el teléfono móvil, ya que los usuarios conocían Bizum debido a su uso desde la aplicación móvil. Mi desafío fue hacer que sea fuera más fácil que escribir los dígitos de la tarjeta de crédito e incluso más fácil que usar un usuario y contraseña.
.gif)
Primer prototipo vs versión final
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
Un año antes de salir al mercado, se diseñó un primer prototipo, pero los test de usuario demostraron que era algo confuso, así que se nos asignó la tarea de solucionar el problema.
Antes incluso de una primera fase de research, alguien creyó que introducir una clave de 4 dígitos generada por el banco y proporcionada al usuario era una buena idea para agilizar el proceso de compra. Sin embargo, los tests demostraron que los usuarios que ya usaban la app de Bizum, no tenían la menor idea de qué era la "clave Bizum" o de dónde había salido.
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.
.jpg)
Renfe lanzaba una nueva línea de trenes paralela a AVE, pero en este caso sería un servicio “low cost”. Para completar este servicio, además del canal web, querían lanzar una nueva aplicación móvil que acompañara al usuario desde la reserva sus billetes hasta la llegada a la ciudad de destino.
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
Analizamos, deconstruimos y organizamos los datos recopilados durante la fase de exploración de research y sacamos outputs mediante las técnicas de Buyer Persona y Customer Journey
El paso más importante es comenzar la reserva de tus billetes, y es aquí es donde todo debe ser lo más fácil y versátil posible. Después de investigar a la competencia y a los usuarios, llegamos a una serie de preguntas clave que había que resolver ¿Puedo
Una de las grandes diferencias con otros medios de transporte es la importancia de la información de tu trayecto. ¿Por dónde voy? ¿Cuanto queda para llegar a mi destino? ¿Cuáles son las próximas paradas hasta que llegue? ¿Ha habido algún imprevisto? ¿Voy en tiempo?
Tomarte un café, desayunar, comprar una revista, etc… son procesos que tienen un único objetivo, obtener un producto. Qué mejor que llevar la experiencia on-line a tu trayecto. Compra estos productos desde tu móvil, en tu asiento y cuando estén disponibles, ve únicamente a recogerlos y disfrutarlos en tu viaje o recíbelos en tu asiento.
.jpg)
Los bancos querían una nueva app en la cual los usuarios pudieran hacer pequeñas transferencias entre amigos y pagar en comercios con el móvil.
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 simple 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.
.png)
70% Ha empleado banca online en el último año
32% Nunca ha pisado una sucursal bancaria
62% Emplea Apps de banca en su móvil o tablet
45% Emplea solo banca móvil
68% Piensa que la gestión del dinero será distinta en 5 años
70% Opina que en 5 años los pagos serán totalmente diferentes
Si el objetivo son millenials
El diseño debe:
Comparación de proceso de registro entre competidores:
Comparación de transferencia de dinero entre competidores:
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
2La máxima rapidez se obtiene poniendo en un primer nivel la operativa más usada y reduciendo las acciones/datos requeridos al usuario
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
.png)
.jpg)
iuPay salió al mercado en 2014 pero sólo unos poco usuarios estaban usando la plataforma. Teníamos que atraer a potenciales usuarios para hacer de Iupay un estándar en las compras online a nivel nacional.
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.
Lideré el diseño de interacción, UI y maquetación web, para la versión escritorio y la aplicación móvil. Aparte de la pasarela de pago como tal, había varios productos digitales que completaban el servicio y que era necesarios rediseñar; web pública, gestión del wallet, proceso de compra, app, formualario de alta...
También hice una parte de research basado en la analítica web de los usuarios que ya estaban utilizando el servicio.
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
Una vez optimizado el formulario de registro, era el momento de actualizar la web, la wallet, el proceso de compra y la app.
Para todos estos productos llevamos a cabo una serie de ejericios creativos, uno de los cuales consistía en bocetar en papel en menos de 40 minutos 8 ideas utilizando diferentes herramientas. Tras 1 semana de bocetos y wireframes teníamos la mayoría de las funcionalidades definidas.
.jpg)
El Banco Santander nos pidió crear una herramienta para explotar los datos y poder analizar toda la información con respecto a sus cajeros, desde un punto de vista técnico y de negocio.
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.
Redsys posee casi toda la información respectiva a operaciones bancarias con tarjeta, por este motivo Santander nos encomendó crear un producto que pudiera mostrar toda esa información de una manera más visual que las infinitas tablas de excel que estaban acostumbrados a manejar.
Una vez establecidas la arquitectura y jerarquías, el siguiente paso era convertir ese volumen de datos en gráficos y evitar la representación en tablas siempre que fuera posible.
The final design had to be very sober, since it would be personalized with the corporate image of the corresponding banks.
Era momento de actualizar la pasarela de pago más usada en España. Alrededor de 200.000 usuarios utilizan este servicio cada día.
En 2014 la interfaz fue renovada, sin embargo, sólo se realizó un rediseño visual, la estructura seguía siendo la misma que hacía 20 años. Existía un margen de mejora en la agilidad del proceso, eliminando pasos e información inncesaria que únicamente generaba ruido y desconcierto.
Ya que era un proceso simple (pero muy crítico), fui el equipo completo de UX yo solo. Hice una pequeña fase de research, prototipado y diseño de interacción por mi cuenta, pero recibí algo de ayuda para hacer los test de usuario.
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".
Para comenzar, debíamos deshacernos de todo lo que no era esencial o no aportaba ningún valor al usuario. Los tests de usuario provaron varios no eran necesarios si incluíamos la pasarela en una ventana modal dentro del comercio. De esta manera el usuario no perdía la sensación de navegación y manteníamos el contexto.
En la versión móvil la ventana modal podía pasar desaparcibida y en ocasiones el usuario sentía que había salido de la web del comercio. Nuestra recomendación siempre fue embeber la pasarela de pago dentro del comercio, pero por problemas técnicos y de seguridad esto no era posible en todos los casos, así que que tuvimos que mantener información de la compra en la versión móvil para no perder el contexto.
Dejamos únicamente los elementos necesarios para realizar el pago. Eliminamos los pasos, la información del comercio, los otros métodos de pago, el idioma... Además, evitamos abrir otra ventana para ingresar el número de la tarjeta: en su lugar, mostramos una ventana modal. De esta forma, el usuario no siente que está saliendo del e-commerce para completar el pago y percibe mayor seguridad.
El botón para realizar el pago fue el lugar perfecto para mostrar el precio. Cuando el usuario pulsa el botón, sabe perfectamente cuánto está pagando.
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.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
