Waycare: una tabla de datos filtrable para una plataforma de tráfico con IA
El registro de incidentes de la plataforma de gestión de tráfico con IA de Waycare, usada en operaciones de ciudades inteligentes: del mapeo del flujo de trabajo a una especificación de comportamiento de 16 páginas y una interfaz pixel-perfect, más el Centro de Ayuda para clientes que diseñé en paralelo.
La tabla en el corazón del back-office
La plataforma de Waycare usa IA para gestionar el tráfico en operaciones de ciudades inteligentes. Los operadores trabajan sobre un mapa en vivo, y detrás hay un back-office donde cada incidente y cada turno se revisa, se filtra y se actualiza. El registro de incidentes es una tabla ancha, con muchas columnas y un historial largo: ahí pasan la mayor parte del tiempo los operadores, y ahí había más para ganar.
¿Cómo se le dan al usuario datos densos, un filtrado flexible y edición en el lugar sin que la pantalla parezca una planilla?
Cuatro áreas, una pantalla
Mapeé el flujo de trabajo alrededor de la tabla, desde abrir el registro de un día hasta guardar un cambio, y dividí la pantalla en cuatro áreas: cabecera de la plataforma, cabecera del documento, espacio de filtros y tabla. Todo lo demás vive en una de ellas.
Columnas en grupos, una vista que se guarda
Las columnas se dividen en grupos con nombre (estado del reporte, atributos del reporte, características del turno, geolocalización, tiempos y otros), así que quien lee ve un tema por vez. Un panel de visualización deja elegir qué grupos mostrar y conservar ese espacio de trabajo para la próxima vez.
Deslizá hacia el costado o usá las flechas. Tocá una captura para ampliarla.
Filtros que se comportan como chips
Los filtros de texto libre se vuelven chips una vez confirmados. Al pasar el mouse, cada elemento se explica, y los chips se pueden borrar de a uno o todos juntos. El espacio de filtros se mantiene tranquilo hasta que hace falta.
El componente que más iteraciones tuvo
El tiempo es el primer filtro al que llega casi todo el mundo, así que el selector de período se especificó pantalla por pantalla. Tiene dos modos: Período (un rango de fechas con atajos, días de la semana y horas) y Un día (un día y un rango de horas). Los valores elegidos se vuelven azules, los no elegidos quedan en calma, y el rango aplicado se pliega en un chip que se reinicia al pasar el mouse.
Deslizá hacia el costado o usá las flechas. Tocá una captura para ampliarla.
Orientación de un vistazo, acciones al pasar el mouse
Un estado de una letra al comienzo de cada fila (en curso, hecho, requiere atención, en pausa, eliminado) da orientación rápida; el orden y los filtros aparecen al pasar el mouse. Cada turno tiene un set de herramientas: abrir turno, descargar, abrir adjunto, marcar como, cambios y eliminar.
Deslizá hacia el costado o usá las flechas. Tocá una captura para ampliarla.
Expandir, editar en el lugar, guardar el historial
Un doble clic expande un turno a su registro completo; otro doble clic sobre un valor lo edita. Los campos editados llevan una marca chica con su historial, y un diálogo pregunta si guardar ahora o revisar primero. El ícono de visualización recuerda guardar el espacio de trabajo.
Especificación, símbolos e interfaz pixel-perfect
Cada comportamiento (normal, hover, elegido, no elegido, vacío y guardado) está documentado en una especificación de interacción de 16 páginas, para que ingeniería pudiera construir sin adivinar. Símbolos reutilizables de Sketch para radios, casillas, pestañas y estados del selector mantuvieron las pantallas consistentes, y el set de íconos de la plataforma se redibujó pixel-perfect en Illustrator.
También en Waycare: el Centro de Ayuda para clientes
Junto con la tabla diseñé el Centro de Ayuda para clientes en Zendesk: el flujo de usuario desde el ingreso hasta el pedido, la portada con sus tres puertas de entrada (documentación del producto, preguntas frecuentes y novedades de versión) y la identidad de la sección.
Deslizá hacia el costado o usá las flechas. Tocá una captura para ampliarla.
Qué me llevé
Fue mi primera experiencia de UX/UI en una startup, en el segundo polo tecnológico más importante del mundo después de Silicon Valley. Una experiencia inolvidable, que me enseñó metodología y disciplina de trabajo.