UX Case Study: Kitabisa — Mengembangkan Desain Halaman Berita
DISCLAIMER! This project is part of the UI/UX training program implemented by Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Kitabisa is the Challenge Partner. I am not working for nor contracted professionally by Kitabisa.
Latar Belakang
Kitabisa merupakan salah satu aplikasi yang menyediakan platform untuk crowdfunding atau penggalangan dana terbesar di Indonesia. Pengguna dapat menggunakan Kitabisa untuk mengumpulkan dana maupun memberikan donasi untuk penggalangan dana dalam berbagai kasus. Sebagian besar tujuannya untuk kebutuhan medis, namun terdapat perkembangan positif pula dalam kategori lainnya, seperti bencana alam, bantuan pendidikan, lingkungan, kegiatan sosial, kemanusiaan, menolong hewan, difabel, infrastruktur umum, dan lainnya.
Sedangkan Skilvul merupakan sebuah organisasi yang menyediakan aplikasi pembelajaran di bidang pendidikan teknologi dan inovasi digital. Menyadari bahwa jumlah digital talenta terbilang lebih sedikit dibandingkan kebutuhan yang ada, Skilvul mengadakan program magang bersertifikat Kampus Merdeka, Skilvul Virtual Internship: UI/UX Challenge (SVI), untuk mahasiswa seluruh universitas di Indonesia. Program ini bertujuan untuk memperlengkapi para mahasiswa dengan keahlian yang dibutuhkan untuk talenta digital, khususnya sebagai UI/UX Designer. Pada kegiatan program ini memiliki aktivitas pembelajaran UX Design Course di website Skilvul sendiri, dan menyediakan tantangan permasalahan dari beberapa perusahaan challenge partners, di mana Kitabisa merupakan salah satu dari mitra industri Skilvul dalam program magang ini.
Permasalahan & Tujuan Pengembangan Desain
Pada tantangan permasalahan Skilvul x Kitabisa ini, Kitabisa ingin melakukan perubahan desain halaman untuk bagian Berita. Bagian tersebut dapat diakses melalui dua cara. Cara pertama adalah melalui menu Inbox di navigasi menu bawah, lalu pada bagian tab Berita. Cara kedua adalah dengan melalui detail Campaign dari halaman Home atau halaman yang memberikan pilihan penggalangan dana. Fitur Berita ini bertujuan untuk:
- Mendistribusikan informasi mengenai update dari kampanye sehingga donatur dapat terlibat secara emosional dengan kampanye yang telah didonasikan.
- Mendorong donatur untuk melakukan donasi kembali pada kampanye yang telah diberikan donasi atau kampanye lainnya yang sejenis.
Dengan demikian, dibutuhkan pengembangan desain halaman Berita yang dapat memberikan informasi atau berita terbaru mengenai kampanye pada kepada pendonor agar pengalaman donasi mereka menjadi lebih terasa secara emosional sekaligus meningkatkan jumlah pengguna tetap yang menggunakan produk aplikasi Kitabisa. Sehingga, tujuan perancangan pengembangan desain halaman Berita ini adalah untuk memberikan pengalaman donasi pengguna yang lebih engaging dan meningkatkan tingkat retensi.
Peran dalam Pengembangan Desain
Pengerjaan proyek ini dilakukan dengan kelompok terdiri dari tiga anggota. Ketiga anggota tersebut termasuk saya, Yanuar Hadi, dan Rayhan Rashad di mana semuanya merupakan peserta SVI. Pengerjaannya secara teknis dari pembuatan kelima tahap Design Thinking, yaitu Empathize, Define, Ideate, Prototyping, dan Testing terus dilakukan secara berkelompok. Walaupun tidak secara langsung, kami memiliki peran semacam person in charge untuk beberapa pekerjaannya, di mana saya menjadi person in charge pada bagian persiapan user research dan bagian usability testing dengan responden.
Deskripsi Pengembangan Desain
Berdasarkan permasalahan dari tantangan SVI x Kitabisa yang telah dijelaskan sebelumnya, berikut merupakan beberapa rekomendasi fitur yang diharapkan pada bagian halaman Berita yang ingin diubah:
- Donatur dapat melihat kabar terbaru informasi dalam format cerita, maupun eksplorasi di luar gambar dan teks.
- Donatur dapat melihat informasi terbaru mengenai pemanfaatan dana yang terkumpul dari yang telah didonasikan ataupun digalang.
Target penggunanya adalah donatur, dengan profil sebagai berikut:
- Gender : Pria atau Wanita
- Umur : 25–35 tahun
- Profesi : Tidak spesifik
Diberikan pula 5 contoh persona pengguna dari Dokumen Pendukung yang terdiri dari Heaven Catcher, Crazy Rich Philanthropist, Moms, Activist, dan Go-Jek Users.
Sedangkan untuk jenis platform Kitabisa yang digunakan adalah app atau website (PWA atau Progressive Web App). Selanjutnya, visual style yang dilakukan harus tetap mempertahankan style Kitabisa. Terakhir, diperbolehkan untuk melakukan eksplorasi dan membuat asumsi sendiri di luar dari detail tantangan yang diberikan hingga untuk menghasilkan alur produk digital yang lebih baik apabila dibutuhkan.
Proses Desain
Proses desain UX merupakan metode secara iteratif yang dilakukan untuk memperbaiki secara berlanjut pada suatu desain sehingga dapat digunakan untuk menemukan solusi permasalahan kasus UX. Terdapat beberapa jenis proses desain yang dapat dilakukan, di mana untuk studi kasus ini, proses desain yang digunakan adalah Design Thinking. Proses desain ini terdiri dari 5 tahap, yaitu empathize, define, ideate, prototyping, dan testing. Berikut merupakan masing-masing tahap proses desain Design Thinking yang dilakukan untuk melakukan pengembangan desain halaman Berita dari aplikasi Kitabisa.
1. Empathize
Empathize merupakan tahap pertama dari proses Design Thinking. Tujuan dari tahap ini adalah untuk mencari tahu kebutuhan pengguna dengan melakukan riset sebelum mendefinisikan permasalahan dan membuat ide solusi. Proses empathize yang dilakukan pada challenge ini adalah menggunakan metode Secondary Research. Metode ini biasa disebut juga sebagai Desk Research merupakan metode riset yang dilakukan dengan mengumpulkan data yang lalu dianalisis dari informasi yang ditemukan. Data tersebut dapat dikumpulkan melalui data analitik dari artikel, mencari referensi jurnal, melakukan analisis kompetitor, dan lain-lain.
Untuk challenge ini saya bersama kelompok membuat Secondary Research dengan mengumpulkan Competitor Analysis, atau analisis kompetitor. Kompetitor Kitabisa yang kami kumpulkan adalah organisasi yang bergerak di bidang penggalangan donasi, seperti aplikasi BenihBaik.com, WeCare.id, dan donasi UNICEF Indonesia. Kami juga mengumpulkan user feedback berdasarkan ketiga aplikasi tersebut dari Play Store / Apps Store. Selanjutnya, saya melakukan riset berikutnya dengan menganalisis produk Kitabisa, yaitu mendalami halaman dari fitur Kabar Terbaru karena halaman tersebut yang akan menjadi bagian utama untuk melakukan pengembangan desain. Dengan memahami lebih dalam tentang Kabar Terbaru membuat kami dapat masuk ke tahap Design Thinking berikutnya dengan lebih baik. Seluruh proses tahap Secondary Research ini kami catat dalam sheet.
2. Define
Tahap define adalah mendefinisikan permasalahan pengguna dari hasil empathize dengan menentukan pain points. Untuk pengerjaan bagian ini, kelompok saya dapat memberikan definisi permasalahan yang belum disebut dari permasalahan yang diberikan. Berikut merupakan hasil pain points dari pengguna melalui aplikasi FigJam:
Selanjutnya adalah membuat How-Might We sebagai opportunity di mana pengguna ditempatkan sebagai pusat objek permasalahan. Pada tahap ini, kami membuat daftar yang dapat menjadi solusi yang dibutuhkan target pengguna dari pain points di atas. Setelah menentukannya, kami melakukan voting untuk solusi yang dapat diprioritaskan untuk dibuat terlebih dahulu. Berikut merupakan voting How-Might We dari kelompok saya:
- Menyajikan berita terbaru dengan menarik agar pengalaman berdonasi dapat terasa lebih emosional dan meningkatkan tingkat retensi sehingga mendorong pendonor untuk berdonasi lagi ke orang yang membutuhkan
- Memberikan cerita dari penerima dana dalam bentuk teks, ilustrasi, atau video agar meningkatkan minat pendonor
3. Ideate
Pada tahap ketiga ini, kami memulai brainstorming ide berdasarkan kedua How-Might We yang terpilih, yaitu menyajikan berita terbaru dengan menarik agar memberi pengalaman donasi kepada pengguna dapat terasa lebih emosional, meningkatkan tingkat retensi, sehingga mendorong pengguna untuk berdonasi lagi ke orang yang membutuhkan. Ide solusi berikutnya adalah memberikan cerita dari penerima dana dalam bentuk teks, ilustrasi, atau video agar meningkatkan minat pendonor. Berikut merupakan daftar ide solusi yang kami buat:
Selanjutnya, solusi-solusi yang telah kami berikan dikelompokkan dalam Affinity Diagram berdasarkan kategori fungsinya. Berikut merupakan satu kelompok dari penentuan Affinity Diagram, yaitu Tampilan, dan isi-isinya:
Setelah membuat kategori yang dimasukkan ke dalam Affinity Diagram, kami membuat Prioritization Idea, yaitu untuk memilih ide prioritas dalam perancangan desain aplikasi ini. Pembagian ini dibagikan menjadi 4 kategori berdasarkan user value dan effort di mana setiap kelompok dari Affinity Diagram dimasukkan ke salah satu dari keempat kategori tersebut melalui persetujuan kelompok. Berikut merupakan hasil Prioritization Idea kami:
YES, DO IT NOW!
- Membuat tampilan aktivitas pencairan dana dalam bentuk per-hari sehingga pendonor yang baru mendonor tidak perlu melakukan scroll terlalu jauh ke bawah
- Membuat penulisan cerita yang pendek saja (dengan batas jumlah kata) namun dapat dibuat beberapa kali (mengingat pengguna cenderung tidak suka membaca terlalu panjang)
DO NEXT
- Memasukkan media berupa ilustrasi atau video untuk meningkatkan tingkat emosional pendonor
- Membuat rincian dana untuk setiap pencairan dana dan membuat rincian dana untuk setiap pengeluaran dari dana yang tersalurkan
DO LATER
- Tidak ada
DO LAST
- Membuat gambar-gambar (atau video) dapat di-swipe bukan hanya scrolling
- Membuat gambar, ilustrasi, dan video agar dapat diperbesar saat ingin melihatnya
Setelah menentukan fitur-fitur prioritas, kami lanjut ke tahap berikutnya, yaitu membuat Crazy 8’s. Crazy 8’s ini adalah membuat 8 wireframe dalam satu kertas selama 8 menit (namun untuk tantangan ini diperbolehkan lebih dari 8 menit) berdasarkan cakupan proses bisnis yang telah ditentukan:
4. Prototyping
Berlanjut ke tahap proses berikutnya adalah membuat user flow dari proses Kabar Terbaru dan Pencairan Dana. Dikarenakan proses ini cukup sederhana, maka hanya dibuat dalam 1 user flow. Berikut merupakan user flow yang dibuat:
Setelah menentukan user flow, wireframe dibangun menggunakan aplikasi Figma. Kami membuat wireframe berdasarkan 8 Crazy 8’s yang kami buat sebelumnya untuk memvisualisasikan ide kasar kami. Berikut adalah 8 wireframe masing-masing di mana punya saya adalah di bagian kiri:
Lalu kami memilih wireframe berdasarkan hasil voting pada tahap Crazy 8’s. Meski memiliki desain khas masing-masing, kami akan mencocokkan sesuai style dari Kitabisa. Berikut adalah wireframe yang terpilih dari hasil voting:
Setelah membuat wireframe agar dapat membantu pembuatan desain UI, saya dan teman kelompok saya membuat UI styleguide dengan fungsi untuk membantu pembuatan desain pula. Beberapa di antaranya, yaitu color style, text style, icons diambil berdasarkan gaya yang telah ditentukan oleh Kitabisa dalam Kitabisa Product Language. Untuk bagian yang dapat berinteraksi dengan pengguna dibuat menjadi components. Components ini merupakan bagian dari desain UI yang dapat dibentuk secara grup dan dianggap sebagai satu elemen. Hal ini dapat mempermudah apabila bagian tersebut digunakan beberapa kali dalam mendesain UI sehingga tidak perlu membuat dari awal bagian yang mengulang atau memiliki dasar yang sama. Components yang dibuat adalah untuk header, buttons, bottom navigation, cards, dan lain-lain. Style pembuatan components ini juga ditentukan berdasarkan product language Kitabisa yang sudah ada. Berikut merupakan UI styleguide yang telah dibuat:
Untuk pembuatan desain UI, banyak bagian mengambil dasarnya dari halaman Kitabisa yang sudah ada, serta wireframe dan styleguide maupun components yang telah dibangun sebelumnya. Selanjutnya, pembuatan UI dari user flow, yaitu Kabar Terbaru & Pencairan Dana, terus dirancang hingga selesai, termasuk dengan terus berdiskusi dengan kelompok hingga mencari referensi UI dari Kitabisa sendiri maupun berbagai tempat referensi lainnya.
Tahap terakhir dari tahap proses Prototyping adalah pembuatan prototyping itu sendiri dari desain aplikasi yang sudah dibangun. Fitur utama yang dibangun adalah fitur tab dan kalender pada Kabar Terbaru dan Pencairan Dana, detail Kabar Terbaru, dan detail Pencairan Dana. Berikut merupakan hasil prototyping yang dibuat untuk challenge pengembangan desain halaman Berita Kitabisa ini:
5. Testing
Bagian terakhir dari proses Design Thinking, yaitu testing, adalah untuk mengevaluasi setiap ide solusi yang telah dibangun desainnya dengan melakukan tes. Terdapat tiga tahap utama saat melakukan testing, yaitu mempersiapkan user research, memilih responden berdasarkan user persona, lalu melakukan usability testing. Walaupun memiliki durasi pengerjaan yang berbeda, setiap tahap memiliki peran yang penting untuk proses iterasi pengembangan desain.
Tahap pertama dilakukan dengan mempersiapkan user research di mana saya dan kelompok saya membuat Stimulus Research dengan Google Docs dan Record Data User Research dengan Google Sheets. Pembuatan Stimulus User Research mengumpulkan research objective, kriteria responden, daftar pertanyaan dan research scenario. Berikut merupakan kegunaan masing-masing dari Stimulus User Research untuk challenge ini:
- Research objective: untuk memberikan kesan yang mendalam bagi pengguna pada pengalamannya saat berdonasi, termasuk mengetahui apakah desain yang disajikan dapat menyentuh pengguna secara emosional. Selain itu, ingin diketahui tingkat kemudahan dalam menerima informasi terkait donasi dan pemanfaatan dana yang terkumpul pada penggalangan dana yang telah dilakukan.
- Kriteria responden: untuk mengetahui target responden yang ditentukan untuk sesi wawancara usability testing.
- Daftar pertanyaan: untuk memberikan pertanyaan kepada responden sebelum memulai testing dengan pertanyaan pengalaman dan harapan responden saat melakukan donasi online.
- Research scenario: untuk skenario yang dilakukan saat usability testing dengan responden berdasarkan dua task, Melakukan Donasi hingga Transaksi dan Kabar Terbaru & Pencairan Dana, untuk testing alur dari prototype Figma yang telah ditentukan.
Sedangkan, Record Data menentukan apakah setiap alur proses dari kedua task dari research scenario sudah sesuai dengan kebutuhan pengguna atau belum menggunakan Single Ease Question (SEQ). SEQ ini menggunakan skala Likert dari 1 hingga 7, di mana 1 merupakan sangat tidak baik dan 7 sangat baik. Apabila tingkat SEQ telah melewati 5.5, maka alur proses desain yang dibuat sudah baik.
Tahap kedua adalah memilih calon responden berdasarkan user persona yang telah ditentukan oleh Kitabisa. Kitabisa memiliki 5 jenis user persona sebagai representasi pengguna dengan permasalahan dan ketentuan masing-masing. Syarat challenge Kitabisa ini adalah melakukan usability testing dengan cukup satu responden saja sehingga kami memilih satu dari lima user persona untuk memenuhi kriteria ini. Persona yang kami pilih adalah Activist, dan saya menemukan calon responden yang dapat memenuhi kriteria persona Activist ini. Selanjutnya saya mengabarkan kelompok saya dan kami menentukan janji temu dengan calon responden ini untuk melakukan wawancara usability testing.
Tahap ketiga adalah melakukan usability testing dengan responden pada waktu yang telah ditentukan. Kelompok saya menggunakan aplikasi Google Meet untuk melakukan wawancara dengan responden, di mana seluruh proses wawacara tersebut direkam. Jawaban dari responden dicatat di Record Data User Research. Untuk pembagian wawancaranya dengan kelompok, saya mendapatkan bagian research scenario. Proses wawancara dimulai dengan perkenalan diri dari kelompok saya dan responden. Responden kami berusia di rentang 26–30 tahun dan bekerja sebagai software engineer dan pernah melakukan donasi secara online. Responden juga menceritakan pengalamannya dalam melakukan donasi secara online tersebut, seperti seberapa sering melakukannya, kendala dalam mengakses, hingga harapan responden dari penerima dana setelah dana tersalurkan. Setelah selesai pada bagian daftar pertanyaan, sesi wawancara berlanjut ke bagian research scenario. Berikut merupakan tanggapan responden dari dua alur proses saat melakukan testing dengan prototype Figma:
TASK 1 — Melakukan Donasi hingga Transaksi
Pada TASK 1 ini, sebenarnya tidak ada perubahan dari alur yang sudah dari aplikasi Kitabisa itu sendiri. Namun agar proses wawancara dapat berjalan dengan lancar, kami tetap meminta responden untuk melakukan TASK 1 — Donasi dan melakukan Transaksi pada halaman utama dari prototype Kitabisa ini dan berhenti di halaman Home. Apa yang dilakukan responden lalu diobservasi sepanjang proses testing TASK 1 ini. Setelah sampai pada di halaman Home, saya menanyakan kendala dan apakah informasi pendaftaran sudah sesuai dengan kebutuhannya sebagai pengguna aplikasi tersebut. Responden menjawab bahwa ia tidak mengalami kendala dan dapat mengikuti alur tersebut dengan lancar. Terakhir, SEQ yang diberikan responden adalah 6 sehingga TASK 1 — Melakukan Donasi hingga Transaksi lulus.
TASK 2 — Kabar Terbaru & Pencairan Dana
Untuk TASK 2, responden diminta untuk masuk ke menu Inbox untuk melihat riwayat Galangan Dana yang pernah dilakukan dan memilih riwayat Galangan Dana yang sesuai dengan Galangan Dana pada TASK 1 hingga proses pemeriksaan informasi selesai, lalu berhenti di halaman Rincian Pencairan Dana. Seluruh proses yang dilakukan oleh responden kembali diobservasi penuh. Untuk alur proses ini, responden mengalami kendala dan memberikan masukan untuk beberapa hal berikut:
- Foto tidak diperlukan karena privasi.
- Menu Inbox perlu diubah karena kurang mudah untuk dipahami pengguna.
- Riwayat donasi keseluruhan tidak diperlukan karena pengguna bingung untuk melihat donasi apa yang tertera.
- Lebih detail pada tampilan rincian dana.
- Memberikan total dana terkini agar memberikan motivasi bagi pendonor.
Berikutnya untuk segi tampilan desain, menurut responden sudah memenuhi ekspektasi. Responden juga memberikan pilihannya dari dua desain halaman Cerita Penerima Dana yang akan saya tunjukkan setelahnya, di bagian Revisi Desain. Terakhir, SEQ yang diberikan responden adalah 5 sehingga TASK 2 — Kabar Terbaru & Pencairan Dana belum lulus.
Revisi Desain
Dikarenakan hanya alur proses TASK 2 — Kabar Terbaru & Pencairan Dana yang belum lulus berdasarkan SEQ dari responden usability testing, maka dilakukan revisi desain pada proses tersebut. Sedangkan, untuk alur proses TASK 1 — Melakukan Donasi hingga Transaksi tidak membutuhkan revisi dikarenakan proses tersebut sudah lulus berdasarkan SEQ. Selain itu, responden tidak memberikan feedback tambahan untuk direvisi.
Revisi TASK 2 — Kabar Terbaru & Pencairan Dana
Berdasarkan masukan dari responden, revisi desain utama dilakukan sebanyak tiga kali. Revisi pertama adalah melakukan iterasi dari halaman Inbox. Sebelum iterasi, riwayat donasi ditampilkan, namun menurut responden hal tersebut lebih membuat kebingungan. Setelah iterasi, bagian Riwayat Donasi dihapus dan langsung menjadi bagian Donasi Yang Anda Ikuti. Berikut merupakan perbandingan dari sebelum dan setelah revisi yang telah dilakukan:
Revisi kedua adalah untuk iterasi halaman Kabar Terbaru. Sebelum iterasi, responden memberikan masukan bahwa bagian Riwayat Donasimu ke Penggalangan Ini lebih baik apabila diubah menjadi seperti Riwayat Donasi pada halaman Inbox. Setelah iterasi kami mengubah desain fitur tersebut menjadi seperti yang di menu Inbox sebelum iterasi. Berikut merupakan perbandingan dari sebelum dan setelah revisi yang telah dilakukan:
Revisi ketiga adalah untuk halaman Detail Pencairan Dana. Sebelum iterasi, responden merasa detail pencairan dana tersebut tidak detail dan membutuhkan total dana terkini agar lebih memotivasikan pendonor. Setelah iterasi, halaman tersebut diberikan tambahan detail sesuai masukan responden, seperti terdapat total anggaran biaya dan detail-detail lainnya. Berikut merupakan perbandingan dari sebelum dan setelah revisi yang telah dilakukan:
Setelah melakukan tiga revisi desain utama tersebut, kami juga meminta responden untuk memilih tipe desain untuk halaman Cerita Penerima Dana. Kami membuat dua tipe desain, di mana desain pertama lebih memiliki nuansa warna putih dan desain kedua membuat bubble berwarna biru. Responden memilih tipe desain kedua. Berikut merupakan perbandingan dari kedua tipe desain tersebut:
Kesimpulan
Solusi desain untuk permasalahan halaman Berita yang kurang memiliki daya tarik pembaca telah dibuat dengan menggunakan proses Design Thinking, melalui usability testing dengan responden dan hasil iterasi dari feedback yang diberikan. Hal ini diharapkan dapat membuat pengalaman donasi pengguna lebih terikat secara emosional dan mampu meningkatkan tingkat retensi aplikasi Kitabisa. Solusi utama desain yang diberikan adalah:
- Fitur Kabar Terbaru dibagi menjadi 2 tabs dengan Pencairan Dana.
- Detail Kabar Terbaru dibuat menjadi threads agar tidak mudah bosan saat membaca.
- Detail Pencairan Dana yang lebih detail agar informasi tersampaikan dengan baik tanpa kesalahpahaman.
Hasil pengembangan desain halaman Berita Kitabisa ini sudah dikerjakan secara berkelompok melalui riset dan proses desain yang mendalam. Namun, kekurangan dari proses ini adalah kami hanya mengajak satu responden saat melakukan usability testing. Sehingga, menurut saya, untuk mengetahui lebih dalam apakah pengembangan desain ini sudah menjadi solusi tepat untuk permasalahannya diperlukan responden lebih banyak saat melakukan testing agar mendapatkan masukan lebih banyak pula.