UX Case Study : Fitur CRM Aplikasi Krealogi

Givar Elva Rizky H
11 min readNov 28, 2021

--

Fitur CRM (Customer Relationship Management) Aplikasi Krealogi

Proyek ini adalah bagian dari tugas akhir program magang UI/UX Design oleh Skilvul selaku partner program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi merupakan Challenge Partner dari Skilvul. Saya TIDAK bekerja atau dikontrak secara profesional oleh Krealogi.

Aplikasi Pencatatan Penjualan

Usaha Kecil Mikro dan Menengah (UMKM) adalah usaha ekonomi produktif yang dijalankan oleh individu atau badan usaha yang berukuran kecil. Sehingga UMKM dapat disimpulkan sebagai usaha ekonomi yang dilakukan oleh masyarakat kalangan menengah ke bawah.

Sumber: https://www.kompas.com/skola/read/2021/04/19/100000869/umkm--pengertian-tujuan-karanteristik-jenis-dan-contohnya

Jenis UMKM di klasifikasi menjadi beberapa kriteria berdasarkan pendapatan yaitu Usaha Mikro, Usaha Kecil, dan Usaha Menengah. Sebuah usaha yang baik tidak terlepas dari catatan penjualan yang sangat baik. Untuk membuat sistem catatan penjualan yang baik, pelaku usaha UMKM sering kali mendapati kesulitan dan terkadang merepotkan dalam mencatat penjualan. Sehingga, tidak jarang sebagian pelaku usaha UMKM mengabaikan hal tersebut. Namun, seiring perkembangan teknologi dan informasi, beberapa aplikasi bantuan yang telah dibuat untuk memfasilitasi catatan penjualan UMKM, salah satunya adalah Krealogi.

Krealogi adalah sebuah aplikasi pencatatan penjualan untuk para pengusaha dan memfasilitasi beberapa fitur. Beberapa fitur utamanya adalah Pengelolaan Inventaris, Rencana Produksi, Pencatatan Pesanan Masuk, Pencatatan Pengeluaran/Pemasukan, dan Laporan.

Dalam pengembangannya, sebagian pengguna yang menggunakan aplikasi krealogi menghadapi kesulitan, karena tampilan antar-muka pengguna yang tidak ramah-pengguna dan kekurangan di beberapa fitur lainnya. Oleh karena itu, Krealogi memberikan tantangan bagi para peserta magang Skilvul Virtual Internship, untuk membuat beberapa fitur baru dalam pengembangan aplikasi Krealogi. Saya dan tim memilih dalam mengembangkan fitur Customer Relationship Management (CRM).

CRM (Customer Relationship Management) adalah strategi bisnis yang memadukan proses, manusia dan teknologi. Membantu menarik prospek penjualan, mengkonfersi mereka menjadi pelanggan, dan mempertahankan pelanggan yang sudah ada, pelanggan yang puas dan loyal.

Tujuan dari CRM adalah untuk mengetahui sebanyak mungkin tentang bagaimana kebutuhan dan perilaku pelanggan, untuk selanjutnya memberikan sebuah pelayanan yang optimal dan mempertahankan hubungan yang sudah ada, karena kunci sukses dari bisnis sangat tergantung seberapa jauh kita tahu tentang pelanggan dan memenuhi kebutuhan mereka. Sulit bagi sebuah perusahaan untuk mencapai dan mempertahankan kepemimpinan dan profitabilitas tanpa melakukan fokus secara berkesinambungan yang dapat dilakukan pada CRM.

Sumber: https://lintasmediadanawa.com/berita/crm-customer-relationship-management-adalah/

Sebagai challenge partner, Krealogi menginginkan pengembangan fitur CRM agar dapat membuat jangkauan dan keterikatan yang lebih baik antara pelaku usaha sebagai pengguna aplikasi, dan pelanggan-pelanggannya. Krealogi memberikan beberapa ketentuan terkait pengembangan fitur-fitur CRM, termasuk fitur Kartu Nama dan Basis Data Kontak Pelanggan.

Sasaran:

  1. Mengetahui kemudahan penggunaan fitur CRM dari aplikasi Krealogi.
  2. Mengetahui apa saja kebiasaan, kebutuhan, dan kesulitan pengguna sehingga menjadi pertimbangan dalam menggunakan fitur CRM di aplikasi Krealogi

Peran Dalam Tim

