Fintech · Banca Digital 2024 End-to-end UX/UI

Columbia Bank

Rediseño de la experiencia móvil de banca digital.
Simplificando operaciones financieras diarias para que cualquier usuario pueda gestionarlas con confianza y facilidad.

Overview

Contexto del proyecto

Columbia Bank necesitaba modernizar su aplicación móvil para reducir la fricción en operaciones cotidianas, mejorar la percepción de seguridad y aumentar la adopción entre usuarios menores de 40 años.

Mi rol

UX/UI Designer — investigación, flujos, diseño visual y entrega a desarrollo

Duración

12 semanas (Q1 2024)

Equipo

1 Product Manager · 2 Devs iOS/Android · 1 UX Designer

Herramientas

Figma · FigJam · User testing

Plataforma

iOS · Android (diseño nativo adaptado)

Entregables

Research report · User flows · Wireframes · Prototipo Hi-Fi · Design System para IT


El Problema

¿Qué no estaba funcionando?

Los usuarios abandonaban flujos clave para transferir antes de completarlos.

Las tasas de error en transferencias eran altas y el soporte telefónico recibía cientos de llamadas semanales por dudas que la app debería resolver sola.

"Siempre tengo miedo de equivocarme al transferir."

— Usuario entrevistado, 34 años

72% tasa de abandono

340 llamadas/semana

4.2 min promedio


User Research

Entendiendo a los usuarios

Conduje entrevistas 1:1, análisis de grabaciones de sesiones y una encuesta cuantitativa para mapear dolores, motivaciones y contextos de uso reales.

01

Entrevistas contextuales — 8 usuarios

Sesiones de 45 minutos donde observé cómo los usuarios interactuaban con la app en su contexto real. Identifiqué puntos de frustración, momentos de duda y estrategias de workaround que los usuarios habían desarrollado solos.

Entrevistas 1:1 Observación contextual
02

Análisis de datos cuantitativos

Revisé las grabaciones de sesiones y analytics de la app. Identifiqué los puntos exactos de abandono en el funnel y las pantallas con mayor tasa de error.

Analytics
03

Benchmark competitivo

Analicé los flujos de BBVA México, Mercado Pago y HSBC para entender los patrones de interacción que los usuarios ya conocen y esperan en una app bancaria moderna.

Evaluación Heuristica
04

Síntesis — Affinity mapping y personas

En FigJam agrupé los hallazgos por temas y construí 2 personas principales: el "Usuario frecuente" (25–35 años, nativo digital, quiere velocidad) y el "Usuario precavido" (40–55 años, prioriza claridad y confirmación sobre rapidez).

User personas FigJam

Definición

Los problemas reales a resolver

Con los hallazgos de research sintetizados, definí los problemas de diseño para enfocar las soluciones.

¿Cómo podríamos hacer que los usuarios confíen en que su transferencia se completó?

La falta de feedback claro era la principal causa de ansiedad. Los usuarios no sabían si la operación fue exitosa o si algo falló silenciosamente.

¿Cómo podríamos reducir los pasos necesarios para completar una transferencia?

El flujo tenía 7 pantallas. La mayoría de las apps competidoras resuelven el mismo flujo en 3–4 pantallas sin sacrificar seguridad.

¿Cómo podríamos ayudar a los usuarios a encontrar funciones que ya existen en la app?

La arquitectura de información estaba organizada por lógica del negocio, no por las tareas que los usuarios quieren completar.

¿Cómo podríamos diseñar para dos perfiles de usuario con necesidades opuestas?

El usuario frecuente quiere atajos; el usuario precavido quiere contexto y confirmaciones. La solución debía funcionar para ambos.


User Flow

Diseñando el camino correcto

Mapeé los flujos críticos desde cero, cuestionando cada paso del proceso original y eliminando todo lo que no aportara valor al usuario.

El flujo de transferencia pasó de 7 pasos a 3 pasos sin sacrificar la confirmación de seguridad que los usuarios precavidos necesitan.

Flujo: Transferencia bancaria

1

Inicio — Dashboard

Acceso rápido visible en pantalla principal

Nuevo
2

Selección de destinatario

Contactos recientes + búsqueda · 1 pantalla

Nuevo
3

Monto + concepto

Teclado numérico dedicado · validación en tiempo real

Mejorado

Confirmación clara

Resumen + estado animado · comprobante inmediato

Nuevo

Prototipo

De estructura a solución

Empecé con wireframes de baja fidelidad en papel para explorar rápido, luego los digitalizé en Figma para validar jerarquías y flujos con el equipo.

Soluciones de Diseño

Las decisiones que hicieron la diferencia

Cada decisión de diseño responde directamente a un hallazgo de research. Aquí las más impactantes.

01

Dashboard con accesos rápidos contextuales

Reemplacé el menú de hamburguesa con acciones frecuentes visibles en el home, adaptadas al historial del usuario. Los usuarios encontraron "Transferir" en menos de 5 segundos vs. 42 segundos antes.

02

Feedback de estado animado y explícito

Diseñé una pantalla de confirmación con animación de éxito, resumen completo de la operación y número de folio visible. La ansiedad post-transferencia bajó significativamente en los tests.

03

Teclado numérico nativo dedicado

En lugar del teclado del sistema, diseñé un teclado numérico custom que muestra el monto de manera grande y clara, con validación en tiempo real del saldo disponible. Errores de monto: −68%.

04

Contactos recientes como primer paso

El 78% de las transferencias van a los mismos 3 contactos. Puse los recientes al frente, con foto y nombre claro, eliminando la necesidad de escribir CLABE completas en la mayoría de los casos.

Usability Testing

Validando con usuarios reales

Realicé 2 rondas de pruebas de usabilidad en Maze con el prototipo de alta fidelidad. Participaron 12 usuarios (6 por ronda), con tareas específicas que cubrían los flujos críticos.

Tareas evaluadas

Completar una transferencia 94% éxito
Encontrar historial de movimientos 89% éxito
Configurar transferencia programada 74% éxito
Reportar tarjeta como perdida 91% éxito

Iteración: transferencia programada

El 74% de éxito reveló que "Programar" no era un término claro. Lo cambié a "Transferencia futura" y la tasa subió a 88% en la ronda 2.

Hallazgo inesperado: botón de favoritos

Los usuarios buscaban un ícono de corazón o estrella para guardar contactos. Agregué un CTA de "Guardar" post-transferencia que no estaba en el diseño original.

Ajuste de tamaño táctil

Usuarios mayores de 45 años tuvieron errores al tocar las tarjetas de contacto. Aumenté el área de toque de 36px a 48px según las guías de Apple HIG.