CASE STUDY / 01
INPROTECH GUARDIAN
Hacer visible lo invisible.
Diseño de experiencia para una plataforma de ciberseguridad industrial.
01 / INTRO
Diseñar para entender lo complejo.
Guardian es una solución de ciberseguridad para entornos industriales desarrollada por InprOTech, actualmente Greinfort.
Mi trabajo se centró en el diseño UX/UI de su interfaz: organizar información técnica, facilitar la exploración de la red y construir un lenguaje visual coherente desde la visión global hasta las interacciones de detalle.
02 / RETO
Dar claridad a un sistema complejo.
En una red industrial conviven dispositivos, conexiones y eventos de distinta naturaleza. El reto era facilitar su lectura mediante una interfaz capaz de organizar esa complejidad, identificar activos y permitir el acceso a información relevante sin perder el contexto.
03 / ENFOQUE
Del conjunto al detalle.
La experiencia se organizó alrededor de tres necesidades: comprender el estado general de la red, reconocer los elementos que la componen y acceder a las operaciones de consulta y gestión.
Jerarquía visual, navegación y consistencia debían funcionar como un único sistema.
01
Visibilidad
Entender el estado general de la infraestructura y localizar la información principal desde una visión global.
02
Contexto
Explorar dispositivos y comunicaciones sin perder de vista las relaciones que existen dentro de la red.
03
Prioridad
Organizar eventos y alertas para facilitar su identificación, clasificación y consulta.
04 / SOLUCIÓN
Dos perspectivas, una misma red.
Guardian permite explorar los activos industriales desde dos representaciones complementarias: un mapa de topología que hace visibles las relaciones entre dispositivos y un listado enriquecido que concentra sus propiedades, estados e información operativa. Dos formas de consultar un mismo entorno, adaptadas a distintas necesidades de análisis.
4.1 / DASHBOARD
Una primera lectura.
El dashboard reúne la información principal sobre el estado de la red industrial.
4.2 / MAPA Y LISTADO
Explorar los mismos activos desde dos vistas.
La topología muestra las relaciones entre dispositivos; el listado reúne sus atributos y estados para una consulta detallada.
4.3 / ICONOGRAFÍA INDUSTRIAL
Un lenguaje para reconocer cada dispositivo.
Diseñé una familia de 20 iconos para representar diferentes categorías de equipos industriales, desde PLC y RTU hasta sensores, estaciones de trabajo y sistemas de control. Un lenguaje visual compartido facilita su identificación y aporta coherencia a la representación de la red.
05 / INTERACCIÓN Y OPERACIÓN
Claridad en cada operación.
La experiencia se extiende a la consulta de alertas y a las tareas habituales de gestión de la cuenta. El objetivo es mantener jerarquías reconocibles y patrones de interacción consistentes, incluso cuando cambian el contenido y el contexto de uso.
5.1 / ALERTAS Y EVENTOS
Priorizar la consulta.
La interfaz organiza los eventos de seguridad para facilitar su lectura y consulta dentro del entorno de trabajo.
5.2 / PERFIL Y SEGURIDAD
Una secuencia clara de acciones.
Los flujos de perfil aplican el mismo criterio a operaciones más cotidianas: consultar y editar información personal, gestionar credenciales y acceder a las opciones de seguridad mediante una secuencia clara de acciones.
06 / CONCLUSIONES
Coherencia entre información e interacción.
Las vistas de red, las alertas y las operaciones de cuenta comparten criterios de navegación y jerarquía visual, reforzados por una iconografía propia para los activos industriales.
Esta estructura permite pasar del estado general de la infraestructura al detalle de cada dispositivo sin perder el contexto de la red.