Diseñando un ecosistema digital : Campus Virtual

Diseño de experiencias de usuario ∙ Diseño de interacción e interfaces
2022 / 2023
Reto
Utel, como universidad innovadora, genera continuamente eventos, plataformas y herramientas para mejorar la experiencia educativa en línea. Sin embargo, la proliferación de recursos en diversos canales ha creado confusión. Buscamos simplificar y optimizar la experiencia educativa haciéndola más clara y efectiva.
Mi Rol
  • Diseño, implementación y análisis de investigación para el diseño
  • Diseño y mapeo de arquitectura de información
  • Diseño de prototipos
  • Diseño y ejecución de pruebas de usuario
  • Diseño de interfaces
  • Presentación con Stakeholders
Resultados
  • Única plataforma que contiene acceso e información sobre todos los recursos que los usuarios necesitan
  • Centralización de canales de difusión y comunicación
  • Unificar el diseño de interfaz de todas las plataformas de cara al usuario
Analizamos las plataformas actuales
Exploramos y mapeamos la arquitectura de información en las plataformas actuales, con la meta de identificar oportunidades de mejora en la interacción. En este proceso de exploración descubrimos varios problemas, pero los más evidentes eran: 1. Ninguna plataforma funcionaba igual a otra  y 2. Cada una poseía su diseño de interfaz única, esta última rara vez  se alineaba con el brandbook de la marca. Identificamos una gran oportunidad de unificar y potenciar la coherencia.

Escuchamos a los Stakeholders
Nos sumergimos en conversaciones con todas las áreas de la universidad que interactúan directamente con los estudiantes. Queríamos comprender a fondo su papel en el recorrido estudiantil: qué información necesitan compartir y cuán crucial es su aporte.

Para agilizar este proceso, implementamos una encuesta enviada por correo electrónico a todos los directivos de área, seguida de reuniones ágiles para abordar preguntas muy específicas.

Estos dos pasos fueron cruciales para definir las secciones de contenido del producto, allanando el camino para el siguiente paso emocionante de nuestro proceso. ¡Vamos por más!
Inmersión
Etapa 1
Diseñamos con los usuarios
Con la información recopilada en la primera fase, creamos categorías y subcategorías que impulsaron un estudio de Card Sorting, realizado de forma remota y cuantitativa. Usamos Maze y en colaboración con el equipo de Marketing llegamos a más de 800 alumnos en toda LATAM.

Los resultados de este proceso fueron cruciales para comprender las necesidades de los usuarios y establecer una jerarquía de información. Nos enfrentábamos al desafío de equilibrar lo que los Stakeholders querían comunicar con lo que los alumnos realmente necesitaban saber
Definiendo la arquitectura de información
Etapa 2

Ajustes en el camino...
El mapa de navegación, nuestra hoja de ruta para el diseño del prototipo que probaríamos con usuarios, parecía ser una excelente idea compartirla con los Stakeholders para obtener su aprobación. Sin embargo, esta decisión se convirtió inesperadamente en un obstáculo. La mayoría de los interesados no comprendían la función de esta herramienta, desencadenando una avalancha de cambios. Para sortear este desafío, nos lanzamos rápidamente al proceso de prototipado.

Propuesta 3.1. (Final)

Antes de probar...
Los prototipos fueron nuestros aliados clave para potenciar la comunicación con los Stakeholders. Después de sesiones intensivas de ajustes y cambios, celebramos la aprobación del prototipo de pruebas.

Con una comprensión más clara de las dimensiones del producto, tomamos decisiones estratégicas para el lanzamiento en dos releases, guiados por una Matriz de FVD (Fiabilidad, Viabilidad y Deseabilidad). Estas definiciones marcaban con precisión el alcance de la primera etapa de pruebas y a sus participantes.

Fase de pruebas
Dividimos nuestra fase de pruebas en dos. Nuestra meta fue observar cómo funcionaba para los usuarios el nuevo orden de información y la categorización de contenido, diseñamos el flujo de las pruebas enfocándonos en las páginas y tareas principales del primer release de producto:
Probar y ajustar
Probar y cambiar
Etapa 3
  • Página principal
  • Comunidad Utel
  • Servicios al estudiante
  • Comunidad de egresados
  • Centro de expansión profesional
  • Ingresar a clases en vivo
  • Ingresar al Aula Virtual
  • Ir a estado de cuenta
  • Pagar colegiatura
  • Inscribirse a cursos adicionales (pagos y gratuitos)
  • Explorar beneficios adicionales, como empleo, comunidades y eventos
