Caso 03 / 05Gobierno · seguridadArquitectura UXClasificado

Donde el dato manda y el error no cabe

Arquitectura de interfaz UI, diseño de la experiencia UX, flows de navegación completos y estrategia UX/UI — para una plataforma nacional de ciberseguridad con datos clasificados y cero tolerancia al error.

Sistema en producción · pantallas clasificadas · wireframe, sin datos
Periodo
2019 — 2022
Compañía
Sidertia Solutions / Izertispara CCN-CERT · Centro Criptológico Nacional
Rol
Lead UX ArchitectTransición desde backend C#/MongoDB
Equipo
1 UX Architect · 3 desarrolladores backend · 1 Product Manager · Equipo técnico CCN-CERT
Alcance
Plataforma nacional · organismos públicos y privados · entorno de infraestructura crítica · múltiples módulos · sistema de roles y permisos
01 — El contexto

Una plataforma que procesaba bien los datos y los hacía difíciles de operar

ANA — Automatización y Normalización de Auditorías — es la solución de gobernanza técnica del CCN-CERT para la gestión de la superficie de exposición en ciberseguridad. Automatiza la evaluación continua de vulnerabilidades sin intervención humana. Se integra con el ecosistema de herramientas del Centro Criptológico Nacional. Genera alertas tempranas antes de que una amenaza se convierta en incidente.

El problema no era técnico. La plataforma procesaba datos reales de múltiples fuentes con lógica correcta. El problema era que los operadores que tenían que trabajar con ella cada día no podían hacerlo con la velocidad y precisión que el entorno exigía.

Los dashboards los construían los ingenieros. La información existía — pero sin arquitectura de decisión. Sin jerarquía. Sin orientación al flujo de trabajo del analista.

“Cuando los datos son correctos pero la interfaz no los hace operables, el sistema falla igual.”
02 — Mi rol

De la base de datos a la interfaz del operador

Entré en este proyecto como desarrollador backend. C#, .NET, MongoDB — construí los pipelines de datos que alimentaban la plataforma. Los mismos datos que después tendría que hacer visibles y operables en la interfaz.

La empresa vio potencial donde yo no lo veía todavía. Invirtieron en dos masters de UX/UI y Product Design para que pudiera hacer la transición. Volví al mismo sistema que había construido por dentro — esta vez desde la capa de experiencia.

Eso no fue un accidente. Fue la ventaja. Entender la arquitectura del sistema antes de diseñar cómo se mostraba cambió completamente el tipo de decisiones que podía tomar. No diseñaba sobre supuestos — diseñaba sobre la estructura real de los datos, sus relaciones y sus restricciones. No había handoff entre diseño e ingeniería. Era la misma persona en los dos lados de la mesa.

01Backend · C#, .NET, MongoDB
02Wireframes de validación con el equipo técnico
03Diseño completo de la capa de interacción
04Liderazgo de arquitectura UX · ANA y CLARA

El pensamiento sistémico dejó de ser una preferencia aquí. Se convirtió en un requisito.

03 — El reto

Cuatro módulos. Múltiples roles. El mismo operador bajo presión de tiempo.

Vulnerabilidades

Gestión de auditorías y hallazgos

Automatización y normalización del proceso de auditoría. El operador necesita saber en segundos qué es crítico, qué está pendiente y qué ha sido resuelto. Sin construir ese contexto manualmente cada vez que abre la plataforma.

Inspección técnica

Mejora continua

Seguimiento de planes correctores y procesos de mejora. Estados, plazos y evolución temporal. La interfaz tiene que soportar ese seguimiento sin convertirlo en trabajo administrativo.

Superficie de exposición

Indicadores de criticidad en tiempo real

El operador evalúa el nivel de exposición de una organización considerando la relevancia operativa de cada amenaza — no solo su severidad técnica abstracta.

Perfilado de cumplimiento

Evaluación normativa

Estado de cumplimiento respecto a normativas oficiales. El operador necesita una lectura global y la capacidad de profundizar en entidades específicas sin perder el contexto general.

04 — El diagnóstico

Lo que fallaba no era el dato. Era la arquitectura que lo rodeaba.

