Menú Vertical

Rediseño de la arquitectura de navegación para unificar los diferentes menús de los múltiples productos de la empresa en un único formato.

Ver artículo de prensa

Rol

Junior UX/UI Designer

Cliente

Freightos

Año

2023

Equipo

Directivos (CEO + Main Managers), PMs, Developers, QA

01 Punto de partida

Por qué necesitábamos un nuevo enfoque

La empresa contaba con diferentes productos y cada uno tenía un sistema de navegación diferente. Por ende, tuvimos que rediseñar y reestructurar toda la arquitectura de la información de cada uno de los productos de la empresa.

Los usuarios no encontraban la información que necesitaban

Recibíamos muchas quejas hacia soporte técnico, ya que los usuarios no lograban completar sus acciones una vez dentro de la plataforma: no conocían bien el producto porque el producto en sí no era intuitivo.

Costes de mantenimiento

Para aplicar cualquier cambio de navegación había que coordinarse con varios equipos distintos, lo que alargaba mucho los tiempos de resolución — a veces tanto que, cuando el cambio por fin se implementaba, el cliente que lo había pedido ya se había dado de baja.

Confusión entre productos

Tanto a nivel de arquitectura de la información como de UX e interfaz, los distintos tipos de usuario que saltaban entre productos se perdían con la información y no conseguían acceder correctamente a funcionalidades que debían funcionar de forma conjunta entre productos.

Captura de pantalla de la UI y arquitectura de información antigua

Captura de pantalla de la UI y arquitectura de información antigua.

02 Research

Cómo investigamos antes de tocar el diseño

Card sorting con usuarios reales

Los usuarios dedicaron una semana a acceder a un link de card sorting totalmente remoto, donde ellos mismos realizaban una serie de tareas que les permitían agrupar los diferentes conceptos en una misma carpeta.

Árboles de arquitectura de la información

Mapeo de la estructura actual de cada producto frente a la estructura ideal que emergía de las sesiones.

Síntesis y validación de patrones

Extracción de conclusiones a través del card sorting, combinado con sesiones internas con los product managers y directivos, para consolidar los futuros patrones de la nueva arquitectura de la información.

Antes de plantear una solución global, necesitábamos entender cómo pensaban los usuarios sobre la información de cada producto. Combinamos sesiones de card sorting con la construcción de árboles de arquitectura de la información, para contrastar cómo agrupaban mentalmente el contenido frente a cómo estaba estructurado realmente en cada plataforma.

Resultados de las sesiones de card sorting y árbol de arquitectura de la información resultante.

Una vez recogida toda la información del research, y con una idea clara de cómo nuestros usuarios visualizaban la información de Freightos en general, el equipo de producto pasó dos semanas seguidas trabajando codo con codo en la misma sala de reuniones siempre que fue posible, construyendo entre todos un modelo final de arquitectura de la información alineado tanto con la postura de los stakeholders como con la de los usuarios finales. Tuve la oportunidad de colaborar con todo el equipo y con mi manager, que aportaba una visión más global de los productos y nos ayudaba a validar si estábamos ubicando cada sección en el lugar correcto.

Workshops presenciales con los equipos internos de producto.

03 Del papel a la pantalla

De los primeros bocetos a las primeras interacciones

Antes de lanzarnos a los primeros bocetos, dedicamos tiempo a investigar cómo resolvían el menú vertical otros productos y software del mercado digital. Hicimos un benchmark exhaustivo revisando distintas plataformas, analizando no solo la estructura general de sus menús sino también el detalle: qué microinteracciones ocurrían cuando el usuario empezaba a interactuar con ellos y cómo clasificaban la información en un primer, segundo y tercer nivel.

Primeros bocetos del menú vertical y workshop con los equipos de producto.

Al estar rediseñando toda la navegación por defecto del sistema, también tuvimos que tocar el header, ya que al final formaba parte del mismo sistema de navegación original. Para cada producto tuvimos que especificar qué elementos del header se iban a incluir y cuáles no, así que construimos una versión global que se desescalaba según el producto en el que se aplicara.

