Vertical Menu: la unión de cinco menús en uno.
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, a nivel de experiencia de usuario y de interfaz. Ver artículo de prensa
Rol
Junior UX/UI Designer
Cliente
Freightos
Año
2023
Equipo
Directivos (CEO + Main Managers), PMs, Developers, QA
Por qué necesitábamos un nuevo enfoque
Contexto
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.
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.
Técnicas de investigació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.
Workshops con equipos internos
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
Enfoque
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.
Header
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.
Menú vertical
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.
Footer
[Placeholder — describe aquí la propuesta final del footer del menú: qué elementos se decidió incluir, cómo se relaciona con el resto del sistema de navegación y qué validaciones se hicieron con los equipos de producto.]
Referencias de la propuesta final del footer.
Cómo tomó forma la interacción final
Del boceto al prototipo
[Placeholder — con la arquitectura de la información ya validada, explica aquí cómo se construyeron los prototipos interactivos de alta fidelidad: qué herramientas se usaron, cuántas iteraciones hubo y qué cambió respecto a los primeros borradores.]
Valoración del equipo
[Placeholder — resume aquí cómo se presentaron los prototipos al equipo, qué feedback se recogió de PMs, developers y QA, y qué decisiones de diseño cambiaron a raíz de esas valoraciones antes de dar el sistema por cerrado.]
Un sistema de navegación modular, no un único menú rígido
Enfoque
[Placeholder] En vez de imponer un único menú fijo a todos los productos, diseñamos un sistema modular de componentes de navegación con reglas claras de composición, para que cada producto pudiera adaptarlo a su contexto sin salirse del lenguaje común.
Funcionalidades
entregadas
-
01
Sistema de navegación modular
[Placeholder] Un conjunto de componentes de menú reutilizables, con reglas claras de composición y jerarquía.
-
02
Librería de patrones documentada
[Placeholder] Guía de uso en Figma con ejemplos de implementación para cada producto.
-
03
Migración progresiva
[Placeholder] Plan de adopción por fases para no bloquear a los equipos de producto durante la transición.
Resultados
- [Placeholder] Los equipos de producto empezaron a lanzar cambios de navegación sin rediseñar el menú desde cero.
- [Placeholder] El tiempo de incorporación de nuevos productos al sistema se redujo de forma notable.
- [Placeholder] Los usuarios que trabajan con varios productos reportaron una navegación más predecible.
La funcionalidad en profundidad
El sistema de navegación modular, en profundidad
Cómo diseñamos un stack de menús que funciona igual en cinco productos distintos
Contexto y problema
[Placeholder — explica aquí la parte más difícil del rediseño: qué restricciones técnicas tenía cada producto, qué equipos se resistían al cambio y por qué un único menú rígido no era la solución correcta.]
"[Placeholder — sustituye esta cita por un testimonio real de un usuario o stakeholder del proyecto.]"
— [Cargo, empresa — placeholder]
Proceso
[Placeholder — resume aquí cómo validaste el sistema con los distintos equipos de producto: cuántas rondas de revisión, con quién, y qué decisiones cambiaron a partir de ese feedback.]
Detrás de
escena
-
01
[Placeholder] Auditamos los menús existentes de cada producto y mapeamos sus patrones comunes.
-
02
[Placeholder] Diseñamos un set de componentes de navegación con reglas de composición documentadas.
-
03
[Placeholder] Probamos el sistema con dos productos piloto antes de extenderlo al resto.
-
04
[Placeholder] Documentamos el sistema y acompañamos a cada equipo en su migración.
Resultados
XX
Productos unificados
[Placeholder descripción]
XX%
Menos tiempo de implementación
[Placeholder descripción]
XX%
Componentes reutilizados
[Placeholder descripción]
[Placeholder — cierra esta sección con una reflexión breve sobre lo que hizo funcionar este sistema en concreto.]
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
Gracias por leer. ¿Quieres ver más?