Escalando el Design System de Scotiabank
Un sistema local que llevó consistencia a recorridos financieros complejos.
Diseño de Producto
Diseño UX
Sistema de Diseño
Resumen
De lo global a lo local: el Design System de Scotiabank en Colombia
Scotiabank llegó a Colombia tras adquirir un banco local, Colpatria. El equipo heredó un stack tecnológico existente, con frameworks, librerías, patrones y restricciones de front-end, y a la vez debía preservar la identidad visual y la experiencia que los clientes del banco adquirido ya reconocían.
Al mismo tiempo, en Canadá existía un Design System global, con tokens, componentes y lineamientos, creado para estandarizar la experiencia en todo el grupo. Como Product Designer y Design System Staff, lideré la adaptación, mejora y adopción progresiva del sistema global para Colombia.
Problema
El reto no era implementar un Design System desde cero. Era migrar sin afectar la operación:
Brecha tecnológica
El stack local no podía soportar de inmediato todos los componentes y patrones del Design System global.
Brecha de madurez
El equipo UX local necesitaba seguir entregando producto mientras el sistema se construía y adaptaba.
Riesgo para la identidad
Adoptar el Design System global tal cual podía diluir la marca y los patrones familiares del banco adquirido.
Costo operativo
Sin un sistema adoptado, se repetían decisiones, se duplicaban componentes y crecían las inconsistencias de UI/UX.
Investigación
Para diseñar una ruta de adopción realista, empecé por diagnosticar y mapear:
Auditoría de UI y componentes existentes en Colombia
Inventario de componentes activos en web y app, incluidas variantes, estados y deuda visual.
Gap analysis frente al Design System global de Canadá
Identifiqué qué podía reutilizarse, qué requería adaptación por branding, idioma o regulación, y qué no era viable técnicamente.
Revisión con desarrollo: factibilidad y roadmap
Validé las restricciones del front-end local y definí una estrategia progresiva, compatible e incremental.
Investigación interna de adopción en diseño y delivery
Entrevistas rápidas y rituales de equipo revelaron fricciones en las librerías de Figma, el handoff, la documentación y las dudas recurrentes.
Componentes más usados de nuestra librería de Colombia
Librerías de Figma creadas para Colombia
Componentes aportados a nuestras librerías
Decisiones de diseño (qué hice diferente)
El diagnóstico guió decisiones clave para que el sistema fuera adoptable, no solo atractivo:
- Estrategia de adopción por capas (Tokens → Componentes → Patrones): En lugar de migrar todo de una vez, el trabajo avanzó por niveles de abstracción que permitían progresar sin romper lo existente.
- Modelo de compatibilidad con la identidad local: En vez de imponer el 100% del Design System global, definí dónde conservar la marca local y dónde estandarizar para ganar consistencia.
- Priorizar por ROI de consistencia: Enfoqué el esfuerzo en los componentes con mayor impacto en la experiencia y potencial de reutilización.
- Documentación como producto, no como anexo: Guías de uso, principios de decisión, ejemplos y reglas de do/don't permitieron que cualquiera usara el sistema sin depender de mí.
- Ciclo continuo: revisar → ajustar → estandarizar → lanzar → medir: El sistema se mantuvo vivo con iteraciones basadas en feedback del equipo y métricas de uso.
Solución
El resultado fue una adaptación funcional del Design System global para Colombia, implementable de forma incremental y alineada con la realidad del producto.
Los tokens se ajustaron a las necesidades del mercado local y a la identidad del banco adquirido, incluidos colores, tipografía, espaciado y estilos base.
Auditoría y consolidación de componentes: agrupé variantes repetidas en componentes y plantillas reutilizables, reduciendo la duplicidad.
Componentes más usados de nuestra librería de Colombia
Un repositorio actualizado y accesible para el equipo UX: librería en Figma, documentación clara y convenciones compartidas.
Librerías de Figma creadas para Colombia
Colaboración con desarrollo para llevar los lineamientos a la implementación: definición de componentes viables para el stack actual, roadmaps de migración y criterios de aceptación.
Adopción interna: rituales, acompañamiento al equipo, guías rápidas y procesos estandarizados permitieron usar el Design System en proyectos reales sin frenar las entregas.
Impacto
Velocidad de diseño (time-to-design)
Antes, una pantalla tomaba 10–12 horas por iteraciones e inconsistencias. Con componentes y tokens, bajó a 6–8 horas: una mejora del 30–40%.
Menos retrabajo por inconsistencias de UI
Los ajustes por inconsistencias de UI pasaron de 18–25% a 8–12% de los tickets, reduciendo el retrabajo en 40–60%.
Consistencia del producto
Se estandarizaron componentes clave, reduciendo las variantes visuales redundantes en 35–50%.
Eficiencia de desarrollo: alineación diseño-dev
Los lineamientos claros redujeron en 20–30% las solicitudes de aclaración durante el sprint.
Adopción del sistema por el equipo
El uso pasó de una adopción parcial a 70–85% en nuevas pantallas construidas con el Design System.
Impacto indirecto en la experiencia: calidad percibida
La mayor consistencia mejoró la calidad percibida, con +5 a +10 puntos en métricas de UX/UI o menos issues de QA.
Convertí el Design System global de Scotiabank en un estándar viable para la tecnología existente en Colombia, acelerando el delivery, reduciendo el retrabajo entre diseño y desarrollo y habilitando una transición progresiva que preservó la identidad del banco adquirido mientras escalaba la consistencia del producto.
