Sobre el proyecto
Rapiid es una aplicación Fintech que opera desde Santiago de Chile y realiza transacciones y entre varios países de América y Europa. En este caso, el Stakeholder apuntaba a desarrollar progresivamente una plataforma financiera con una propuesta de valor similar a Wise y PayPal, pero con foco en América Latina. Descubre por dónde empezó y cómo se desarrolló el proceso de diseño end to end para esta marca y plataforma.
Proceso de diseño
La empresa estaba operando mediante las redes sociales y ya disponía de una cartera sólida de clientes. En este proyecto, colaboraría con un equipo de desarrolladores que tenían experiencia en sistemas financieros.
El Stakeholder expuso como punto de partida su modelo de negocios y operaciones front stage y back stage (los cuales se mantienen bajo confidencialidad en este estudio).
La ventaja de este proyecto es que ya la empresa operaba con una cartera de clientes que podía sentar las bases en cuanto al tipo de usuarios a los que Juan, nuestro Stakeholder, apuntaba. En el proceso de levantamiento, decidí valerme de 2 herramientas de investigación:
- Benchmarking externo.
- Entrevistas internas.
Mi objetivo era encontrar los patrones de diseño más comunes en este tipo de aplicaciones y ganarme la confianza del usuario mediante una interfaz limpia y sencilla que lo guiara.
Organizada la información, comencé a explorar cómo podía presentarse una versión mínima (MVP) y cómo podía irse escalando hasta las funciones más complejas.
En este sentido, tuvimos algunas dificultades para definir el mínimo producto porque el nivel de seguridad exigido desde la versión 1.0, ya de entrada suponía un gran esfuerzo en materia de desarrollo e investigación.
La premisa más importante del proyecto desde sus inicios fue la seguridad y el uso de todas las tecnologías de verificación disponibles, sin sacrificar la experiencia de usuario. Tenía que sentir que todo fluía bien y que avanzaba muy rápido.
Esta es la fase más divertida del proyecto. Tuve mucha ayuda de un colaborador y amigo llamado Alan. Fue mi mano derecha a lo largo de todo el proyecto y sus ideas y propuestas resultaron muy útiles desde las primeras fases del bocetado del proyecto.
Dibujamos sobre papel, pizarras y muchas capturas de pantalla fueron y vinieron durante este proyecto, ya que todos vivíamos en distintas ciudades.
Los wireframes se diseñaron 100% sobre papel y luego se escanearon algunos de los flujos más importantes.
El concepto de navegación tenía que ser muy familiar e intuitivo y mantener una armonía de colores que orientara al usuario en cuanto a qué podía tocar o no.
Nos aseguramos de cumplir con las heurísticas que propone el grupo Nielsen Norman y algunas leyes fundamentales.
Los input placeholders y dropdown eran los protagonistas de cada parte de la interfaz. Nos aseguramos de dejar en claro en el diseño cómo debía lucir cada pantalla cuando un keyboard nativo estaba activo o inactivo, y procuramos guiar con suficiente precisión al usuario a fin de que evitara errores que pusieran en riesgo sus finanzas.
El proyecto se maquetó y prototipó en Figma.
Las pruebas de usabilidad se realizaron con pantallas estáticas en Maze, no hizo falta invertir horas en prototipos más complejos, como Protopie.
Todos los componentes que se diseñaron eran muy fáciles de reconocer y usar. Había un buen affordance con la iconografía y forma de cada pantalla, así que las pruebas con una muestra de 6 usuarios resultaron exitosas. Los usuarios cumplieron al 100% los objetivos que se les indicaron al primer intento y en tiempos muy prometedores.
Además, teníamos que considerar que muchos de los usuarios que comenzarán a utilizarla, vienen «sesgados» por el comportamiento de plataformas como Binance y Globant66, así que les resultaría incluso más sencillo e intuitivo conseguir lo que buscaban.
Acompañé durante el proceso de desarrollo al equipo. En ocasiones, algunas tecnologías complejas implementadas en el módulo de autenticación, obligaban a realizar pequeños ajustes en algunos componentes de la interfaz, pero ninguno de estos cambios tuvo impacto alguno en la confiabilidad de las pantallas. Para el usuario sería totalmente transparente.
Fue muy útil conocer la tecnología que usaban los desarrolladores para hablar el mismo idioma y entender las limitaciones en la implementación del diseño.
Las pruebas de usabilidad continuarán una vez finalizado el MVP y puesta en producción.
Branding del proyecto
Estuve a cargo del equipo de diseño que gestionó la identidad corporativa de la empresa Rapiid. Fue muy divertido encontrar un concepto que transformara y refrescara la imagen de la anterior marca «Rapid Cambios» que operaba en las redes. Los resultados nos dejaron a todos satisfechos.
1. Entendiendo el proyecto
En la primera entrevista directa con el Stakeholder, entendí cómo funcionaba la empresa, cuál era su valor diferencial con su cartera de clientes y cuál sería el equipo que desarrollaría el proyecto.
A partir de esta información, diseñé un Plan de UX que serviría de guía para mi equipo en cuanto a la ruta que seguiríamos hasta llegar al mínimo producto y mantener su crecimiento en el tiempo.
El plan se dividió en módulos basándome en la ruta lógica que seguiría el equipo de desarrollo y las premisas de seguridad del cliente. Se establecieron reuniones semanales de seguimiento y se puntualizaron metas y objetivos semanales que ayudarían a medir el avance y rendimiento del proyecto en el tiempo.
2. UX Research
Muchos de los resultados de esta investigación son confidenciales. El Stakeholder documentó información que nos permitió definir ciertos atributos y dolores de los usuarios, conocer referencias directas de plataformas similares y entender sus objetivos de negocio.
Benchmarking
Comenzamos a mapear los patrones de diseño que encontramos al comparar 5 plataformas Fintech mobile y web, y a entender en una curva de valor el factor común entre todas ellas. Además, identificamos algunos puntos de dolor directos en las calificaciones y comentarios de sus app store.
La punta de lanza de esta aplicación sería «Confianza». Cada botón, cada flujo y efecto de interacción tenía que transmitirles que su dinero estaba seguro y que lo estaban haciendo bien. Para ello, era fundamental mantenerlos informados en cuanto al estado de respuesta del sistema.
Entrevistas internas
Para entregar un producto útil y a medida, era importante entender cómo funcionaba la empresa en el backstage. ¿Qué herramientas usaban y cuánto tiempo les tomaba cada acción del flujo? ¿Usaban hojas de Excel? De ser así, ¿qué estructura tenían?, ¿cuáles eran los riesgos de operar de esa manera y los errores comunes que cometían?
Escuchar sugerencias e ideas por parte de las personas que usarían todos los días la herramienta fue fundamental para dar con un sistema de navegación e interacción adecuado a sus necesidades.
Toda esta investigación decantó en un informe de hallazgos lleno de bocetos, archivos y flujogramas de procesos. Estos resultados permitirían presentar una solución escalable que mitigaría la resistencia al cambio y con una curva de aprendizaje muy corta en el equipo.
User Research
Luego de haber definido un par de User personas que representaran los segmentos en la cartera de clientes de Rapiid, investigué por medio de herramientas de inteligencia artificial cuáles eran los posibles puntos de dolor de los usuarios al navegar en plataformas Fintech.
Le describí a Chat GPT las características de nuestros usuarios y le pedí que creara una tabla con 3 columnas: el punto de dolor, la descripción breve del mismo y una posible solución para responder a esa preocupación.
| Dolor | Descripción del Dolor | Posible Solución |
|---|---|---|
| Dificultad en la verificación y aprobación | Los usuarios pueden enfrentar dificultades y demoras en el proceso de verificación de identidad y aprobación de cuentas. | Mejorar la eficiencia y la experiencia del proceso de verificación mediante la implementación de tecnologías como reconocimiento facial, análisis de documentos en línea, entre otros. |
| Preocupaciones sobre la seguridad | Los usuarios pueden tener temores sobre la seguridad de sus datos personales y financieros. | Reforzar las medidas de seguridad de la plataforma, como el cifrado de datos, autenticación de dos factores, monitoreo constante contra amenazas cibernéticas y educación al usuario sobre buenas prácticas de seguridad digital. |
| Limitaciones de acceso y disponibilidad | Algunas plataformas Fintech pueden tener restricciones geográficas o limitaciones en los servicios ofrecidos. | Ampliar la disponibilidad de la plataforma en diferentes ubicaciones geográficas y expandir la gama de servicios financieros ofrecidos para satisfacer las necesidades de los usuarios en diferentes contextos. |
| Problemas con el servicio al cliente | Los usuarios pueden experimentar dificultades para recibir respuestas y soporte eficientes y efectivos. | Establecer canales de comunicación claros y eficientes, ofrecer tiempos de respuesta rápidos, proporcionar asistencia a través de múltiples canales (chat en vivo, correo electrónico, teléfono) y mejorar la capacitación del personal de atención al cliente. |
| Falta de familiaridad con la tecnología | Algunos usuarios pueden enfrentar dificultades debido a su falta de experiencia o conocimiento en el uso de tecnologías digitales. | Ofrecer tutoriales y recursos educativos para ayudar a los usuarios a familiarizarse con la plataforma y proporcionar una interfaz intuitiva y fácil de usar. |
| Falta de transparencia y comprensión | Los usuarios pueden tener dificultades para comprender las tarifas, costos ocultos o políticas de privacidad de la plataforma. | Brindar información clara y transparente sobre las tarifas y costos asociados, así como explicar de manera comprensible las políticas de privacidad y los términos de uso. |
3. Arquitectura de Información
Mapeamos en un User Flow las diferentes funciones que encontraría el usuario en cada una de las etapas del producto, desde su MVP hasta una versión mejorada y óptima según lo proyectado desde el inicio.
Gamificación desde el MVP
La premisa para nuestro MVP sería la siguiente: la plataforma tendrá todas las herramientas de seguridad y protección de datos desde la versión 1.0.
Eso significa que el lanzamiento del MVP demoraría un poco, considerado algunas implementaciones de biometría, autenticación y verificación de identidad mediante IA.
Ideamos algunas estrategias para motivar al usuario a cumplir con diferentes niveles de seguridad durante y después del proceso de creación de la cuenta. A fin de no abrumarlo, en el proceso de registro se incorporó lo mínimo necesario (que ya era bastante) y posterior al mismo, se crearon incentivos gamificados para que «incrementara su nivel» de seguridad.
Funciones escalables
La empresa Rapiid ya estaba funcionando, solo que sin aplicación. Así que, el MVP tenía que responder a esos procesos internos y luego ir ganando automatización:
PRIMERA VERSIÓN. Pensamos el MVP principalmente pensando en la experiencia en el Frontstage. Este se enfocaría en la seguridad y autonomía del usuario cliente que deseaba hacer una transacción.
Los usuarios podrían solicitar remesas, cambios y retiros como solían hacerlo, pero ahora ganarían autonomía al decidir cuánto sacar, a qué costo y sabrían en tiempo real el valor de las tasas de cambio y el estado de sus cuentas.
Pese a que sería un increíble avance de cara al usuario, no cambiaba mucho la gestión en el backstage. Recibirían en sus sesiones de Rapiid Admin (en lugar de WhatsApp) órdenes de transacción y actualizarían los estados de las transacciones de forma manual.
Además, el usuario tendría que seguir cargando su comprobante y las validaciones inicialmente serían de forma manual.
SEGUNDA VERSIÓN. En la segunda versión se reforzaría el sistema de gestión para los colaboradores de Rapiid, es decir, la App se convertiría en una herramienta que sustituiría todas esas hojas de Excel, calculadoras y archivos que usaban para ofrecer el servicio. Esta versión se ocuparía únicamente desde ordenadores.
TERCERA VERSIÓN. Con los avances de la IA, es posible automatizar muchos procesos de validación. Por ejemplo, comprobar un recibo de pago, cotejar con el banco, elaborar y enviar órdenes de transacción. Así que, las siguientes versiones consistirían principalmente en optimizar y automatizar los procesos para asegurar que fuesen cada vez más rápidos y precisos.
La arquitectura decantó en un sitemap de cada versión, elaborado en figma y validado con el Stakeholder. Este sería el principal insumo para comenzar a armas las primeras pantallas.
4. Bocetado de wireframes
El sistema de navegación se diseñó con 5 tabs inferiores con las principales funciones de la plataforma. Alan reunió todos los patrones de diseño y organizamos la interfaz de mayor a menor desde lo más usado y relevante.
El botón central «+» resaltaría visualmente por la importancia que ocupa esta función de cara al negocio y se emplearon iconos fáciles de asociar con las funciones «Inicio», «Movimientos», «Destinatarios» y «Perfil». Las funciones secundarias y de soporte se reunieron en el menú superior y se agregó un sistema de notificaciones en la navbar superior de la pantalla.
En cuanto a la versión web, ocupamos un concepto similar. Un sidebar a la izquierda con las funciones ordenadas jerárquicamente según su relevancia para el usuario y el negocio, y pocas opciones en pantalla que guiaran al usuario en sus objetivos.
5. Diseño UI y Prototipado
La interfaz debía proporcionar de manera muy clara al usuario la comisión total que implicaba cada transacción, las tasas y el tiempo en el que recibiría su dinero en esa u otra moneda. Informarle constantemente sobre el estado del sistema era importante para evitar errores y tener confianza.
Los componentes del UI Kit y la guía de estilos se diseñaron en Figma. Dado que se implementaría en React Native, una tecnología híbrida y bastante flexible, nos ocupamos de componentes concebidos principalmente para IOs y que podrían usarse en las diversas interfaces de ambas tecnologías.
Sigue de cerca el proyecto de Rapiid
Una vez desarrollado el MVP, enlazaré este caso de estudio a las tiendas de aplicaciones para que puedas descargarla. Mientras tanto, sigue de cerca el proyecto y forma parte de su comunidad en Instagram @rapiid.cl.
