Bangun pengalaman pelanggan berharga dengan fitur CRM — UX Case Study

Imam maulana
7 min readNov 29, 2022

--

Ux Case Study

⚠️ Disclaimer: proyek ini merupakan challange yang diberikan oleh skilvull sebagai pembelajaran untuk meningkatkan skill terhadap UI/UX Design. Kegiatan ini merupakan bagian dari MBKM Study Independent Batch 3 yang diadakan oleh Kementrian Pendidikan, Kebudayaan, Riset dan Teknologi. Saya TIDAK bekerja atau terikat kontrak secara profesional oleh Krealogi.

Latar Belakang

Krealogi merupakan sebuah bagian dari revolusi digital untuk UMKM Indonesia. Aplikasi Krealogi dibuat dengan tampilan yang ramah pengguna, sehigga dapat digunakan oleh pelaku usaha dari berbagai kalangan. Fitur yang dibuat juga bertujuan untuk menjawab permasalahan yang dihadapi pelaku usaha. Selain itu, Krealogi juga merupakan sebuah wadah untuk mengembangkan kemampuan dan keterampilan pelaku UMKM.

Aplikasi Krealogi menghadirkan kemudahan dalam pencatatan dan perencanaan strategis UMKM. Fitur-fitur unggulan seperti Catat Pesanan, Rencana Produksi, Catat Biaya hingga Laporan Usaha akan membantu proses-proses tersebut. Di Krealogi juga terdapat berbagai kelas pelatihan dan modul digital untuk mengembangkan kemampuan berbisnis para penggunanya.

Pernyataan Masalah

Sebagian pengguna mengalami kesulitan dikarenakan tampilan desain aplikasi yang tidak ramah pengguna dan kekurangan beberapa fitur yang belum tersedia. Oleh karena itu saya dan tim saya membuat dan mengembangkan beberapa fitur yang belum tersedia dan memperbaiki beberapa tampilan desain aplikasi yang tidak ramah pengguna. Disini saya dan tim menambahkan fitur Customer relationship Management (CRM).

Objektif

  1. Mencari tahu tingkat kemudahan dan kesulitan terhadap fitur aplikasi krealogi
  2. Menambahkan fitur CRM untuk meningkatkan hubungan pelaku usaha ke pelanggan
  3. Membuat tampilan antamuka yang ramah dan mudah digunakan

Target Pengguna

  • Berusia 18 tahun ke atas
  • Berprofesi sebagai pemilik usaha kecil, mikro, dan ultra mikro (UMKM)
  • Berdomisili di seluruh wilayah Indonesia
  • Memiliki kemampuan Bahasa Indonesia sebagai native language
  • Paham akan teknologi

Peran Dalam Tim

Dalam proses pengerjaan proyek ini, saya bekerja sama dengan teman saya yaitu Juliar Ma’arif, Nabella Rosyefa Wahyudi, Ferra Britsya Andris. Dalam tim ini tugas saya adalah :

  • Melakukan riset pengguna
  • Membuat userflow, wireframe, design system, dan tampilan ui designya
  • Membuat prototype
  • Melakukan usability testing

Design Proses

Design Thinking — Gambar Oleh https://thuwarakesh.medium.com/

Design thinking melibatkan seluruh pihak dalam prosesnya, hal ini menjadi kelebihan Design Thinking dimana kita menyelesaikan masalah dengan melihatnya dari berbagai sisi. Dalam metode Design Thinking, dikenal 5 proses yaitu Empathy, Define, Ideate, Prototype, lalu Test. Berikut adalah tahapan prosesnya.

1 — Empathize

Pada tahap ini dilakukan pencarian dan pengumpulan informasi dari pengguna aplikasi krealogi. Dengan informasi ini dapat memberikan gambaran mengenai kesulitan pengguna dalam menggunakan aplikasi ini. Dari pencarian dan pengumpulan informasi ini kami menemukan beberapa kesulitan user dalam menggunakan aplikasi krealogi ini, seperti :

  • Mencatat nomor whatsaap harus manual tidak lewat aplikasi
  • User menemui kendala untuk melakukan dua aktivitas sekaligus mengecek catatan penjualan dan menghubungi konsumen
  • Beberapa tampilan fitur kurang menarik dan membingungkan

2 — Define

Setelah mendapatkan informasi yang dibutuhkan, maka tahap berikutnya adalah Define. Pada tahap ini kami menentukan permasalahan yang sedang dihadapi dan kita dapat mendefinisikan paint point yang dirasakan oleh user. Berikut adalah pain point yang kami definisikan berdasarkan pengumpulan informasi dan melakukan riset.

Pain Point

Kemudian setelah menentukan Pain Pointnya, dilakukan generasi ide untuk menyelesaikan desain dengan menggunakan metode How Might We, berikut adalah How Might We yang diperoleh dari hasil voting terbanyak.

How Might We

3 — Ideate

Setelah melakukan analisis mengenai permasalahan yang dialami user dan membuat How Might We, langkah berikutnya adalah ideate. Pada tahap ini kami menentukan ide-ide yang dapat digunakan untuk mengatasi permasalahan tersebut. Dari beberapa ide yang sudah terkumpul kemudian nantinya akan dievaluasi sehingga mendapatkan ide yang terbaik. Berikut adalah ide yang telah kami temukan.

