Hace poco terminamos el rediseño de banca digital de una cooperativa financiera en El Salvador, que incluyó su banca en línea y su banca móvil. La plataforma anterior funcionaba, pero tenía una estructura confusa que complicaba las gestiones diarias de los asociados. Consultar un saldo o pagar un servicio tomaba más pasos de los necesarios, y encontrar cada opción dependía de que el usuario recordara dónde estaba.
El objetivo fue reconstruir la plataforma desde los cimientos, ponerla al nivel de la banca digital actual y hacer de la accesibilidad una prioridad, no un detalle.
El reto de un rediseño de banca digital: no perder a quien ya la usa
Cambiar una banca en línea tiene un riesgo que no siempre se ve al inicio. Si el usuario no encuentra lo que buscaba, llama al call center, va a la agencia o simplemente deja de usar el canal digital.
Estudios de 2025 sobre adopción de banca digital identifican tres barreras principales: interfaces difíciles, poca confianza digital y miedo a fraudes (Nature, Humanities & Social Sciences Communications). Las tres estaban presentes en este proyecto.
Para no diseñar a ciegas, partimos de una proto-persona clave: un profesional de entre 50 y 60 años, con varias cuentas de ahorro activas, que usa la banca para tareas concretas y no tiene tiempo ni paciencia para descifrar una pantalla. Cada decisión de diseño se evaluó pensando en esa persona.
Primero los flujos, después las pantallas
Antes de abrir Figma analizamos las historias de usuario. Con ellas construimos flujogramas completos de cada proceso: qué decide el usuario en cada paso, qué caminos puede tomar y qué pasa cuando algo sale mal.
Ese trabajo previo ordenó la arquitectura de la información. Cuando llegamos a la etapa visual, cada flujo crítico ya tenía coherencia, incluidos los estados de error, que suelen ser lo primero que se olvida y lo primero que frustra al usuario.
Un prototipo que se puede usar, no solo mirar
Para este proyecto trabajamos con un flujo apoyado en inteligencia artificial. Conectamos Figma con agentes de IA mediante Model Context Protocol (MCP), lo que nos permitió diseñar y generar código al mismo tiempo.
El resultado fue que el cliente no revisó una maqueta estática. Probó un prototipo funcional en React, con pantallas que respondían como lo haría la aplicación final. Eso trajo tres ventajas concretas:
- Retroalimentación más rápida: el cliente recorrió los flujos en un entorno interactivo real y detectó diferencias a tiempo, antes de que llegaran a desarrollo.
- Interfaz validada en movimiento: al diseñar y programar en paralelo pulimos los estados dinámicos y el comportamiento de cada pantalla sobre la marcha.
- Entrega más limpia a desarrollo: el equipo de desarrollo recibió una base sólida de código frontal, lo que aceleró la implementación.
Decisiones de interfaz pensadas para el usuario real
El perfil del usuario pedía una interfaz limpia, tipografía legible y una jerarquía visual que no saturara la vista. Cada pantalla muestra lo necesario para la tarea del momento y nada más.
Uno de los puntos más trabajados fue cómo mostrar los productos financieros. Creamos un sistema de tarjetas que se adapta según cuántas cuentas tiene el asociado:
- Una cuenta: la tarjeta ocupa todo el ancho para destacar el saldo y los accesos rápidos.
- Dos cuentas: el espacio se reparte en partes iguales para consultar ambas de un vistazo.
- Tres o más cuentas: las tarjetas se organizan en un carrusel, sin obligar al usuario a desplazarse hacia abajo sin fin.
La confianza también se diseña. El inicio de sesión con biometría, los beneficiarios guardados como favoritos y las confirmaciones claras antes de cada pago reducen la sensación de riesgo que frena a muchos usuarios. La seguridad que sostiene todo eso por detrás merece su propio artículo, y será el siguiente de esta serie. Mientras tanto, puedes leer lo que le cuesta a tu banco mantener servidores propios y lo que cambia con AWS.
Lo que dijeron los usuarios
La nueva versión tuvo una respuesta muy positiva. En Google Play Store, los asociados destacaron sobre todo la simplicidad y la claridad de la navegación:
Estoy genuinamente impresionado con esta actualización, la aplicación es visualmente espectacular e increíblemente intuitiva y funcional, excelente trabajo.
C. M., usuario en Google Play
Está excelente, más intuitiva y fácil de usar, me encantan las nuevas funciones.
N. M., usuaria en Google Play
Muy intuitiva y con gran funcionamiento me encanta.
R. R., usuario en Google Play
Lo que aprendimos de este rediseño de banca digital
- Diseñar para el usuario más exigente mejora la experiencia de todos.
- Los flujos y los estados de error se resuelven antes que las pantallas.
- Un prototipo funcional acorta las discusiones con el cliente, porque se decide sobre algo que ya funciona.
- Integrar agentes de IA entre diseño y desarrollo reduce la distancia entre lo que se aprueba y lo que se construye.
Basar cada cambio en las necesidades reales del asociado nos permitió convertir una banca compleja en una herramienta clara, moderna y de uso diario. Un rediseño así funciona mejor cuando se integra bien con el core bancario y forma parte de un plan más amplio de transformación digital.
Ficha del proyecto
- Sector: cooperativas financieras
- Plataformas: banca en línea y banca móvil (iOS y Android)
- Herramientas: Figma, MCP, React
- Diseño UX/UI: Paolo Valsee, Echo Technologies
Si tu banca en línea necesita una renovación y te preocupa cómo la van a recibir tus usuarios, conversemos.