Cómo diseñamos productos en Fintoc, un caso práctico

Fintoc te permite pagar con cualquier cuenta de banco, sin necesitar una tarjeta. Si es que no sabes cómo funciona un pago con Fintoc, todo pasa dentro del widget:

¿Qué es el Widget?

El widget es la interfaz que tú, como usuario final, utilizas para iniciar el pago y se levanta dentro de la misma aplicación o página web donde estás pagando. Dentro del widget, puedes elegir el banco con el que quieres pagar, haces login y eliges la cuenta con la que quieres pagar en caso de que tengas más de una.

Por detrás, el widget conecta al comercio con los bancos para hacer todo el proceso del pago más fácil para ambos: no hay que escribir datos como la cuenta del banco a donde se envía el dinero o el monto del pago.

¿Cómo se paga?

Para terminar el proceso hay que confirmar o autorizar el pago, lo que se conoce como MFA (Multi Factor Authentication) y es lo que piden los bancos a sus clientes para confirmar la operación. Las opciones disponibles para autorizar son diferentes para cada banco y para hacerlo aún más complejo, no todos los usuarios tienen todos los métodos disponibles.

La autorización es la etapa más importante de un pago. Para que puedas completar el proceso exitosamente, debe ser fácil y no puede haber lugar para confusiones. Acá nos vamos a detener para mostrarte cómo diseñamos en Fintoc.

El problema

De acuerdo a nuestras métricas, justamente el MFA era donde más pagos fallaban. El diseño original de MFA para el widget tenía 5 tipos diferentes de autenticación para 2 secciones diferentes en un pago: uno para autorizar un nuevo destinatario y otro para autorizar la transacción.

Lo primero fue hacer un estudio interno y podríamos resumir los problemas de esta sección así:

• Había una confusión entre autorizar el pago y autorizar nuevo destinatario
• El widget no tenía mensajes claros cuando necesitaba que el usuario saliera del widget y fuera a su app bancaria
• Una vez que las personas se iban a autorizar un nuevo destinatario, era muy probable que no volvieran al widget a terminar el proceso, pensando que TODO el pago ya se había autorizado

El proceso de investigación

Al principio, los problemas mencionados arriba podrían parecer desconectados entre sí, pero hilando más fino, vimos que sí estaban relacionados. Decidimos centrarnos en cómo resolver todos estos problemas al darnos cuenta de que todos podrían abordarse con una reestructuración de todo el proceso de MFA para que sea más coherente y claro para los usuarios.

Y llegamos a la siguiente pregunta:

💡 ¿Cómo podríamos hacer que el proceso de autenticación sea lo más similar posible a sus experiencias anteriores y nativas a sus apps bancarias, y al mismo tiempo ocultar la complejidad que requiere autorizar un pago?

Decidimos avanzar así:

Paso 1: Diagnóstico Lo primero que hicimos fue analizar patrones de lectura y cuantificar los clics en lugares raros: en el timer, íconos o la imagen. Luego, mapeamos dónde y cuándo sucedían los abandonos en esta etapa. Además, estudiamos cuáles eran los flujos de uso en los 4 bancos chilenos más grandes para sus métodos de autorización.

Nos dimos cuenta de que teníamos que reducir la cantidad de íconos diferentes en la pantalla y dar instrucciones muy claras y paso a paso. También, parecía que sus patrones de lectura estaban divididos en dos mitades de la pantalla.

Es muy común que los usuarios lean poco, y en este caso los usuarios leerían la mitad superior cuando la pantalla completa estuviera abierta, pero leerían la mitad inferior cuando apareciera el teclado.

Paso 2: primer testeo con usuarios

Testeamos una primera iteración con personas que tenían cuenta en los bancos más problemáticos pero que no tenían el método de autenticación necesario (autorización a través de aplicación bancaria). Esto nos dejó con resultados inconclusos. 😬

💡 Empezamos a notar un problema: cuando hay que ir a una aplicación bancaria para autorizar el nuevo destinatario y luego regresar, creían que habían terminado de pagar al autorizarlo. Esto porque el banco les daba una respuesta positiva (destinatario aprobado) en vez de volver al widget para iniciar el segundo proceso de autorización (para pagar).

Pensamos en crear opciones donde se usaba una notificación para llamarlos de vuelta al proceso de pago.

Paso 3: testeo con ganadores claros

Por fin pudimos testear con usuarios que tenían el método de autenticación necesario. En esta etapa ya habíamos incorporado todo el feedback de las rondas anteriores y eso nos trajo a este punto.

Probamos 16 vistas diferentes y tuvimos 2 claros ganadores , por lo que decidimos tomar la mejor parte de ambos y crear la mejor versión.

Cómo lo hicimos

‍

‍

‍

Actualizamos la pantalla donde seleccionas el método de MFA para estandarizar todos sus iconos y hacerlos más grandes y claros de leer.

Nos aseguramos de usar los iconos de cada método MFA que tenían los bancos para minimizar la confusión y darles familiaridad a los usuarios. En esta imagen puedes ver el MiPass, una aplicación del Banco de Chile.

Además, hicimos que esta vista se saltara si solo había un método disponible para ahorrar algunos pasos.

‍

‍

‍

‍

‍

‍

Creamos dos iconos y textos superiores diferentes para diferenciar claramente en qué estado te encontrabas: autorizar nuevo destinatario y autorizar pago.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

Para las opciones de MFA en que los usuarios tenían que escribir claves o códigos, estandarizamos los diseños y utilizamos iconografía para facilitar la lectura al usuario sobre lo que debían hacer en la mitad inferior de la pantalla.

‍

‍

‍

‍

‍

‍

‍

Finalmente, las pantallas más complejas del widget (autorización a través de app bancaria) fueron completamente modificadas para tener un diseño más simple que explicitara cada uno de los pasos que debían tomar.

También incluimos en varios bancos la opción de abrir directamente la aplicación correspondiente, reduciendo la necesidad de depender del usuario para recordar dónde está la aplicación o sus notificaciones.

‍

¿Y cómo nos fue?

Como habíamos estado coordinados con el equipo de desarrollo, la implementación fue relativamente rápida.

Pero vamos a lo importante: con el cambio de esta vista, la conversión subió 3% en el siguiente mes.

Con lo aprendido en este proceso, aceleramos a la siguiente fase para mejorar la experiencia del widget. Decidimos crear una barra de progreso para todo el proceso de pago, que indica de manera clara en qué parte del proceso se encuentra el usuario.  Esta barra de progreso ha sido muy útil para guiar a los usuarios e impulsó la conversión hacia arriba también.

Siempre estamos haciendo experimentos.

Si te gustan, estamos contratando. Puedes revisar los puestos abiertos acá.

‍