Marca
Lulo Bank
Sector
Fintech
Lulo Bank contaba con un Design System existente, pero su estado era crítico: Varios documentos desorganizados, librerías sin publicar, estilos deprecados que seguían en uso y componentes mal construidos. Falta de gobernanza, diseñadores tomando decisiones de manera independiente, rompiendo la coherencia visual y dificultando la implementación en desarrollo.
desafio
Un sistema que nadie seguía
porque nadie podía entender
El problema no era solo estético. La ausencia de una fuente de verdad clara generaba inconsistencias en cada pantalla, problemas de accesibilidad no resueltos y una escalabilidad prácticamente imposible. Los diseñadores navegaban entre más de 10 documentos, las librerías se pisaban entre sí, los estilos de color y tipografía estaban documentados en lugares distintos sin conexión real entre ellos.
El verdadero reto era reconstruir el sistema sin detener la operación del equipo: rediseñar las bases, establecer gobernanza y lograr que desarrollo pudiera implementarlo sin duplicar el esfuerzo.
rol
Liderar la reconstrucción mientras
el equipo seguía diseñando
El proyecto inició con un diagnóstico profundo de todos los documentos existentes, mapeando inconsistencias a nivel macro y micro, e identificando los dolores reales del equipo. Lideré el proceso de principio a fin, definiendo la dirección del nuevo sistema y guiando al resto del equipo durante su construcción.
En paralelo, mantuve reuniones continuas con el equipo de desarrollo para alinear criterios de implementación, y durante este proceso también se identificó que la galería de iconos existente era insuficiente para el crecimiento del producto, lo que derivó en la decisión de adquirir una librería externa que redujo significativamente los tiempos de ambos equipos.
solución
De la fragmentación a
un sistema real, usable y escalable
La solución fue consolidar todo en dos documentos conectados: Zumo Foundations como fuente de verdad visual, con colores correctamente tokenizados, tipografía alineada a múltiplos de 8, iconografía unificada y variables de espaciado, bordes, opacidad y breakpoints disponibles directamente en Figma sin necesidad de consultar documentos externos.
El documento de Zumo componentes unificó web y mobile bajo los mismos principios, conectado directamente a foundations para garantizar coherencia automática ante cualquier cambio.
La implementación con Flutter permitió que desarrollo adoptara el nuevo sistema con un esfuerzo reducido, y la librería de iconos adquirida dio al equipo autonomía y velocidad para escalar sin depender de construcción manual. El resultado fue un sistema con gobernanza real: claro, documentado y adoptado por el equipo.
Design System
Fintech
Governance
Library
TAMBIÉN TE PUEDE INTERESAR
