Rastreando la cadena de suministro mundial, viaje a viaje.

El desafío

Un marcador en este mapa nunca es solo un pin. Es un palé de vacunas, un contenedor de productos frescos con el reloj en contra, o una pieza que detiene una línea de producción si no llega a tiempo.

Brambles mueve activos físicos a través de más cadenas de suministro que casi cualquier otra empresa del planeta. Supply Chain Illumination (SCI), la plataforma para la que diseño, existe para responder a una pregunta genuinamente difícil a esa escala: dónde está un activo determinado ahora mismo, si va según lo previsto, y si sigue en condiciones aceptables, a través de más de 300.000 cadenas de suministro y 348 millones de unidades físicas en más de 60 países.

Mostrar toda la red de un vistazo siempre iba a ser lo correcto. Ocultar esa escala habría sido deshonesto sobre lo que el producto realmente hace. El problema más difícil, el que realmente tuve que diseñar, era la velocidad: qué tan rápido podía alguien pasar de «aquí está toda la red» a «aquí están el puñado de activos, ubicaciones y viajes que necesitan mi atención ahora mismo». Es la misma tensión para la que diseñé en el caso de estudio de Discovery: lo que una pantalla muestra y lo que un usuario realmente necesita saber rara vez son lo mismo, y en esa brecha es donde ocurre el verdadero trabajo de diseño.

Mostrar toda la red era la parte fácil. Hacer que fuera rápido filtrar hasta lo que realmente importaba era el verdadero problema de diseño.

Mi papel

Soy responsable de la UX del Mapa de Red, Viajes, Visibilidad de Activos y Ubicaciones en SCI, como Diseñador de Producto Principal en Brambles.

Eso abarca el diseño de interacción de pantallas individuales, resúmenes de viaje, gráficos de condición, líneas de tiempo, paneles de detalle de activos y ubicaciones, y las reglas subyacentes que hacen que el sistema se mantenga coherente a escala: qué es un clúster, cuándo se descompone al hacer zoom, qué comunica el color sobre la condición del activo, y cómo esas reglas se mantienen consistentes ya sea que alguien esté viendo un único viaje o toda la red.

El propio sistema de mapas creció más allá de SCI. Ahora es el lenguaje de mapas compartido detrás de cinco productos de Brambles, mantenido por 21 miembros del equipo de UX en lugar de por el archivo de diseño de una sola persona, la evidencia más clara que tengo de que un patrón realmente estaba resolviendo un problema real, y no solo cumpliendo con la especificación de un equipo.

Los mapas de SCI se construyen sobre Mapbox como motor de mapas principal, elegido por ofrecer un mapa base estable, un rendimiento sólido a escala y un estilo flexible compatible con temas claro y oscuro. Mapbox gestiona el desplazamiento, el zoom y el viewport por defecto. Todo lo que un usuario realmente reconoce como «el mapa de SCI» —los marcadores, los clústeres, las líneas de viaje, los paneles laterales— es un componente que diseño y especifico sobre esa base, construido para mantenerse coherente con el Brambles Design System en lugar de heredar los valores visuales por defecto de Mapbox.

También construí estos componentes en código, usando herramientas asistidas por IA, no solo en Figma, de modo que cuando se explorara una nueva pantalla o función, en SCI o en otro producto completamente distinto, el equipo que recurriera al sistema estuviera trabajando a partir de algo que realmente pudiera incorporar y probar, no una referencia estática. El archivo Figma de referencia y el código base se mantienen sincronizados deliberadamente: actualizar uno sin el otro anula por completo el sentido de tener un sistema de diseño.

Las tres reglas de abajo, qué es un clúster, qué es un marcador y qué significa el color, son la base sobre la que se construye todo lo demás en el mapa, así que son las que merece la pena recorrer aquí. El sistema más amplio va considerablemente más allá: el comportamiento del viewport, la búsqueda, el panel de mini filtros y filtros completos, una leyenda dinámica que solo muestra lo que realmente es visible en pantalla, y los componentes de detalle de activo, detalle de ubicación y línea de tiempo a los que dan acceso esos marcadores y clústeres, están todos documentados y componentizados de la misma manera.

¿Qué es un clúster?

En el Mapa de Red, un clúster agrupa varios activos o ubicaciones que están cerca entre sí, de modo que el mapa se lee de un vistazo en lugar de ahogarse en pines individuales. Los clústeres usan iconografía para lo que realmente contienen —una tienda, una planta de fabricación, una mezcla de tipos de activos— en lugar de un simple punto genérico, y esa iconografía se vuelve más específica a medida que el usuario hace zoom. Al hacer más zoom, los clústeres se descomponen en marcadores individuales de activos y ubicaciones, o en clústeres más pequeños y específicos dentro del original.

