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.
Impacto clave
Base visual unificada para una app de +50.000 usuarios
Reducción de inconsistencias visuales y fricción entre equipos
Mejora en legibilidad y experiencia de lectura (light & dark mode)
Sistema preparado para escalar y evolucionar
Descubrimiento
Kick-Off
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:
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.
La investigación reveló patrones claros y nos permitió definir a Valentina como arquetipo principal donde luego nos guio para toar deciciones del producto.
User persona
Catalina, estudiante que combina estudio y trabajo.
Usa la app varias veces al día para consultar información clave y necesita encontrarla rápido, sin esfuerzo cognitivo.
Edad: 20–28
Rol: Estudiante Duoc (algunos días trabaja part-time)
Nivel tecnológico: Medio-alto
Contexto de uso: Usa la app varias veces al día, muchas veces en tránsito o de noche, para resolver consultas puntuales sin fricción.
“Entro a la app solo para ver algo rápido. Si tengo que pensar o buscar demasiado, me frustro.”
Pains
Sobrecarga visual y exceso de texto: Le cuesta escanear la información cuando no hay jerarquía clara.
Estilo institucional frío y poco cercano: la estética formal le genera rechazo y baja motivación de uso.
Fatiga visual en usos prolongados
El brillo, el contraste y la tipografía no siempre acompañan la lectura frecuente.
Needs
Jerarquía visual clara y consistente
Para escanear horarios, notas y avisos sin esfuerzo cognitivo.
Lectura cómoda y accesible: Tipografías legibles, buen contraste y soporte para uso diurno y nocturno.
Lenguaje visual moderno y familiar
Inspirado en apps que ya usa a diario, manteniendo identidad institucional pero con un tono más cercano.
Job to be Done
Necesito entrar a la app y encontrar rápido la información clave de mis clases, sin vueltas como hago con el resto de las app que uso
Definición
Concepto visual
Se definió un concepto visual inspirado en experiencias digitales de entretenimiento, con el objetivo de alejar la app de la percepción tradicional de rigidez académica y acercarla al ecosistema digital cotidiano de los estudiantes.
La aplicación debía sentirse familiar desde el primer uso, integrada naturalmente a sus hábitos digitales y percibida como una herramienta cercana, no como una fuente adicional de estrés.
Criterios visuales del sistema
A partir de estos conceptos, se establecieron los criterios que guiaron el diseño del Design System.
La información clave debe identificarse en segundos, sin navegación innecesaria.
Interfaces escaneables, patrones familiares y uso consciente del espacio en blanco.
Tipografías legibles, contraste adecuado y soporte para light & dark mode.
Lenguaje visual moderno y juvenil, enfocado al ecosistema institucional tradicional.
Foundations del Design System
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
Diseño
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 1
Problema
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 2
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 3
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.
Impacto
VELOCIDAD DE DISEÑO
Nuevas vistas se construyen más rápido sobre un sistema común.
CONSISTENCIA VISUAL
Menos retrabajo gracias a componentes y reglas compartidas
CLARIDAD 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.
Lo aprendido
Definir tokens junto a desarrollo desde el inicio facilitó la traducción a código y evitó reinterpretaciones visuales en la implementación.
Definir foundations a partir de los hábitos digitales de estudiantes jóvenes permitió crear un sistema familiar y fácil de adoptar.