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 del panel, desde los flujos y los prototipos hasta escribir pruebas y acompañar su construcción.
Diseñé el mapa que encabeza el producto: cada red es un punto, coloreado según un modelo de estados basado en la utilización, con umbrales explícitos.
Diseñé el aprovisionador, que convirtió la configuración de una red nueva en cuatro pasos escalonados, y el editor del portal cautivo para el Wi-Fi de invitados.
Revisé la versión de noviembre de 2018, donde cada anotación en rojo era una pregunta para la siguiente iteración.

483 redes en un solo mapa en la versión de prueba, de las plataformas de dos proveedores bajo un mismo modelo de salud
5 estados en el modelo: sano por debajo del 75% de utilización, vigilancia, advertencia, crítico por encima del 94%, y sin configurar
4 pasos para poner en marcha una red nueva: sus datos, sus dispositivos por número de serie escaneado, los pasos manuales y, al final, en vivo
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? El producto tenía que 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.

Asumí el diseño de producto de un panel que respondía esa pregunta para toda una flota. Puso cada red administrada en un solo mapa, redujo la telemetría de dos proveedores a un solo modelo de estados, le dio a cada ubicación su propio nivel de detalle e hizo que agregar el siguiente sitio fuera una lista de verificación. Se lanzó, y tres o cuatro clientes empresariales lo usaron, aunque nunca pasó de ellos. Lo que se conserva es el registro de la revisión de diseño de la versión de prueba de noviembre de 2018: capturas anotadas, donde cada nota en rojo es una pregunta para la siguiente iteración.

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.
Yo Diseño de producto: los flujos, el mapa y el modelo de estados, el aprovisionador, el editor del portal cautivo y las revisiones de diseño.

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

Leer el expediente 7 secciones, unos 3 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. En 2018 asumí su diseño de producto, desde la planeación de flujos y los prototipos hasta la escritura de pruebas y la implementación. El trabajo consistía en reducir la telemetría de dos proveedores a un modelo de estados legible, y en hacer que agregar el siguiente sitio fuera una lista de verificación y no un proyecto.

Un mapa, un modelo de estados

El panel abre 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 la revisión está 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

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. La 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.** 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.** Una fila por red, una columna por plataforma de proveedor. Datos de prueba.

Configurar una red como una lista de verificación

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. La 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.** 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

Un editor de portal cautivo 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.** 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 es el registro de la revisión de diseño: dieciocho capturas de la versión de prueba de noviembre de 2018, fechadas el 19 y el 20 de noviembre, 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? Dejé las anotaciones en las capturas porque muestran a la revisión haciendo su trabajo.

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 ni de desempeño, 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 anotación de revisión en rojo pregunta si Admin tiene que ser una pestaña de la navegación principal. — **Admin, con una pregunta encima.** ¿Admin tiene que ser una pestaña de la navegación principal? Una nota de 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.