UPV: un rediseño web para mejorar la experiencia de usuario de la mejor universidad de España
Cliente
Universitat Politècnica de València
Competencias / servicios
Investigación
Arquitectura de la información
Copywriting
Diseño visual y design system
Diseño de interacción
Desarrollo web
Año
2024
El contexto
Una universidad de prestigio a nivel nacional e internacional
La Universitat Politècnica de València (UPV) es una institución pública, dinámica e innovadora considerada como la mejor universidad de España según el U-Ranking, clasificación elaborada por la Fundación BBVA y el Instituto Valenciano de Investigaciones Económicas (IVIE). A su vez, también goza del reconocimiento de ser la mejor politécnica de España según el conocido ranking Shanghái, que la incluye entre las 500 mejores universidades del mundo.
En paralelo, la institución se encuentra entre las universidades españolas que más ingresos obtiene por su actividad investigadora competitiva, situándose como líder nacional en explotación de patentes.
Teniendo en cuenta su palmarés de presentación, la UPV no solo es la única universidad española de carácter tecnológico que aparece en todos los rankings internacionales de prestigio, sino que también se postula como un hub de innovación que atrae a estudiantes e investigadores de todo el mundo.
La problemática
Alto volumen de contenido, desorganizado y de difícil acceso
La Universitat Politècnica de València necesitaba una web que permitiese a toda la comunidad
universitaria encontrar la información clave de manera fácil y rápida.
Dado el alto volumen de contenido que tiene un site de estas características, era imprescindible
abordar el proyecto haciendo una revisión profunda de las estructuras más básicas, para que tanto
stakeholders como usuarios externos e internos pudiesen acceder al motivo de su búsqueda rápidamente sin
perderse por el camino.
Entre los problemas estructurales que presentaba su antigua web nos encontramos con:
Una navegación compleja que afectaba a la facilidad para encontrar información relevante para los usuarios.
Una falta de jerarquía de los contenidos, que dificultaba la consulta de información y procesos críticos
Una adaptabilidad a diferentes formatos y dispositivos inexistente, por lo que afectaba de manera muy negativa a la experiencia de usuario, sobre todo en dispositivos móviles.
Una identidad visual obsoleta que no transmitía el prestigio y valor de marca de la UPV como mejor universidad tecnológica de España.
Una solución
Nueva jerarquía de los contenidos y modernización visual para llegar aún más lejos
Arquitectura web para mejorar la experiencia
El primer paso para abordar el proyecto fue realizar un profundo análisis de la arquitectura de contenidos que tenían. Inventariar, analizar, definir… un arduo trabajo para descartar todo aquello que era superfluo o carecía de importancia para quedarnos con lo que verdaderamente aportaría utilidad al usuario.
Tras múltiples reuniones con el equipo de la universidad, se propuso una nueva arquitectura de la información basada en las siguientes premisas:
- Un enfoque centrado en el usuario
- Una navegación intuitiva y clara
- Contenido accesible y bien organizado
- La implantación de una estructura que permita escalar contenidos y funcionalidades para el futuro
Con una estructura de contenido sólida, escalable y el mapa del sitio construido, dimos paso a la siguiente fase del proyecto: wireframing. Es decir, la fase en la que se realizan diseños en baja definición para empezar a tangibilizar la propuesta anterior. En esta etapa valoramos todas pantallas necesarias, interacciones del usuario y todas las variaciones necesarias para obtener el flujo completo.
En paralelo, desde microbio también nos encargamos de la redacción UX, teniendo muy presente que el principal objetivo era que el usuario tuviese siempre clara la información que quería consultar, teniendo en cuenta especialmente procesos como el de admisiones, realización de pruebas de acceso a la universidad o la forma de mostrar al amplio catálogo de estudios disponible.
Benfet: un nuevo sistema de diseño para modernizar su imagen
La fase de diseño visual tuvo como objetivo conseguir una cohesión estética entre todas los portales web de la UPV, de manera que toda la información se presentara de manera clara, directa y sencilla para cualquier usuario que visite la web.
Bajo esta premisa nació “Benfet”, el primer Design System de la Universitat Politècnica de València: un documento, una guía, un camino para que todo el universo visual de la entidad se trabajase bajo una misma dirección y poder modernizar la imagen de la universidad y potenciarla.
Hasta llegar a la construcción de Benfet, —“ben fet” que significan ‘bien hecho’ en valenciano, nombre que apela de manera directa a la esencia de la UPV— realizamos una tarea de investigación en la que reunimos todos los estilos, colores, tamaños y elementos utilizados hasta por la institución. A partir de la creación de este documento, se podía acceder de manera rápida a la información necesaria de estilos y elementos para diseñar el siguiente portal o cualquier demanda que nos plantease el cliente.
Teniendo en cuenta las dimensiones de la web, con tantos portales externos dedicados a las diferentes facultades, estudios de grados, máster, doctorado, etc. era requisito indispensable disponer de este documento general al que pudiesen acceder todo el equipo de diseño y desarrollo de la universidad, así como sus proveedores de servicios digitales; una estructura para que todos los diseños y desarrollos que se elaborasen a partir de ahora siguieran una coherencia estética.
Por otra parte, aprovechando la creación de este sistema de diseño, se renovó la apariencia de algunas secciones que anteriormente se encontraban obsoletas, con un diseño difícil de entender, o directamente, sin ningún diseño aplicado a ellas, y se desecharon elementos a los que no se les daba uso para dar paso a los que sí.
Wordpress + Astro: Dos soluciones tecnológicas para un mismo sistema
La principal problemática que nos encontramos a la hora de abordar la pata técnica del proyecto era trabajar con una web que, además de ser muy extensa, no era homogénea en cuanto a la tecnología en la que están construidas sus páginas. Por un lado, parte de su web debía ser una web estática, y por otro, contarían con diferentes microsites externas —pensadas para presentar algunos másteres, eventos o noticias— desarrolladas con WordPress.
Desde microbio nos encargamos de la maquetación de la parte estática y, dado que el sistema de diseño es común para todas las páginas, se optó por un framework que permitiese una migración rápida de componentes hacia el tema custom de Wordpress, elemento que la UPV está desarrollando de forma interna.
Tras evaluar diferentes opciones, optamos por desarrollar la parte estática de la web con Astro, un framework web pensado específicamente para construir sitios web orientados al contenido. Además de proporcionarnos un rendimiento muy alto, nos permitía reutilizar el código en Wordpress prácticamente sin realizar ningún cambio, al estar los componentes de este framework realizados con expresiones similares a JSX. En definitiva, con Astro podíamos trabajar más rápido y de manera más eficiente, obteniendo una web con un rendimiento elevado.
Además, todos los estilos (CSS) se realizaron desde cero, sin ningún framework css como base. La única librería JS usada en la web fue GSAP. Con ella como base, implementamos los sliders, animaciones, y demás elementos interactivos de la web.
Resultados
Una web clara y visual
Gracias al trabajo realizado entre el equipo interno de la UPV y microbio, conseguimos construir una web que cumple los requisitos y las expectativas que una entidad académica del nivel de UPV necesita. Un site que no solo es útil para sus usuarios, sino que transmite todo aquello que la universidad quiere trasladar a su público.
96p.
Rendimiento
91p.
Accesibilidad
100p.
Prácticas recomendadas
92p.
SEO
Suscríbete a la única newsletter que no molesta.