Dalam seluruh proses pengerjaan proyek ini, saya berkolaborasi dalam sebuah tim yang berisikan 4 orang, yaitu saya, Rahmat Ramadhan, Hasna Zakiyyah, Kofifah Naaliah Halim. Saya memiliki tanggung jawab sebagai notulen dalam proses testing kepada pengguna , yang bertugas untuk mencatat selama proses testing baik itu masukan, kritikan dan penilai setiap misi yang harus dilakukan oleh pengguna. Selain itu, dalam pengerjaan proyek ini saya memiliki tanggung jawab yaitu:

  • Melakukan riset pengguna,
  • Mengumpulkan ide-ide solusi,
  • Membuat User Flow,
  • Membuat tampilan antar-muka pengguna, dan
  • Melakukan Usability Testing.

Proses UX Design

Design Thinking — Gambar oleh (https://elsamara.id/berinovasi-dengan-design-thinking/)

Pada proyek ini, digunakan metode Design Thinking sebagai pendekatan Proses UX Design. Alasannya adalah karena metode ini merupakan metode/pendekatan yang sangat praktis dan kreatif yang berfokus utama ke user serta cenderung lebih fleksibel di setiap prosesnya.

Seluruh proses pengerjaan proyek dilakukan pada Figma, dengan menggunakan FigmaJam pada beberapa tahap untuk mengumpulkan ide secara berkolaborasi. Kemudian, seluruh proses desain dan kolaborasinya dilakukan pada Figma Design File.

Tahap 1 — Empathize

Pada tahap pertama dalam proses Design Thinking adalah Empathize. Tahap pertama ini dilakukan pencarian dan pengumpulan informasi dari pengalaman pengguna dalam menggunakan aplikasi krealogi dalam tahap pengembangan awal. Informasi-informasi tersebut dapat memberikan gambaran yang jelas tentang apa yang menjadi kesulitan pengguna dalam menggunakan aplikasi krealogi, sehingga aplikasi tersebut perlu dikembangkan lebih jauh. Informasi pengalama pengguna tersebut dalam menggunakan aplikasi krealogi telah diberikan pada ringkasan proyek.

Pada fitur CRM yang kami pilih untuk dikembangkan, sebagian pengguna merasa kesulitan untuk melakukan pencatatan pesanan, membuat kontak pelanggan, menghubungi pelanggan secara bersamaan yang tidak didalam satu aplikasi yang sama dan membuat kartu nama sebagai media promosi buat pelanggan. Krealogi tidak menyediakan fitur untuk basis data yang berisi kontak-kontak pelanggan, sehingga pengguna dalam menghubungi pelanggan harus dilakukan secara manual melalui WhatsApp. Hal ini mengakibatkan rumitnya proses yang dilakukan oleh pelaku UMKM untuk hanya menghubungi pelanggannya.

Selain itu, pada tahap secondary research dilakukan dalam menambah wawasan saya bersama tim mengenai ranah aplikasi pencatatan penjualan dan analisis aplikasi lainnya yang sejenis. Beberapa percobaan yang singkat dilakukan terhadap aplikasi catatan penjualan lainnya, untuk membandingkan beberapa hal yang menjadi kelebihan dan kekurangan aplikasi Krealogi dengan aplikasi catatan penjualan lainnya. Kemudian, kami melakukan analisa terhadap umpan balik dan ulasan pada aplikasi Krealogi di Google Play Store. Karena riset yang dilakukan sangat singkat dan tidak ada data signifikan yang dapat dicantumkan.

Tahap 2 — Define

Setelah kami mengetahui dan mendapatkan informasi mengenai hal yang dibutuhkan oleh pengguna, proses selanjutnya yaitu tahap Define. Pada tahap ini, ditentukan Pain Points dari pengguna, kemudian dikelompokkan dalam Affinity Diagram.

Pain Points

Untuk mengumpulkan Pain Points pengguna, kami melakukan pemahaman terhadap informasi dari pengalaman pengguna dalam menggunakan aplikasi krealogi, dan dapat disimpulkan menjadi kemungkinan-kemungkinan poin kesulitan dari pengguna tersebut. Tim kami menggunakan FigmaJam untuk melakukan kolaborasi dalam mengumpulkan ide dalam kesulitan-kesulitan yang mungkin dialami oleh pengguna terhadap fitur CRM dengan sticky notes. Beberapa anggota tim menemukan poin kesulitan yang sama, dan sticky notes terkait akan dikelompokkan.

Pain point adalah masalah yang dihadapi pengguna yang menciptakan gesekan dalam aliran pengguna tertentu.

Sumber: https://teknologi.id/insight/25-istilah-ux-yang-perlu-diketahui-setiap-desainer-bag-1

Paint Points CRM

Pain Points oleh SVI UIX [18] — Kelompok 2 di FigJam

Affinity Diagram

Setelah selesai tahap Pain Points dituliskan maka kami mengelompokkan setiap pain points di sticky notes yang saling berhubungan dengan masalah yang sama. Sehingga dapat memunculkan masing-masing topik utama yang spesifik dari kumpulan Pain Points. Setiap kelompok topik diberi nama yang sesuai, sehingga menggambarkan keseluruhan masalah yang ditemukan.

Diagram Afinitas atau Affinity Diagram adalah suatu alat atau metode brainstorming yang menggunakan diagram untuk mengorganisasikan sejumlah besar ide-ide ke dalam hubungan alamiah mereka.

Sumber: https://ipqi.org/pengertian-diagram-afinitas-affinity-diagram-dan-cara-membuatnya/

Affinity Diagram oleh SVI UIX [18] — Kelompok 2 di Figma

Setelah melakukan pengelompokan maka ditemukan 5 topik utama terkait CRM yaitu logistik, CRM, Cashflow dan Performa, Gudang, dan Tampilan

How Might We

Setelah selesai melakukan tahap affinity diagram untuk mengelompokkan setiap analisa permasalahan yang dihadapi oleh pengguna aplikasi krealogi. Dan untuk tahap selanjutnya adalah membuat beberapa solusi dalam menyelesaikan masalah yang dialami oleh pengguna dalam menggunakan aplikasi krealogi. Pada tahap ini kami juga melakukan kolaborasi bersama dalam membuat ide solusi sesuai dengan permasalahan yang ada didalam How Might We.

How Might We(HMW) adalah sesi di mana peserta menuliskan ide-ide mereka di kertas sticky notes mengenai solusi dan ide brilian mereka tanpa takut salah.

Sumber: https://gits.id/blog/chit-chat-bersama-gde-ui-ux-borrys-hasian/

How-Might-We oleh SVI UIX [18] — Kelompok 2 di FigJam

Tahap 3 — Ideate

Setelah selesai mencapai target tujuan yang ditentukan di How-Might-We dalam tahap Define, maka proses selanjutnya ke tahap Ideate. Pada tahap ini akan dibuat ide solusi terhadap target tujuan yang suda ditentukan. Berikutnya ide solusi tersebut akan dikelompokkan ke dalam diagram prioritas berdasarkan efek pada penggunaan dan usaha yang diperlukan untuk membuatnya. Proses terakhir pada tahap ideate akan dibuat sketsa yang dalam waktu singkat dengan konsep Crazy 8.

Ide Solusi

Seluruh anggota tim mengumpulkan ide-ide solusi terkait fitur atau fungsi yang dapat menyelesaikan target tujuan pada sticky notes. Beberapa ide yang sama akan dikelompokkan menjadi satu bagian.

Ide Solusi oleh SVI UIX [18 ]— Kelompok 2 di FigJam

Diagram Prioritas

Ide solusi yang telah dibuat kemudian dikelompokkan ke dalam diagram prioritas. Setiap ide solusi yang terdapat pada bagian “Lakukan Sekarang” akan dilakukan vote oleh seluruh anggota tim.

Diagram prioritas adalah diagram cartesius, dengan sumbu x mepresentasikan usaha yang diperlukan untuk membuat solusi tersebut, dan sumbu y mepresentasikan efeknya terhadap pengguna. Sehingga dalam diagram terbagi menjadi 4 baagian, bagian “Lakukan Sekarang” pada posisi atas kiri dengan efek pengguna tinggi dan usaha kecil, bagian “Lakukan Setelahnya” pada posisi atas kanan dengan efek pengguna besar dan usaha besar, bagian “Lakukan Nanti” pada posisi bawah kiri dengan efek pengguna kecil dan usaha kecil, bagian“Lakukan Terakhir” pada posisi bawah kanan dengan efek pengguna kecil dan usaha besar.

Prioritas Diagram oleh SVI UIX [18] — Kelompok 2 di Figjam

Sketsa Cepat Crazy 8

Setelah ditentukan fokus utama pengembangan fitur, maka seluruh anggota tim akan membuat sketsa cepat dengan konsep Crazy 8. Sketsa akan dimuat pada kertas yang dilipat menjadi 8 bagian, atau menggunakan Figma Design File. Anggota tim harus membuat sebanyak-banyaknya sketsa tampilan dalam waktu 8 menit.

Crazy 8’s adalah metode sprint desain di mana desainer membuat sketsa delapan ide dalam delapan menit.

Sumber: https://ichi.pro/id/11-tips-yang-dapat-ditindaklanjuti-untuk-mendapatkan-pekerjaan-desain-ui-ux-259887781732114

Crazy 8 oleh SVI UIX [18] — Kelompok 2 di Figjam

Tahap 4 — Prototype

Setelah kami selesai melakukan tahap Emphatize, Define, Ideate, maka langkah selanjutnya ialah tahap Prototype. Pada tahap Prototype akan dilakukan pembentukan fitur secara nyata dengan membuat Task Flow. Task Flow merupakan proses yang dimana akan dilalui oleh pengguna ketika melakukan suatu proses. Setelah itu Task Flow akan masuk ke dalam tahap visualisai melalui pembuatan Wireframe. Wireframe akan berisi visualisasi tampilan antar-muka yang masih dalam bentuk sketsa. Selanjutnya, Wireframe akan divisualisasikan menjadi sebuah desain antar-muka yang pada umumnya digunakan oleh pengguna yang biasa disebut dengan high-fidelity yang dimana terdiri dari interaksi antar komponen, sehingga menjadi sebuah rangkaian tampilan yanga dapat diuji oleh pengguna secara langsung.

Dalam proses pembuatan tampilan antar-muka pengguna , maka perlu didefinisikan sebuah UI Styleguide yang berisi terdiri dari komponen-komponen yang digunakan secara berulang-ulang. Pembuatan UI Styleguide membantu untuk menjaga konsistensi keseluruhan tampilan antar-muka pengguna.

Task Flow

Pada tahap pembuatan task flow seluruh anggota tim mengemukakan pendapat dan pemahaman masing-masing mengenai beberapa proses terkait fitur CRM. Kemudian dilakukan sebuah pertemuan untuk mendiskusikan penyusunan setiap task flow yang disetujui oleh seluruh anggota tim.

Task Flow Menambah Kontak Pelanggan

Menggambarkan proses yang akan dilakukan pengguna pada fitur menambahkan kontak pelanggan

Task Flow Menambah Kontak Pelanggan oleh SVI UIX [18] — Kelompok 2 di FigJam

Task Flow Menambah Kontak dan Menghubungi Konsumen Lewat Kontak

Menggambarkan proses yang akan dilakukan pengguna pada fitur menambah kontak dan menghubungi konsumen lewat kontak

Task Flow Menambah Kontak, Mengedit dan Menghubungi Konsumen Lewat Kontak oleh SVI UIX [18] — Kelompok 2 di FigJam

Task Flow Mencatat Pesanan Berdasarkan Kontak dan Alamat Pelanggan

Menggambarkan proses yang akan dilakukan pengguna pada fitur mencatat pesanan berdasarkan kontak dan alamat pelanggan

Task Flow Mencatat Pesanan Berdasarkan Kontak dan Alamat Pelanggan oleh SVI UIX [18] — Kelompok 2 di FigJam

Task Flow Menambah dan Membagikan Kartu Nama

Menggambarkan proses yang akan dilakukan pengguna pada fitur menambah dan membagikan kartu nama

Task Flow Menambah dan Membagikan Kartu Nama oleh SVI UIX [18] — Kelompok 2 di FigJam

Task Flow Mengedit Kartu Nama

Menggambarkan proses yang akan dilakukan pengguna pada fitur mengedit kartu nama

Task Flow Mengedit Kartu Nama oleh SVI UIX [18] — Kelompok 2 di FigJam

Task Flow Menghubungi Pelanggan saat Pesanan Sedang Berjalan

Menggambarkan proses yang akan dilakukan pengguna pada fitur menghubungi pelanggan saat pesanan sedang berjalan

Task Flow Menghubungi Pelanggan saat Pesanan Sedang Berlangsung oleh SVI UIX [18] — Kelompok 2 di FigJam

Task Flow Mengirim Notifikasi Tagihan Pembayaran dan Resi Pengiriman

Menggambarkan proses yang akan dilakukan pengguna pada fitur mengirim notifikasi tagihan pembayaran dan resi pengiriman

Task Flow Mengirim Notifikasi Tagihan Pembayaran dan Resi Pengiriman oleh SVI UIX [18] — Kelompok 2 di FigJam

Wireframe

Setelah membuat task flow maka langkah selanjutnya membuat wireframe sesuai dengan task flow yang sudah dibuat. Proses yang terdapat pada task flow akan divisualisasikan ke dalam bentuk Wireframe.

Wireframe oleh SVI UIX [18] — Kelompok 2 di Figma

UI Styleguide

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

Komponen UI Styleguide terbagi menjadi 2, yaitu atom dan molekul. Pada tahap atom, komponen yang dibuat adalah warna, typography, iconography, tombol dan tab, text field, kartu dan informasi, dan navigasi. Beberapa jenis komponen yang sama digabungkan menjadi satu variant.

Warna

Color Palette oleh SVI UIX [18] — Kelompok 2 di Figma

Typography

Typography oleh SVI UIX [18] — Kelompok 2 di Figma

Kartu dan Informasi

Kartu dan Informasi oleh SVI UIX [18] — Kelompok 2 di Figma

Input Field

Input Field oleh SVI UIX [18] — Kelompok 2 di Figma

Navigasi

Navigasi oleh SVI UIX [18] — Kelompok 2 di Figma

Tab dan Tombol

Tab dan Tombol oleh SVI UIX [18] — Kelompok 2 di Figma

Tampilan Antar-Muka Pengguna

Tampilan antar-muka pengguna dibuat oleh masing-masing anggota tim berdasarkan task flow yang sudah disepakati oleh setiap anggota tim. Namu, konsistensi desain juga tetap harus diperhatikan dan terjaga dengan dilakukannya pertemuan untuk mendiskusikan keterhubungan masing-masing desain. Dan beberapa perubahan perlu dilakukan pada komponen UI Styleguide, untuk menyesuaikan penggunaanya selama pembuatan tampilan antar-muka pengguna

UI Mockup oleh SVI UIX [18] — Kelompok 2 di Figma

Prototyping

Setelah melakukan proses pembuatan task flow, wireframe, ui styleguide, tampilan antar-muka, maka proses terakhir pada tahap protorype ialah proses pembuatan prototype yang dimana berfungsi sebagai menghubungkan komponen-komponen didalam tampila antar-muka yang memicu interaksi antar komponen atau halaman lain.

Prortype Aplikasi Krealogi oleh SVI UIX [18] — Kelompok 2 di Figma

Tahap 5 — Testing

Setelah melewati tahap emphatize, define, ideate dan protorype, maka selanjutnya masuk ke tahap terakhir yaitu tahap testing. Tahap testing atau user research dilakukan dengan metode In-depth Interview dan Usability Tezting pada prototype

User Research dilakukan kepada dua responden, seorang mahasiswa berusia 21 tahun, yang menjalankan usaha kuliner dan seorang ibu berusia 31 tahun, yang menjalankan usaha butik. In-depth Interview yang dilakukan menghasilkan informasi kebiasaan, kendala dan kebutuhan responden terkait pencatatan penjualan.

Hasil Usability Testing yang dilakukan menghasilkan informasi profile responden dan task/mission yang diberikan, sebagai berikut:

Profile Responden

Usability Testing

Usability Testing Responden Bu Fita
Usability Testing Responden Maya

Hasil Usability Testing

Dapat disimpulkan, berdasarkan seluruh hasil usability testing dari 2 responden tersebut mendapatkan nilai di atas mininum passing grade yaitu 5.5. Selain itu, 2 responden memberikan beberapa masukan dan informasi tambahan yang dapat dimanfaatkan untuk melakukan iterasi UI Design.

Iterasi UI Design

Setelah mendapatkan hasil yang layak dari Usability Testing, tim melakukan beberapa perubahan pada tampilan antar-muka pengguna untuk memenuhi kebutuhan pengguna. Ubahan dilakukan berdasarkan Pain Points yang diungkapkan oleh responden.

Iterasi Menambah dan Membagikan Kartu Nama

Iterasi Design Menambah dan Membagikan Kartu Nama oleh SVI UI/UX [18] — Kelompok 2 di Figma

Penutup

Setelah melalui seluruh proses, fitur CRM untuk aplikasi Krealogi telah terbentuk dan memiliki gambaran yang sangat jelas terkait cara kerja fitur CRM beserta keseluruhan tampilannya. Proyek ini dibuat sebagai rekomendasi desain kepada tim Krealogi untuk pengembangan aplikasi Krealogi di masa yang akan datang.

--

--