UI/UX Case Study — Kitabisa.com Inbox Berita Improvements

Latar Belakang

Kitabisa.com adalah platform untuk menggalang dana dan berdonasi secara online atau dikenal dengan platform donation-based crowdfunding. Saat ini Kitabisa merupakan platform terpercaya nomor 1 di Indonesia, dengan memfasilitasi 1,5 juta transaksi donasi setiap bulannya dan lebih dari 100.000 galang dana.

Improvements dan re-design ini kami buat sebagai bahan pembelajaran, khususnya bagi saya untuk lebih peka terhadap setiap proses yang tentunya kurang menarik atau dirasa tidak nyaman oleh pengguna dalam sebuah aplikasi.

⚠️ Disclaimer: Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul dan Kitabisa.com sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Kitabisa.com.

Objektif

Secara objektif ada beberapa tujuan improvements yang akan kami lakukan, diantaranya:

• Menyediakan dan mempermudah menemukan informasi mengenai pembaharuan kampanye yang akan membuat para donatur dapat terlibat secara emosional dengan kampanye yang telah didonasikan
• Mendorong donatur untuk melakukan donasi kembali ke kampanye yang telah dibantu atau kampanye lainnya yang berhubungan dengan kampanye sebelumnya

Peran Dalam Tim

Sebagai UI/UX Designer yang berkolaborasi dengan mas Bayu Alpiansyah. Dalam tim ini, saya bertanggung jawab:

1. Membuat UI/UX Design
2. Membuat Stimulus User Research

Design Process

Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan, karena design thinking mampu memecahkan sebuah masalah dengan praktis dan kreatif, serta memiliki fokus utama pada users atau pengguna.

Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success. ~ Tim Brown, IDEO.

1 — Empathize

Dalam tahap ini kami melakukan analisa dan pengamatan langsung terhadap aplikasi kitabisa.com

2 — Define

Pada tahap Define ada 2 hal yang kami lakukan, yang pertama adalah mencari Paint Points, yaitu mendefinisikan permasalahan user dari hasil Empathize dan yang kedua adalah How Might We sebagai pertanyaan singkat untuk membuka jalan menuju brainstroming di tahap Ideate nanti.

— Pain Points

Dari gambar diatas dapat kami simpulkan beberapa hal yang menjadi pain points disini:

1. Donatur tidak tertarik untuk melakukan donasi kembali pada kampanye yang telah dibantu ataupun pada kampanye lainnya, dikarenakan di dalam menu Inbox Berita tidak ada tawaran untuk mempermudah & mempercepat melakukan donasi kembali pada kampanye yang telah dibantu ataupun pada kampanye lainnya.
2. Design Timeline kabar terbaru dari kampanye yang telah dibantu kurang menarik, pengguna tidak dapat melihat dengan jelas kapan penggalang dana melakukan pencairan dana dan mendistribusikan bantuan. Selain itu foto di dalam timeline terlihat menumpuk & tidak rapih.
3. Donatur kurang yakin dengan profil penggalang dana, karena tidak adanya profil yang menampilkan reputasi penggalang dana, seperti berapa pengikutnya dan berapa total dana yang sudah digalang.

— How Might We

Dari beberapa pain points di atas, kami mendapatkan beberapa kesimpulan untuk HMW yaitu:

1. Mendorong donatur agar konsisten dalam berdonasi
2. Mempermudah dan mempercepat akses untuk berdonasi
3. Menyajikan kabar terbaru dari donasi yg telah dibantu dengan tampilan yang lebih jelas dan menarik.

3 — Ideate

Selanjutnya masuk ke tahap Ideate, di tahap ini kami melakukan brainstroming untuk mendapatkan solusi dari permasalahan yang ada. Berikut ide-ide yang kami dapatkan:

1. Fitur “Donasi Lagi" pada halaman Inbox Berita berupa CTA button Donasi lagi, pada kampanye yang telah kita bantu.
2. Fitur “Donasi Cepat" pada halaman Inbox Berita berupa CTA button Donasi Cepat, pada kampanye yang belum pernah kita bantu, atau pada update kampanye dari penggalang dana yang diikuti pengguna.
3. Timeline kabar terbaru dari kampanye yang telah kita bantu dibuat lebih menarik dan jelas (kapan penggalang dana melakukan pencairan dana dan mendistribusikan bantuan).
4. Foto/Galeri di Timeline kabar terbaru dibuat dengan tampilan slider agar terlihat lebih rapih.
5. Dapat menampilkan halaman profil penggalang dana dengan detail jumlah pengikut dan total dana yang telah digalang selain itu tentunya dapat mengikuti profil penggalang dana agar mendapatkan setiap kampanye terbaru yang akan masuk ke halaman Inbox Berita.

Crazy’s 8

— Userflow

— Wireframe

4 — Prototyping

5 — Testing

Pada tahap testing kami menggunakan metode In-Depth Interview & Usability Testing.

— Research Scenario

1. Perkenalan
2. Sesi tanya jawab
3. Sesi Usability Testing

— User Persona

— Research Finding

— Usability Metrics

Dari hasil testing dapat kami simpulkan bahwa secara keseluruhan solusi desain yang kami buat sudah sangat baik sehingga mendapatkan score 6,8.

Kesimpulan

Akhirnya kita berada di bagian akhir. Alhamdulillah, secara keseluruhan proses improvement dan re-design ini berjalan dengan sangat baik. Kami berharap CTA button “Donasi Lagi” dan “Donasi Cepat” di Inbox Berita dapat menjadi solusi yang cepat dan praktis untuk menawarkan kembali donatur untuk berdonasi kembali pada kampanye yang telah dibantu atau kampanye yang lainnya.

Selain itu banyak ilmu yang dapat saya pelajari dari challenge ini, yang awalnya saya berfikir bahwa UI/UX itu hanya sebatas desain saja ternyata lebih dari itu. Banyak tantangan yang harus kami hadapi di setiap tahap pembelajarannya. Diluar ekspektasi saya bahwa kami dapat melewati semuanya dengan lancar.

Sekali lagi, improvements dan re-design ini kami lakukan sebagai bahan pembelajaran. Semoga solusi yang kami buat dapat bermanfaat khususnya bagi kami dan dapat menjadi masukkan bagi kitabisa.com.

Mohon maaf jika masih terdapat banyak kekurangan.

Rekomendasi Selanjutnya

Untuk rekomendasi selanjutnya ada beberapa minor pada solusi yang telah kami buat untuk diperbaiki dan disempurnakan lagi.