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.

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

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.