Banco Sabadell - Design System
Creación y documentación técnica del Design System del Banco Sabadell, construyendo una biblioteca de componentes escalable y una arquitectura de Design Tokens como única fuente de verdad para los equipos de producto e ingeniería. Proyecto liderado en coordinación con equipos de producto e ingeniería distribuidos.
Sobre el proyecto
Lideré la creación y documentación técnica del Design System del Banco Sabadell, enfocado en la escalabilidad y la coherencia visual de sus productos digitales. El proyecto se centró en construir una base sólida de Design Tokens que permitiera a los equipos de producto e ingeniería trabajar de forma sincronizada bajo una única fuente de verdad.
El ecosistema digital de un banco opera sobre múltiples plataformas — web pública, banca online, app móvil y canales internos — con equipos independientes que tomaban decisiones visuales de forma aislada. Sin un sistema centralizado, cada producto acumulaba deuda de diseño: colores ligeramente distintos, tipografías inconsistentes, componentes duplicados y patrones de interacción divergentes.
La UX bancaria del ecosistema digital presentaba una fragmentación severa. Múltiples equipos trabajaban con estilos inconsistentes, generando deuda de diseño y fricción en el desarrollo. No existía una fuente única de verdad para la biblioteca de componentes ni patrones de interacción. Los Design Tokens no estaban definidos como concepto unificado: cada plataforma mantenía sus propios valores de color, tipografía y spacing. La documentación técnica era inexistente, lo que provocaba implementaciones dispares entre diseño y código.
- Cada plataforma (web, app, banca online) mantenía sus propios valores de color, tipografía y spacing sin una fuente común
- La biblioteca de componentes estaba duplicada con variantes inconsistentes entre equipos, generando deuda de diseño acumulada
- Sin documentación técnica centralizada: las implementaciones divergían entre lo diseñado y lo desarrollado
Solución propuesta
Se diseñó un sistema modular basado en Design Tokens como única fuente de verdad para Color (Azul Sabadell #006DFF, Neutros), Spacing (escala de 4px) y Tipografía. Se construyó una biblioteca de componentes basada en Átomos y Moléculas, garantizando la coherencia visual y la escalabilidad entre todas las plataformas. La documentación técnica se centralizó en Zeroheight con sincronización directa a Storybook para maximizar la eficiencia en desarrollo.
01. El Problema
Un ecosistema bancario digital fragmentado
El ecosistema digital de Banco Sabadell había crecido de forma orgánica durante años: web pública, banca online, app móvil y canales internos — cada uno con equipos independientes que tomaban decisiones de diseño aisladas. El resultado era una UX bancaria inconsistente donde un mismo cliente encontraba botones, colores, tipografías y flujos diferentes según el canal que utilizara. La ausencia de Design Tokens como concepto unificado significaba que cada plataforma mantenía sus propios valores. Un botón primario podía tener variantes distintas entre la web y la app. La biblioteca de componentes estaba fragmentada con duplicados y sin documentación técnica que sirviera de referencia para los equipos de desarrollo.
Insight Clave: Sin una fuente de verdad compartida, cada equipo reinventaba la rueda. El coste no era solo visual — era operativo: cada inconsistencia multiplicaba el tiempo de diseño, desarrollo y QA.
02. Proceso Metodológico
Metodología de construcción del sistema — 6 fases
El proyecto siguió una metodología rigurosa de Design Systems Engineering, donde cada fase construye sobre la anterior para garantizar la escalabilidad y coherencia visual del ecosistema:
Auditoría de Interfaz
Análisis exhaustivo de la fragmentación visual en los distintos portales del banco. Se documentaron todas las variantes de color, tipografía, spacing y componentes existentes en web, app y banca online para identificar la deuda de diseño y establecer el alcance del sistema de Design Tokens.
Definición de Átomos
Creación de la base visual del sistema: colores corporativos (Azul Sabadell #006DFF, escala de neutros), tipografía Sabadell, sistema de spacing basado en escala de 4px y grid responsive. Estos Design Tokens se convirtieron en la única fuente de verdad para todo el ecosistema.
Librería de Componentes
Construcción de la biblioteca de componentes basada en Átomos y Moléculas: botones con todos sus estados, inputs bancarios con validaciones, selectores, dropdowns, modales, calendarios y cards. Cada componente diseñado como reactivo, accesible y documentado con sus variantes.
Documentación de Comportamiento
Definición de estados (default, hover, active, focus, disabled, error, success), micro-interacciones y reglas de uso para cada componente. La documentación técnica incluye especificaciones de spacing, anatomía del componente y casos de uso bancarios específicos.
Governance y Handoff
Establecimiento del proceso de contribución para que diseñadores y desarrolladores adopten el sistema. Workflows de propuesta, revisión y aprobación de nuevos componentes. Sincronización entre Figma (diseño) y Storybook (código) mediante Design Tokens.
Aseguramiento de Calidad (QA)
Verificación de la implementación fiel en los productos finales. Revisión de coherencia visual entre diseño y código, testing de accesibilidad WCAG, validación de responsive behavior y comprobación de todos los estados de cada componente.
03. Arquitectura del Sistema
Flujo de trabajo del Design System
El sistema opera como un ciclo continuo donde los Design Tokens globales alimentan la biblioteca de componentes, que se implementa en los productos digitales. El feedback de los equipos de producto retroalimenta la evolución del sistema, garantizando su escalabilidad a largo plazo.
graph LR
A[Tokens Globales] --> B[Librería de Componentes]
B --> C[Implementación en Producto]
C --> D{Feedback & Evolución}
D --> A
style B fill:#006DFF,color:#fff Insight Clave: El ciclo de feedback es la clave de un Design System vivo. Sin governance y sin un proceso claro de evolución, el sistema se convierte en una librería estática que pierde relevancia con el tiempo.
04. Átomos del Sistema
Botones — El componente más crítico del ecosistema bancario
Los botones son el átomo más utilizado de la UX bancaria. Se definieron todas las variantes (primario, secundario, ghost, icon-only) con sus estados completos (default, hover, pressed, focus, disabled) consumiendo directamente los Design Tokens de color y tipografía. Cada variante incluye versiones con y sin icono, en múltiples tamaños.
Inputs, toggles y controles de formulario
Los controles de formulario son críticos en la UX bancaria — desde transferencias hasta apertura de cuentas, cada interacción depende de inputs fiables. Se diseñaron con todos sus estados (default, focus, filled, error, success, disabled) y con soporte completo de accesibilidad.
Tags, chips y selectores de fecha
Los componentes de selección y categorización permiten al usuario filtrar, navegar y seleccionar información dentro de los flujos bancarios. Los chips soportan selección simple y múltiple, mientras que el date picker se adaptó a los requisitos específicos de la banca (fechas de vencimiento, rangos de extractos).
05. Moléculas del Sistema
Modales, filtros y componentes compuestos
Las moléculas combinan múltiples átomos para resolver necesidades específicas de la UX bancaria. Los modales gestionan confirmaciones de operaciones, los filtros permiten segmentar movimientos y las listas presentan información financiera de forma clara y accesible.
Steppers, calendarios y badges
Los componentes de progreso y selección temporal son fundamentales en los flujos bancarios más complejos — apertura de cuenta, solicitud de préstamos y configuración de productos. Cada molécula combina átomos del sistema manteniendo la coherencia visual en cualquier contexto.
06. Resultado Final
Pantallas Web — Banca digital unificada
Las pantallas finales demuestran cómo todos los componentes de la biblioteca de componentes trabajan juntos en flujos bancarios reales. Cada pantalla está construida exclusivamente con Átomos y Moléculas del sistema, validando que la escalabilidad y coherencia visual se mantienen en los flujos más complejos del ecosistema — desde la home pública hasta la banca online.
Pantallas Mobile — Experiencia nativa
La versión móvil demuestra la coherencia visual multiplataforma del sistema. Los mismos componentes se adaptan de forma nativa, manteniendo la identidad visual de Banco Sabadell mientras respetan los patrones de interacción móviles — bottom navigation, touch targets accesibles y flujos simplificados.
