Visual Design / Art Direction / Systems Design

Modernizing Microsoft Security for the AI Era

The High-Level Challenge: Microsoft Security experiences had evolved independently, creating fragmented administrative UIs that struggled to support real-time, AI-assisted operations.

The Solution in Brief:

New Design Language: A modernized, Fluent-compatible visual theme for high-density, operational workflows.

Agentic Security: A scalable visual identity framework enabling trust and recognition across specialized AI agents.

The Core Challenge:

Administrative vs. Operational: Legacy tools were built for slow configuration rather than fast, real-time threat response and AI co-piloting.

Cognitive Load & Inconsistency: Fragmented visual styles across products made critical telemetry hard to scan and parse.

The AI Shift: As autonomous and agentic workflows emerged, interfaces needed clearer hierarchy and explicit trust signals without requiring ground-up codebase rewrites.

Foundational UI Modernization

The Goal

Establish a unified, modern visual language compatible with Fluent and Security Fluent Extension to transition Microsoft Security from administrative configurations to real-time operations.

What I Did

Cross-Disciplinary V-Team Collaboration: Partnered within a cross-functional virtual team alongside product designers, PMs, design systems leads, and UX engineering to iteratively shape, test, and finesse the new design language.

Visual Craft & Foundation Exploration: Explored visual directions, themes, and design patterns, contributing core expertise across color systems, typography scale, spacing, radius, and elevation.

Rapid Prototyping & Scenario Stress-Testing: Pressure-tested visual directions across complex, data-heavy product scenarios to evaluate readability, edge cases, and cognitive load in operational environments.

Data Visualization Modernization: Explored updated visual patterns for telemetry, charts, and real-time security dashboards across both light and dark operational themes.

System Alignment: Finessed foundation details to align seamlessly with existing Fluent and SFE frameworks, ensuring incremental and realistic implementation paths for engineering teams.

Scaling AI Identity

The Goal

Create a visual identity framework so users immediately recognize, categorize, and trust AI agents across workflows.

The 3 Core Framework Principles (Use a 3-column grid):

Recognizable: Distinct avatar and silhouette language so agents stand out from standard UI components.

Categorizable: Color and icon taxonomy mapped to specific domains (threat hunting, investigation, remediation).

Consistent: Visual stability whether the agent lives in a compact table badge, a chat flyout, or a full-page orchestration playbook.

Shared Language: Delivered a unified foundation adopted across Microsoft Security without breaking existing UI frameworks.

Pilot Adoption: Pressure-tested and launched in core early experiences including Perception and Agentic Securityworkflows.

Cross-Org Alignment: Established the definitive visual taxonomy connecting UX, AI engineering, and product leadership.

Next
Next

Animate in Microsoft Paint