Security as Code · Product Design · 2026

De complejidad técnica a experiencia operativa

Diseño de una herramienta interna de ciberseguridad para que analistas y Security Managers puedan crear, revisar y seguir planes de despliegue de reglas de seguridad para los clientes con claridad.

Profesional utilizando Security as Code desde un centro de operaciones de ciberseguridad

Equipo

AI Native
SOC

Especialistas de ciberseguridad y desarrollo de Telefónica Tech.

Mi rol

Product
Designer

Auditoría UX, arquitectura de información, flujos, accesibilidad, diseño de interacción y QA.

Timeline

1 mes
2026

Rediseño con un alcance ajustado y entrega de una experiencia actualmente en producción.

Mi contribución

Incorporar la perspectiva humana a un producto construido desde la lógica técnica

Security as Code ya contaba con una lógica funcional, una implementación inicial y pantallas generadas con IA por el equipo de desarrollo. Mi responsabilidad fue comprender esa base y detectar dónde la experiencia impedía orientarse, interpretar la información o actuar con seguridad.

Replanteé la arquitectura de información, la navegación y los principales flujos. También clarifiqué jerarquías, estados y acciones y revisé tablas, filtros, mensajes y componentes desde criterios de usabilidad y accesibilidad.

Contexto

Gestionar el ciclo de vida de los despliegues de seguridad

Security as Code permite consultar un catálogo de artefactos (reglas de seguridad), agruparlos, gestionar clientes y plataformas y conocer la configuración de seguridad desplegada.

Los analistas N1, N2 y N3 crean los planes seleccionando cliente, entorno, plataforma y artefactos. Después, el Security Manager revisa los cambios y decide si el plan puede avanzar o necesita ser rechazado.

El reto

Transformar en solo un mes una herramienta técnicamente compleja en una experiencia comprensible, accesible y preparada para el trabajo real.

El objetivo no era cambiar la lógica del producto, sino ayudar a cada perfil a orientarse, reconocer el estado de un plan y actuar con seguridad dentro de un proceso crítico.

Dos responsabilidades

Un mismo proceso, dos formas de intervenir

Analistas N1, N2 y N3

Seleccionar el cliente, el entorno y la plataforma
Configurar los artefactos del despliegue
Revisar los cambios antes de enviarlos
Consultar el estado y responder a un rechazo

Security Manager

Priorizar los planes pendientes
Comprobar el alcance de cada despliegue
Aprobar o rechazar el plan
Dejar contexto para la siguiente acción

Punto de partida

Una interfaz que reproducía la estructura del sistema

La primera versión demostraba la viabilidad técnica, pero trasladaba gran parte de su complejidad directamente a la interfaz.

Navegación, tablas, filtros, estados y acciones competían por la atención sin una jerarquía estable.

Listado inicial de planes creado por desarrollo — **Un ciclo de vida fragmentado**Estados, historial y acciones aparecían reunidos en una tabla difícil de recorrer.

Revisión inicial de un plan de despliegue — **Revisión sin jerarquía**El resumen técnico no ayudaba a reconocer con rapidez el impacto del plan.

Vista inicial de configuración desplegada — **Información al mismo nivel**Indicadores, filtros y tablas generaban una elevada carga visual.

Auditoría de experiencia

Priorizar los problemas que afectaban al sistema completo

Comprensión

Arquitectura alejada del modelo mental de los usuarios
Exceso de información con el mismo peso
Estados difíciles de reconocer
Terminología y agrupaciones poco consistentes

Interacción

Acciones principales poco visibles
Tablas y filtros con una elevada carga operativa
Feedback insuficiente tras decisiones críticas
Problemas de legibilidad, contraste y accesibilidad

Un mes de trabajo

Comprender, ordenar, diseñar y validar

01

Comprender

Estudiar la documentación técnica y reconstruir objetivos, entidades, permisos y casos de uso.

02

Auditar

Revisar pantallas y flujos para localizar fricciones transversales y priorizar el alcance.

03

Rediseñar

Definir arquitectura, navegación, recorridos, estados y componentes reutilizables.

04

Validar

Contrastar las propuestas con desarrollo y especialistas antes de preparar la entrega.

IA como herramienta de apoyo

Reducir la curva de aprendizaje sin delegar el criterio de diseño

El principal material de partida fue una extensa documentación funcional creada por desarrollo. Utilicé IA para sintetizarla, relacionar conceptos y acelerar mi comprensión del dominio de la ciberseguridad.

También generé primeras aproximaciones visuales para explorar alternativas. La documentación, el criterio de diseño y el trabajo con los expertos determinaron las decisiones finales.

