Portal del Investigador

👉 EL CONTEXTO

A finales de 2022, un organismo universitario nos contrató para rediseñar su Portal del Investigador.

A través de este portal los investigadores universitarios registran y gestionan toda su actividad científica (artículos, ponencias, patentes, congresos…).

Pero además de ser una gran comunidad donde encontrar colegas de profesión y compañeros de estudios e investigaciones, los investigadores lo usan para llevar el seguimiento económico de sus proyectos, ayudas, subvenciones y solicitudes de financiación.

El problema

Este portal, fue creado hace ya unas décadas, por lo que su imagen había quedado anticuada y mostraba ciertas carencias en cuanto a usabilidad.

Estas carencias fueron desembocando en un desuso del portal, por parte de los investigadores.

Se desean mejorar la usabilidad, incorporando un nuevo look and feel (interfaz de usuario) más actual y adaptado a todos los dispositivos (responsive), varios idiomas (multilenguaje) y accesible a todo tipo de usuarios y colectivos (nivel AA de accesibilidad).

“El objetivo era un portal más intuitivo y fácil de usar que permitiera a los investigadores acceder a la información de manera más rápida y eficiente.”

La propuesta de solución

Desde la consultora presentamos un propuesta para facilitar un servicio especializado en diseño de experiencia de usuario e interfaz de usuario y maquetación, centrado en la usabilidad y con un alto componente creativo y estético.

Trabajamos siguiendo unos estándares, metodologías y técnicas centradas en el contacto permanente con el cliente (negocio y tecnología) y los usuarios.

Aplicando metodologías que combinan el Agile con el Design Thinking, permitiendo una mayor flexibilidad y adaptabilidad a las características reales del proyecto.

En cada fase del proceso, la interacción con el cliente es constante, realizando entregables para su validación y permitiendo una continua visibilidad del avance del proyecto en tiempo real.

De esta manera aseguramos un producto de calidad, evitando posteriores modificaciones durante la maquetación o el desarrollo (que siempre son más costosas), por un mal planteamiento inicial.

El equipo

Para este proyecto se propuso un equipo multidisciplinar que se basara en la mutua colaboración por parte de ambas compañías: consultora y cliente.

👉 EL PROCESO

Aunque a mi en particular, me gusta aplicar la metodología del Doble diamante de Design Thinking, en este proyecto acudimos al Discovery Design.

Discovery Design es una metodología propia de la consultora, una combinación de Design Thinking y Agile, que sintetiza las cinco fase del Design Thinking (Empatizar, Definir, Idear, Prototipar y Testear), en cuatro: Empatizar, Idear, Diseñar y Entregar. Pero básicamente el proceso es el mismo.

Empatizar

Durante esta primera fase realizamos continuas sesiones con el cliente para conocer el funcionamiento del portal, estudiar a los usuarios y analizar a la competencia.

Centrándonos en estos tres puntos, producto, usuarios y mercado (competencia) arrancamos con una fase de research.

El portal

Profundizamos en el conocimiento de la aplicación, cómo funciona, cómo está construida, qué limitaciones técnicas tiene…

Las peticiones del cliente eran claras:

• Look & Feel renovado, mas moderno y familiar, acorde a las aplicaciones con las que los usuarios están acostumbrados a interactuar diariamente.


• Diseño responsive del portal, que se ajuste a los diferentes tamaños de pantalla de los distintos dispositivos.


• Multilenguaje, que permita ser usada por personas de diferentes lenguas. El idioma no debería ser una barrera.


• Nivel de accesibilidad AA. Contenido accesible al mayor número de personas.

Se pretende conseguir un portal más usable y accesible, agradable e intuitivo, que potencie un mayor uso.

Pero además de los objetivos del cliente, en el análisis detectamos una serie de mejoras que ayudarían a conseguir el objetivo:

• Arquitectura de la información: Nos encontramos con una arquitectura de la información un poco caótica, con un menú principal con 10 opciones en un primer nivel. En un segundo nivel llega a mostrar hasta 55 opciones. Sin duda un menú abrumador, que bloquearía incluso a los usuarios más experimentados. Dentro de las opciones de primer nivel existía una categoría llamada “Otros” que incluía entre sus 17 opciones de su segundo nivel, otra categoría llamada “Otras actividades”.


