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 prensaRol
Junior UX/UI Designer
Cliente
Freightos
Año
2023
Equipo
Directivos (CEO + Main Managers), PMs, Developers, QA
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.
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.
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.
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.
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 fragmentada por producto.
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%.
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?