Kembali ke blog
#UX #SaaS #Product Design #Omnichannel

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.

Muhamad Taufik Muhamad Taufik
· Sep 5, 2025 · 7 menit baca
Customer service chat interface
Reaksi:

“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

  1. Test dengan user yang aktif, bukan prototype — behavior orang berubah drastis ketika ada tekanan real (ratusan chat masuk sekaligus)

  2. Performa adalah UX — inbox yang load 3 detik terasa sangat lama kalau agent punya 50 chat menunggu

  3. Empty states matter — “Tidak ada conversation” vs “Semua conversation sudah dihandle! 🎉” punya impact emosional yang berbeda

  4. Innovation incremental — jangan ubah semua sekaligus. User yang sudah terbiasa dengan workflow tertentu perlu adaptasi pelan-pelan.

Komentar (0)

Bergabung dalam percakapan

Anda harus masuk untuk meninggalkan komentar atau reaksi.

Memuat komentar...