• Flujos confusos: Detectamos flujos de tareas desordenados.


• Formularios complejos: Para la confección de curriculums de investigación, en la mayoría de los casos, se necesitan incluir gran cantidad de datos, lo que da lugar a grandes formularios. En algunos casos con más de 50 campos para completar. Un auténtico dolor. Formularios tan amplios, requieren de una buena estructuración, para agilizar la tarea del completado y rebajar al máximo la carga cognitiva.
  
  

  Este aspecto tenían los antiguos formularios del Portal del Investigador

Los usuarios

Identificamos los diferentes tipos de usuarios, qué necesidades y motivaciones tienen, cómo interactúan con la aplicación, con qué pain points se encuentran, qué problemas les gustaría solventar…

Se detectaron dos tipologías principales de usuarios:

• Los propios investigadores.


• Los secretarios de los investigadores y universidades. Muchos de los investigadores tenían sus propios secretarios, a los que empleaban en estas arduas tareas de “papeleo”, mientras que ellos se centraban en lo importante, “la investigación”. En algunos casos, incluso los propios secretarios de las universidades eran los que se encargaban de registrar y mantener al día la documentación científica de los investigadores.

Realizamos entrevistas a investigadores y a personal de apoyo a la investigación para comprender sus necesidades, objetivos y puntos de fricción con los que se encontraban al acceder al portal.

Con toda la información recopilada creamos los User persona de investigadores y secretarios.

La competencia

Realizamos un análisis competitivo de otros portales de investigación y herramientas de financiación similares, para detectar best and bad practices, así como tendencias actuales de diseño y patrones de usabilidad.

Estas son las plataformas más utilizadas por los investigadores universitarios para conectar con otros investigadores de su mismo campo, compartir su trabajo y llevar a cabo un seguimiento de su impacto en la comunidad científica.

• Google Scholar Profiles: Una de las plataformas más populares para los investigadores universitarios. Google Scholar permite a los usuarios crear perfiles de investigación en los que pueden agregar publicaciones y citas. La plataforma también proporciona estadísticas de citas y resalta las publicaciones más influyentes de un autor.


• ResearchGate: Este portal permite a los investigadores compartir publicaciones, hacer preguntas y conectarse con otros investigadores de su área. También proporciona estadísticas de descargas y vistas de publicaciones.


• Academia.edu: Muy similar a ResearchGate, permite a los investigadores compartir publicaciones y conectarse con otros colegas. Y con estadísticas de descargas y vistas de las publicaciones.


• ORCID: Esta otra plataforma proporciona a los investigadores un identificador único que puede ser utilizado para conectar su trabajo y sus logros en otraas plataformas. ORCID también puede ser utilizado por las universidades y otros organismos para identificar y conectar los logros de un investigador.


• Mendeley: Es el portal de referencia y gestión de bibliografías, permite a los investigadores organizar sus publicaciones y colaborar con otros colegas en proyectos de investigación. Además proporciona estadísticas sobre las publicaciones más populares en su red.


• Institutional Repositories: Muchas universidades tienen repositorios institucionales en los que los investigadores pueden guardar y compartir sus publicaciones. Estos repositorios suelen estar administrados por bibliotecas universitarias y permiten a los investigadores mantener un registro completo y accesible de su trabajo. Desde esta plataforma se accede a estos repositorios.

Tras el análisis de los diferentes portales detectamos una serie de buenas y malas prácticas a tener en cuenta.

BEST PRACTICES:

• Diseño limpio y fácil de usar: El portal debe ser fácil de navegar y tener una apariencia limpia y clara para que los usuarios puedan encontrar rápidamente la información que necesitan.


• Diseño responsive: El portal debe ser compatible con dispositivos móviles para que los usuarios puedan acceder a él en cualquier momento y lugar.


• Uso de iconos y etiquetas claras: Los iconos y las etiquetas deben ser fácilmente comprensibles y significativos para los usuarios.


