IIUNAM Homepage

Rediseño Web
Resumen

El Instituto de Ingeniería de la UNAM reconoce la importancia de la presencia en línea como un medio fundamental para actualizarse y brindar una mejor experiencia a sus usuarios. A través de su compromiso con la excelencia académica y la innovación tecnológica, el Instituto continúa impulsando la investigación y el desarrollo de la ciencia e ingeniería, promoviendo un acceso más amplio al conocimiento.

Cargo

UX
UI
Developer

Cliente

Instituto de Ingeniería UNAM

Herramientas

Figma
Webflow

Problema

El sitio web del Instituto de Ingeniería de la UNAM (IIUNAM) es una fuente valiosa de información, ya que esta dependencia se dedica al estudio, investigación y desarrollo de temas relacionados con la ingeniería. Sin embargo, es importante destacar que el homepage actual del sitio web no brinda las suficientes opciones para una navegación más accesible y eficiente debido a que no coincide con la navegación del resto del sitio, el cual se encuentra desarrollado en el CMS SharePoint.

Solución

Se optó por el rediseño completo del homepage del sitio del IIUNAM tomando como base la navegación principal desarrollada desde SharePoint, así como la optimización de espacios mediante un sistema modular que permita escanear más opciones con menos tiempo y menor fatiga visual.

Proceso de trabajo

Kick off &
Briefing

Entrevista con el cliente

Expectativas

Necesidades

Metas

Entendimiento del negocio

Empatizar

Investigación UX

Investigación de usuario

Investigación documental

Benchmarking

Definir

Definición de los problemas

Idear

Generación de soluciones

Generación del contenido

MVP

Taxonomía

Arquitectura de Información

Navegación

Mapa de sitio.

Prototipar

Wireframe en baja fidelidad

Guía de estilo

Diseño

Desarrollar

Implementación mediante webflow.

Kick off & Briefing

Arrow icon

El Instituto de Ingeniería de la UNAM es una institución líder en la investigación teórica y práctica en el campo de la ciencia e ingeniería en México. Con una destacada trayectoria académica y científica, el Instituto se ha posicionado como referente en diversas disciplinas, contribuyendo al avance tecnológico y al desarrollo de soluciones innovadoras para los desafíos actuales.

Consciente de la importancia de adaptarse a los cambios tecnológicos y las necesidades de sus usuarios, el Instituto de Ingeniería ha establecido una presencia en línea sólida y actualizada. Mediante la implementación de diversas plataformas digitales y redes sociales, el Instituto busca brindar una experiencia enriquecedora y accesible a sus usuarios, facilitando el acceso a la información, recursos y servicios que ofrece.

Empatizar

Arrow icon
Hipótesis

Partimos de la hipótesis de que el homepage actual no cuenta con las suficientes opciones de navegación para encontrar lo que se busca dentro del portal.

Contexto

El sitio web del IIUNAM está desarrollado mediante el CMS SharePoint, por lo que con anterioridad se implementó ya una navegación predeterminada la cual, por cuestiones legales no puede ser alterada. Ante esta situación, el IIUNAM optó por generar una homepage personalizada que no dependiera de las opciones dadas por su CMS, sin embargo, con el tiempo se notó una insatisfacción por parte de los usuarios que no podían encontrar con facilidad los contenidos del sitio en el homepage.

Usuarios

El sitio es mayoritariamente utilizado por la comunidad interna del IIUNAM así como estudiantes de varios niveles educativos y de distintas partes del mundo.

La comunidad interna que utiliza el sitio busca actualizarse sobre eventos nuevos, artículos, notas y acceso a funciones exclusivas de la comunidad.

En el caso de los estudiantes, la mayoría busca saber con más profundidad a qué áreas de estudio se dirige el IIUNAM, así como sus proyectos, oferta académica y medios de contacto.

Definir

Arrow icon
Definición de los problemas

Tras varias juntas con miembros del Instituto y usuarios del portal, se encontraron los siguientes insights en el uso de la actual página de inicio:

- La página es demasiado larga.
- Tiene demasiado espacio en blanco entre elementos.
- Se desaprovecha toda la sección “above the fold”.
- Las distintas secciones son muy grandes.
- El menú de navegación no presenta suficientes opciones y el contenido no coincide con el resto del portal.
- No hay forma de encontrar a algún miembro del IIUNAM desde la página de inicio.