Decisiones de diseño

Hacer visible qué ocurre, qué cambia y qué debe suceder después

01

Ordenar por tareas

Catálogo, despliegues, clientes y postura de seguridad forman ámbitos reconocibles.

02

Guiar el recorrido

La creación del plan se divide en cinco decisiones consecutivas y recuperables.

03

Explicar el cambio

Los artefactos se agrupan según se actualicen, reviertan, añadan o eliminen.

04

Adaptar las acciones

El estado del plan determina los mensajes y las acciones disponibles para cada perfil.

Arquitectura de información

Organizar el producto alrededor de tareas reconocibles

Plans reúne el ciclo de vida completo de los despliegues.

Approvals separa la responsabilidad específica del Security Manager y hace visible el trabajo pendiente.

Listado rediseñado de planes con filtros y estados

Arrastra para mover · scroll o pinch para ampliar

100%

Cobertura del producto

Un sistema completo, no solo un flujo de planes

Catálogo de artefactos de Security as Code en vista de tabla — **Catálogo · Vista operativa**Métricas, categorías, filtros y tabla ayudan a localizar cada artefacto.

Catálogo de artefactos de Security as Code en vista de tarjetas — **Catálogo · Exploración visual**La vista alternativa facilita comparar alcance, versión y cobertura.

Listado de bundles del catálogo de Security as Code — **Bundles de artefactos**Las agrupaciones reutilizables reducen el esfuerzo al preparar despliegues.

Listado de clientes y estado de configuración en Security as Code — **Client setup · Visión global**Entornos, plataformas y estado de configuración se consultan desde una misma tabla.

Detalle de cliente, entornos y plataformas en Security as Code — **Client setup · Detalle**Cada cliente reúne sus entornos, plataformas vinculadas y credenciales.

Configuración de seguridad desplegada por entorno y plataforma — **Security posture · Configuración**La postura desplegada permite recorrer artefactos por entorno y plataforma.

Detalle de un artefacto desactualizado en la postura de seguridad — **Security posture · Actualización**La comparación de versiones convierte una desviación en una acción concreta.

Creación del plan

Un recorrido guiado para crear cada plan

Selección agrupada de artefactos — **Gestionar el volumen**Búsqueda, filtros y agrupaciones facilitan trabajar con listas extensas.

Revisión final del plan antes de enviarlo — **Revisar el impacto**Los cambios se agrupan antes de solicitar la aprobación.

Experiencia de aprobación

Priorizar y decidir con el contexto necesario

Bandeja de planes pendientes de aprobación — **Priorizar por SLA**Las solicitudes se ordenan por vencimiento, urgencia y proximidad de revisión.

Detalle de un plan pendiente de aprobación — **Decidir con contexto**Cliente, entorno, plataforma y cambios acompañan las acciones de aprobar o rechazar.

Sistema de estados

Una estructura estable para todo el ciclo de vida

Detalle de un plan pendiente — **Pendiente**El plan espera la decisión del Security Manager.

Detalle de un plan aprobado — **Aprobado**La decisión queda visible sin modificar la estructura de consulta.

Detalle de un plan en ejecución — **En ejecución**El estado comunica que el despliegue se encuentra en curso.

Detalle de un plan completado — **Completado**El cierre habilita las acciones asociadas al resultado del despliegue.

Detalle de un plan rechazado con la explicación de la decisión — **Rechazado**El motivo y la siguiente acción convierten el rechazo en un recorrido recuperable.

Resultado

Una herramienta nacida desde la complejidad técnica y evolucionada para que cada perfil pueda comprender, revisar y ejecutar su trabajo.

La nueva arquitectura, los recorridos guiados y el sistema de estados establecieron una base clara para un producto actualmente en producción y preparado para incorporar futuros agentes de IA.

Aprendizajes

Diseñar un producto complejo también consiste en saber qué simplificar

01
Comprender las relaciones entre conceptos es imprescindible antes de modificar una interfaz especializada.
02
Trabajar sobre un producto existente exige respetar su lógica y reconocer dónde el diseño puede aportar mayor valor.
03
En un proceso crítico, los estados, las consecuencias y las siguientes acciones deben ser inequívocos.
04
Un plazo ajustado obliga a priorizar los patrones que afectan al sistema completo.
05
La IA puede acelerar el aprendizaje y la exploración, pero no sustituye el criterio ni el conocimiento experto.
06
Humanizar un producto técnico significa presentar su complejidad en el momento y con la profundidad adecuados.