Prototyping a Contextual Help Feature with an AI Agent

The Problem

The GLS Locker Portal is used by six different user archetypes, managers, operations specialists, IT support, rollout coordinators. Everyone shares the same interface but has completely different reasons for being there.

The common thread: everyone eventually hits a portal state they don't understand and has to open another tool, call a colleague, or escalate to the wrong team.

The Research

Before touching any UI, I mapped each archetype to the exact moments they'd reach for Help and what they'd need. The research clustered into six use cases:

Status interpretation, every archetype needed it, so it came first
Parcel and compartment resolution, depot workers are physically blocked in real time
Escalation routing, who do I call, and what do I tell them?
Cross-system discrepancy diagnosis, portal shows X, other tool shows Y
Activation and go-live verification, high stakes, narrow archetype
Documentation and reporting, structured summaries to paste into emails or Jira

The Design Decisions

Floating action button, not an inline button. Stays out of the way until needed, doesn't compete with primary content.

Permanent sidebar on detail pages. Users need to read locker data and ask questions at the same time. A sidebar that switches between detail cards and chat makes that possible without losing context.

Animated gradient border. The button stays the primary brand blue, but a subtle animated ring signals that this is AI-powered, distinct from every other action on the page without being distracting.

Persistent state across navigation. If Help is open on the overview and you click into a detail, it stays open. If you arrive at a detail directly, it doesn't auto-open.

The Process

Instead of static mockups, I prototyped directly in the real React codebase using Claude as my implementation partner. Every design decision was immediately testable in a real browser, on real data, with the actual design system.

What changed wasn't just speed. Issues that normally surface in developer handoff, like the FAB covering the pagination, showed up immediately and got fixed on the spot. Design and iteration happened in the same loop.

Where It Landed

The prototype is live and deployed. Responses are rule-based for now, but the architecture and use-case mapping are in place for when there's a real model behind it.

Back to home