Proyecto 01| Design System
Creando un sistema de diseño para unificar productos complejos
Creación de un sistema de diseño para unificar plataformas internas, mejorar la experiencia de uso y establecer una forma de trabajo común entre diseño y desarrollo.
| El problema
Plataformas complejas sin una base común
Cada producto evolucionaba de forma independiente, generando inconsistencias visuales, problemas de usabilidad y dificultades de mantenimiento. La ausencia de una metodología común hacía que diseño y desarrollo trabajasen sin una referencia compartida.
- Interfaces inconsistentes y poco escalables
- Componentes duplicados sin lógica común
- Desalineación entre diseño y desarrollo
- Falta de documentación y metodología establecida
| La propuesta
Diseñar el sistema antes de diseñar las pantallas
Crear una estructura compartida capaz de alinear negocio, usuarios, diseño y desarrollo bajo un mismo lenguaje.
- Auditorías en todas las plataformas implicadas
- Definición completa de la arquitectura del sistema
- Coordinación y formación de un equipo de 6 diseñadoras
- Equipo como puente entre negocio, diseño y desarrollo
- Componentes adaptados a los requisitos de desarrollo
- Implementación de criterios WCAG y cultura de accesibilidad
| El proceso
Entender antes de construir
Definir una estructura desde el diseño, que conectara las necesidades de negocio, usuario, diseño y desarrollo.
1 · Auditoría y diagnóstico
Analicé productos existentes para identificar problemas de usabilidad, accesibilidad y consistencia antes de definir la estrategia del sistema.
2 · Foundations y tokens
Se definieron foundations y tokens semánticos para garantizar escalabilidad, coherencia visual y mantenimiento a largo plazo.
3 · Componentes y patrones
Se diseñó una librería reutilizable adaptada a React, AgGrid y DHTMLX, garantizando coherencia entre plataformas y viabilidad técnica.
4 · Documentación y adopción
La documentación, las formaciones y el acompañamiento continuo permitieron convertir el sistema en una herramienta de trabajo real para los equipos.
| El sistema
Accesibilidad, foundations, tokens y componentes
Las piezas clave de este sistema de diseño
Accesibilidad
Integrada desde el inicio como estándar y criterio de diseño, con foco en el cumplimiento de la norma UNE EN 301549 y los criterios WCAG 2.2 A y AA.
Foundations
Colores, tipografías, espacios, grids y criterios de accesibilidad como base del sistema.
Tokens
Variables semánticas que conectan el diseño con el desarrollo.
Componentes
Diseño de componentes reutilizables con conexión a todos los sistemas.
Documentación
Guías de uso, implementación y mantenimiento del sistema.
| Impacto
Resultados medibles
El sistema permitió establecer una metodología común y sentar las bases para escalar nuevos productos de forma consistente.
Un sistema global escalado a 5 plataformas
El equipo pasó de 1 a 6 personas
Menos de inconsistencias y menor retrabajo
| Aprendizajes del proyecto
Más allá de componentes, tokens o documentación, el verdadero reto consiste en crear un lenguaje común que permita a diseño y desarrollo entenderse mejor y avanzar en la misma dirección.
Otros trabajos
Marketplace
Product Design | WebApp | UX Research
Ver proyectoDiseño web
Web Design | Brand UX | Storytelling
Próximamente