Solution Idea

Ide-ide solusi kemudian dikelompokkan ke dalam diagram prioritas, diagram prioritas merepresentasikan usaha yang diperlukan untuk membuat solusi tersebut. untuk menentukan mana ide atau solusi mana yang dikerjakan lebih dulu, disini titik penentunya adalah effort dan value.

Prioritization Idea

4 — Prototype

Setelah melakukan define dan ideate tahap berikutnya adalah prototype. pertama kita membuat alur pengguna ketika melakukan suatu proses yang disebut dengan Userflow. Setelah itu userflow dibuat menjadi sebuah desain tampilan antarmuka secara Low Fidelity atau yang biasa disebut Wireframe. Setelah itu kita membuat sebuah Design System yang digunakan untuk memudahkan kita dalam membuat tampilan desain, design system ini terdiri dari beberapa komponen. Setelah itu kita membuat tampilan High Fidelity dari wireframe yang telah dibuat yang biasa dikenal dengan UI Mockup. dan terakhir adalah pembuatan prototype dari desain yang telah di buat.

Userflow

Disini kami membuat userflow untuk menunjukan kepada user mengenai langkah-langkah yang dilakukan oleh pengguna saat menggunakan suatu produk atau fitur untuk menyelesaikan suatu task.

  • Kartu Nama

Menggambarkan proses-proses yang dapat dilakukan oleh pengguna pada saat mengakses fitur kartu nama.

Userflow Kartu Nama
  • Pesanan Masuk

Menggambarkan proses-proses yang dapat dilakukan oleh pengguna pada saat mengakses fitur pesanan masuk.

Userflow Pesanan Masuk
  • Pengembangan Bisnis

Menggambarkan proses-proses yang dapat dilakukan oleh pengguna pada saat mengakses fitur pengembangan bisnis.

Userflow Pengembangan Bisnis
  • Kontak

Menggambarkan proses-proses yang dapat dilakukan oleh pengguna pada saat mengakses fitur kontak.

Userflow Kontak

Wireframe

Wireframe dibuat sesuai dengan userflow. Proses-proses yang terdapat pada userflow divisualisasikan ke dalam Wireframe dalam bentu low fidelity.

  • Wireframe Kartu Nama
Wireframe Kartu Nama
  • Wireframe Pesanan Masuk
Wireframe Pesanan Masuk
  • Wireframe Pengembangan Bisnis
Wireframe Pengembangan Bisnis
  • Wireframe Kontak
Wireframe Kontak

Design System

Setelah membuat wireframe, maka dapat terlihat komponen yang digunakan berulang. Komponen-komponen ini harus dibuat menjadi komponen pada design system, yang kemudian akan digunakan pada pembuatan tampilan antar-muka pengguna.

Warna

Collor Style

Typography

Typography

Tombol dan Navbar

Button dan Navbar

Komponen Lainnya

High Fidelity

Setelah membuat wireframe dan design system saya mulai membuat UI Mockup, berikut adalah beberapa hasil dari desain yang telah dibuat.

  • Tampilan Kartu Nama
Ui Design Kartu Nama
  • Tampilan Pesanan Masuk
Ui Design Pesanan Masuk
  • Tampilan Pengembangan Bisnis
Ui Design Pengembangan Bisnis
  • Tampilan Kontak
Ui Design Kontak

Prototyping

Setelah sudah menyelesaikan mockup ui, langkah selanjutnya adalah membuat alur informasi seperti userflow yang telah dibuat.

5 — Testing

Setelah melewati tahap pembuatan tampilan secara menyeluruh, perlu dilakukan user research sebagai indikator keberhasilan pengembangan fitur. User research dilakukan dengan metode In-depth Interview dan usability testing pada prototype.

User Research dilakukan kepada satu responden, seorang mahasiswa berusia 20 tahun, yang menjalankan usaha distro baju rumahan. In-depth Interview yang dilakukan menghasilkan informasi kebiasaan dan kendala responden terkait pengecekan stok barang. Dapat disimpulkan bahwa, responden merasa kesulitan untuk melakukan pengecekan stok barang sambil melayani pelanggan. Hasil usability testing yang dilakukan menghasilkan informasi untuk setiap task yang diberikan, task yang diberikan adalah mencoba fitur kartu nama, pesanan masuk, pengembangan bisnis, dan kontak. setelah itu kami menyakan tingkat kepuasan penggunaan aplikasi kepada responden dengan hasil akhir yang diberikan adalah “6” dengan skala 1–7 dengan nilai masing masing task adalah 6.

Iterasi UI Design

Setelah mendapatkan hasil yang layak dari Usability Testing, tim melakukan beberapa ubahan pada tampilan antar-muka pengguna untuk memenuhi kebutuhan pengguna.

Kesimpulan

Setelah melalui serangkaian proses, akhirnya fitur CRM pada aplikasi Krealogi telah dibentuk dan memiliki gambaran yang jelas terkait cara kerja fitur-fiturnya. Semoga proyek ini dapat menjadi rekomendasi desain kepada tim Krealogi untuk memecahkan masalah yang dihadapi dan menjadi pengembangan aplikasi Krealogi di masa mendatang.

Terima kasih telah membaca studi kasus saya, semoga bermanfaat.

--

--