Interaction Model for an Agentic Observability Web UI — Case Study
← Back
Xenia Tupitsyna
Case study locked

Interaction Model for an Agentic Observability Web UI

This project includes work I'd rather keep between us. Enter the password I shared with you, or email me for access.

Incorrect password — try again.

Enterprise · AI/ML · 0→1

Interaction Model for an Agentic Observability Web UI

How we helped operators resolve incidents faster — by letting the interface gather the evidence around what they're actually trying to do, instead of making them go find it.

Some visuals and product details have been recreated, simplified, or omitted to respect confidentiality and intellectual-property requirements. The case study focuses on my design process, decisions, and contributions rather than confidential product information.

My role
Led the UX strategy and design-system direction for an agentic interaction model.
Team
3 designers

The problem

When an alert fires, an operator is suddenly playing detective across half a dozen tools — metrics here, logs there, traces somewhere else — trying to work out which signals actually belong to this incident. Those tools were built by different teams over several years, so the navigation ended up reflecting the org chart instead of the way people actually investigate.

The challenge

We had three things to pull off at once: keep the point-and-click experience our existing users are used to, finally fix some long-standing navigation problems, and open a believable path toward handing more work to an agent over time. The one thing we didn't want to do was bolt a chatbot onto the page and call it a day.

Borrowing a mental model people already had

Rather than invent something new, I started from a model people had already picked up from modern LLM interfaces: lightweight chats — "threads" — that can call any tool, open any experience, or build something for you without ever sending you to a different page. I borrowed that idea for the SRE workflow so the page comes to you when you need it, instead of you going hunting for it. That opens the door to genuinely custom investigations, and as the agent gets better it can assemble more of the work itself and let the operator check it.

The new-thread page: a familiar prompt field up front, with the point-and-click tools sitting right beneath it as cards — because plenty of people would rather browse than ask.

The design system we had to build underneath it

None of this was possible to express in the existing enterprise design system — it simply had no patterns for threads, streaming responses, artifacts, or proactive suggestions. So alongside the design work I led the effort to build one that did, which gave the team a shared vocabulary for agentic UI instead of everyone solving the same problems separately on their own surface.

The hybrid thread page

Our first bet was a split-screen thread page where the user and the agent worked on a shared artifact together. You could tuck the chat panel away and still get useful nudges from the agent in a small "bubble." We designed the command center — the chat input plus those bubbling suggestions — so the agent felt like a helpful teammate looking over your shoulder rather than one more tool to operate.

AI-generated
Split-screen thread: a three-item rail with the thread archive, the chat panel, and the shared artifact the user and agent build together. The highlighted panel came from the agent, and it says so, so the user knows what to double-check.
With the chat tucked away, the artifact goes full-screen and the command center stays put — just the input, plus the occasional insight bubbling up above it.
/
Calling a tool from the command center: typing / — or pressing the same + button in the input — opens a single popover of clickable tools, so you can pull dashboards and other experiences into the thread without ever leaving the page.

What testing taught us

Testing split our audience cleanly in two. One group stuck with point-and-click and built rich visual explorations. The other took to the thread model right away and happily fired off dozens of chats to do the same kind of investigation. Trying to serve both on one surface served neither — it left the first group unsure of themselves and the second group wading through complexity they didn't need. We also learned something we hadn't expected: people found it unsettling when the agent edited their artifacts.

Rethinking the graduation path

Looking back, our first model asked a lot of people: learn the command center, build an artifact, open the chat, close the artifact panel, and only then dispatch autonomous tasks. Every step added a new concept and left users tidying up their own workspace — which is a lot to ask of someone in the middle of an incident.

So we stopped blending the two. Point-and-click stays exactly as familiar as it was, and delegating work becomes a deliberate, separate act. Existing customers move over through concepts they already know, and growing into the agentic experience becomes one simple shift: less time building artifacts by hand, more time reviewing and orchestrating threads that run on their own.

To keep everyone making the same calls, I wrote down the principles we hold the interaction model to:

  • One topic = one threadThe mental model to reinforce everywhere in the product.
  • A thread is an intentional task containerNot a log of random clicks.
  • Nudge, don't forceSuggest a new thread; never block the user's path.
  • Prioritize navigationDon't lean on the left nav alone — surface active and recent work.
  • PortabilityContent created anywhere can be moved into any thread.

What shipped

A hybrid navigation: people start in the point-and-click experience they already know and send off autonomous threads alongside it. Two clear modes, rather than one surface trying to be both.

Add to dashboard
The autonomous thread as a full page: a centered conversation where the agent's findings show up inline as visualizations, instead of as links out to yet another tool.
Ask about this point
The point-and-click mode: multi-tab dashboards with the command center pinned to the bottom. You can grab any datapoint and ask about it in the same input, and whatever's running in the background reports its status right there underneath.

Outcome

  • A tested framework for bringing existing users along and later growing them into a fully agentic experience.
  • As operators come to trust the agent, they hand off more and do less by hand.
  • The navigation is being adopted by multiple adjacent teams for Security, Governance, and Search experience.
  • The agentic design system was funded as a dedicated workstream, giving the org a shared pattern library for agentic UI beyond this product.
← Back Next case study — coming soon