Making invisible
AI security visible

Agent Guard does its job in the background. That's great for security, but not particularly helpful when you're trying to understand what's happening.

With multiple agents running, users needed to quickly answer:

• Which agents are operating normally?
• Which need attention?
• Is an issue temporary or serious?
• Where can I go for more detail?

The challenge wasn't to show everything. It was to show the right things at the right level.

Before designing the interface, I worked with the CTO and development team to understand how Agent Guard worked, what information it produced, and how users were expected to interact with it.

The key opportunity was clear: instead of making users inspect agents individually, we could give them a fleet-level overview and let them drill into the details when needed.

The design also had to fit naturally into the existing Jozu Hub experience, including navigation, audit information, visual language, and interaction patterns.

• The fleet view answers: "Is everything okay?"
• The agent view answers: "What's happening?"
• The deeper activity and audit log information answers: "Why did this happen?"

This gave the overview a clear job to do without turning it into a control panel for everything happening under the hood.

The Fleet View needed to help users quickly understand the overall state of their agents without overwhelming them with technical detail.

Rather than exposing everything at the same level, I separated information by the user's likely need.

This progressive disclosure kept the overview focused while making deeper information available when it became relevant.

One of the more important decisions was how to communicate agent connection states.

My initial direction used familiar status colors such as red, orange, and green. But when sales conversations exposed the design to potential customers, it became clear that the visual language was being interpreted as a measure of severity, rather than system state.

For example, an agent being temporarily intermittent isn't necessarily an emergency.

That feedback challenged my initial assumption: the problem wasn't that users needed more explanation. The interface itself was communicating the wrong thing.

I changed both the terminology and visual language to describe the actual state, rather than telling users how worried they should be.

The project moved quickly, so I relied on AI as a design accelerator throughout the early exploration phase.

I used it to quickly generate and compare different approaches to:

• Information hierarchy
• Dashboard layouts
• Status treatments
• Responsive variations
• Dense data layouts

Instead of spending hours taking every idea from a blank canvas to a polished mockup, I could explore several directions quickly and use them as a starting point for discussion.

But the output was never the design.

I evaluated the concepts against the product context, existing Jozu Hub patterns, technical constraints, and user needs, then refined or discarded them.

To keep the pace high, I worked closely with engineering throughout the process rather than treating handoff as the finish line.

Once the core experience was established, I extended the design system with the patterns needed to make the Fleet View work across different states and contexts.

This included:

• Agent status variants
• Empty states
• Donut chart states
• Version-control overview variants
• Responsive layouts
• Documentation and implementation details

AI helped accelerate exploration and fill gaps, particularly around responsive variations. Dense tables and complex information layouts still benefited heavily from human judgement. With complex technical data, simply making everything responsive doesn't necessarily make it usable.

Designing complex technical products isn't about exposing more information. It's about helping users understand what matters now, what it means, and where to go next.

The Fleet View completed the Agent Guard experience within Jozu Hub and provided customers a much clearer way to understand how Agent Guard monitors and protects their AI agents.

It also became the primary visual used by sales to demonstrate Agent Guard to prospective customers.

More importantly, those conversations exposed where the interface was creating confusion, directly influencing the final status terminology and visual language.