Mengembangkan Design Fitur CRM Aplikasi Krealogi — UX Case Study
Proyek ini adalah bagian dari program pelatihan UI/UX oleh Skilvul DTS PROA yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi merupakan Challenge Partner. Saya TIDAK bekerja atau dikontrak secara profesional oleh Krealogi.
Latar Belakang Aplikasi Krealogi
Aplikasi Krealogi memberikan solusi bagi para UMKM, salah satunya menjadi wadah bagi pelaku UMKM untuk membantu pengelolaan usahanya. Aplikasi Krealogi memberi kemudahan bagi penggunanya dalam mengelola usahanya dengan cara melakukan pencatatan kegiatan operasional, manajemen order perencanaan produksi, serta penghitungan biaya produksi. Sehingga dapat memudahkan para pelaku UMKM untuk mengelola jadwal produksi serta perhitungan keuangan lain.
Dalam pengembangannya, sebagian pengguna menghadapi kesulitan, karena tampilan antar-muka pengguna yang tidak ramah-pengguna, dan kekurangan beberapa fitur lainnya. Oleh karena itu, Krealogi memberikan tantangan bagi peserta Skilvul DTS PROA UI/UI Batch 3 tahun 2022 , untuk membuat beberapa fitur baru untuk mengembangkan aplikasi Krealogi. Saya dan tim memilih untuk mengembangkan fitur Customer Relationship Management (CRM).
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 Memasukkan Data Pelanggan dan Melihat Hisory Pembelian, Fitur Customer Service (Pihak Krealogi), dan Membuat Kartu Nama Digital.
Sasaran
- Mengembangkan fitur-fitur terkait CRM untuk memungkinkan jangkauan pelaku usaha umkm penggunaan meluas dari kota sampai ke dalam pedesaan yang ingin beralih pemakaian ke apps mobile sehingga dapat menjangkau pelanggan lebih mudah sesuai kebutuhan.
- Mengembangkan tampilan antar-muka pengguna yang ramah, flexibel, efisien dan mudah untuk bisa dipakai pengguna kalangan usia muda sampai generasi tua yang masih menjalankan pelaku usaha umkm.
Peran dalam Tim
Dalam seluruh proses pengerjaan proyek ini, saya berkolaborasi dalam sebuah tim berisikan 5 orang, yaitu saya sendiri Joko Atmo Dwi Putro, Galih Satrio Raharjo, Muhamad Afif Akbar, Muhammad Ilham, Shindy Arlina Claudya. Saya memiliki tanggung jawab sebagai koordinator tim, yang bertugas untuk memastikan keseluruhan proses berjalan tepat waktu dan hasil sesuai dengan harapan. Saya juga bertanggung jawab untuk mengumpulkan anggota tim untuk berdiskusi secara rutin. Selain itu, dalam pengerjaan proyek ini kami memiliki tanggung jawab dan tugas yang sama, yaitu:
- Melakukan riset pengguna,
- Mengumpulkan ide-ide solusi,
- Membuat User Flow dan Wireframe,
- Membuat tampilan antar-muka pengguna,
- Membuat Prototype, dan
- Melakukan Usability Testing.
Proses UX Design
Design thinking adalah metodologi yang menyediakan pendekatan berbasis solusi untuk memecahkan masalah. Ini sangat berguna ketika digunakan untuk mengatasi masalah kompleks yang tidak jelas atau tidak diketahui — karena berfungsi untuk memahami kebutuhan manusia yang terlibat, membingkai ulang masalah dengan cara yang berpusat pada manusia, menciptakan banyak ide dalam sesi brainstorming dan mengadopsi pendekatan langsung untuk prototipe dan pengujian. Mempelajari lima tahap pemikiran desain akan memberdayakan Anda dan memungkinkan Anda untuk menerapkan metodologi pada pekerjaan Anda dan memecahkan masalah kompleks yang terjadi di perusahaan kami, negara kami, dan di seluruh dunia.
Pemikiran desain adalah proses berulang non-linier yang dapat memiliki tiga hingga tujuh fase, tergantung pada siapa Anda berbicara. Kami fokus pada model pemikiran desain lima tahap yang diusulkan oleh Institut Desain Hasso Plattner di Stanford (d.school) karena mereka terkenal di dunia karena cara mereka mengajar dan menerapkan pemikiran desain.
Lima tahapan design thinking menurut d.school adalah:
· Empathize: teliti kebutuhan pengguna Anda.
· Tentukan: nyatakan kebutuhan dan masalah pengguna Anda.
· Ideate: tantang asumsi dan ciptakan ide.
· Prototipe: mulai membuat solusi.
· Tes: coba solusi Anda.
Mari selami setiap tahap proses pemikiran desain.
1. Stage 1: Empathize — Research Your Users’ Needs
Tahap pertama dari proses pemikiran desain berfokus pada penelitian yang berpusat pada pengguna. Anda ingin mendapatkan pemahaman empatik tentang masalah yang Anda coba pecahkan. Konsultasikan dengan pakar untuk mengetahui lebih lanjut tentang area yang menjadi perhatian dan lakukan pengamatan untuk terlibat dan berempati dengan pengguna Anda. Anda mungkin juga ingin membenamkan diri dalam lingkungan fisik pengguna Anda untuk mendapatkan pemahaman pribadi yang lebih dalam tentang masalah yang terlibat — serta pengalaman dan motivasi mereka. Empati sangat penting untuk pemecahan masalah dan proses desain yang berpusat pada manusia karena memungkinkan pemikir desain untuk mengesampingkan asumsi mereka sendiri tentang dunia dan mendapatkan wawasan nyata tentang pengguna dan kebutuhan mereka.
Tergantung pada batasan waktu, Anda akan mengumpulkan sejumlah besar informasi untuk digunakan selama tahap berikutnya. Tujuan utama dari tahap Empathize adalah untuk mengembangkan pemahaman terbaik dari pengguna Anda, kebutuhan mereka dan masalah yang mendasari pengembangan produk atau layanan yang ingin Anda buat.
Pada fitur CRM yang kami pilih untuk dikembangkan, sebagian pengguna merasa kesulitan karena user tidak memiliki database pelanggan, Catatan manual dan simpan kontak whatsapp, User menemui kendala untuk melakukan dua aktivitas sekaligus: mengecek catatan penjualan dan menghubungi konsumen, Penyimpanan data konsumen pada aplikasi diharapkan dapat membantu user dalam mengetahui siapa saja konsumennya untuk melakukan penjualan berdasarkan data penjualan yang sudah tercatat. Membutuhkan catat pesanan masuk baru memprovide catatan pesanan masuk, namun database klien belum dapat tersimpan sehingga hal ini menjadi peluang sebagai fitur tambahan yang mendukung kemudahan penjualan produk oleh user dan belum ada kartu nama.
Selain itu, Secondary Research dilakukan untuk menambah wawasan mengenai ranah aplikasi pencatatan pembukuan dan analisis aplikasi lainnya yang sejenis. Beberapa percobaan singkat dilakukan terhadap aplikasi pencatatan pembukuan lainnya, untuk membandingkan beberapa hal yang menjadi kelebihan dan kekurangan aplikasi Krealogi dengan aplikasi lain. Kemudian, analisis dilakukan terhadap umpan balik dan ulasan terhadap aplikasi Krealogi di Google Play Store. Karena riset dilakukan dengan singkat dan sederhana, tidak ada data signifikan yang dapat dicantumkan.
2. Stage 2: Define — State Your Users’ Needs and Problems
Pada tahap Define, Anda akan mengatur informasi yang telah Anda kumpulkan selama tahap Empathize. Anda akan menganalisis pengamatan Anda untuk menentukan masalah inti yang telah Anda dan tim Anda identifikasi hingga saat ini. Mendefinisikan masalah dan pernyataan masalah harus dilakukan dengan cara yang berpusat pada manusia.
Tahap Define akan membantu tim desain mengumpulkan ide-ide hebat untuk membangun fitur, fungsi, dan elemen lain untuk memecahkan masalah yang dihadapi — atau, paling tidak, memungkinkan pengguna sebenarnya untuk menyelesaikan sendiri masalah dengan kesulitan minimal.
Pain Points
Untuk mengumpulkan Pain Points pengguna, dilakukan pemahaman terhadap informasi pengalaman pengguna, dan disimpulkan menjadi kemungkinan-kemungkinan poin kesulitan pengguna. Tim menggunakan FigmaJam untuk berkolaborasi mengumpulkan ide kesulitan-kesulitan yang mungkin dialami oleh pengguna, terhadap fitur CRM, dengan sticky notes.
How Might We
Untuk setiap topik utama permasalahan, diajukan sebuah tujuan untuk menyelesaikan masalah dalam topik tersebut. Diagram ini disebut How-Might-We. Tim menyimpulkan sebuah tujuan untuk merepresentasikan cara penyelesaian masalah pada masing-masing topik.
Tim menyimpulkan dari hasil voting pada figjam bahwa topik How Might We : memudahkan user dengan melakukan kegiatan aktivitas mencatat & mengecek pesanan pada penjualan barang yang sudah tercatat.
3. Stage 3: Ideate — Challenge Assumptions and Create Ideas
Selama tahap ketiga dari proses berpikir desain, desainer siap untuk menghasilkan ide. Anda telah berkembang untuk memahami pengguna Anda dan kebutuhan mereka di tahap Empathize, dan Anda telah menganalisis pengamatan Anda di tahap Tentukan untuk membuat pernyataan masalah yang berpusat pada pengguna. Dengan latar belakang yang solid ini, Anda dan anggota tim Anda dapat mulai melihat masalah dari perspektif yang berbeda dan menemukan solusi inovatif untuk pernyataan masalah Anda.
Ada ratusan teknik ide yang dapat Anda gunakan — seperti Brainstorm, Brainwrite, Worst Possible Idea, dan SCAMPER. Teknik Brainstorm dan Ide Terburuk biasanya digunakan pada awal tahap ide untuk merangsang pemikiran bebas dan memperluas ruang masalah. Ini memungkinkan Anda untuk menghasilkan ide sebanyak mungkin di awal ide. Anda harus memilih teknik pembuatan ide lain menjelang akhir tahap ini untuk membantu Anda menyelidiki dan menguji ide-ide Anda, dan memilih yang terbaik untuk dilanjutkan — baik karena tampaknya memecahkan masalah atau menyediakan elemen yang diperlukan untuk menghindarinya.
Ide Solusi
Seluruh anggota tim mengumpulkan ide-ide solusi terkait fitur atau fungsi yang dapat menyelesaikan target tujuan pada sticky notes. Beberapa ide yang mirip akan dikelompokkan menjadi satu.
Affinity Diagram
Diagram afinitas (affinity diagram) adalah sarana bagi seorang desainer UX, digunakan untuk menangkap dan mensintesis data kualitatif. Cara terbaik untuk membuat affinity diagram adalah dengan tim desain sekaligus orang-orang yang terlibat dalam proses sebelumnya seperti riset dan ideasi & menjelaskan bagaimana menggunakan diagram afinitas Anda untuk membuat artefak-artefak UX seperti persona dan peta perjalanan pelanggan.
Berikut adalah tahapan membuat affinity diagram :
· Tahap 1: Kelompokkan data yang sama, Dengan metode ini, tim desain yang terlibat bisa melihat dari sudut pandang ide-ide dan kemungkinan lain.
Pemahaman tim akan lebih baik, serta lebih mudah dan efektif dalam mengkomunikasikan temuan serta ide.
· Tahap 2: Diskusi dan klarifikasi cluster data,tahap selanjutnya adalah untuk mendiskusikan masing-masing kelompok dengan lebih detail.
· Tahap 3: Menghubungkan kelompok data, Tahap terakhir dari pembuatan affinity diagram adalah menghubungkan kelompok data agar ide yang dibawa tetap terhubung hingga akhir proses desain.
Dengan menggunakan affinity diagram, data yang kamu punya akan lebih terorganisir. Hal ini tentunya membantu kamu dalam menganalisis dan menggunakan data tersebut nantinya.
Diagram Prioritas
Ide-ide solusi kemudian dikelompokkan ke dalam diagram prioritas. Diagram prioritas adalah diagram cartesius, dengan sumbu x merepresentasikan usaha yang diperlukan untuk membuat solusi tersebut, dan sumbu y merepresentasikan efeknya terhadap pengguna. Sehingga dalam diagram terbagi menjadi 4 kuadran:
· Kuadran “Lakukan Sekarang” (yes do it now) pada bagian atas kiri dengan efek pengguna tinggi dan usaha kecil,
· Kuadran “Lakukan Setelahnya” (do next) pada bagian atas kanan dengan efek pengguna besar dan usaha besar,
· Kuadran “Lakukan Nanti” (do later) pada bagian bawah kiri dengan efek pengguna kecil dan usaha kecil,
· Kuadran “Lakukan Terakhir” (do last) pada bagian bawah kanan dengan efek pengguna kecil dan usaha besar.
Setiap ide solusi yang terdapat pada kuadran “Lakukan Sekarang” akan diberikan vote oleh seluruh anggota tim. Anggota tim memiliki hak vote sebanyak jumlah ide pada kuadran “Lakukan Sekarang” ditambah 1.
Tiga ide solusi yang memiliki vote tertinggi akan menjadi fokus utama dalam proses pengembangan fitur CRM, yaitu :
· Proses Input Pelanggan dan History Pembelian
· Fitur Customer Service (Pihak Krealogi)
· Fitur Kartu Nama
4. Stage 4: Prototype — Start to Create Solutions
Prototipe ini dapat dibagikan dan diuji di dalam tim itu sendiri, di departemen lain atau pada sekelompok kecil orang di luar tim desain. Pada tahap Prototype akan dilakukan pembentukan fitur secara nyata dengan membuat Task Flow. Task Flow mendefinisikan proses yang dilalui oleh pengguna ketika melakukan suatu proses. Kemudian, Task Flow akan divisualisasi melalui pembuatan Wireframe. Wireframe akan berisi visualisasi umum tampilan antar-muka pada aplikasi. Selanjutnya, Wireframe akan dibuat menjadi sebuah desain antar-muka pengguna yang high-fidelity, dan dibuat interaksi antar komponennya, sehingga menjadi sebuah rangkaian tampilan yang dapat diuji pada pengguna. Dalam pembuatan tampilan antar-muka, perlu didefinisikan sebuah UI Styleguide yang berisi komponen-komponen yang digunakan secara berulang. Pembuatan UI Styleguide membantu untuk menjaga konsistensi keseluruhan tampilan antar-muka pengguna. Ini adalah fase percobaan, dan tujuannya adalah untuk mengidentifikasi solusi terbaik untuk setiap masalah yang diidentifikasi selama tiga tahap pertama. Solusi diimplementasikan dalam prototipe dan, satu per satu, mereka diselidiki dan kemudian diterima, ditingkatkan atau ditolak berdasarkan pengalaman pengguna. Pada akhir tahap Prototipe, tim desain akan memiliki gagasan yang lebih baik tentang keterbatasan produk dan masalah yang dihadapinya. Mereka juga akan memiliki pandangan yang lebih jelas tentang bagaimana pengguna sebenarnya akan berperilaku, berpikir, dan merasakan ketika mereka berinteraksi dengan produk akhir.
Task Flow
Seluruh anggota tim membuat beberapa Task Flow untuk mengemukakan interpretasi dan pemahaman masing-masing mengenai beberapa proses terkait fitur CRM. Kemudian, sebuah pertemuan diadakan untuk mendiskusikan penyusunan Task Flow final yang disetujui oleh seluruh anggota tim. Hal ini diperlukan agar dapat menampung seluruh pemahaman anggota tim, dan menemukan pemahaman yang disepakati oleh tim.
Task Flow Fitur History Pembelian
Menggambarkan proses-proses yang dapat dilakukan oleh pengguna pada fitur history pembelian.
Task Flow Fitur Input Data Customer
Menggambarkan proses-proses yang dapat dilakukan oleh pengguna pada fitur input data customer.
Task Flow Fitur Kartu Nama
Task Flow Fitur Customer Service (Pihak Krealogi)
Menggambarkan proses-proses yang dapat dilakukan oleh pengguna pada fitur customer service (pihak krealogi).
Wireframe
Kemudian, Wireframe dibuat sesuai dengan Task Flow. Proses-proses yang terdapat pada Task Flow divisualisasikan ke dalam Wireframe dalam bentuk umum.
Wireframe Halaman Proses Input Pelanggan
Wireframe Halaman Fitur Customer Service (Pihak Krealogi)
Wireframe Halaman Fitur Kartu Nama
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 text field. Beberapa jenis komponen yang sama digabungkan menjadi satu variant.
Warna
Typography
Tombol dan Text (Primary & Secondary)
Iconography
Menu Bar, Button, Text Field Variant
Pada tahap molekul, pembuatan komponen dilakukan bersamaan dengan pembuatan tampilan antar-muka pengguna. Komponen-komponen di antaranya adalah bottom navigation dan header halaman. Selain itu, masih banyak komponen lain yang dibuat, termasuk Search Bar, cards, dan lain-lain.
Tampilan Antar-Muka Pengguna (UI Mockup)
Tampilan antar-muka pengguna dibuat oleh masing-masing anggota tim berdasarkan Task Flow yang dibuatnya. Namun, konsistensi desain juga tetap harus terjaga dengan dilakukannya pertemuan secara rutin untuk mendiskusikan keterhubungan masing-masing desain. Beberapa perubahan perlu dilakukan pada komponen UI Styleguide, untuk menyesuaikan penggunaannya selama pembuatan tampilan antar-muka pengguna.
Tampilan Antar-Muka Pengguna Fitur Proses Input Pelanggan dan History Pembelian
Tampilan Antar-Muka Pengguna Fitur Customer Service (Pihak Krealogi)
Tampilan Antar-Muka Pengguna Fitur Kartu Nama Digital
Akhirnya, hasil akhir dari tampilan antar-muka telah lengkap dan siap untuk disematkan interaksi pada komponen-komponen yang berfungsi untuk menghubungkan ke halaman atau proses tertentu.
Prototyping
Prototype dibuat dengan menghubungkan komponen-komponen tertentu yang dapat berfungsi sebagai pemicu interaksi ke komponen atau halaman lain. Prototype menghubungkan keseluruhan fitur yang dibuat pada proyek ini.
Desainer atau evaluator secara ketat menguji produk lengkap menggunakan solusi terbaik yang diidentifikasi dalam tahap Prototipe. Ini adalah tahap akhir dari model lima tahap; namun, dalam proses berulang seperti pemikiran desain, hasil yang dihasilkan sering digunakan untuk mendefinisikan kembali satu atau lebih masalah lebih lanjut. Tingkat pemahaman yang meningkat ini dapat membantu Anda menyelidiki kondisi penggunaan dan bagaimana orang berpikir, berperilaku, dan merasa terhadap produk, dan bahkan mengarahkan Anda untuk mengulang kembali ke tahap sebelumnya dalam proses pemikiran desain. Anda kemudian dapat melanjutkan dengan iterasi lebih lanjut dan membuat perubahan dan penyempurnaan untuk mengesampingkan solusi alternatif. Tujuan utamanya adalah untuk mendapatkan pemahaman yang mendalam tentang produk dan penggunanya mungkin.
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 21 tahun, yang menjalankan usaha bakery rumahan bersama ibunya. In-depth Interview yang dilakukan menghasilkan informasi kebiasaan dan kendala responden terkait pencatatan pembukuan. Dapat disimpulkan bahwa, responden merasa kesulitan untuk melakukan pencatatan hanya dengan note pada ponselnya. Terlebih ketika pelanggan yang melakukan pembelian secara langsung, tanpa memesan terlebih dahulu, karena transaksi berlangsung secara cepat dan terus-menerus dalam jangka waktu tertentu. Sehingga, responden tidak dapat mengingat seluruh pembelian yang dilakukan.
Hasil Usability Testing yang dilakukan menghasilkan informasi untuk setiap task yang diberikan, sebagai berikut:
TASK 1 — Merekap Data Kontak Pelanggan dan Melihat History Pembelian
TASK 2 — Fitur Customer Service (Pihak Krealogi)
TASK 3 — Fitur Kartu Nama Digital
Single Ease Question — Result Passed
Dapat disimpulkan, berdasarkan seluruh hasil Usability Testing, keseluruhan task mendapatkan hasil PASSED, dengan nilai di atas minimum passing grade 5,5. Selain itu, 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 ubahan pada tampilan antar-muka pengguna untuk memenuhi kebutuhan pengguna. Ubahan dilakukan berdasarkan Pain Points yang diungkapkan oleh responden.
Penutup
Setelah melalui seluruh proses, fitur CRM untuk aplikasi Krealogi telah terbentuk dan memiliki gambaran yang jelas terkait cara kerja fitur-fitur CRM, serta keseluruhan tampilannya. Proyek ini dibuat sebagai rekomendasi desain kepada tim Krealogi untuk pengembangan aplikasi Krealogi di masa mendatang.