¿Qué significa el color en el Mapa de Red?

El color le indica al usuario en qué estado está un clúster o marcador antes de hacer clic en nada. Azul significa activos en movimiento. Morado significa activos en reposo en una ubicación conocida y esperada. Rojo significa un reposo no identificado, un activo que está en un lugar donde no tiene motivo para estar, lo que suele ser la primera señal de que algo se ha perdido o ha sido robado. Este es deliberadamente un lenguaje de color distinto al que se usa en Viajes, porque el Mapa de Red responde a «dónde está todo y en qué estado se encuentra», no a «si este envío concreto va según lo previsto».

¿Qué es un marcador?

Un activo individual en movimiento recibe su propio marcador de halo o pulso, una señal visual de que algo está activo y en tránsito. Una vez que un activo deja de moverse, ya sea en una ubicación conocida o en una no identificada, se agrupa en un clúster junto con el marcador de ubicación correspondiente, en lugar de quedar en el mapa como un punto solitario. También estamos explorando la posibilidad de dimensionar los marcadores en reposo según cuánto tiempo lleva un activo inmóvil, de modo que el propio mapa pudiera eventualmente empezar a responder «cuál de estos lleva demasiado tiempo aquí», pero eso todavía no se ha lanzado; es una dirección que estamos probando activamente, no una regla ya activa.

¿Qué cambia cuando se muestra un viaje de forma individual?

Mostrar un único viaje por sí solo saca a la superficie un nivel de detalle que el lenguaje de clústeres y marcadores anterior omite deliberadamente: la propia polilínea, flechas direccionales a lo largo de ella, una ubicación de salida, pines de ubicaciones detenidas, un pin de última ubicación vista o un círculo en movimiento, burbujas de información y marcadores de puntos de referencia. Nada de esto sustituye a las reglas anteriores; es el mismo lenguaje visual con el volumen subido, porque leer un envío es una tarea distinta a leer trescientos mil, y necesita ese detalle adicional para estar a la altura.

Estas no son decisiones de interfaz incidentales. Son las reglas que permiten que el mismo componente de mapa funcione ya sea que muestre 12 activos o 12.000, y están documentadas una sola vez, como referencia del sistema de diseño, precisamente para que un diseñador que se incorpore a otra superficie de SCI, o a otro producto de Brambles completamente distinto, herede la misma lógica en lugar de reinventarla.

Capas, y construir para la siguiente función antes de que exista

El panel de Capas controla lo que muestra el mapa. Por defecto, tanto la capa de activos como la de ubicaciones están activadas. Desactivar una capa elimina todo lo asociado a ella en una sola acción: marcadores, clústeres, filtros, resultados de búsqueda y entradas de la leyenda, de modo que el mapa nunca muestra ni filtra datos que un usuario ha ocultado deliberadamente. Desde entonces he prototipado en código una capa dedicada de Reposos no identificados, para que un usuario pueda aislar exactamente los activos que más necesitan investigación sin tener que filtrar primero por todo lo demás, y Viajes es el siguiente tipo de capa lógico a diseñar una vez que eso se lance.

La versión más reciente de Capas lanzó un conmutador de proyección de mapa entre globo y plano: una función de accesibilidad genuina, no un adorno visual. Algunos usuarios experimentan sensibilidad al movimiento con una vista de globo giratorio, y algunas tareas logísticas —planificar una ruta, comparar distancias— resultan simplemente más fáciles en una proyección plana, mientras que otras, como entender la cobertura de la red de larga distancia, se leen mejor en un globo. Ambos estados están claramente etiquetados, son accesibles por teclado y compatibles con lectores de pantalla, y la elección de proyección persiste en todos los mapas del producto hasta que el usuario vuelve a cambiarla. Lo mismo ocurre con el estilo de mapa: cualquiera que sea el estilo base que elija un usuario —Claro, Oscuro, Exteriores o Satélite con calles— se recuerda como su preferencia y se aplica en el resto de superficies de mapa de SCI, así que no tiene que restablecerlo pantalla por pantalla.

Diseñar ese conmutador significó escribir los criterios de aceptación antes de que la función existiera: qué debían significar «vista de globo» y «vista plana» para un lector de pantalla, cómo debía moverse el foco, qué debía y no debía restablecerse al cambiar. Esa es la misma disciplina detrás de las reglas de clústeres y marcadores anteriores: decidir el comportamiento del sistema una sola vez, por escrito, para que cada equipo que construya sobre él herede el mismo estándar.

