DESIGN SYSTEM
Design System mobile-first para +50.000 estudiantes
Contexto
Este proyecto consistió en la creación de un Design System mobile-first para la aplicación universitaria de Duoc UC, utilizada actualmente por más de 50.000 estudiantes.
La app ya contaba con wireframes de media fidelidad y funcionalidades definidas, pero no existía una identidad visual establecida ni un sistema de componentes, lo que ponía en riesgo la coherencia visual, la escalabilidad del producto y la eficiencia del desarrollo.
Mi rol fue definir la base visual y conceptual del sistema, asegurando consistencia, accesibilidad y una experiencia alineada con los hábitos digitales reales de los estudiantes.
VELOCIDAD DE DISEÑO
Nuevas vistas se construyen más rápido sobre un sistema común.
CLARIDAD DE NAVEGACIÓN
Menos retrabajo gracias a componentes y reglas compartidas
CLARIDAS VISUAL
La mayoría de los estudiantes identifica la información clave sin ayuda.
Los indicadores surgen de tests con estudiantes, métricas de soporte y feedback del equipo, combinando datos cuantitativos y cualitativos.
Descubrimiento
El proyecto partía de una aplicación con flujos definidos, pero sin un sistema visual ni reglas compartidas, lo que generaba:
Alto riesgo de inconsistencias visuales
Decisiones de diseño aisladas
Dificultad para escalar el producto de forma ordenada
Business & UX Problem
Qué?
El producto carecía de un sistema visual definido, generando incoherencias a medida que crecía
Porqué?
La ausencia de criterios visuales aumentaba fricción entre equipos, tiempos de desarrollo y riesgo de inconsistencias en la experiencia.
Para quién?
Estudiantes que necesitaban una experiencia clara, accesible y confiable para el uso cotidiano
Investigación
La investigación se centró en comportamientos reales de uso y referencias visuales, más que en validaciones de usabilidad tradicionales
Research interno:
Revisión de decisiones previas de UX, documentación existente y limitaciones del MVP.
Research externo:
Análisis del contexto digital de los estudiantes y benchmarking de plataformas de uso cotidiano para identificar patrones de jerarquía, lectura y familiaridad visual.
Este enfoque permitió trabajar con evidencia suficiente para definir el estilo visual y el look & feel, sin necesidad de testear componentes que aún no existían.
Hallazgos clave
Los estudiantes están habituados a interfaces simples, visuales y familiares, con jerarquías claras y patrones propios de apps de uso diario.
Prefieren experiencias livianas y orientadas a la lectura rápida, incluso en contextos de uso nocturno o en movimiento.
Estos hallazgos evidenciaron una brecha entre el estilo institucional del MVP y las expectativas digitales reales, reforzando la necesidad de redefinir el lenguaje visual antes de construir componentes.
Se definieron las foundations del Design System (layout, spacing, color, tipografía, iconografía y contenido visual) como base común para garantizar coherencia y escalabilidad antes de diseñar componentes.
Con estas bases, pasamos a construir componentes y aplicarlos en flujos reales
De foundations a un sistema reutilizable
Con los criterios visuales y las foundations definidas, la etapa de diseño se enfocó en transformar esas reglas en un Design System funcional, capaz de sostener la evolución del producto sin perder coherencia ni legibilidad.
El foco dejó de estar en pantallas aisladas y pasó a estar en cómo el sistema se construye, se reutiliza y se mantiene en el tiempo.
Problema
Riesgo de inconsistencias visuales al escalar
La aplicación debía crecer incorporando nuevos flujos y pantallas, lo que implicaba un alto riesgo de decisiones visuales aisladas si no existía un sistema previo.
Solución
Design System mobile-first, basado en tokens y componentes reutilizables, que definiera reglas claras antes de diseñar pantallas y evitara decisiones visuales aisladas.
Cómo se diseñó
Tokens base de color, tipografía y spacing
Jerarquías tipográficas compartidas
Reglas claras de contraste y énfasis visual
Problema
La app debía soportar consultas rápidas y lectura prolongada, muchas veces en contextos de uso nocturno, sin generar fatiga visual.
Solución
Design System mobile-first,
Definir una jerarquía visual clara y escaneable, priorizando legibilidad y reducción de carga cognitiva.
Problema
La identidad institucional existente no representaba los hábitos digitales ni las expectativas visuales de los estudiantes.
Solución
Definir un lenguaje visual moderno, juvenil y cercano, manteniendo coherencia con la marca sin replicar la estética web institucional.
Lo aprendido
Un lenguaje común entre diseño y desarrollo
Definir tokens junto a desarrollo desde el inicio facilitó la traducción a código y evitó reinterpretaciones visuales en la implementación.
El estilo visual debe partir del usuario
Definir foundations a partir de los hábitos digitales de estudiantes jóvenes permitió crear un sistema familiar y fácil de adoptar.
Más Proyectos
USER-CENTERED DESIGN
VISUAL INTERFACES
DESIGN SYSTEMS
PROTOTYPE
WIREFRAMING
RESPONSIVE DESIGN