El reto
Cuando llegué al equipo existían múltiples librerías y aproximaciones de sistema de diseño. Esto generaba inconsistencia visual, duplicación de esfuerzos y fricción con desarrollo. El objetivo fue homologar todo lo existente, rescatar buenas prácticas y definir nuevas reglas que funcionaran como la fuente única de verdad para diseño y desarrollo. Queríamos lograr: Un sistema de diseño unificado y escalable. Reglas claras para devs. Patrones reutilizables. Documentación accesible para todo el equipo.
Proceso
Investigación
Entrevisté a devs y PMs, y revisé las tecnologías usadas en frontend. Analicé los flujos existentes para identificar los componentes base y reforcé mi conocimiento en Atomic Design aplicado a sistemas de diseño.
Diseño
Partí del manual de marca y ajusté la paleta de colores para cumplir criterios de accesibilidad. Definí tokens, átomos, moléculas, organismos, templates y páginas, y prototipé las primeras animaciones y transiciones de estado.
Desarrollo / Automatización
Documenté los do’s & don’ts de cada componente y construí con el equipo el Storybook del sistema. Sentamos además las bases para que la documentación pueda generarse con IA y publicarse en un sitio accesible para todos.
Análisis de datos
Evalué consistencia, adopción y tiempos de diseño frente a prototipado, antes y después del sistema.
Rol y herramientas
Rol
- Investigación con stakeholders
- Análisis de flujos
- Definición de tokens y componentes
- Documentación del sistema
- Medición de adopción
Herramientas
- Figma
- FigJam
- Storybook
- Google Sites
- HTML
- CSS
Resultados
- Homologación de librerías y componentes
- Mayor consistencia visual y patrones de diseño estandarizados
- Reducción en tiempos de diseño UI y prototipado
- Colaboración más fluida con desarrollo y reglas claras para implementación
Aprendizajes
La importancia de incluir la visión de todas las áreas (diseño, dev, producto) antes de definir nuevos patrones. Mantener la documentación viva es clave para que el sistema se mantenga útil. Los devs, al tener reglas claras y un repositorio común, pueden proponer y evolucionar patrones junto al equipo de diseño.