Jago Live Chat Feature — UX Case Study

Dani Alief M
7 min readOct 13, 2022

--

Proyek ini adalah salah satu hasil pelatihan UI/UX Program Skilvul dan Digital Talent Scholarship yang diselenggarakan oleh Kementerian Komunikasi dan Informatika (Kemkominfo). Bank Jago adalah mitra tantangan dalam program ini, dan dengan catatan saya tidak bekerja/dikontrak secara profesional oleh Bank Jago terkait tantangan Study Case ini.

🪙 Tentang Bank Jago

Bank Jago Logo & Illustration by Storyset Freepik

Bank Jago adalah salah satu produk dari DKatalis. Digital Katalis adalah salah satu perusahaan yang berfokus pada pembuatan solusi digital dan memecahkah permasalahan yang ada dalam kehidupan sehari — hari melalui teknologi. Bisnis utama Bank Jago adalah produk keuangan yang berfokus pada permasalahan keuangan dan finansial dengan salah satu fiturnya yaitu produk tabungan. Selain itu Bank Jago juga mementingkan integrasi layanan mereka yang dapat menyediakan barang atau jasa yang dibutuhkan pengguna, sehingga semuanya menjadi mudah dan lancar untuk kehidupan sehari — hari, aktivitas bersama teman dan keluarga serta rencana masa depan yang bisa terwujud dengan layanan tersebut.

🕵️ Permasalahan yang coba diatasi

Source Pict : Women Standing beside Corkboard · Free Stock Photo (pexels.com)

Bank Jago ingin membuat sebuah fitur yang berkaitan dengan Surat Wasiat, tetapi ketika akan mengajukan sebuah pengaduan, Bank Jago belum memiliki fitur pengaduan untuk mengatasi permasalahan mengenai Surat Wasiat tersebut. Seperti contohnya ketika salah satu pengguna mengalami suatu kendala saat mengumpulkan data berupa dokumen penting mengenai Surat Wasiat tersebut dan perlu waktu yang cepat penanganannya, tetapi prosedur yang sekarang harus melalui email dimana itu membutuhkan waktu yang cukup lama untuk tim memverifikasi data dokumen tersebut. Oleh karena itu kami menawarkan sebuah solusi dalam pembuatan fitur tambahan Live Chat Bank Jago agar dapat membantu pengguna secara efektif dan efisiensi waktu dalam melakukan pengaduan berupa data Surat Wasiat tersebut dengan mudah dan cepat.

💯 Success Metrics

  • 👍🏼 Mudah Digunakan

Langkah untuk menghubungi customer care lebih mudah dan akan dipandu dengan detail hingga permasalahan selesai.

  • 📲 Efektif dan Efisien

Lebih menghemat waktu dan lebih simple fiturnya tanpa harus melakukan pengaduan melalui email customer care.

  • 👨🏻‍💻 Respon dan Proses Lebih Cepat

Segala bentuk pengaduan permasalahan yang disampaikan oleh user dapat diproses lebih cepat oleh customer care.

👨‍💻 Team Kami

⌛️ Design Process

Design Process yang digunakan adalah metode Design Thinking, berikut ini adalah setiap tahapan yang dilakukan dan hasil yang didapatkan setiap tahapan tersebut.

1 — 🧠 Empathize

Dalam tahap ini kami menggunakan metode Secondary Research dan mendapatkan sumber data yaitu :

🤳🏻 User Review

Sebuah review/testimoni pengguna dari beberapa aplikasi asuransi dan digital wallet di Play Store. Kami mencari informasi berupa pengalaman menggunakan aplikasi tersebut.

Kami mendapatkan beberapa hasil data dari User Review atau ulasan pengguna dari aplikasi untuk menemukan beberapa permasalahan yang mereka alami.

Berikut ini hasil ulasan pengguna tersebut :

  1. Proses pengaduan lama dan tidak ada tindakan yang jelas dan cepat dari pihak customer care.
  2. Mengirimkan pengaduan harus melalui email customer care dan tidak langsung dari aplikasinya tersebut sehingga membutuhkan waktu yang lama untuk customer care mengecek satu — persatu pengaduan dari pengguna.
  3. Konten aplikasinya terlalu ramai dan terkesan tidak nyaman digunakan dalam sisi User Interfacenya.

2 — 🎯 Define

Paint Points

Pada tahapan ini, kami brainstorming bersama tentang Paint Points dari hasil research kami mengenai fitur live chat dari aplikasi asuransi.

Paint Points

Berdasarkan Paint Points yang kami kumpulkan dari hasil diskusi kami, kami melanjutkan untuk membuat solusi menggunakan metode How-Might-We.

How-Might-We

Kami mengelompokkan How-Might-We berdasarkan keputusan hasil akhir melalui voting bersama, kemudian kami akan memilih mana yang akan kami masukkan dalam Design Process.

How-Might-We

Setelah melakukan voting bersama pada proses How-Might-We, kami setuju untuk memilih membuat fitur Live Chat untuk mengatasi permasalahan pengguna dalam proses pengaduan mereka seperti pengurusan dokumen penting seperti Surat Wasiat di Bank Jago.

3 💡 Ideate

Setelah mendefinisikan berbagai permasalahan yang ada, kami terus mengorbservasi dan mencari ide-ide lain yang dapat memberikan solusi untuk permasalahan tersebut.

Solution Idea

