Un panel de salud de red para operaciones con muchas sedes

Un solo panel para cientos de redes

Mi papel

Diseñador UX sénior

Empleador: World Wide Technology
Equipo: Asynchrony Labs, el área de ingeniería de software de WWT
Dónde: St. Louis
Cuándo: 2018

Asumí el diseño de producto cuando la investigación de campo se había estancado, y reorienté el trabajo hacia conceptos a los que la gente pudiera reaccionar.
Reconstruí la interfaz como un prototipo con un estilo nuevo, dentro de lo que permitía el catálogo de componentes de Material, para que se leyera como experimental y les diera a quienes lo iban a usar algo que los entusiasmara.
Recreé en el prototipo el mapa que encabeza el producto, cada red un punto coloreado según un modelo de estados basado en la utilización, junto con el aprovisionador y el editor del portal cautivo.
Revisé la versión de noviembre de 2018 que heredé, donde cada anotación en rojo era una pregunta para la siguiente iteración.

66 mesas de trabajo en el prototipo, desde Network Health en cinco vistas hasta cada ubicación en detalle
4 preguntas de mi revisión de la versión que heredé, cada una una nota en rojo sobre una captura
5 vistas de Network Health en el prototipo: estado total, estado del enlace de subida, utilización, tiempo activo y latencia de paquetes
3 o 4 clientes empresariales lo usaron después del lanzamiento; nunca pasó de ellos

Resumen

Las organizaciones con muchas sedes operan sus sucursales con el proveedor de red que le haya tocado a cada sitio, y cada proveedor trae su propio panel con su propia idea de lo que es estar sano. Un equipo de operaciones que vigilaba cientos de ubicaciones no tenía una sola respuesta a la única pregunta que importa de un vistazo: ¿qué sitios necesitan atención ahora mismo?

Asumí el diseño de producto del panel que la respondía, después de que la investigación de campo se estancara en volver a documentar Material Design, y reconstruí la interfaz como un prototipo que entusiasmara a la gente: un cambio de estilo sobre Material, visiblemente experimental, hecho para obtener sus opiniones. Se lanzó, y tres o cuatro clientes empresariales lo usaron, aunque nunca pasó de ellos.

Quiénes participaron

Asynchrony Labs El área de ingeniería de software de WWT, cuyos ingenieros construyeron el producto.
El cliente Un proveedor de redes administradas para organizaciones con muchas sedes, que aquí solo nombro por su industria.
Los dueños de producto Traían los problemas como conceptos, a menudo como pedidos de mover partes de la interfaz.
El diseñador anterior Dirigía el diseño de producto antes que yo.
Yo Diseño de producto desde el relevo: mi revisión de la versión que heredé y, después, el prototipo, que recreó su mapa, su aprovisionador y su editor del portal cautivo.

La vista Network Health del prototipo: 467 redes de prueba en todo el país como puntos de estado sobre un mapa oscuro, sano, vigilancia, advertencia o crítico, bajo una barra de navegación con Network Health, Visitor Intelligence, Captive Portal y Provisioner, con controles de búsqueda, visualización, estado y rango sobre el mapa. El logotipo del cliente está tapado, y los datos son de prueba. — **El prototipo, Network Health.** Cada red del país como un punto de estado, con un estilo que va más allá del Material de serie para que quienes lo iban a usar vieran que era nuevo.

Leer el expediente 8 secciones, unos 4 min

Dónde empezó

El producto se construyó en Asynchrony Labs, el área de ingeniería de software de WWT, para un proveedor de redes administradas para organizaciones con muchas sedes. Cuando asumí su diseño de producto en 2018, el diseñador anterior había dedicado el tiempo de investigación a volver a documentar Material Design y a definir restricciones, antes de que hubiera un concepto de diseño que entusiasmara a alguien. La investigación de campo se había estancado, porque no había nada nuevo a lo que la gente pudiera reaccionar.

Los dueños de producto intentaban resolver problemas reales con conceptos propios, y la versión había crecido a partir de simples pedidos de mover partes de la interfaz. El trabajo seguía siendo reducir la telemetría de dos proveedores a un modelo de estados legible, y hacer que agregar el siguiente sitio fuera una lista de verificación y no un proyecto. Lo que hacía falta primero era algo de lo que la gente quisiera hablar.

El mapa de redes del centro de Estados Unidos en la versión que heredé: 483 redes como puntos de estado, en su mayoría verde sano, con interruptores para los estados sano, vigilancia, advertencia, crítico y sin configurar, y una leyenda que asocia cada estado con una franja de utilización. Una nota en rojo de mi revisión pregunta si la leyenda podría estar siempre visible. — **La versión que heredé, noviembre de 2018.** 483 redes de prueba en un solo mapa, coloreadas según el modelo de estados. La nota en rojo es de mi revisión.

Un prototipo que entusiasmara a la gente

Recreé la interfaz como un prototipo. Sabía lo que podía hacer el catálogo de componentes de Material, y limité el prototipo a un cambio de estilo sobre él. El cambio de estilo fue deliberado: dejaba claro que el producto era experimental, y les daba a quienes lo iban a usar algo que los entusiasmara.

Esa es una táctica que usan los investigadores de campo con experiencia, y yo quería sus opiniones. También quería que vieran que Material Design no nos limitaba. En toda la organización de diseño, ese límite se daba por sentado.

La página de ubicación del prototipo, vista Network: el estado del enlace de subida para la conexión combinada y dos enlaces WAN frente a ayer, un gráfico de disponibilidad que compara la 1 PM con la 1 PM, y la utilización del circuito de bajada y de subida hora por hora. El nombre del sitio, su dirección y el logotipo del cliente están tapados, y los datos son de prueba. — **Una ubicación, en el prototipo.** El estado del enlace de subida y, después, la utilización del circuito frente a ayer, hora por hora.