• Fácil acceso a la información: Los usuarios deben poder encontrar fácilmente la información que buscan, como publicaciones, citas y estadísticas. Entre tanta documentación y con diferentes criterios cruzados, es fácil perderse.


• Funcionalidad de búsqueda eficaz: La funcionalidad de búsqueda debe ser intuitiva y efectiva para que los usuarios puedan encontrar rápidamente la información relevante.




BADS PRACTICES:

• Diseño sobrecargado: Un diseño sobrecargado puede abrumar a los usuarios y hacer que sea difícil encontrar la información que necesitan.


• Información desorganizada: Si la información no está organizada de manera lógica y jerárquica, los usuarios pueden tener dificultades para encontrar los datos que necesitan.


• Funcionalidad de búsqueda deficiente: Una funcionalidad de búsqueda deficiente puede hacer que sea difícil encontrar la información relevante y aumentar la frustración del usuario.


• Problemas de accesibilidad: Si el portal no es accesible para todos los usuarios, puede limitar el alcance de la investigación y excluir a ciertos grupos de usuarios.


• Falta de retroalimentación: Si el portal no proporciona retroalimentación clara al usuario, puede generar confusión y frustración en lugar de ser útil.




En resumen, para diseñar un portal de investigadores con una buena UX/UI, es importante mantener el diseño limpio, claro e intuitivo, bien estructurado y organizado, garantizando una funcionalidad de búsqueda efectiva y proporcionando acceso fácil a la información.





Idear

Con la información recogida en la fase anterior, realizamos varias sesiones con cliente y usuarios, para idear en conjunto posibles soluciones a los problemas y mejoras detectados.

Priorizamos las soluciones, y nos quedamos con las más óptimas.

Sobre las soluciones finales, comenzamos a esbozar el nuevo portal del investigador: cómo sería su estructura, la navegación, secciones, etc…

Optamos por un diseño simple y limpio que permita a los usuarios acceder a la información que necesitan de manera clara, rápida y fácil.

Las características principales del diseño incluyen:

• Menú de navegación sencillo: Desarrollamos un menú de navegación claro y sencillo que permitía a los usuarios acceder a la información en solo unos pocos clics.
• Personalización: Creamos un panel personalizado para cada usuario, que incluía información importante, como solicitudes de financiación pendientes y subvenciones activas, y proporcione acceso rápido a las herramientas de investigación relevantes.
• Diseño responsive: Desarrollamos un diseño responsive que funcione bien en dispositivos móviles, lo que permitía a los investigadores acceder a la información que necesiten en cualquier momento y en cualquier lugar.
• Lenguaje y tono accesibles: Utilizamos un lenguaje sencillo y tono amigable para hacer que el portal sea más accesible para los usuarios, y nos aseguramos de que la información fuera fácil de entender.




Diseño los wireframes en baja (arquitectura de la información, estructura del portal,menús de navegación y plantillas de las páginas principales), para poder validarlos con usuarios y negocio. Así como las páginas específicas: Notificaciones y Registro horario.

Una vez validados los wireframes, se ordenan por prioridades que iremos atacando en la fase de diseño.





Arquitectura de la información

Se revisó la arquitectura de la Información y se reorganizó de una manera más óptima. De las 10 opciones del menú principal, y 55 de un segundo nivel, se redujo a una estructura de navegación localizada en dos ubicaciones, menú superior y menú lateral.

El menú superior compuesto por las secciones: Mi perfil, Notificaciones, Soporte, y se añadieron el botón de “Desconexión” y un “Buscador” (imprescindible).

En el menú lateral estarían: Seguimiento económico, Ayudas, Actividad científica, Descarga de documentos y Gestión horaria.





Originalmente aparecían en el menú principal, todo el listado de tipos de actividades científicas que pudiera registrar un investigador (artículos, libros, congresos, premios....).

Se decidió de manera acertada que en el nuevo portal sólo aparecerían aquellas actividades que el usuario hubiera registrado alguna actividad.

