El Reto de la 'Coexistencia':
El Reto de
la 'Coexistencia':
01
[Consultor Externo][Gestión de Crisis][Sistemas de Diseño][Migración Figma]
Orquestando la Transformación Digital en un Ecosistema Bancario Fragmentado.
CitiBanamex Empresarial (2020-2025).
De UX Designer a Líder de Célula Estratégica.
"Gestionar el diseño en un banco global no se trata solo de interfaces; se trata de política, deuda técnica y resiliencia. Durante 5 años, navegué la transición entre 5 tecnologías coexistentes, lideré la adopción de Figma bajo estrictas medidas de seguridad y diseñé la estrategia de supervivencia durante la histórica separación de Citi y Banamex."
Explora mi trabajo
Unificar lo Incompatible.
Unificar lo
Incompatible.
El producto 'CitiBanamex Empresarial' era, en realidad, un archipiélago de plataformas desconectadas. Mi misión fue diseñar flujos transversales donde el usuario iniciaba en una tecnología Legacy y terminaba en una Next Gen sin percibir la fricción técnica.
EL OBJETIVO PRINCIPAL
"Mantener coherencia visual y usabilidad Pixel Perfect a pesar de las limitaciones de renderizado de cada entorno."
Break points
768px
1024px
1440px
La Estrategia de Librerías:
La Estrategia
de Librerías:
"One Brand, Multiple Stacks".
"One Brand,
Multiple Stacks".
La aspiración inicial fue crear una 'Super Librería' unificada (Web + Mobile). Sin embargo, la deuda técnica del banco lo hizo imposible: No podíamos compartir componentes con el monolito de Legacy ni con el desarrollo Móvil.
Paridad Visual Forzada
Paridad Visual
Forzada
Optamos por mantener librerías de diseño separadas (UI Kits en Sketch/Abstract) pero sincronizadas manualmente. El éxito no fue la eficiencia de código, sino la consistencia de la experiencia: un botón en la banca vieja se sentía idéntico al de la nueva, enmascarando la complejidad técnica al usuario.
Repositorio de librerias
LIBRERIA WEB
Sketch / Abstract
LIBRERIA MOBILE
Sketch / AbstractANATOMIA DEL SISTEMA
02
Legacy Core
03
Coexistencia
04
Banca Direct
05
Banca Móvil
01
Banca del Futuro
02
Legacy Core
03
Coexistencia
04
Banca Direct
05
Banca Móvil
Liderazgo en la Trinchera:
Liderazgo en
la Trinchera:
Metodología vs. Seguridad.
Metodología vs.
Seguridad.
"Logré armonizar la agilidad de los ciclos de diseño con los estrictos protocolos de seguridad bancaria. Como consultor, implementé un modelo de gestión paralela que nos permitió iterar con rapidez fuera de las limitaciones técnicas de la red interna, asegurando que las entregas finales estuvieran siempre alineadas con los Sprints oficiales del banco."
1. Sincronización Asimétrica
GESTIÓN EXTERNA
"Gestioné el backlog de mi célula en tableros externos (ClickUp) para alinearnos con los Sprints internos del banco, superando la falta de acceso a herramientas corporativas."
2. Diseño en la 'Caja Fuerte'
ENTORNO HOSTIL
"El trabajo UI se ejecutó vía Máquinas Virtuales con latencia y sin portapapeles, lo que exigió una disciplina de gestión de archivos impecable."
3. El Filtro de Viabilidad
LEGAL & TECH
"El proceso de diseño incluía una fase crítica de validación Legal y Técnica antes de cualquier Grooming. Aprendí a diseñar no solo para el usuario, sino para el abogado y el arquitecto de software."
Herramientas utilizadas
JiraClickUpSketchAbstract
La Batalla del Date Picker:
La Batalla del
Date Picker:
3 Años para Simplificar 2 Clics.
3 Años para
Simplificar 2 Clics.
1. El Diagnóstico
El Problema del "Doble Esfuerzo"
"El sistema original exigía una carga cognitiva innecesaria: el usuario debía abrir el picker, seleccionar fecha, cerrar, y repetir para la segunda fecha. Cuatro pasos donde dos bastaban."
ANTES (Reactivo)Anatomía
4 Pasos (Open-Select-Close-Repeat)Análisis de componentes
2. La Estrategia
Benchmark de Aerolíneas
"Exploración de patrones: Analicé patrones de interacción en sitios de aerolíneas y reservas para adoptar el modelo mental de calendario de doble vista."
"Hipótesis: Al alinear la interfaz con modelos mentales de compra de vuelos, reduciría la fricción y el número de interacciones."
"Solución: Diseño de Calendario Doble Vista basado en benchmark de aerolíneas, con feedback de hover dinámico e indicador de amplitud de días seleccionados."
Característica A
Calendario de Vista Doble para visualización de dos meses simultáneos y selección de rangos.
Característica B
Feedback de Hover Dinámico para eliminar la incertidumbre al elegir fechas.
Característica C
Indicador de Amplitud (Contador automático de días seleccionados).
4. El Impacto: Resiliencia
"A pesar de que la complejidad del backend retrasó la implementación final, el componente quedó documentado y listo para integración. El diseño sobrevivió a dos reestructuraciones del equipo."
Filosofía Operativa
ESTRATEGIA & LIDERAZGO
Gobernanza de Sistemas Globales
"Auditoría profunda del Design System global de Citi para garantizar coherencia entre canales."
Estrategia de Valor Incremental
"Metodología de diseño proactivo: entrega de la solución en iteraciones de alto impacto."
Diseño Basado en Compliance
"Diseño pragmático bajo restricciones reales. Validación legal y técnica antes de desarrollo."
Continuidad Cognitiva
"Diseño de interfaces de transición en entornos de migración para no romper modelos mentales."
La Crisis de Separación:
La Crisis
de Separación:
4 Personas vs. El Reloj.
4 Personas
vs. El Reloj.
Contexto de Negocio
Con la venta del banco y la separación de marcas, Marketing exigió actualizar toda la Banca Empresarial al nuevo 'Look & Feel' de Banca Personal. Teníamos escasos meses y un equipo de solo 4 personas para más de 1000 pantallas.
Negociación (Data Driven)
Usé datos para decir 'No'. Demostré a directivos que rediseñar pantalla por pantalla era inviable, proponiendo un enfoque sistémico centrado en patrones.
Scope OriginalImpossible (1000+ screens)
Propuesta SistémicaViable (40 Patterns)
Análisis 80/20
Una auditoría reveló que el 80% de las pantallas se construían con menos del 20% de los patrones de diseño. Nos enfocamos en esos 'Golden Patterns' para maximizar el impacto en tiempo récord.
Ejecución Táctica
Creamos 'Mockups Maestros' (<40 plantillas en Figma) que cubrían la mayoría de los casos de uso, permitiendo a los desarrolladores aplicar cambios globales.
Tech Shift
Migramos de Sketch a Figma, modernizando el flujo de trabajo y permitiendo colaboración en tiempo real con los stakeholders.
M1M2M3M4
The Squad
Solo 4 diseñadores senior orquestando cambios para toda la división empresarial.
Impacto Final
100%
Entrega a tiempo para el 'Day 1' de la nueva marca. Cero incidentes críticos de diseño en producción.
Web mockup
Mobile mockup
Mobile mockup
Más allá de los Pixeles.
Mi paso por CitiBanamex me transformó. Entré sabiendo diseñar interfaces; salí sabiendo negociar con stakeholders, gestionar deuda técnica masiva y liderar equipos pequeños para resolver problemas de escala empresarial.