An AI agent you can test before it talks to your customers
A redesign of the screen where a business sets up its customer support agent, shipped in September 2026 as part of a company-wide revamp of Cekat.AI and open to everyone on the free plan. Less prose to write, a test panel beside the editor, and edits that are safe to undo.
- Role
- Lead Product Designer (hands-on)
- Team
- 1 PM, 5 engineers
- Timeline
- Shipped September 2026
- Built with
- Figma, HTML, CSS, JS, Claude Code
The problem
Setting up an agent meant writing prose into an empty box, then hoping.
Business owners described tone, flow and rules in free text, with no way to see which sentence changed which answer. Most never opened the test chat, so the first real test happened with a real customer.
of retail tasks passed consistently when one agent ran them 8 times.
participants found an AI assistant on their own. Hidden AI tools go unused, like the old test chat.
sources of truth for tone in the old screen, and they could disagree: a preset chip and a paragraph.
Research
Eight reasons agents fail in production. Four are live.
Desk research on support agents failing in production, matched with studies on how people configure AI tools. Every operational failure had a setup problem behind it.
Presets instead of prose
Presets rewrite the text directly.
See cause and effect
A test panel sits beside the editor.
Version history
Versions and Undo, with the save state always visible.
Make testing discoverable
A labelled launcher and a ⌘ / shortcut.
Test cases
Test cases from real chats feed readiness.
Handover rules
Handover triggers as toggles, not sentences.
Drafting from existing docs
Draft the agent from existing SOPs or chat history.
Learn after going live
Turn gaps in real conversations into fixes.
Decisions
Four decisions. Each has a working demo.
Rebuilt from the product's own components. Press Replay or use the controls.
One source of truth for tone
Presets and the tone paragraph used to disagree. My first fix was a warning for the conflict, until I saw it was covering a problem I had created. Now a preset rewrites the paragraph itself, with Undo and Keep.
Trade-offPresets overwrite custom text, so Undo restores both the text and the previous preset.
Testing beside the editor
The test chat moved from a hidden page into a panel beside the editor, opened with ⌘ /. Test messages read the way Indonesian customers actually type: short and full of abbreviations.
What I'd do nextShow which instruction produced each reply.
Every edit can be undone
People avoided touching a working agent because nothing showed what had changed. The header now shows which version you are editing and whether it is saved, with Discard beside Save.
What I'd do nextA diff against live, and rollback in one step.
Customer Support Agent
Readiness that points to the gap
An inspector counts what is set up and links each gap to the place that fixes it. Checks catch contradictions, like rules that mention an empty knowledge base.
Why it mattersA free agent from a big platform is one click away, so owners need a reason to trust this one.
- Welcome message
- Communication style
- Conversation flow
- Rules & restriction
- Knowledge baseNo sources
- RoutingNot set
- ChannelNot connected
How it shipped
One piece of a company-wide revamp, with a fixed September date.
I led design hands-on, working with one PM and five engineers: research, flows, Figma, and a coded prototype to settle the interactions before engineering built them.
To make the date, we shipped the four themes that change everyday setup and moved test cases, handover rules, drafting from sources and live insights to phase 2.
Outcome
Live for every business on the free plan.
It launched in September, which is too early for meaningful data, and post-launch numbers stay with the company. These are the signals I set to judge it.
Share of new workspaces that publish an agent.
Share of agents tested in the panel before they go live.
Setup-related support tickets per new workspace.