Por ejemplo, si un investigador sólo había trabajado en traducción de artículos, tesis y proyectos de innovación docente, no tenían porque mostrarse las otras 25 tipologías de actividades científicas que existían.

De esta manera se aligeró considerablemente la carga de secciones, consiguiendo reducir el menú principal de 60 opciones a 18.

...consiguiendo reducir el menú principal de 60 opciones a 18






Estructura del portal

Se definió una estructura clásica del portal, con un menú superior donde se encontraban las opciones más genéricas del portal y de rápido acceso:

• Buscador
• Soporte
• Notificaciones
• Salida




Y un menú lateral donde encontrar las opciones de trabajo del investigador(registro y consulta) y navegación del portal:

• Dashboard
• Mi perfil
• Seguimiento económico
• Ayudas
• Actividad científica
• Descarga de documentos
• Registro horario





Plantillas de pantallas tipo

Detectamos que en toda la aplicación se repetían tres tipos de páginas:

• Consulta: Donde el usuario revisa información, visualiza datos. Este tipo de pantallas está compuesto básicamente por un Buscador y una Tabla donde se muestran los resultados de la búsqueda.
• Detalle: Que mostraba la información detallada de uno de los resultados de la tabla de resultados.
• Registro: En este tipo de pantallas formulario, es donde el usuario registra información e introduce datos para consultarlos posteriormente. Se decidió hacer esta pantalla en modal, para abstraer al usuario de distracciones y enfocarlo en la tarea de rellenar el formulario.

Pero además de estas, había unas secciones que demandaban un diseño específico: Notificaciones y Registro horario





Diseñar

Ya con los wireframes validados y aprobados, nos disponemos a crear el diseño final de las pantallas.

Empezamos estudiando las Brand Guidelines del cliente, y con ellas en mente, el diseño para multidispositivo y el nivel de Accesibilidad AA, creamos un completísimo UIKit para la aplicación: Colores, Tipografías, Grids, Espaciados, Elevaciones (sombras), Componentes: botones, inputs, tablas…

Para después pasar a diseña la estructura del portal: Header, Menú de navegación, Footer y las diferentes plantillas definidas para los distintos tipos de contenido: Tablas, Formularios, Mensajes, Modales…

UI Kit

Empezamos creando un UI Kit de la plataforma de los componentes que van a dar forma al portal.

Este UIKit, es indispensable para agilizar el trabajo y costes de diseño de pantallas, a la vez que otorga consistencia en el diseño, el código y la marca, y facilita la escalabilidad, para una posible posterior ampliación de la aplicación y sus funcionalidades.

Un UI kit ayuda a los equipos de diseño y desarrollo a crear interfaces de usuario coherentes y eficientes.

Con las Brand guidelines del cliente diseñamos las Foundations (colores, tipografías, grids, espaciados...) del UI Kit. Revisamos y ajustamos los colores de la marca para obtener un nivel de accesibilidad AA.












A continuación, identificamos e inventariámos todos los componentes que actualmente se usan en el portal y revisamos si van a ser necesarios o no en el nuevo diseño.

Una vez que tenemos identificados todos los componentes, pasamos a diseñarlos, con todas sus variantes (estados, tamaños, breakpoints…).












Menú de navegación

Se redujo considerablemente el número de opciones del menú principal, además se diseñó con un aspecto visual más moderno, claro e intuitivo, tal y como se demandaba en un principio.



Aspecto del menú de navegación original





Se trabajó en las versiones para desktop, tablet y mobile y en una versión reducida.





Diseño del menú de navegación en todas sus versiones





Plantillas

Identificadas las páginas tipo del portal y validados los wireframes low-fi por usuarios y negocio, ya sólo quedaba montar el LEGO con las piezas, o lo que es lo mismo, montar las plantillas con componentes del UI Kit.



Diseño de la plantilla de la página de Consulta





Diseño de la plantilla de la página de Detalle





Diseño de la plantilla de la modal de Registro





Pantallas específicas

Además de las plantillas, había secciones con un diseño específico como era la de Notificaciones y Registro horario,





Diseño de la página Notificaciones





Diseño de la sección de Registro horario





Testear