Secciones:
Tareas:

Fase 1
En nuestra primera fase, llevamos a cabo pruebas cualitativas con estudiantes de LATAM, tanto de licenciatura como de maestría. Reclutamos a 12 usuarios que, a través de videollamada, navegaron por el prototipo y completaron las tareas diseñadas.

Esta fase fue esencial para identificar los aciertos y desafíos de nuestra propuesta. Construimos hipótesis sobre posibles mejoras y realizamos ajustes significativos en preparación para la segunda etapa.

Highlights de primera fase de pruebas

  • La jerarquización en la página principal funcionaba para el flujo de tareas diarias del alumno, porque unía la información más útil en una sola pantalla.
  • Había muchos cambios que hacer con respecto al lenguaje que usamos para nombrar las secciones, especialmente porque es un producto que se dirige a hispanohablantes de varios países de LATAM, el nombre de algunas páginas creo fricción cuando los usuarios buscaban cierta información en el prototipo.
  • Tener "secciones→subsecciones → sub subsecciones" es innecesariamente complejo, sería mejor tener más secciones con nombre específicos porque dan certeza al buscar información.

Fase 2
Diseñamos un estudio en Maze para llevar realizar pruebas sin moderación y cuantitativas. Con una muestra más amplia, estábamos listos para poner a prueba nuestras hipótesis, las cuales serían la guía para los cambios preliminares.

En esta etapa, participaeron 500 alumnos de toda LATAM. Probamos el prototipo de la primera fase, incorporando algunos ajustes basados en los valiosos hallazgos de las pruebas cualitativas.

Últimos ajustes antes del brincar al diseño de interfaces

  • Dividimos la categoría "Servicios al estudiante" en dos: "Servicios administrativos y "Servicios Académicos" y durante las pruebas cuantitativas descubrimos que hubo una mejora en las tareas que involucraban encontrar información en esas secciones. Los usuarios tenían éxito directo en dos pasos máximo.
  • Cambiamos el nombre de varias secciones principales, bajo las recomendaciones del Equipo de comunicación, esto mejoró el éxito de tareas en las que el usuario tenía que buscar información en estas secciones.
  • Agregamos accesos directos entre las secciones "Servicios Administrativos" a "Mi Perfil" porque descubrimos que una cantidad considerable de los usuarios buscarían ciertos datos en ambas secciones.

La universidad había vivido una transformación reciente con un re-branding y estaban canalizando todos esfuerzos hacia la unificación del diseño visual en todos los canales de comunicación. Como parte de este re-branding, recibimos un sistema de diseño que expandimos para dar forma a la interfaz de Campus Virtual.

Creación de nuevos componentes

Camino al lanzamiento
Etapa 4
  • Barra de navegación lateral Por la cantidad de información por página decidimos que la navegación fuese lateral, para evitar pestañas anidadas.
  • Mensajes Pop up y Toast Necesitábamos estos componentes para informar de acciones requeridas a los usuarios, delimitamos su uso para ocasiones específicas para evitar que interfieran con la experiencia del producto.
  • Tarjeta de asignatura Permite que el usuario tenga una vista general de su progreso por asignatura y es el acceso directo a Moodle.
  • Tarjeta de progreso de carrera Muestra el avance global de la carrera, así puedes conocer cuantas materias te faltan para terminar tu carrera.

💡 Críticas de diseño
Cada semana, el equipo de UX/UI se reunía para analizar el progreso, detectábamos cualquier inconsistencia y proponíamos cambios para garantizar la calidad excepcional de la interfaz de cara al lanzamiento.

Handoff a desarollo
Etapa 5

Creamos un prototipo en que se podía navegar casi cómo el producto final, se presentó con todos los Stakeholders y se compartió el acceso para que hicieran una revisión profunda. Los cambios que aceptamos después de la reunión fueron superficiales, relacionados con la interfaz y redacción de contenido.

El rol del equipo de desarrollo
El desarrollador nos acompañó desde la "Etapa 1" de la definición de producto. Al inicio su participación era pasiva, conforme el proceso avanzó su contribución se volvió técnica, pues todas las propuestas tenían su aprobación de viabilidad.

Desde la definición de ajustes en la "Etapa 3" compartimos el sistema de diseño para que comenzara a construir los componentes. Para esta etapa el desarrollador contaba con todos los recursos y accesos para realizar entregas semanales de avances, que yo revisaba para aprobación o ajustes, en orden de que el diseño se mantuviera fiel al prototipo.

¡Gracias por leer!

Sigue leyendo sobre mi trabajo

Siguente Proyecto