Mock Image01 — Context
Summary
This project had no planner and no spec to work from, so before touching any code, I spent a day on the call center floor. What I saw was 25 open memo windows — agents copying and pasting their way through every shift. I started with a standalone AI chat platform, built first to prove the interaction pattern before deciding where it belonged. It was later folded into the CRM, with other platforms next in line.
02 — Challenge
Problem
Agents were managing dozens of memo windows across their screens, manually copying and pasting responses throughout every shift. This was the core inefficiency. With no existing reference for this kind of AI interface internally, the development team had to define and anticipate every use case ourselves — developer and designer working together to cover the unknowns, treating this as a pattern to validate before deciding where it belonged.
03 — Approach
What I Did
- AI responses were unpredictable and there was no fixed spec to build against, so the priority was making the system's state unambiguous to agents at every moment.
- Disabled input during active streaming with a responding placeholder — giving agents an unambiguous signal of system state.
- Built markdown rendering using react-markdown, remark-gfm, github-markdown-css, and DOMPurify. Customized visual elements including link colors to match the platform's design theme.
- Designed dedicated error and timeout UI states, ensuring agents could recover gracefully without confusion.
- Architected the system to be platform-agnostic from the start — the same interaction model is now live inside the CRM, with structure in place to extend to additional platforms.
04 — Outcome
Result
Shipped in one month as a standalone platform, the interface proved its value quickly enough that it was later folded into the CRM — agents no longer need to leave their primary workspace to access AI assistance, with the same pattern now under consideration for additional platforms. At its core, this was an HCI problem of working with an unpredictable AI, solved through UX that let people read the system's state without ambiguity.