Omnichannel UX: What I Learned Designing an Inbox for 100+ Businesses
Designing a chat inbox sounds simple. Then you add 5 channels, team collaboration, AI bots, and thousands of concurrent conversations. Here's the UX thinking behind the Socialchat inbox — and the mistakes we made along the way.
“Omnichannel inbox” sounds straightforward: bring all chats from different platforms into one place.
But when I started designing for Socialchat.id — a platform used by hundreds of businesses handling thousands of messages per day — the complexity ballooned quickly.
This is a documentation of the UX decisions I made and what I learned from each one.
Core Challenges of an Omnichannel Inbox
1. Too much information, too little space
In a single conversation view, we need to display:
- Customer name + source channel (WhatsApp, Instagram, FB Messenger)
- Conversation status (open/pending/resolved)
- Assigned agent
- Conversation tags/labels
- Message history
- Quick reply tools
All of this in one panel that must remain usable on a 13” laptop screen.
Solution: Strict information hierarchy. Primary info always visible, secondary info accessible but not dominating.
Priority 1 (always visible):
- Customer name
- Channel icon
- Last message
Priority 2 (on hover/click):
- Assigned agent
- Tags
- Status
Priority 3 (open panel):
- Full customer profile
- Conversation history
- Notes
2. Multi-agent collaboration without chaos
In a busy business, there can be 5–10 agents working simultaneously. The classic problem: two agents replying to the same customer.
First solution (wrong): Simple lock — if one agent is replying, others can’t.
Problem: Agents often forgot to unlock. Conversations got stuck.
Final solution: Optimistic locking with clear visual indicators:
States displayed clearly:
🟢 Open → Available to claim
🔵 Assigned → [Agent name] is handling
🟡 Pending → Waiting for customer reply
✅ Resolved → Done
Plus a “typing indicator” visible to all agents, not just the customer.
3. Smooth AI chatbot hand-off
This was the trickiest. The flow:
Customer sends message
↓
AI Bot responds (automatically)
↓
[If bot can't handle it]
↓
Hand-off to human agent
↓
Agent continues conversation from this point
First UX mistake: Agents didn’t know the prior context. Had to scroll through a long log to read the AI history.
Solution: AI Summary — before the agent starts, display an automatic summary:
🤖 AI Summary:
Customer: Rizky Pratama
Issue: Can't log in, tried password reset twice
Solutions tried: Email reset (didn't work)
Sentiment: Frustrated
Wait time: 8 minutes
This saves 2–3 minutes per conversation — significant when handling hundreds of conversations a day.
The Three-Panel Layout Decision
The layout I ultimately adopted:
┌─────────────┬──────────────────┬────────────────┐
│ Channel │ │ Customer Info │
│ Filter │ Chat Panel │ + Contact │
│ │ │ Details │
│ ─────────── │ │ │
│ Conversation│ [messages] │ ───────────── │
│ List │ │ Tags │
│ │ [reply box] │ Notes │
│ Search │ │ History │
└─────────────┴──────────────────┴────────────────┘
Left panel for navigation and filtering, center for the main conversation, right for customer context.
Collapsible panels: On smaller screens or mobile, the right panel can be collapsed with a single click.
Metrics That Changed After the Redesign
After implementing the new design system:
- First Response Time: dropped from an average of 4 minutes → 1.5 minutes
- Resolution Rate: up 23%
- Agent satisfaction (internal survey): from 3.2/5 → 4.1/5
The most interesting finding: agent satisfaction rose significantly. A good tool makes work easier and more enjoyable.
Lessons Learned
-
Test with active users, not prototypes — people’s behavior changes drastically under real pressure (hundreds of chats coming in at once)
-
Performance is UX — an inbox that takes 3 seconds to load feels very slow when an agent has 50 chats waiting
-
Empty states matter — “No conversations” vs. “All conversations handled! 🎉” have a different emotional impact
-
Incremental innovation — don’t change everything at once. Users accustomed to a particular workflow need time to adapt
Loading comments...