Campus Online App

Conectando a alumnos y profesores a través de una experiencia académica intuitiva.

Campus Online App

Sector

  • EdTech
  • E-learning
  • Universidades

Mi rol

  • UX Designer
  • Interaction designer

Herramientas

  • Sketch
  • InVision
  • Jira
  • Confluence

Entregables

  • Arquitectura de la información
  • Wireframes alta fidelidad
  • Prototipos interactivos

El reto

Los Campus Virtuales tradicionales están diseñados para escritorio, llenos de menús complejos y repositorios de archivos. El reto consistía en 'movilizar' la experiencia académica, permitiendo que alumnos y profesores gestionaran su día a día (clases, notas, debates) desde el bolsillo. El desafío principal fue la densidad de información: Simplificar la gestión de múltiples asignaturas, foros y calificaciones en dispositivo móvil sin perder funcionalidad crítica.

La solución

Diseñé una aplicación nativa centrada en la gestión de la agenda y la comunicación inmediata. La solución se estructura en dos perfiles diferenciados que conviven en el mismo ecosistema:

  • Perfil alumno: Enfocado en el consumo de contenido y el seguimiento de progreso.
  • Perfil profesor: Enfocado en la gestión y el desbloqueo, permitiendo resolver dudas y moderar foros.

El proceso

1
Análisis y requerimientos
2
Arquitectura de información (AI)
3
Diseño de wireframes (UX)
4
Prototipado interactivo

1. Análisis y requerimientos

Partiendo de una toma de requerimientos, identifiqué las necesidades críticas de alumnos y profesores, traduciéndolas en casos de uso concretos (como el consumo de contenido o la evaluación rápida). Este análisis fue clave para filtrar qué funcionalidades del escritorio eran imprescindibles llevar al móvil.

2. Arquitectura de información

El mayor reto fue la curación de contenidos. Reestructuré el árbol de navegación del campus virtual tradicional para adaptarlo a patrones móviles. Definí una jerarquía clara que permite acceder a las secciones más demandadas de forma rápida en niveles superiores, evitando la anidación profunda típica de las versiones web.

3. Diseño de wireframes (UX)

Diseñé los wireframes en alta fidelidad. Definí la arquitectura visual y los componentes de la interfaz al detalle en base a todo lo trabajado anteriormente, lo que nos permitió validar la experiencia completa con stakeholders sin depender todavía de la capa de estilo gráfico.

4. Prototipado interactivo

Conecté los wireframes para simular la navegación real. En esta fase definí el modelo de interacción y las micro-interacciones funcionales (como estados de botones o despliegue de menús), validando que la lógica de los flujos fuera sólida y la transición entre secciones fluida antes de aplicar la capa visual.

Sigue explorando otros proyectos

¿Tienes un proyecto en mente?

Escríbeme y vemos cómo podemos colaborar.