La fase de prueba o testing, es constante y se produce en repetidas ocasiones durante todo el proceso de diseño. A ella acudimos con cada hipótesis, para poder validarlas con usuarios, de esta manera trabajamos sobre “seguro” antes de llegar a desarrollo, donde el coste que supone cualquier modificación es más elevado.

Creamos prototipos (low-fi y hi-fi) en Figma para probarlos con usuarios, y así detectamos fallas y mejoras, asegurándonos con mayor certeza de que el diseño final va a cumplir los objetivos y expectativas de los usuarios.

Como resultado de estas pruebas, pudimos identificar y solucionar problemas de usabilidad, como la falta de claridad en los menús de navegación y la dificultad para acceder a cierta información de importancia para los usuarios.







El dashboard, pieza clave

Cuando los usuarios accedían al antiguo portal del investigador, veían una página en blanco, con el menú principal en el lateral izquierdo de la pantalla. Desde ahí el usuario elegía a dónde quería ir.

Pensamos que si aprovechábamos esa página en blanco para empezar a mostrar información relevante para el usuario, sería bueno para él. Y ahí nació la idea del Dashboard, como una página de inicio donde el usuario pudiera consultar la información más importante, o incluso pudiera llevar a cabo las tareas más habituales sin tener que adentrarse en el portal.

La idea gustó a negocio, consultamos con los usuarios y también nos dieron luz verde. El siguiente paso era definir el contenido del dashboard

¿Qué le gustaría ver al usuario nada más aterrizar en su portal del investigador?

Montamos una sesión de trabajo virtual en Miro, con el cliente y usuarios para definir cuál sería el contenido que el Dashboard debería mostrar.



Resultado del workshop para definir cuál sería el contenido del Dashboard





Definido el contenido del dashboard, quedaba decidir cómo íbamos a mostrar esa información.

Analizamos dashboards de diferentes plataformas, para identificar el tipo de componentes que mejor se ajustara a las necesidades del Portal del Investigador.



Algunos dashboards que nos sirvieron de inspiración y detección de patrones de uso





Sin duda, el formato card, era el más adecuado para mostrar bloques de información independientes.



Wireframe low-fi del dashboard





Una vez aplicadas las modificaciones y validado el wireframe low-fi con las diferentes secciones y contenidos, pasamos a diseñar la versión final en alta fidelidad.



Diseño Hi-fi del dashboard





Para aligerar la carga congnitiva del dashboard se aglutinaron dentro de la misma card algunas gráficas como las referentes a la Actividad científica. Así podías alternan entre Publicaciones y Otras actividades, a través de unas pestañas.



Detalle de la card de Actividad científica





La versatilidad del Dashboard permitía al usuario poder consultar la información más relevante, y realizar algunas tareas más habituales como el registro horario, sin tener que navegar por el portal.

La versión responsive cumplía perfectamente con las necesidades de los usuarios y las caracteristicas de tablets y móviles.

Nosotros trabajamos primero la versión desktop, por exigencias del cliente, pero siempre teniendo en mente cómo se comportaría en mobile.

Teníamos claro que el uso principal del portal, sería en desktop, ya que consultar amplia documentación y completar enormes formularios no era una tarea muy agradable de realizar en pantallas reducidas.

El comportamiento responsive del portal, fue un responsive natural, cayendo los diferentes componentes uno debajo de otro.





Dashboard version mobile







👉 RESULTADOS

El nuevo portal del investigador fue lanzado con éxito y recibió comentarios muy positivos de los usuarios.

Los investigadores encontraron que el nuevo diseño era mucho más fácil de usar y accesible, lo que les permitió llegar a la información que necesitaban de manera más rápida y eficiente.

Además, el cliente detectó un aumento en el registro de la actividad de los investigadores y un mayor número en las solicitudes de financiación presentadas.





👉 CONCLUSIÓN

En resumen, el rediseño del Portal del investigador mejoró la experiencia de uso de los investigadores en el mismo, aumentando el número de visitas.

Esto llevó al portal a ocupar la vanguardia de las herramientas más frecuentadas por los investigadores. Objetivo cumplido.