Antes de rediseñar ninguna pantalla, mapeé los flujos de trabajo reales. Qué hacen los analistas cuando abren la plataforma. Dónde pierden tiempo. Qué información buscan que no encuentran donde esperan. Qué decisiones toman y con qué datos.

El patrón era claro.

  1. 01La interfaz seguía la lógica del sistema, no la del operadorLa navegación estaba organizada por módulos técnicos. Un analista cuyo flujo de trabajo cruzaba vulnerabilidades y superficie de exposición navegaba entre secciones distintas reconstruyendo el contexto cada vez. El sistema era coherente con su propia arquitectura. No era coherente con cómo trabaja un analista de seguridad bajo presión.
  2. 02Los dashboards los construían los ingenierosSin arquitectura de decisión. Sin jerarquía operativa. Todos los datos con el mismo peso visual — crítico y bajo competían por atención. El operador construía mentalmente la prioridad que la interfaz debería haber establecido por él.
  3. 03Las tarjetas de assets no informaban sin navegarPara saber el estado de criticidad de un grupo de activos había que entrar. Navegación ciega — click para descubrir. En un entorno donde el tiempo de respuesta importa, cada clic innecesario es fricción operacional.
  4. 04El modelo de roles no se manifestaba en la experienciaANA tiene múltiples perfiles — analistas, supervisores, dirección. Los permisos técnicos determinaban el acceso. Pero la arquitectura de información mostraba lo mismo a todos. Lo que ve un analista y lo que necesita un director son dos cosas distintas que la plataforma trataba como una sola.
05 — La decisión

Podríamos haber rediseñado pantallas. Rediseñamos el sistema.

Lo obvio era mejorar la UI de cada módulo por separado. Teníamos los módulos definidos, el equipo técnico disponible y los datos funcionando. Decidimos no hacerlo. El problema no era visual: era arquitectónico.

Descartado

Mejoras visuales módulo a módulo

Habrían mejorado la apariencia sin cambiar el comportamiento. El operador seguiría construyendo contexto manualmente. Los dashboards seguirían siendo inventarios de datos sin orientación operativa. La fricción habría cambiado de sitio, no desaparecido.

Descartado

Rediseño completo desde cero

Sin continuidad con el sistema que los operadores ya conocían. En entornos de alta seguridad, la resistencia a nuevas interfaces es el primer bloqueador de adopción. Un rediseño total sin referencia al sistema existente habría generado un período de rechazo que el equipo no podía asumir.

Comprometidos con

Una arquitectura de información orientada al flujo de trabajo

Un sistema donde la interfaz establece el contexto antes de que el operador empiece a trabajar. Información operativa en la superficie, no detrás de ella. Jerarquía estructural, no solo visual. Un lenguaje compartido de criticidad que funciona en todos los módulos.

06 — El sistema

¿Qué tiene que saber el operador en los primeros 30 segundos de su turno?

Dashboard · de inventario de datos a superficie de trabajo
  1. 1Estado general como señal dominante e inmediata
  2. 2Total de vulnerabilidades con distribución visual por criticidad
  3. 3Auditorías activas con progreso por tipo de sistema
  4. 4Vista resumen con números de acción directa — activos, hallazgos corregidos, hallazgos pendientes

El operador llega, lee, decide.

Activos · información operativa en la superficie, no detrás de ella
Servers OSGrupo
20activos
12 verde4 amarillo3 naranja1 rojo

La tarjeta dejó de ser un acceso a la información y se convirtió en la información.

Criticidad · un lenguaje compartido para cinco niveles de riesgo
CriticalMorado
HighRojo oscuro
MediumNaranja
LowAmarillo
InfoVerde

La criticidad no vive solo en el color — vive en la posición jerárquica, el peso tipográfico y el tamaño del elemento dentro de cada vista.

Un sistema. Un lenguaje. Cero ambigüedad.

Navegación · definir qué merece estar arriba
Búsqueda global de activos y vulnerabilidades PDFBIAMódulosAlertas

Búsqueda global de activos y vulnerabilidades — siempre visible porque es el punto de entrada más frecuente. Exportación a PDF — para el flujo de reporting. Toggle BIA — Análisis de Impacto de Negocio, activable en contexto. Vista de módulos. Alertas. Perfil de usuario.

