Rediseño UX/UI de procesos clave en Citibanamex
Optimización de Experiencia Digital en Banca.
Optimización de Experiencia Digital en Banca.
Embedded Files
Cliente: Citibanamex (en alineación con Citi Design System)
Sector: BancaNet Empresarial
Año: 2020-2025
Rol: Diseñador UX/UI→ Diseñador Senior UX/UI & Lider de diseño
Plataformas: Web, Mobile (Pocket) - Web App (iOS/Android)
Metodología: Design Thinking (adaptado) + Scrum
Equipo: Diseño, Producto, Desarrollo, Analíticos, Legal y Negocio.
Antes, programar la descarga de un archivo de movimientos en Citibanamex tomaba 9 minutos, 25 pasos y mucha paciencia. Hoy, lo hace en 3 minutos.
Como Diseñador UX/UI, lideré la migración y rediseño de 25+ funcionalidades clave de la banca empresarial digital, desde transferencias hasta consultas masivas, con el objetivo de reducir fricciones, tiempos de operación y errores de navegación .
El resultado:
El resultado:
35% menos de tiempo en completar tareas críticas.
80% de tasa de finalización en procesos clave (antes: 50%).
Homologación con estándares globales de Citi, sin sacrificar usabilidad local.
Este proyecto no fue solo un rediseño. Fue una transformación digital real , hecha con agilidad, empatía… y muchas veces, con herramientas mínimas.
El problema que nadie veía (pero todos sentían).
El problema que nadie veía (pero todos sentían).
BancaNet Empresarial de Citibanamex funcionaba, pero no fluía . Los usuarios (empresas, contadores, tesoreros reportaban frustración al realizar tareas cotidianas como:
Descargar archivos contables (movimientos).
Programar transferencias periódicas.
Consultar estados de cuenta.
Los tiempos eran excesivos, la interfaz heredada de tecnologías antiguas era confusa, y muchos abandonaban antes de terminar. Además, no había coherencia con los estándares de experiencia de Citi a nivel global.
El reto era claro:
Modernizar la experiencia digital sin sacrificar seguridad, cumplimiento ni identidad de marca.
El reto era claro:
Modernizar la experiencia digital sin sacrificar seguridad, cumplimiento ni identidad de marca.
"Antes, cada vez que necesitaba descargar los archivos contables, tenía que hacerlo en partes, verificar que no hubiera errores y muchas veces reiniciar el proceso. Ahora, todo fluye en menos pasos, con retroalimentación clara. Incluso mi equipo nuevo no necesita capacitación intensiva."
Usuario empresarial (Tesorero, empresa fabricante), entrevista de usabilidad, 2023
Mi Rol: De diseñador a líder de célula
Mi Rol: De diseñador a líder de célula
Entré como diseñador individual, pero el proyecto creció… y yo con él.
2020-2022 - Propuestas de migración, wireframes, pruebas A/B, card sorting
2022–2023 - Revisión de entregas, presentación a stakeholders, alineación con Citi DS
2023–2025 (Líder de Diseño Ux/Ui) - Coordinación de célula, gestión de lanzamientos, priorización con Producto
No hay interfaces diseñadas solo. Lideré decisiones de experiencia , coordiné equipos y presenté resultados a altos ejecutivos.
Proceso: Diseño ágil para entornos reales
Proceso: Diseño ágil para entornos reales
Sabíamos que no íbamos a tener todos los recursos. Así que adaptamos Design Thinking al ritmo ágil del proyecto.
Investigación (validar, no adivinar)
Investigación (validar, no adivinar)
Análisis de datos con Analytics: Identificamos puntos de abandono en flujos clave
Pruebas de usabilidad (remotas): Descubrimos que el 50% de los usuarios no sabía si un documento se había subido.
Clasificación de tarjetas: Reorganizamos la arquitectura para que sea más intuitiva.
Benchmark con Citi y competencia: Validamos patrones globales y adaptamos a contexto local.
Definición (enfocar para acelerar)
Priorizamos funcionalidades con una matriz de impacto/esfuerzo , centrando esfuerzos en:
Definición (enfocar para acelerar)
Priorizamos funcionalidades con una matriz de impacto/esfuerzo , centrando esfuerzos en:
Descarga y consulta de archivos (movimientos) → Alto impacto, alta frustración.
Transferencias programadas → Crítico para tesorería.
Pagos de impuestos → Alta carga cognitiva.
Diseño & Validación (creatividad con lo que hay)
Priorizamos funcionalidades con una matriz de impacto/esfuerzo , centrando esfuerzos en:
Diseño & Validación (creatividad con lo que hay)
Priorizamos funcionalidades con una matriz de impacto/esfuerzo , centrando esfuerzos en:
Wireframes high level (Sketch + Abstract): Enfocados en estructura, no en estética.
Homologación con Citi Design System : Adaptamos componentes existentes y creamos nuevos cuando no aplicamos.
Prototipos interactivos en PowerPoint +QuickTime : Sí, así como suena. Usamos transiciones y grabaciones de pantalla para simular interacciones.
Pruebas A/B con usuarios reales : Validamos microcopia, clasificación visual y flujos.
Gif realizado con PowerPoint
Solución: Simplicidad, claridad, velocidad
Solución: Simplicidad, claridad, velocidad
Diseñamos para que cada clic tenga sentido.
Cambios clave:
Cambios clave:
Indicador de progreso claro en cada flujo.
Microcopia directa y humana : “Tu archivo se está generando…” en lugar de “Procesando solicitud”.
Validación en tiempo real : Feedback inmediato al subir documentos.
Contrastes mejorados (WCAG AA) : Redujimos errores de legibilidad del 50% al 10%.
Flujo de descarga contables (movimientos) reducido de 25 a 15 pasos .
Retos: Lo que no sale en los informes (pero sí en mi portafolio)
Retos: Lo que no sale en los informes (pero sí en mi portafolio)
Este proyecto no fue fácil. Y eso es parte de su valor.
Herramientas limitadas: Sin Figma, sin prototipado avanzado. Usamos bocetos, abstractos, PowerPoint y QuickTime .
Sin design system estable: Creamos componentes desde cero y los documentamos en Confluence.
Comunicación frágil: Poca cercanía con POs y stakeholders. Tuve que generar confianza con datos.
Entorno seguro y restringido: No podíamos instalar software externo.
"La mejor herramienta no es Figma. Es tu capacidad de resolver con lo que tienes"
"La mejor herramienta no es Figma. Es tu capacidad de resolver con lo que tienes"
¿Qué dejaría igual? ¿Qué cambiaría?
¿Qué dejaría igual? ¿Qué cambiaría?
“Hoy, con más recursos, haría más pruebas con usuarios reales desde el inicio. Pero me enorgullece cómo, con limitaciones técnicas y de herramientas, logramos una transformación real. Este proyecto no fue solo sobre diseño. Fue sobre resiliencia, liderazgo y empatía. Y sobre recordar que, al final, diseñamos para personas, no para pantallas .”
Page updated
Google Sites
Report abuse