Kami menemukan banyak ide solusi untuk How-Might-We yang telah diskusikan dan definisikan bersama pada langkah sebelumnya, tetapi karena idenya terlalu banyak, kami perlu menyeleksinya lagi berdasarkan kategorinya agar dapat menentukan prioritas kami.

Solution Idea

Affinity Diagram

Dengan menggunakan Affinity Diagram, kami dapat menentukan prioritas ide kami dari hasil How-Might-We berdasarkan kategori yang sudah kami kelompokkan sehingga kami lebih fokus pada point-point pentingnya.

Affinity Diagram

Prioritization Idea

Karena banyaknya ide solusi yang kami buat dalam proses ini, langkah selanjutnya adalah memprioritaskan solusi mana yang akan dikerjakan agar lebih fokus pada nilai paling tinggi tetapi memiliki sedikit usaha untuk mengerjakannya terlebih dahulu.

Prioritization Idea

Pada akhirnya, dalam Prioritization Idea, kami sepakat untuk memilih Last Wish dan Live Update untuk dikerjakan terlebih dahulu karena memiliki nilai tinggi namun usahanya yang paling rendah.

User Flow

Kami membuat User Flow untuk melihat alur apa yang akan dilakukan pengguna untuk mencapai tujuan mereka. Kami melakukan sesi diskusi bersama pada langkah ini untuk membuat alur pengguna yang efektif dan efisien agar mencapai tujuan pengguna dengan mudah dan cepat.

User Flow Live Chat Features

Kami membuat User Flow yang relatif singkat dan mudah untuk memberikan User Experience yang ramah bagi pengguna untuk mencapai tujuan mereka dengan mudah dan cepat.

4 — 🎨 Wireframe

Low Fidelity Design

Kami membuat visualisasi sketsa Low-Fidelity Design agar tahu gambaran dasarnya terlebih dahulu sebelum lanjut ke tahap High-Fidelity Design.

Wireframe Live Chat Features

5 — 📱 Prototype

High Fidelity Design

Berikut ini hasil diskusi bersama kami, walaupun ada beberapa perbedaan dari Wireframe yang telah kami buat, namun kami merasa masih ada yang kurang dalam mengatasi permasalahan yang ada. Jadi, kami membuat beberapa perubahan dalam proses pembuatan High Fidelity Design untuk memberikan solusi yang tepat bagi para pengguna kami.

High Fidelity Design Live Chat Features

Design System

Kami memakai Design System untuk menjaga konsistensi komponen design dari segi jenis font, ukuran font, warna utama, dan ikon yang digunakan dalam membuat design tersebut.

Design System Button, Colour & Text Style
Icon Pack yang digunakan dari Iconly Figma Community by Piqo

Prototyping

Dalam tahap in, kami mengimplementasikan ide yang telah dibuat menjadi interaktif desain antarmuka. Kemudian, kami akan melakukan uji coba dari fitur yang telah dibuat untuk mengetahui apakah fitur tersebut sudah sesuai dengan ekspetasi dan tujuan pengguna.

Prototyping👈🏼 Klik link berikut ini untuk mencoba prototyping Live Chat features

6 — 🚀 Usability Testing

Usability Testing dilakukan untuk menguji langsung Prototype Live Chat kepada pengguna untuk mengetahui bagaimana pengalaman apa yang dirasakan pengguna saat menggunakan produk yang telah kami buat serta umpan balik apa yang akan kami terima dari pengguna setelah menguji produk kami. Kami menggunakan metode Interview In-Depth & Single Ease Question untuk mengeksplorasi bagaimana umpan balik pengguna lebih dalam. Parameter penilaian saya ditentukan dengan menggunakan Single Ease Question. Responden akan menilai kemudahan penggunaan setiap tugas dengan meminta responden untuk menilai dalam skala 1 sampai 5 untuk menanyakan tingkat kegunaan, kenyamanan, dan kepuasan responden setiap kali menyelesaikan alur Prototype.

Responden Criteria

  1. 20–35 tahun
  2. Bekerja sebagai karyawan/freelancer disuatu bidang kreatif/non-kreatif
  3. Berdomisili di Indonesia
  4. Menggunakan Digital Wallet atau M-Banking

Research Objectives

  1. Mengetahui kebutuhan pengguna dalam melakukan pengaduan melalui Live Chat di aplikasi
  2. Pengguna terbantu dengan fitur tersebut agar komunikasi dengan customer care lebih cepat dan mudah
  3. Mengetahui tingkat kegunaan, kenyamanan, dan kepuasan dari pengembangan fitur Live Chat

Research Sceneario

  1. Pembukaan
  2. Briefing penjelasan Fitur Live Chat
  3. Wawancara
  4. Menjelaskan dari Research Objectives & proses alur pengguna
  5. Usability Testing
  6. Pertanyaan sehabis uji coba fitur aplikasi
  7. Penutupan

Research Results

Hasil dari riset yang sudah kami selesaikan yaitu :

  1. Tampilan antarmuka cukup bagus dan menarik dilihat
  2. Alur pengguna mudah dipahami dan sederhana dioperasikan
  3. Fitur menulis deskripsi dan upload dokumen sangat membantu pengguna dalam menyampaikan pengaduan ke customer care
  4. Butuh pengembangan dibagian iconnya yang kurang sesuai dengan setiap fitur yang berbeda — beda.

Conclusion

Berdasarkan hasil riset yang telah kami lakukan serta ide solusi yang telah kami berikan dan di uji oleh pengguna, masih ada beberapa fitur yang kurang dan perlu dibenahi lagi.

--

--