Universidad Europea
Una nueva experiencia digital para los alumnos
PRODUCT DESIGN / INTERACTION DESIGN / UI DESIGN / RESEARCH
La Universidad Europea rediseña la app de su Campus Virtual para ofrecer a los alumnos una experiencia totalmente nueva en sus dispositivos móviles
Contexto
La Universidad Europea es una institución educativa privada que tiene varias sedes tanto en España como en Portugal. En España cuenta con campus en Madrid, Valencia y Canarias, además de la Escuela Universitaria Real Madrid. En Portugal tiene diferentes campus en Lisboa, aparte de la escuela de marketing IPAM en Oporto, así como la facultad de diseño IADE en Lisboa. Cada universidad contaba con una app diferente para acceder al Campus Virtual. Además esas apps eran usadas por muy pocos usuarios debido a la mala experiencia y usabilidad. Por otra parte, en el contexto de la pandemia, cada vez era más necesario proporcionar una mejor experiencia a los alumnos, para que pudieran acceder a las funcionalidades de su día a día desde su móvil, independientemente del lugar en el que se encuentren.
Punto de partida
El objetivo era diseñar una nueva experiencia digital y mejorar la experiencia de usuario y el aspecto visual. Todo esto creando una interfaz única que permita al los estudiantes acceder digitalmente a los aspectos más demandados, desde las actividades académicas hasta el acceso a servicios, pagos, etc. La nueva experiencia debe mejorar la satisfacción de los estudiantes, simplificar su vida, impulsar la marca y la diferenciación para los estudiantes tanto de España como de Portugal. Deberá estar recogido en un MVP que se irá iterando en el futuro, añadiendo nuevas funcionalidades y atendiendo a las demandas de los estudiantes.
Metodología
Para llevar a cabo este proyecto fueron involucrados diferentes equipos. Por una parte el equipo de la Universidad Europea trabajando en la definición de la experiencia. Por otra, el equipo de diseño aportando la solución a nivel de experiencia de usuario y visual. Por último, el equipo de desarrollo encargado de desarrollar la app para iOS y Android con las integraciones de los sistemas existentes de la Universidad Europea.
Se trabajó en un primer sprint de 3 semanas definiendo la arquitectura de la información, concepto visual y componentes. En este srpint si introdujo una primera fase de research. Se trabajó en 3 sprints de 2 semanas de diseño y componentización. Finalmente se trabajó en un sprint de 3 semanas para validar e iterar el diseño. Paralelamente el equipo de desarrollo trabajó en sprints de dos semanas desarrollando el front de la app.
En el contexto actual es imprescindible disponer de una solución transversal que unifique la experiencia digital de los alumnos de las diferentes instituciones. Cada vez se demanda más poder hacer el mayor número de gestiones desde sus dispositivos móviles personales.
Propuesta visual
Durante las primeras semanas se trabajó en definir el diseño visual que tendría la app. Cada institución tenía muchos elementos visuales diferenciados y pocos en común. Por lo que era necesario unificar visualmente todos los componentes de la app. Por otra parte había que plantear el diseño visual pensando en la adaptación a las diferentes marcas del grupo, no solo la de la Universidad Europea.
Este primer concepto suponía un cambio radical respecto al diseño que tenían hasta el momento. Se hacía un uso importante de los colores de la marcar que contaban con gran presencia en todas las pantallas. Se usaba una familia tipográfica con mucho peso y con tamaños muy amplios. También se utilizaron otros elementos gráficos como trazados y círculos handwriting que trasladaban las notas y apuntes clásicos a la pantalla.
Este diseño fue rechazado en un primer momento, ya que el equipo de marketing de la Universidad Europea estaba ultimando los diseños y aplicaciones de la nueva identidad de la marca. Esta identidad sería la que finalmente se aplicó en los diseños de la app, consiguiendo consistencia en todos los soportes de la marca.
Research
Durante todo el proyecto hubo dos tracks de research. En la primera fase se llevaron a cabo una serie de entrevistas para conocer las necesidades de los estudiantes tanto de España como de Portugal. En este punto también se validó el primer diseño mediante un prototipo navegable. Tras analizar las entrevistas se llegó a la conclusión de que los usuarios demandaban que la experiencia en la app fuera similar a la de la web y que la experiencia pudiera ser personalizable, ya que cada usuario tiene unas necesidades diferentes.
Una vez que la fase de diseño se había completado, se llevó a cabo un test de usabilidad. En total fueron 6 los usuarios que participaron en entrevistas de 1:30h. Durante las diferentes sesiones se fueron validado las diferentes pantallas e interacciones a nivel de funcionalidad y apariencia. Como resultado quedaron validadas el 85% de las funcionalidades y se iteraron el 15% restante.
Solución de diseño
Una vez validado el diseño visual comenzó la fase de diseño. A partir de las historias de usuario proporcionadas por la Universidad Europea se fueron diseñando los distintos workflows. Era la mejor manera de validar los diseños y entregarlos al equipo de desarrollo.
Finalmente, dentro del MVP se diseñaron los flujos del onboarding y login, la home que sería un repositorio de noticias y novedades de la universidad, así como novedades de las otras secciones de la app. Dentro del MVP también se diseñó el flujo de estudios, con un resumen de todas las asignaturas del alumno y fechas clave de cada clase. El flujo más importante y complejo fue el del calendario, ya que contaba con numerosas casuísticas, además de incluir fechas de clases, exámenes y otras fechas relevantes para el alumno. Finalmente, el flujo de soporte incluía la posibilidad de abrir tickets con la universidad o detalles de los pagos del alumno.
Descartada la primera propuesta de diseño visual, se empezó a adaptar el nuevo estilo visual acorde con el que estaba desarrollando el equipo de marketing de la Universidad Europea. Este diseño estaba basado en fondos claros con acentos del color rojo característico. Todas las formas de la app son rectas, incluyendo botones, formularios, cards, etc. El resultado fue una app perfectamente integrada con el resto de soluciones de la Universidad Europea, aparte de poder adaptarse a las diferentes marcas del grupo.
Otro de los puntos importantes a la hora de plantear el diseño de la app de Campus Virtual era la necesidad de que el diseño se pudiera adaptar a diferentes marcas o escuelas que tiene el grupo, como la Escuela Universitaria Real Madrid, IADE o IPAM. La solución planteada consistía en tener una misma app tanto para España como para Portugal y para todas las escuelas y marcas diferentes. Sería al hacer login cuando el aspecto de la app se adaptaría a cada marca. Manteniendo todos los elementos y estructura de la app pero cambiando los colores de acento de cada marca.
A lo largo de todo el proyecto se fue ampliando la librería de componentes. Esto servía para trabajar que todo el equipo de diseño tuviera los mismos componentes con los que trabajar y para que el equipo de desarrollo pudiera acceder a toda la librería documentada. El resultado final fue una librería con cientos de componentes perfectamente organizados y documentados para poder iterara el diseño en cualquier momento, así como crear nuevos componentes.
