Omnichannel UX: Yang Saya Pelajari Mendesain Inbox untuk 100+ Bisnis
Mendesain chat inbox terdengar simpel. Lalu kamu tambahkan 5 channel, kolaborasi tim, AI bot, dan ribuan percakapan bersamaan. Ini pemikiran UX di balik inbox Socialchat — dan kesalahan yang kami buat di sepanjang jalan.
“Inbox omnichannel” kedengarannya sederhana: gabungkan semua chat dari berbagai platform ke satu tempat.
Tapi ketika mulai desain untuk Socialchat.id — platform yang digunakan ratusan bisnis dengan volume ribuan pesan per hari — kompleksitasnya membengkak dengan cepat.
Ini dokumentasi UX decisions yang saya buat dan pelajaran dari setiap keputusan tersebut.
Tantangan Utama Omnichannel Inbox
1. Terlalu banyak informasi, terlalu sedikit ruang
Dalam satu conversation view, kita butuh menampilkan:
- Nama customer + channel asal (WhatsApp, Instagram, FB Messenger)
- Status percakapan (open/pending/resolved)
- Agent yang di-assign
- Tag/label conversation
- History pesan
- Quick reply tools
Semua ini dalam satu panel yang harus tetap usable di layar laptop 13”.
Solusi: Hirarki informasi yang ketat. Primary info selalu visible, secondary info accessible tapi tidak mendominasi.
Priority 1 (always visible):
- Nama customer
- Channel icon
- Pesan terakhir
Priority 2 (on hover/click):
- Agent assigned
- Tags
- Status
Priority 3 (open panel):
- Full customer profile
- Conversation history
- Notes
2. Multi-agent collaboration tanpa chaos
Di bisnis yang ramai, bisa ada 5-10 agent bekerja bersamaan. Masalah klasik: dua agent membalas customer yang sama.
Solusi pertama (salah): Simple lock — kalau satu agent sedang balas, yang lain tidak bisa.
Masalah: Agent sering lupa unlock. Conversation jadi stuck.
Solusi akhir: Optimistic locking dengan visual indicator:
States yang ditampilkan jelas:
🟢 Open → Available untuk di-claim
🔵 Assigned → [Nama Agent] sedang handle
🟡 Pending → Menunggu balasan customer
✅ Resolved → Selesai
Plus “typing indicator” yang terlihat oleh semua agent, bukan hanya oleh customer.
3. AI Chatbot hand-off yang smooth
Ini yang paling tricky. Flow-nya:
Customer kirim pesan
↓
AI Bot response (otomatis)
↓
[Jika bot tidak bisa handle]
↓
Hand-off ke human agent
↓
Agent lanjut conversation dari titik ini
Kesalahan UX pertama: Agent tidak tahu context sebelumnya. Harus scroll panjang untuk baca log AI.
Solusi: AI Summary — sebelum agent mulai, tampilkan ringkasan otomatis:
🤖 AI Summary:
Customer: Rizky Pratama
Masalah: Tidak bisa login, sudah coba reset password 2x
Solusi yang sudah dicoba: Reset via email (tidak berhasil)
Sentiment: Frustrasi
Waktu waiting: 8 menit
Ini menghemat 2-3 menit per conversation — signifikan kalau dihadapi ratusan conversation sehari.
Three-Panel Layout Decision
Layout yang akhirnya saya adopt:
┌─────────────┬──────────────────┬────────────────┐
│ Channel │ │ Customer Info │
│ Filter │ Chat Panel │ + Contact │
│ │ │ Details │
│ ─────────── │ │ │
│ Conversation│ [messages] │ ───────────── │
│ List │ │ Tags │
│ │ [reply box] │ Notes │
│ Search │ │ History │
└─────────────┴──────────────────┴────────────────┘
Panel kiri untuk navigasi dan filter, tengah untuk conversation utama, kanan untuk customer context.
Collapsible panels: Di layar kecil atau mobile, panel kanan bisa di-collapse dengan satu klik.
Metrics yang Berubah Setelah Redesign
Setelah implementasi design system baru:
- First Response Time: turun dari rata-rata 4 menit → 1.5 menit
- Resolution Rate: naik 23%
- Agent satisfaction (survey internal): dari 3.2/5 → 4.1/5
Yang paling menarik: agent satisfaction naik signifikan. Tool yang bagus membuat pekerjaan lebih mudah dan menyenangkan.
Lesson Learned
-
Test dengan user yang aktif, bukan prototype — behavior orang berubah drastis ketika ada tekanan real (ratusan chat masuk sekaligus)
-
Performa adalah UX — inbox yang load 3 detik terasa sangat lama kalau agent punya 50 chat menunggu
-
Empty states matter — “Tidak ada conversation” vs “Semua conversation sudah dihandle! 🎉” punya impact emosional yang berbeda
-
Innovation incremental — jangan ubah semua sekaligus. User yang sudah terbiasa dengan workflow tertentu perlu adaptasi pelan-pelan.
Memuat komentar...