Un viaje sigue el trayecto más reciente de un único activo: su ubicación de inicio, cada reposo intermedio, y su ubicación final o actual. Es una tarea distinta a la del Mapa de Red, así que usa un lenguaje visual diferente. Las líneas de viaje entre reposos son azules por defecto, y cambian para mostrar segmentos de duración incumplidos frente a óptimos en el momento en que un usuario activa la condición, de modo que un cliente pueda ver exactamente en qué punto de la ruta ocurrió un problema, no solo que ocurrió uno. Los marcadores de ubicación en un viaje siguen la misma lógica: negros por defecto, y se vuelven rojos en el momento en que se registra un incumplimiento en ese reposo concreto, ya sea que el activo estuviera parado o moviéndose entre dos puntos.

La página de resumen del viaje se diseñó para que las dos preguntas que más importan —dónde está este envío, y sigue en condiciones aceptables— se puedan responder sin un solo clic. Ruta, punto de despacho, última ubicación vista, duración, y condición de temperatura e impacto en vivo conviven en la misma pantalla. El mismo componente se reduce luego a un resumen compacto para una fila de tabla, y se amplía a la vista de detalle completo del viaje: un solo patrón, varias densidades, en lugar de un segundo diseño construido desde cero para cada contexto.

Cuando algo realmente ha salido mal, esos mismos datos de temperatura e impacto alimentan el gráfico de condición de abajo: el viaje completo representado frente a bandas de umbral óptimo, de bajo riesgo y de alto riesgo, con un control deslizante de rango de fechas y controles de zoom para saltar directamente al momento en que se cruzó el límite, en lugar de escanear todo el trayecto a simple vista. Un pico de impacto puede significar un frenazo o una colisión, un aumento lento de temperatura puede significar una unidad de refrigeración averiada o una puerta que quedó abierta durante una ruta larga, y los mismos dispositivos inteligentes pueden señalar un cambio inesperado de luz o de peso en un palé estacionado, una señal de que algo se abrió o se retiró mientras estaba aparcado. Insights on Arrival, un módulo independiente de SCI, responde a la pregunta relacionada pero distinta de en qué condición llegó un envío a su destino final, usando estos mismos datos subyacentes.

Línea de tiempo del viaje

La vista de línea de tiempo responde a «qué pasó realmente en este viaje» con un mapa de ruta, paradas numeradas, tiempo de reposo en cada una, y marcadores de incidentes colocados directamente sobre el mapa en lugar de enterrados en un registro. Existe una vista de registro independiente para cuando alguien realmente necesita la secuencia de eventos en bruto, pero el mapa sigue siendo la forma principal de entender un trayecto, porque una ruta con un marcador rojo cuenta una historia más rápido de lo que jamás lo hará una tabla.

La línea de tiempo vertical en el mapa también tiene una contrapartida horizontal, una franja de carretera compacta que se sitúa justo debajo del gráfico de condición en la pantalla de resumen del viaje. La misma lógica de reposo y ubicación, dispuesta de izquierda a derecha en lugar de arriba a abajo: una barra morada marca la duración del reposo en cada parada, y un icono de camión marca la posición actual del activo, azul mientras se mueve, morado mientras está en reposo, verde una vez entregado, con los faros encendidos solo cuando está genuinamente en tránsito. Es un componente pequeño, pero es lo que permite que alguien que esté leyendo un pico de temperatura en el gráfico de arriba vea, de un mismo vistazo, si el activo estaba aparcado en una parada o realmente en movimiento cuando ocurrió.

Un viaje también está compuesto de tramos, el camino entre dos ubicaciones cualesquiera dentro de él, y explorar los tramos descompone la ruta en esos segmentos individuales, Tramo 1, Tramo 2, Tramo 3 y así sucesivamente, cada uno con su propio estado de incumplido o correcto en lugar de un único veredicto para todo el viaje. Un viaje con un solo tramo malo de seis no debería leerse igual que un viaje que falló de principio a fin. En el mapa, un tramo se marca con su propio pin cuadrado, situado en el centro de la polilínea de ese tramo en lugar de en una ubicación, de modo que un usuario pueda identificar de un vistazo qué segmento está viendo. Seleccionar un tramo mantiene sincronizados el mapa y la lista de la línea de tiempo, de modo que un usuario puede saltar entre un tramo de la ruta y su detalle en la lista sin perder su lugar.