Lo que no está ahí es una decisión igual de importante.

Agregación · un dashboard que unifica lo que los sistemas tienen separadoEn desarrollo · disponible para ver en conversación

El director ve el estado global de seguridad de su organización en 30 segundos. Sin abrir tres sistemas. Sin construir contexto.

No fue una petición del cliente — fue una propuesta de arquitectura que nació de conocer el backend de cada plataforma.

07 — El problema de escala

Diseñar para operadores que no controlas

El sistema tenía que funcionar para analistas con flujos de trabajo distintos, en organizaciones con estructuras distintas, bajo niveles de clasificación distintos. No podíamos validar con todos. Teníamos que diseñar con suficiente rigor estructural para que el sistema funcionara en contextos que no habíamos visto.

Documentación

No accesoria al trabajo. El trabajo.

Generé documentación completa de uso de la herramienta — no como entregable de cierre, sino como parte del sistema de control. Cada componente documentado con sus entradas, sus restricciones y su comportamiento esperado. Un componente sin documentación en un entorno de infraestructura crítica es una decisión sin contrato.

Comunicación

Del sistema al cliente

Generé también las presentaciones de venta de la plataforma. Entendía el producto lo suficiente como para articular su valor ante clientes que no son técnicos — traducir arquitectura de sistema en propuesta de negocio. Esa doble capacidad — construir el sistema y comunicarlo hacia fuera — fue parte del valor que aporté al equipo.

Restricciones

Las restricciones no se negocian. Se diseñan.

En entornos de alta seguridad, las restricciones son el material de trabajo. El modelo de roles y permisos no podía ser una capa técnica invisible — tenía que manifestarse en la experiencia. La arquitectura de información de cada rol se diseñó desde la pregunta correcta: no qué puede ver cada perfil, sino qué decisiones toma y qué necesita para tomarlas.

08 — Resultados

Números que cambiaron la operativa de seguridad

Notificación de amenazas−60%Reducción en tiempos de notificación de nuevas amenazas que impactan la organización.
−40%Reducción en tiempos de gestión de inspecciones técnicas en auditorías de seguridad.
×3Implantación y seguimiento de medidas correctoras y planes de remediación.
0El modelo de roles implementado desde la capa de experiencia no generó ningún incidente de acceso no autorizado.
Sistema clasificado → producción activaLa adopción fue inmediata sin período de resistencia. ANA está desplegada y en uso activo en organismos públicos y privados bajo supervisión del CCN-CERT.
09 — Reflexión

La interfaz no es el producto. El producto es el sistema de decisiones que la interfaz soporta.

En Vocento, una mala decisión de diseño reducía la conversión. En ANA, una mala decisión de diseño comprometía una investigación. Esa diferencia de consecuencias no cambia el proceso — cambia el rigor con el que evalúas cada decisión de arquitectura.

“Los sistemas no fallan por la calidad del diseño. Fallan porque la interfaz no hace operable la inteligencia que hay dentro.”
Qué haría distinto

Involucrar a los operadores antes en la definición de restricciones, no solo en la validación de soluciones. El conocimiento operacional de los analistas emergió en sesiones de validación tardías — cuando algunos cambios de arquitectura ya eran costosos de revertir. En sistemas complejos, el research de restricciones es tan importante como el research de usuarios.

Siguiente caso · 04 / 05 Ultraswan Un generador de fondos de pantalla, en vivo

Proyectos

Ver el feed ↗
  1. 01 Vocento Case
  2. 02 CCN-CERT · ANA Case
  3. 03 Abhir · album launch Web
  4. 04 ULTRASWAN · wallpaper generator Case
  5. 05 Le Toy Factory Brand
  6. 06 Rusia IDK Editorial
  7. 07 Junciera Jiné Case
  8. 08 Sidertia Case
Me · Madrid—
You · ——

Abierto a nuevos proyectos Diseño de producto, ingeniería y sonido — de principio a fin. Madrid · remoto · híbrido · proyectos seleccionados
On rotation · 01 / 04 0:00 / 0:00
The beginning of the beginning Sam Gold

Contacto

Agendar llamada ↗
Hablemos in