Context-aware components

Context-aware components

When AI works on live company data, every surface has to answer two questions: what is it doing right now, and what should I do next? I designed context-aware components that keep that work visible, from describing a goal, to the AI reading a document, to forecasting what the system needs. Each one shows its state, the reason behind it, and exactly one next step. I call the approach "Glass Box": no reassuring animation over hidden work, just the truth and the action that moves things forward. Examples use sample data; the product is unreleased.

Client

Enterprise AI data platform (unreleased)

DELIVERABLES

INTERACTION PATTERNS STATE SYSTEMS PROTOTYPES

Year

2026

Role

SENIOR PRODUCT DESIGNER

Design strategy

This platform serves two kinds of people at once. Data teams need to know exactly what broke and where. Business users and the AI agents working for them need to know one thing: can I trust this answer right now? Most data tools design for the first group and leave the second guessing. My strategy was to make state the shared language between them. Every component carries the same three things: a status, the reason behind it, and the single action that resolves it. In the example, the AI shows it's reading, reports what it found, and offers one action: add to knowledge. Engineers can trace exactly what was extracted; everyone else gets a clear next step instead of a wall of logs. Defining these rules once, as a pattern library rather than one-off screens, let a multi-designer team build consistently and gave agents and people a common contract for when to act and when to hand off.

Strategic outcomes

These patterns gave the platform a shared language for state, so every surface tells the truth the same way. Locking the rules (one primary action per surface, reasons attached to every status, and separate source and platform errors) let a multi-designer team build in parallel without drifting apart. The same rules carried into planning: a capacity forecast names the risk, lets people model a change, shows its impact before anything happens, and offers one action to apply it. They also set the ground rules for how agents and people share control, a prerequisite for putting AI agents on live company data. The approach shifted the product conversation from "does it look healthy?" to "can it answer questions right now, and if not, why?"

Strategic outcomes

These patterns gave the platform a shared language for state, so every surface tells the truth the same way. Locking the rules (one primary action per surface, reasons attached to every status, and separate source and platform errors) let a multi-designer team build in parallel without drifting apart. The same rules carried into planning: a capacity forecast names the risk, lets people model a change, shows its impact before anything happens, and offers one action to apply it. They also set the ground rules for how agents and people share control, a prerequisite for putting AI agents on live company data. The approach shifted the product conversation from "does it look healthy?" to "can it answer questions right now, and if not, why?"

These patterns gave the platform a shared language for state, so every surface tells the truth the same way. Locking the rules (one primary action per surface, reasons attached to every status, and separate source and platform errors) let a multi-designer team build in parallel without drifting apart. The same rules carried into planning: a capacity forecast names the risk, lets people model a change, shows its impact before anything happens, and offers one action to apply it. They also set the ground rules for how agents and people share control, a prerequisite for putting AI agents on live company data. The approach shifted the product conversation from "does it look healthy?" to "can it answer questions right now, and if not, why?"

Pattern library

State with a reason. Badges carry why something is degraded. Errors from the source and errors from the platform never share a badge or a fix. One action, derived from the state. At most one primary button per surface, and it comes from the failure reason. AI proposes, human approves. The agent acts up to its confidence limit, then hands off clearly. The graph is a verb. Every visualization shows a state and enables one action, or it gets cut.