Un flujo es un trayecto regular que el producto de un cliente recorre sobre nuestros palés, una fábrica a una tienda, un almacén a un centro de distribución. Una ruta es una forma concreta de ejecutar ese flujo: de fábrica directamente a la tienda es una ruta, de fábrica pasando por un almacén y un centro de distribución es una ruta distinta para el mismo flujo, y la mayoría de los flujos tienen varias. Un viaje es una única instancia completada de una de esas rutas, en una fecha, con un activo. El mismo carril de envío, tres lentes distintas: un flujo te dice si el carril en su conjunto está saludable, una ruta te dice qué camino a través de él es el más rápido o el más lento, y un viaje te dice qué pasó realmente en un trayecto.

Abrir un flujo lo descompone en sus rutas, cada una el mismo carril recorrido de una forma distinta, con sus propias ubicaciones relevantes y sus propios tiempos de ciclo y reposo más rápido, más lento y medio. Aquí es donde reside la comparación útil: dos rutas que sirven al mismo flujo, una consistentemente más rápida, y ahora esa diferencia es visible y atribuible en lugar de estar enterrada dentro de un único promedio combinado.

Ninguna de las dos pantallas tiene todavía un mapa, y eso es deliberado y no un descuido: todo lo anterior sigue siendo trabajo de listas y tablas, no trabajo espacial. Es el siguiente reto de diseño de mapas en este producto: el mismo lenguaje de clústeres, marcadores y líneas de viaje visto antes en este caso de estudio, aplicado un nivel más arriba, para que los reposos de una ruta y un tramo con bajo rendimiento sean tan visualmente evidentes en un mapa como ya lo es el incumplimiento de un único viaje.

Activos y Ubicaciones también existen como módulos independientes, listas con capacidad de búsqueda de exactamente lo que ya está representado en el Mapa de Red, para los usuarios de operaciones que piensan primero en una lista y luego en un mapa. Ninguno de los dos módulos inventa un patrón nuevo para lograrlo: el mismo lenguaje de búsqueda, ordenación y filtrado se traslada desde Viajes y Flujos, así que un usuario que ya ha aprendido a trabajar con una lista ya sabe cómo trabajar con estas.

Una fila en cualquiera de las dos listas no es un callejón sin salida. Hacer clic en una ubicación abre la misma pantalla de ubicación que abre un marcador en el Mapa de Red: límite, dirección y métricas de movimiento sobre un mapa en vivo. Hacer clic en un activo lleva directamente a la línea de tiempo del trayecto de ese activo, el mismo trayecto al que llegaría un usuario haciendo clic en su marcador en el mapa. Lista y mapa son dos puertas hacia las mismas salas, no dos funciones separadas que construir y mantener.

Illuminate cambia el Mapa de Red a un modo oscuro de alto contraste, construido para mirar muchos viajes a la vez en lugar de uno. Cada viaje en pantalla se renderiza según su condición, incumplido en rojo, óptimo en verde, de modo que un responsable de la cadena de suministro que escanee toda la red pueda ver dónde se concentran los problemas sin abrir un solo viaje para comprobarlo. Es el mismo lenguaje de rojo frente a verde que este caso de estudio ha usado desde una única línea de viaje en adelante, solo que apuntado simultáneamente a varios cientos de envíos en lugar de a uno.

Al hacer zoom en un área específica se mantiene el mismo lenguaje de color, pero se añade una forma de acotarlo: un filtro de condición cambia el mapa entre viajes óptimos, incumplidos o todos, y una lista de viajes a la derecha agrupa todo lo que está actualmente a la vista por estado —no despachado, en reposo, en movimiento, entregado— de modo que un responsable de la cadena de suministro pueda pasar de «dónde están los problemas» a una lista filtrada y contable sin salir del mapa.

Mostrar tantos viajes a la vez cambia cuál es realmente la siguiente vista útil. El siguiente paso obvio son los mapas de calor, agrupando la densidad de incumplimientos por geografía para que una región con un número desproporcionado de viajes rojos destaque de un vistazo, el mismo principio de «detectarlo antes de que sea un ticket» que hay detrás del lenguaje de clústeres y marcadores visto antes en este caso de estudio, aplicado a escala de cartera en lugar de a un solo envío. Esto está en una fase temprana, un conmutador y un lenguaje de color ya probados a nivel de viaje, todavía no un producto de mapa de calor terminado, pero es la dirección hacia la que el mapa quiere ir de forma natural una vez que existen datos de condición para cada viaje de una cadena de suministro, no solo para el que alguien haya abierto por casualidad.