Un mapa, un modelo de estados

La versión que heredé ya abría con un mapa: cada red es un punto, coloreado según un modelo de estados basado en la utilización, con umbrales explícitos. Sano es por debajo del 75 por ciento, vigilancia llega hasta el 84, advertencia hasta el 94, crítico es lo que está por encima, y sin configurar es un estado propio y no una suposición en gris. Cada estado se puede activar o desactivar en el mapa, así que un operador puede ocultar la mayoría sana y ver solo lo que necesita atención.

La primera pregunta de mi revisión de la versión heredada estaba en el mapa mismo: ¿podría la leyenda estar siempre visible? Un operador no debería tener que abrir un panel para saber qué significa un color.

Cada ubicación con su propio nivel de detalle

En la versión que heredé, las ubicaciones concentran el detalle de cada sitio: la utilización de los circuitos, el estado de los enlaces de subida y el historial de ancho de banda en la zona horaria del propio sitio, así que un pico en una sucursal se lee a la hora de esa sucursal. La lista de ubicaciones muestra qué plataforma de proveedor administra cada sitio. Mi nota de revisión en la página de ubicación pregunta si los estados que requieren acción deberían estar en la lista misma, un nivel más arriba, donde el operador revisa primero.

Detalle de ubicación de un sitio de prueba: mosaicos de utilización de circuitos marcados como sin configurar, una tabla del estado de los enlaces de subida y una gráfica del ancho de banda de descarga en la zona horaria del sitio. Una anotación de revisión en rojo señala que los estados que requieren acción deberían aparecer en la lista de todas las ubicaciones. — **Una ubicación en detalle, en la versión que heredé.** Utilización de circuitos, estado de los enlaces de subida y ancho de banda en la zona horaria del sitio. Datos de prueba.

Tabla de todas las ubicaciones que enumera las redes de prueba por nombre, con una columna por plataforma de proveedor, y muestra qué sistema administra cada sitio. — **Cada ubicación, y quién la opera, en la versión que heredé.** Una fila por red, una columna por plataforma de proveedor. Datos de prueba.

Configurar una red como una lista de verificación

En la versión que heredé, el aprovisionador convirtió la configuración de una red en un flujo escalonado: los datos de la red, sus dispositivos agregados por número de serie escaneado, los pasos que todavía había que hacer a mano y, al final, ponerla en vivo. Vinculaba por detrás las plantillas del proveedor y registraba cada paso, así que agregar el siguiente sitio era una lista de verificación y no un proyecto. Mi revisión preguntó adónde se había ido la navegación principal dentro del flujo.

El flujo Create Network del aprovisionador en el paso Add Devices: campos para agregar un dispositivo por número de serie escaneado y nombre, conteos agrupados de dispositivos de seguridad, switches y puntos de acceso, y un registro que confirma una red vinculada a una plantilla. Una anotación de revisión en rojo pregunta adónde se fue la navegación. — **Create Network en el paso de dispositivos, en la versión que heredé.** Dispositivos agregados por número de serie escaneado, agrupados por tipo, con un registro de cada paso. Datos de prueba.

Wi-Fi de invitados sin una consola

La versión que heredé tenía un editor de portal cautivo que permitía que el personal que no es de ingeniería de redes administrara la página de bienvenida del Wi-Fi de invitados y sus términos: plantillas, texto y colores de los botones, con una vista previa tal como la mostraría un dispositivo. Así, quienes redactan los términos no tenían que entrar a la consola de red.

Editor del portal cautivo con pestañas para plantillas y para términos y condiciones, editando el texto y los colores de los botones de una plantilla predeterminada, con una acción de vista previa View as Device. — **El editor del portal cautivo, en la versión que heredé.** Plantillas y términos para la página del Wi-Fi de invitados, con vista previa en un dispositivo.

Resultados

Lo que se conserva en mi archivo son las dos mitades del relevo. La primera es mi revisión de la versión que heredé: dieciocho capturas del 19 y el 20 de noviembre de 2018, con notas en rojo. ¿Podría la leyenda del mapa estar siempre visible? ¿Adónde se fue la navegación en el aprovisionador? ¿Los estados que requieren acción deberían estar en la lista de ubicaciones? ¿Admin tiene que ser una pestaña de la navegación principal? La segunda es el prototipo en Sketch: 66 mesas de trabajo, desde Network Health en cinco vistas hasta cada ubicación en detalle, el aprovisionador, el portal cautivo y la inteligencia de visitantes.

El producto se lanzó, y tres o cuatro clientes empresariales lo usaron, pero nunca pasó de ellos. En mis archivos no hay cifras de adopción, de desempeño ni de opiniones, y las pantallas muestran datos de prueba.

Pantalla de Admin con los usuarios de un cliente de prueba, vacía salvo por una acción Add User. Una nota en rojo de mi revisión pregunta si Admin tiene que ser una pestaña de la navegación principal. — **Admin en la versión que heredé, con una pregunta encima.** ¿Admin tiene que ser una pestaña de la navegación principal? Una nota de mi revisión, planteada como pregunta para la siguiente iteración.

Si lo hiciera de nuevo

Pondría las preguntas de la revisión en algún lugar donde pudieran responderse por escrito. Las notas en rojo son buenas preguntas, y las capturas son el único lugar donde se conservan. Lo que el equipo decidió sobre cada una se quedó en una conversación.