Banca y finanzas
Sistema de diseño de Cetelem
Un sistema de diseño atómico, multimarca y accesible para todos los productos digitales de Cetelem.
- Cliente
- Banco Cetelem · BNP Paribas Personal Finance
- Mi rol
- Senior UX / Product Designer · responsable del Design System
- Productos
- Préstamo, eCommerce, web corporativa, landings y comunicaciones
El reto
Productos que crecían por separado y una financiación que debía adoptar la marca de cada comercio.
La clave
Un sistema atómico con tokens por modos y una nomenclatura compartida con desarrollo.
El resultado
Un único sistema, accesible AA, para todos los productos de Cetelem, que sigue extendiéndose como forma de trabajo.
El problemaMuchos productos, ninguna fuente única
Préstamo, eCommerce, web corporativa, landings, comunicaciones: cada producto de Cetelem había crecido con sus propios estilos y componentes.
El resultado eran interfaces incoherentes, decisiones que se repetían en cada equipo y desarrollos que empezaban casi de cero. Además, la financiación de Cetelem vive dentro del proceso de compra de cada comercio, así que los mismos componentes tenían que vestirse con la marca de cada uno sin dejar de ser Cetelem por dentro.
ProcesoCómo lo hicimos
Construimos el sistema por capas, de lo más básico a lo más complejo, y siempre en pareja con desarrollo.
Auditoría
Inventario de interfaces y componentes de todos los productos para detectar duplicidades.
Fundamentos
Color, tipografía, espaciado, elevación e iconografía como base común.
Tokens
Una nomenclatura compartida con desarrollo para nombrar cada decisión de diseño.
Componentes
De los átomos a las piezas de negocio, documentados con sus propiedades.
Modos de marca
Tokens que cambian de valor según la marca en la que se integra la financiación.
Adopción
Documentación, acompañamiento a los equipos y evolución continua.
Sistema atómicoDe lo pequeño a lo complejo
Todo parte de los fundamentos: paletas de color, tipografía, espaciado, elevación e iconografía.
Sobre ellos se construyen los átomos (botones, campos, casillas, interruptores) y, combinándolos, componentes cada vez más complejos hasta llegar a piezas de negocio como el simulador de financiación. Cada componente se documenta con sus propiedades, variantes y estados, para que diseño y desarrollo hablen exactamente de lo mismo.
Design tokensUn idioma común con desarrollo
Definimos con desarrollo una nomenclatura compartida en la que cada token se nombra de lo más general a lo más concreto.
Primero el tipo de token, después a qué parte afecta, a qué componente, con qué intensidad y en qué estado. Así, un nombre como --color-surface-button-primary-default se lee igual en Figma que en el código, y cualquiera sabe qué hace sin abrir la documentación.
Tokens por modosUn sistema, muchas marcas
La financiación de Cetelem se integra en el eCommerce de cada comercio y tiene que sentirse parte de su web.
Para conseguirlo, los tokens semánticos se resuelven por modos: cada marca tiene el suyo y, al cambiarlo, todos los componentes adoptan su color, su tipografía y sus radios de borde sin tocar una sola pieza. Añadir una marca nueva es una configuración, no un rediseño.
AccesibilidadAccesible por defecto
El sistema está pensado para cumplir WCAG 2.1 AA desde la base, no como una revisión al final.
Los pares de color de los tokens se validan con un contraste mínimo de 4,5:1 en cada modo de marca; si el color de una marca no lo alcanza, su modo usa el tono accesible más cercano de su escala. Todos los componentes tienen foco visible, los campos llevan siempre etiqueta y los errores se comunican con texto e icono, nunca solo con color.
AdopciónHacer que el sistema importe
Un sistema de diseño solo funciona si toda la empresa cree en él.
Desde el equipo de UX fuimos los embajadores de la iniciativa: un trabajo enorme de comunicación para explicar a negocio, producto y desarrollo por qué un sistema común permite escalar productos, optimizar los desarrollos y reducir costes, y para acompañar a cada equipo en su adopción.
Hoy el sistema es transversal a préstamo, eCommerce, web corporativa, landings y comunicaciones, y sigue tomando forma y extendiéndose como la manera de trabajar en Cetelem.
AprendizajesLo que me llevo
- Un sistema de diseño es tanto un cambio cultural como un trabajo técnico: convencer es la mitad del proyecto.
- Acordar la nomenclatura de tokens con desarrollo desde el principio evita traducciones y discusiones después.
- Pensar en modos desde el primer día hace que cada marca nueva sea una configuración y no un rediseño.