Multibrand Design System

Las empresas EdTech con múltiples productos enfrentan un problema: cada equipo diseña de forma independiente, generando inconsistencias visuales que confunden a estudiantes y profesores. Un botón funciona distinto en cada plataforma. Los colores cambian. La navegación no es predecible. Esto no solo daña la marca, sino que aumenta la carga cognitiva del usuario — algo crítico en entornos educativos donde la claridad es fundamental.

El brief de No Country fue claro: diseñar un Design System multibrand que permitiera a múltiples productos educativos compartir una base común (componentes, tokens, patrones UX) mientras cada marca mantiene su identidad visual. La regla: 70% core obligatorio, 30% personalizable. Cinco semanas, equipo de 6 personas distribuidas en Argentina, Chile y Colombia, 100% remoto.

Trabajé como UX/UI Designer en un equipo multicultural de 6 personas durante una simulación laboral de No Country (noviembre 2025). El equipo incluía UX Researchers, otros diseñadores UX/UI, y nos coordinábamos vía Trello, Notion, FigJam y Google Meet. Mi responsabilidad principal: diseñar la biblioteca de componentes en Figma aplicando los tokens definidos por el equipo, documentar patrones de uso, y contribuir al sistema de UX Writing para accesibilidad. Colaboré en la definición de la arquitectura del sistema (tokens → foundations → componentes → patterns) y en la creación de ejemplos aplicados para validar que el sistema funcionaba con marcas distintas.

La decisión más difícil fue definir qué elementos iban en el 70% core (inmutable para todas las marcas) vs el 30% personalizable. Cada marca quería libertad creativa, pero demasiada personalización rompe la consistencia educativa. Resolvimos esto con investigación: analizamos plataformas EdTech reales (Coursera, edX, Udemy, Platzi), identificamos patrones comunes, y creamos user personas — no de estudiantes, sino de los diseñadores y desarrolladores que usarían el sistema.

El core incluye: grid, espaciado, radios, sombras, comportamiento de componentes, reglas de accesibilidad AA, y patrones UX (onboarding, feedback de error, progreso de aprendizaje). Lo personalizable: color primario/secundario/acento, una tipografía (elegida entre 3 opciones pre-aprobadas: Inter, Rubik, Noto Serif), e iconografía/ilustraciones con reglas claras de estilo.

Otra complejidad: coordinar 6 personas en zonas horarias distintas (GMT-3 a GMT-5). Implementamos dailies async en Notion, revisiones de diseño dos veces por semana en Meet, y un sistema estricto de versionado en Figma para evitar sobrescribir trabajo ajeno. Aprendí que la documentación clara es más importante que el diseño bonito — si un componente no está bien documentado (propósito, variantes, estados, Do's & Don'ts), nadie lo usa correctamente.

El UX Writing fue un desafío inesperado. Diseñamos guidelines completas de voz y tono para plataformas educativas: clara, humana, motivadora sin ser exagerada, guía sin imponer. Creamos microcopys estandarizados para estados del sistema ("Cargando...", "Guardado", "Revisa los datos"), mensajes de error empáticos, y un sistema de adaptación por marca que permite ajustar el tono sin cambiar la voz fundamental.

Design System completo con cinco componentes principales:

• —Arquitectura de tokens (color, tipografía, espaciado, radios, sombras, motion) implementada en Figma Variables con soporte para light/dark mode.
• —Biblioteca de componentes UI (botones, inputs, cards, navegación, modals, alerts, tablas, progress bars) con todas las variantes y estados documentados.
• —Patrones UX específicos para EdTech: onboarding, formularios educativos, feedback de progreso, gamificación y manejo de errores.
• —Sistema de gobernanza: roles definidos (Owner, Maintainer, Contributors), flujo de aprobación para nuevas marcas y proceso de solicitud de excepciones.
• —Documentación centralizada en Notion: guías para equipos no técnicos, checklist de accesibilidad y proceso paso a paso de creación de submarcas.

Validamos el sistema creando dos marcas ficticias con personalidades opuestas (una formal/académica, otra dinámica/innovadora) aplicando solo los tokens personalizables. Confirmamos que el 70% de los componentes se reutilizaban sin cambios y que ambas marcas mantenían coherencia visual a pesar de tener colores y tipografías distintas.

El proyecto no se implementó en producción — fue una simulación académica — pero cumplió su objetivo: demostrar capacidad de trabajar en equipos multidisciplinarios remotos bajo presión de tiempo. Presentamos el sistema completo a evaluadores de No Country con un pitch deck que explicaba el problema, la solución, y el impacto esperado (reducción de time-to-market, mayor consistencia, mejor engagement estudiantil).

Aprendizaje clave: diseñar un Design System es 30% diseño visual y 70% gobernanza y documentación. Los componentes bonitos no sirven si nadie sabe cuándo usarlos o cómo personalizarlos sin romper el sistema. La colaboración multicultural me enseñó a comunicar decisiones de diseño de forma clara y justificada — no podés decir "me gusta más así", tenés que explicar por qué esa decisión mejora la accesibilidad, la consistencia, o la escalabilidad. Si volviera a hacerlo, priorizaría menos componentes pero mejor documentados — intentamos abarcar demasiado en 5 semanas y algunos patrones quedaron sin ejemplos suficientes.