Sofía Torrado UX & Product Hablemos ↗
← Volver al portfolio
Caso de estudio · UX/UI Mobile · Fintech

Banelco: App Mobile

Caso de estudio sobre la app mobile de banca y pagos: del análisis heurístico al rediseño completo de la experiencia.

UX ResearchUI MobileFintech
Dos pantallas de la app Banelco: splash con logo y reserva de monto

Problema / necesidad

Las tareas más frecuentes —transferir dinero y pagar servicios— tenían demasiados pasos, jerarquías visuales poco claras y mensajes de error que no explicaban cómo resolver el problema. El usuario dudaba justo en el momento de confirmar.

Objetivo

Reducir la fricción de las tareas críticas, ordenar la navegación y dar feedback claro en cada paso, sin romper la confianza que una app bancaria necesita transmitir.

Investigación

Para quién diseñé esto

Antes de tocar una pantalla hice una auditoría heurística de la app y hablé con usuarios frecuentes de home banking para entender en qué momento dudan al pagar o transferir.

Persona

Diego, 41 años

Empleado de comercio, usuario frecuente de home banking

"No quiero pensar en la app mientras hago un pago, quiero que me diga que salió bien."

Objetivos
  • Confirmar que una transferencia se realizó sin dudar
  • Pagar un servicio en menos de un minuto
Frustraciones
  • Los mensajes de error no explican cómo resolverlos
  • No sabe en qué paso está durante una transferencia
Proceso de diseño

Cómo lo resolví

01

Auditoría heurística

Recorrido de la app evaluando las 10 heurísticas de Nielsen y registrando cada punto de fricción con evidencia.

02

Journey map

Mapeo del flujo real de transferencia y pago de servicios para ubicar dónde se abandona la tarea.

03

Wireframes

Reestructuración de la navegación y de los pasos de confirmación en baja fidelidad.

04

UI y prototipo

Pantallas finales con todos sus estados (vacío, carga, error, éxito) y prototipo navegable para validar.

Identidad visual / piezas

Qué entregué

Sistema de navegación inferior simplificado
Componentes de input con validación en línea
Estados de error con acción de recuperación
Pantalla de confirmación con resumen visible
Pantallas web de la app Banelco: navegación, transferencia y confirmación
⤢Ver en grande
Vista Web
Pantallas mobile de la app Banelco: mapa de cajeros y reserva de efectivo
⤢Ver en grande
Vista Mobile
Pantallas web de la app Banelco, vista ampliada
Clic o Esc para cerrar
Pantallas mobile de la app Banelco, vista ampliada
Clic o Esc para cerrar
Resultado

Un flujo de transferencia y pago más corto y predecible, con mensajes que indican qué hacer ante un error y una jerarquía visual que prioriza el monto, el destinatario y la confirmación.

← Volver al portfolio Siguiente proyecto: Pet's World: Diseño Web & Mobile →