Referencias de los diferentes headers que estudiamos y sus soluciones finales.

Mientras trabajábamos en la propuesta final del header que aplicaría a los diferentes productos, íbamos de la mano trabajando en la propuesta final de lo que sería el futuro menú vertical de Freightos. Estudiamos detenidamente los diferentes tipos de interacción: cómo se abriría la información, si esta se desplegaba en horizontal o en vertical, cómo respondería el componente al pasar el ratón por encima y cómo se vería su versión cerrada. Trabajamos con muchísimo cariño cada uno de los componentes y las interacciones que forman, a día de hoy, el producto final.

Referencias del comportamiento del menú vertical.

Al ser un menú vertical que ocupaba toda la altura de la página, en algunas pantallas del sistema quedaba un pequeño footer suelto, desconectado del resto de la navegación. A partir de la investigación realizada, decidimos integrarlo directamente dentro del propio menú, de forma que sus elementos fueran accesibles tanto con el menú abierto como cerrado.

Referencias de la propuesta final del footer.

04 Interacciones / Prototipos

Cómo tomó forma la interacción final

Cuando se validaron las versiones finales a nivel de UX y UI, se fueron generando diferentes prototipos en Figma que se entregaban a distintos stakeholders y cargos directivos para que pudieran interactuar con el nuevo menú y dar su feedback. Además, se fue creando un prototipo distinto para cada tipo de usuario y producto de la compañía, llegando a más de 8-10 prototipos finales.

User flows del menú vertical para Hybrid Platform, Enterprise Shippers y Sky eBookings
05 Solución

Un sistema de navegación unificado y fresco

El nuevo menú vertical suponía una gran revolución a nivel de navegación y de disfrute del día a día para los usuarios de la compañía. Incluso a nivel interno se convirtió en una forma más rápida y eficaz de encontrar información, tanto para los product managers y developers como para los diferentes equipos de finanzas y de servicio al cliente.

Antes: navegación superior antigua de WebCargo

Antes: navegación superior fragmentada por producto.

Después: nuevo menú vertical unificado de Freightos

Después: menú vertical unificado para todos los productos.

  • 01

    Sistema de navegación modular

    Se entregó una propuesta muy consolidada y sólida de cara a futuras fases del mismo proyecto.

  • 02

    Librería de patrones documentada

    Se documentaron todos y cada uno de los comportamientos posibles del menú vertical y todas sus variantes, tanto para usuarios internos del software como para las versiones corporativas de las correspondientes compañías.

  • 03

    Migración progresiva y cero invasiva

    A diferencia de muchos otros proyectos en los que trabajé, se realizó una migración y un cambio de UI bastante progresivo y paciente con el usuario, con un onboarding correctamente explicado por el equipo de marketing y en constante comunicación con nuestros usuarios a través de customer service.

3

Nuevos productos

Gracias a la versatilidad del menú vertical que creamos, desde los equipos directivos se plantearon hasta tres nuevos servicios.

50%

Menos tiempo de incorporación

50% menos de tiempo de incorporación: al hacer un lavado de cara desde la arquitectura de la información hasta la interfaz final, a partir de ese momento toda implementación nueva en el software dentro del menú se hace en la mitad de tiempo que se hacía antes.

100%

Navegación más predecible

Las carpetas y la información de los servicios que ofrecemos quedaron mucho más ordenadas, por lo que la calidad de la navegación aumentó hasta en un 100%.

06 Aprendizajes clave

Qué me dejó este proyecto

Este fue, hasta la fecha, el proyecto más completo de mi etapa en Freightos. Me permitió tocar prácticamente todos los ámbitos de la experiencia de usuario y el diseño de producto digital: desde la comunicación interna dentro de la empresa y las conversaciones directas con distintos directivos, hasta un proceso de research bastante complejo a nivel de UX, interacción e interfaz, apoyado en metodologías como card sorting y workshops con los distintos equipos de la empresa. Ese recorrido me permitió llegar a una solución mucho más actualizada y fresca que la de otros proyectos que había diseñado antes para la empresa.

Has llegado al final

¿Quieres ver más proyectos?