Back to blog
#UX #SaaS #Product Design #Omnichannel

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.

Muhamad Taufik Muhamad Taufik
· Sep 5, 2025 · 7 min read
Customer service chat interface
React:

“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

  1. Test with active users, not prototypes — people’s behavior changes drastically under real pressure (hundreds of chats coming in at once)

  2. Performance is UX — an inbox that takes 3 seconds to load feels very slow when an agent has 50 chats waiting

  3. Empty states matter — “No conversations” vs. “All conversations handled! 🎉” have a different emotional impact

  4. Incremental innovation — don’t change everything at once. Users accustomed to a particular workflow need time to adapt

Comments (0)

Join the conversation

You need to sign in to leave a comment or reaction.

Loading comments...