Desafios y complejidades de una
Deuda técnica, insatisfacción de los usuarios
Empresa
Transbank
rOL
UI Focal
aÑO
2024
Una deuda técnica de larga data
Fernanda, una talentosa diseñadora UX/UI en Transbank, se enfrentaba a un desafío considerable: la interfaz de los terminales de pago Android presentaba una deuda técnica acumulada que afectaba negativamente la experiencia de los comercios. Los usuarios encontraban el sistema lento, confuso y poco intuitivo, lo que generaba insatisfacción generalizada.
Iniciativa de Renovación
En enero de 2024, el equipo de negocio y experiencia decidió abordar estos problemas de raíz. Establecieron objetivos claros:
Crear una interfaz intuitiva y coherente con el Design System de la empresa.
Garantizar la interoperabilidad de la interfaz con otros productos.
Mantener una voz y tono consistentes con el ecosistema de la compañía.
Reducir la cantidad de pantallas para simplificar los flujos de transacción.
Disminuir los tiempos de ejecución de cada operación.
Alcance
El equipo de UX había expresado reiteradamente la necesidad de una interfaz homologada al Design System, que cumpliera con buenas prácticas de UI y ofreciera adaptabilidad a diferentes dispositivos (interoperabilidad). En este contexto, se propuso que la UI en una primera fase, diera soporte a los siguientes equipos:
El proceso
Fernanda comenzó analizando los flujos de pago básicos, identificando siete pantallas clave donde los usuarios debían tomar decisiones. Se cuestionó aspectos como el uso del color azul en lugar del magenta corporativo y la posibilidad de simplificar las opciones de propina. Además, consideró la automatización de la impresión de comprobantes para reducir pasos innecesarios.
También detectó flujos especiales que requerían parámetros adicionales, como "vuelto" y "boleta", lo que añadía dos pasos más al proceso estándar, elevando el total a nueve.
Análisis competitivo
Fernanda realizó un análisis comparativo con los principales competidores del mercado. Descubrió que otros dispositivos completaban una venta estándar con tarjeta de débito en un promedio de 3 a 4 segundos, mientras que el sistema actual de Transbank tardaba 14 segundos. Esta diferencia resaltaba la necesidad urgente de optimizar el rendimiento.
Pruebas de usabilidad
Diseñó propuestas que incluían la simplificación de pasos y mejoras en la interfaz. Por ejemplo, desarrolló dos variantes de teclado para mejorar la accesibilidad de usuarios con discapacidad visual. Las pruebas de usabilidad demostraron que el 100% de los participantes comprendieron las funciones de corregir, borrar y aceptar.
“Me gusta ese (opción B) porque se parece más al de Transbank, por los colores, es más intuitivo” - Jesús.
“A mi me gusta más la verdad. Se aprecia más, yo porque como trabajo con puros viejitos, no ven o qué sé yo, ese me agrada más (opción B)- Es como que visualmente se ve mejor” - Génesis.
Además, simplificó la presentación de las opciones de propina, mostrando los cálculos de forma más ágil en la misma pantalla. Los usuarios apreciaron estas mejoras, indicando que la nueva interfaz era más intuitiva y visualmente agradable.
“Me gusta porque es bastante detallado. Sí, O sea, te voy a decir así como una leyenda” - Thamaris.
“Me serviría el detalle, está super bueno” - Jesús.
La solución
Tras analizar los resultados de las pruebas de usabilidad se presentó un informe ejecutivo a la compañía. En esta presentación, se destacaron los resultados y las opiniones de usuarios pagadores, cajeros y encargados de local. Un comentario destacado fue el de Paola Ledezma, (Gerente Divisional) "¿Por qué tardamos tanto tiempo en hacer estos cambios?".
El impacto directo de este primer MVP fue un aumento del 40% en la velocidad del flujo estándar, reduciéndolo de 7 a 4 pasos.
UI KIT escalable
Aprovechando las últimas tendencias y actualizaciones de Figma, Fernanda implementó un sistema basado en la nueva funcionalidad de Variables. Definió los tamaños de los dispositivos y creó una serie de parámetros dependientes de cada tamaño.
Resultados
Gracias al trabajo de Fernanda, la nueva interfaz logró:
Reducir el número de pantallas en los flujos de transacción.
Disminuir significativamente los tiempos de ejecución de cada operación.
Mejorar la satisfacción de los usuarios, quienes encontraron el sistema más intuitivo y accesible.
Instrucciones prototipo
Prueba el prototipo interactivo siguiendo estos pasos:
Ingresa el monto: Introduce $5.000 y presiona el botón verde para continuar.
Selecciona la propina: Elige 10% y presiona "Continuar".
Ingresa los parámetros: Introduce "1" para empleado y "2" para boleta. Presiona el botón verde para continuar.
Simula el pago: En la pantalla de la pasarela de pago, toca cualquier lugar de la pantalla para simular el "tapeo" de la tarjeta.
Selecciona el vuelto: Elige $5.000 y presiona "Continuar".
Ingresa tu clave: Introduce "1234" y presiona el botón verde para continuar.
Imprime o no el comprobante: Elige cualquiera de las opciones.