Optimización del proceso de transferencias bancarias en aplicación móvil

Información relevante

Cliente: ING
Etiquetas: UX Design, UI Design, Prototipos interactivos, Design System
Herramientas: Figma, ClickUp
Equipo: Project Manager

Contexto del proyecto

El cliente solicitó la mejora de su aplicación móvil en el proceso de transferencias bancarias, que aunque funcional, presentaba problemas de usabilidad. Estos inconvenientes dificultaban la navegación del usuario, especialmente en la visibilidad del estado del sistema y en la corrección de errores dentro del flujo.

Para abordar este desafío, realicé un análisis integral del flujo actual y lideré el diseño de un prototipo de alta fidelidad que modernizó la interfaz, optimizó la experiencia de usuario y resolvió los problemas clave identificados.

Mi rol

Como diseñador senior UX/UI, fui responsable de liderar todas las fases del proyecto, desde el análisis inicial hasta la entrega del prototipo:

1. Análisis del flujo actual: Revisé y evalué el proceso de transferencia existente para identificar puntos de mejora.

2. Investigación heurística: Apliqué los principios de Nielsen para identificar problemas de usabilidad.

3. Prototipado avanzado: Creé prototipos interactivos en alta fidelidad que integraron las mejoras necesarias.

4. Desarrollo del Design System: Diseñé componentes visuales reutilizables para garantizar consistencia y escalabilidad.

Proceso de diseño

1. Investigación inicial y análisis del flujo

Para entender el estado actual y definir las áreas de mejora, llevé a cabo las siguientes acciones:

• Análisis del flujo existente: Revisé cada paso del proceso de transferencia dentro de la aplicación móvil para identificar puntos críticos y fricciones.

• Análisis heurístico: Evalué el diseño actual basándome en los principios de Nielsen, encontrando áreas problemáticas como:

  • Falta de indicadores de progreso.

  • Dificultad para corregir errores sin reiniciar el flujo.

  • Interfaz con texto excesivo en ciertas etapas.

• Entrevistas con usuarios: Realicé entrevistas con usuarios de la aplicación para comprender sus necesidades, frustraciones y sugerencias de mejora.

• Análisis competitivo: Estudié aplicaciones de bancos competidores para identificar estándares y buenas prácticas en el mercado.

2. Insights clave y definición de objetivos

A partir del análisis realizado, definí los principales insights y objetivos de diseño:

• Claridad en el estado del proceso: Los usuarios debían saber en todo momento en qué etapa del flujo se encontraban.

• Diseño moderno y limpio: Reducir la sobrecarga de texto y actualizar la interfaz para alinearla con las expectativas de los usuarios.

• Capacidad de corrección: Permitir a los usuarios modificar información al final del flujo sin reiniciarlo.

• Ayuda contextual: Añadir puntos de ayuda e información en áreas clave del proceso.

3. Diseño visual y prototipado avanzado

Basándome en los objetivos definidos, pasé a la fase de diseño y prototipado:

• Wireframes iniciales: Diseñé representaciones en baja fidelidad para validar la estructura y el flujo de información.

• Prototipos en alta fidelidad: Creé un prototipo interactivo en Figma que integraba las siguientes mejoras:

  • Barra de progreso: Indicadores visuales para mostrar al usuario su posición en el flujo.

  • Menú flotante: Un diseño moderno y limpio que facilitaba la navegación.

  • Opciones de corrección: Capacidad de modificar detalles en el resumen final antes de confirmar la transferencia.

  • Textos informativos: Añadí mensajes claros sobre condiciones y tiempos estimados para reducir incertidumbres.

• Testing interno: Validé el prototipo con miembros del equipo para asegurar la funcionalidad y claridad de las interacciones.

4. Implementación del Design System

En lugar de crear un sistema desde cero, tomamos el sistema de diseño existente de ING y lo adaptamos para cubrir las necesidades específicas del proceso de transferencias bancarias. Las acciones incluyeron:

• Optimización de componentes existentes: Refinamos botones, formularios y otros elementos visuales para garantizar una experiencia más intuitiva y moderna dentro del flujo de transferencias.

• Extensión del sistema: Añadimos componentes personalizados, como la barra de progreso y nuevos iconos de ayuda, asegurándonos de mantener la coherencia con el diseño global de la aplicación.

• Documentación actualizada: Incluimos especificaciones detalladas de los componentes mejorados, proporcionando al equipo de desarrollo una guía clara para su implementación técnica.

Resultados del proyecto

El rediseño logró transformar la experiencia de usuario en el proceso de transferencias bancarias, solucionando problemas clave y mejorando significativamente la usabilidad:

1. Estado claro del proceso: Los indicadores visuales y textos informativos permitieron a los usuarios saber con precisión dónde se encontraban en el flujo.

2. Interfaz moderna y limpia: La actualización del diseño redujo la carga cognitiva, haciendo que el flujo fuera más amigable y atractivo.

3. Corrección al final del flujo: Los usuarios ahora pueden realizar modificaciones sin tener que reiniciar el proceso, lo que mejoró notablemente la experiencia.

4. Ayuda contextual: Los puntos de ayuda e información adicional generaron confianza y seguridad en la toma de decisiones.

El prototipo entregado no solo resolvió las necesidades planteadas, sino que también estableció una base sólida para futuras mejoras en la aplicación móvil de ING.