POV

El usuario se siente frustrado al tratar de encontrar información más allá de lo que permiten los 4 enlaces de la navegación. Si desea encontrar algo debe esperar que al seleccionar el enlace sea la opción correcta, de lo contrario deberá nuevamente buscar lo que busca ahora desde la navegación de SharePoint.

El usuario desea acceder a los contenidos exclusivos para la comunidad del IIUNAM, sin embargo debe dar scroll hasta llegar al footer para acceder a la funcionalidad más importante para la comunidad interna, llamada INTRANET.

Sitio Original (above the fold)

Idear

Arrow icon
MVP

El MVP (Producto Mínimo Viable) propuesto es una homepage que buscará mejorar la experiencia de los usuarios tanto actuales como nuevos. Esto se logrará mediante la implementación de un menú de navegación que coincida con el resto del portal, logrando así que toda la navegación esté unificada. También, dentro de la navegación se agregará directamente el enlace hacia la INTRANET que permita a la comunidad acceder de forma inmediata a la función que es más importante para ellos.

Por otra parte, se buscará aprovechar el mayor espacio disponible “above the fold” mediante el uso de sliders funcionarán como pantallas de bienvenida donde podrán conocer más sobre el IIUNAM, así como eventos y noticias.

Soluciones

1.- Mejorar el menú de navegación:

El menú original cuenta con 4 enlaces y un CTA los cuales abarcan de manera general la navegación del Instituto, sin embargo debido a la gran cantidad de información que una entidad educativa como el IIUNAM publica y almacena, se propone la implementación de un menú más amplio el cual abarque las opciones que ya están en funcionamiento dentro del portal de sharepoint.

Del mismo modo se propone el uso de un dropdown que facilite la búsqueda de información de los usuarios. Debajo del menú de navegación, se propuso el añadido de una barra de contacto para redes sociales así como un enlace directo a la INTRANET para los  integrantes del IIUNAM.

2.- Encontrar a algún miembro del IIUNAM desde la página de inicio:

Para solucionar la necesidad de encontrar a alguien en específico, partiendo de las nuevas opciones del menú de navegación agregadas en el punto anterior, dentro del enlace nosotros de la barra de navegación aparecerá la opción de directorio. Por otro lado se implementará la sección Comunidad Académica del IIUNAM, la cual brindará un amplio directorio de investigadores, técnicos académicos y cátedras Conacyt.

3.- Aprovechar la sección “above the fold” y acortar el largo de la página :

En este ámbito se propone utilizar la sección hero de la página como carrusel para presentar distintas portadas que lleven a páginas de interés diverso. Entre las páginas que el usuario encontrará al abrir el portal se abarcarán eventos, ceremonias, artículos, publicaciones, avisos, entre otros.

4.- Optimizar el espacio de la página.

Para poder aprovechar de mejor forma el espacio de la página, se propone el uso de una estructura modular, la cual, tiene la ventaja de poder mostrar una gran cantidad de secciones sin perder jerarquía ni orden visual.

En la página original la navegación estaba pensada mediante bloques horizontales los cuales abarcaban un área por tipo de información. En esta propuesta se utilizó una maquetación en bloques basada en una serie de retículas simétricas.

Aquella información que no requería gran espacio se redujo a un área de menor tamaño tratando de optimizar el espacio disponible.

Para las secciones Labores de Investigación y Contenidos Digitales, se propuso descartar la parte de grupos de investigación la cual ya podrá ser accedida desde el menú y desde la sección de GII. Con esto, damos énfasis a la comunidad académica, los laboratorios y los proyectos.

La sección de Contenidos Digitales fue separada a un bloque estrecho pensado en dar orden a las distintas opciones que el usuario puede encontrar dentro de la página, junto a la misma, se unificó la sección del noticiero semanal Notiingen.

La sección de Proyectos se retiró, sin embargo éstos se podrán publicitar desde el hero de forma más llamativa, por lo cual se puede ahorrar ese espacio de desplazamiento.

Task Flows
User Flows

Prototyping

Arrow icon
Wireframing
Paleta Cromática
Tipografía

Diseño

Visitar sitio
Proyecto anterior
Consultoría Energética
Diseño Web
Siguiente proyecto
GII IIUNAM
Diseño Web