Introduction
Hello, my name is Redho and I am a Visual Designer. I am currently in the final stage of the UI/UX Design Mastery Program offered by Skilvul. This case study is my final project for the program and I have chosen Kitabisa as a study case for this challenge.
About This Study Case
Kitabisa has a feature called “Kabar Terbaru” which is intended to provide updates on donations made by donors. The goals of this feature are to:
- Make it easier for donors to access campaign updates, thus increasing their emotional involvement with the campaigns they have contributed to
- Encourage donors to make additional donations to campaigns they have previously supported, or related campaigns.
However, the current design of “Kabar Terbaru” doesn’t achieve these goals effectively. As a result, Kitabisa needs a new design for the interface that will bring the latest information or news about the campaign to the donors, and increase the retention rate of regular users who are using the KitaBisa application product.
Redesign Objective
To achieve the general goals of the redesign and address Kitabisa’s specific issues, we proposed a new design that includes seven main changes, based on user research and usability testing. These changes include:
- Adding support for video format for delivering the latest information or news about the campaign
- Redesigning the text-based latest information or news card
- Creating a new disbursement of fund page
- Adding information about the total donations to the campaign
- Adding a CTA (call-to-action) button for re-donating to the same campaign on the latest news/update page
- Giving donors access to their donation history for the campaign
- Adding a disturbing content filter
My Team-mates
In this program, our team was expected to work collaboratively. My teammates were Eksanto, Andre Mohammad Fadillah, and Muhammad Iqbal Ramdhani. In this redesign project, there were no specific job roles assigned, so we worked together in every step of the design process, using the Design Thinking framework as our guide.
User Persona
We used a direct user persona from Kitabisa, named “The Activist” as our target user. The Activist is:
- Between 20–25 years old
- Employed in a private company
- Resides in the Jabodetabek or Bandung Raya area
- Single
- Has a history of donating to campaigns, with a particular interest in public facilitation and education causes.
Our Design Process
Any process needs a framework, so we choose design thinking because that’s what we learned for the past 3 months, in this section I will explain this case study within this framework.
Part 1 — Empathize
In this phase, we conducted secondary research by reading Kitabisa’s one-star rating reviews on Google Play Store to gather as much user pain points as possible. Here are the findings.
Part 2— Define
In this phase, we aimed to identify all the users’ pain points by using the How-Might-We method to pinpoint the specific areas of concern.
Part 3— Ideate
After identifying all the problems, we attempted to generate as many ideas as possible to address them in the rest of design process.
We then grouped the ideas into categories to make the UI development easier in the next phase. We used an affinity diagram as a framework to simplify the grouping process.
At the end of the ideate phase, we attempted to prioritize the features to be developed in this project based on the effort required for development and their impact on solving user pain points.
As you can see, all the features in the affinity diagram, based on our opinion and discussion, should be developed due to their effort and impact. We then attempted to simulate the user’s steps in the form of task flow for each idea we proposed.
We then created visual abstracts that represented what the design should look like in the prototyping phase. To do this, we used the paper prototyping method, which is commonly referred to as “Crazy 8” and is limited to 8 screens per diagram.
After completing the Crazy 8, we created low-fidelity mockups (wireframes) to visualize the ideas.
Part 5— Prototype
In this prototyping phase, we attempted to simulate user behavior towards our solution. We created user flow, which included high-fidelity mockups and live prototyping using Figma.
Latest Video Feature
Latest News Update
Disbursement of Fund Page
Repeat Donation
Donation History
Sensitive Content Filter
Live Prototype
Part 6— Testing
In this phase, we attempted to test our redesign project with real users using moderated interview methodology. The interview was conducted in Bahasa Indonesia, so all questions and answers were also written in Bahasa Indonesia.
Background Check & Behavioural Question
- Boleh perkenalkan diri dulu untuk memastikan apakah anda adalah user persona yang tepat untuk testing ini? Seperti nama, umur, domisili, dan pekerjaan saat ini.
- Pernah berdonasi secara rutin gak? Dan kalo iya mendingan offline apa online?
- Kalau misalkan offline biasanya ke lembaga apa? Apa kaya ke masjid gitu?
- Kalo online platform yang dipake apa?
- Punya anggaran yang anda sisihkan (bisa perbulan atau perminggu) untuk didonasikan?
- Pernah mengalami masalah dalam pengelamanmu berdonasi gak?
- Menurut kamu, kewajiban apa yang harusnya dijalankan oleh lembaga penerima donasimu?
- Lebih suka berdonasi dimana saja tanpa preferensi tertentu, atau cuma berdonasi di satu lembaga atau satu cause saja?
- Pernah nyoba donasi di Kitabisa?
- Pernah ada kendala saat berdonasi di Kitabisa?
- Apakah anda mengetahui tentang fitur inbox di Kitabisa? Dan apa kegunaan dari fitur tersebut?
- Apakah anda pernah mencoba mengakses fitur inbox tersebut?
- Apakah anda pernah bermasalah dengan konten-konten sensitif? Seperti gambar atau vidio atas penyakit tertentu?
The Flows Testing & Observatory Question
Flow 1 (Latest Video Feature)
- Tanyakan apakah ada kendala?
- Apakah dengan format vidio membantu anda untuk secara cepat mengetahui apa update dari kampanye tersebut? Mengapa demikian?
Flow 2 (Latest News Update)
- Tanyakan apakah ada kendala?
- Apakah informasi pada kabar terbaru sudah sesuai dengan kebutuhan pengguna? Mengapa?
- Ada perasaan tertentu kah saat membaca kabar terbaru kampanye tersebut?
- Apakah dengan mengetahui update tersebut dari satu kampanye membuat anda merasa mengetahui bahwa uang yang anda donasikan benar-benar digunakan untuk kebaikan?
- Apakah gambar yang di letakan secara berkelompok dibawah kabar terbaru membantu anda untuk memahami secara sekilas apa isi kabar tersebut?
Flow 3 (Disbursement of Fund Page)
- Tanyakan apakah ada kendala?
- Apakah fitur ini sesuai dengan kebutuhan kamu?
- Apakah fitur riwayat pencairan dana membantu kamu untuk mengetahui secara detil kemana uang disumbangkan?
- Apakah dengan adanya fitur ini dapat meningkatkan kepercayaan kamu terhadap penggalangan dana yang dilakukan?
Flow 4 (Repeat Donation & Donation History)
- Tanyakan apakah ada kendala?
- Apakah fitur berdonasi ulang pada halaman kabar terbaru sesuai dengan apa yang anda butuhkan?
- Apakah fitur histori pada halaman kabar terbaru sesuai dengan apa yang anda butuhkan?
- Apakah dengan mengetahui anda bisa melakukan donasi ulang pada halaman tersebut meningkatkan keinginan anda untuk berdonasi pada kampanye tersebut?
- Apakah fitur histori donasi anda pada satu kampanye ini membantu anda mengetahui berapa konstribusi anda pada kampanye tersebut?
Flow 5 (Sensitive Content Filter)
- Tanyakan apakah ada kendala?
- Apakah konten seperti itu benar-benar menganggu untuk anda?
- Apakah dengan adanya fitur filter konten menggangu membantu anda untuk membuat keputusan apakah tetap dilanjutkan atau tidaknya? Mengapa?
- Apakah dengan adanya filter ini membuat anda menjadi tidak iba/prihatin pada kampanye tersebut?
User’s Answers to Background Check & Behavioural Question
User 1
- Nama: Salma
Domisili: Kota Bandung
Pekerjaan: Admin sosmed - Pernah melakukan donasi, lebih sering offline, karena lebih sering tidak terencana (implusif)
- Tidak ada spesifik ke lembaga manapun, lebih sering random secara implusif
- Secara online lebih sering menggunakan kitabisa, karena lebih terpercaya dibanding transfer ke rekening langsung
- Memiliki anggaran untuk donasi (100rb- 200rb Rupiah/ bulan), tidak terencana misal per minggu berapa banyaknya
- Offiline/online : kurang percaya dengan lembaga penggalang dana, memiliki trust issue apakah donasinya disalurkan dengan sesuai atau tidak
- Wajib memberi laporan penyaluran dana, bukti penyaluran dana
- Pendidikan, Kesehatan, Binatang terlantar, contoh kucing
Sudah pernah berdonasi di kitabisa - Tidak ada kendala
- Pernah lihat fitur inbox
- Fungsi untuk mengabarkan kabar follow-up donasi, notifikasi donasi sejenis
- Belum mencoba
- Pernah, karena cukup mengganggu user saat menggunakan aplikasi
User 2
- Nama Febrina tinggal di Jakarta, kerja di BCA sebagai IT
- Iya rutin, selalu online sih untuk donasi sekarang2 ini karena lebih praktis
- Pernah offline, biasanya ke lembaga zakat atau yatim
- Kitabisa
- Ada anggaran khusus untuk donasi
- Tidak ada kendala sampai saat ini
- Ingin mengetahui uang yang didonasikan digunakan untuk apa
- “Lebih sering berdonasi ke lembaga keagamaan dan di aplikasi kitabisa,
ketika menggunakan aplikasi kitabisa terkadang secara random memilih poenggalangan dana, lebih memilih donasi yang donasinya masih sedikit” - Pernah
- Tidak ada kendala sampai saat ini
- Pernah mengakses, kegunaannya memunculkan rekomendasi penggalangan dana berdasarkan penggalanan dana yang sudah didonasi
- Pernah
- Pernah, agak mengganggu dan seram, kalo diblur mungkin bisa lebih baik
User’s Answers & Feedback to The Flows Testing
User 1 (SEQ Points: 7 — Passed)
Flow 1 (Latest Video Feature)
- Tidak ada kendala
- No comment
- No comment
- No comment
Flow 2 (Latest News Update)
- Tidak ada kendala
- Iya masalah trust issue nya bisa terselesaikan
- Dengan adanya gambar yang dikelompokan dapat membantu untuk mendapatkan informasi secara sekilas dari update penggalangan dana
- Informasi yang diberikan sudah cukup men-cover data yang dibutuhkan
- Masukannya gambar yang ada di berita dapat dizoomTanyakan apakah ada kendala?
Flow 3 (Disbursement of Fund Page)
Not yet questioned, because this flow was feedback from user 1
Flow 4 (Repeat Donation & Donation History)
- Tidak ada kendala
- Memudahkan untuk menambah donasi ketika merasa donasi yang diberikan kurang
- Menu history dapat memberikan informasi riwayat berdonasi pada penggalangan dana yang sudah dipilih. cukup penting karena pada tampilan sebelumnya hanya ditampilkan total donasinya.
- Mendorong untuk melakukan donasi ulang
- Membantu sekali
Flow 5 (Sensitive Content Filter)
- Tidak ada kendala
- Saya akan merasa terggangu konten sensitif. Fitur ini membantu memberikan warning ketika ingin mengakses gambar sensitif
- Saya tetap lanjut berdonasi.
- Karena konten sensitif akan memberi dorongan bagi saya untuk melakukan donasi
- Filter ini tidak mengurangi iba/prihatin
User 2 (SEQ Points: 6.5 — Passed)
Flow 1 (Latest Video Feature)
- Tidak ada kendala
- Cukup terbantu kadang memang lagi males membaca jadi format vidio/visual sangat membantu
- Apa vidionya cuma 5? mungkin bisa dibuat halaman untuk bisa mengakses vidio vidio terlama diluar 5 terbaru
- Memang diutamakan untuk melihat vidio? Kalau diutamakan memang vidio maka design ini sudah sesuai
Flow 2 (Latest News Update)
- Tidak ada kendala
- Sudah cukup memenuhi kebutuhan informasi dari update penggalangan dana yang dilakukan
- ikut merasa bahagia ketika melihat aktifitas yang di update di kabar berita
- Bisa mengetahui dana yang didonasikan benar-benar digunakan untuk aktifitas donasi yang terkait
- Dengan adanya pengelompokan gambar ini merasa lebih tertarik
Flow 3 (Disbursement of Fund Page)
- Tidak ada kendala
- Sudah cukup sesuai akan tetapi kalau bisa total dana yang dicairkan sudah ditampilkan di depan sebelum pengguna mengakses detailnya
- Menggambarkan kemana uang digunakan oleh penggalang dana
- Kalo bisa ada gambarnya, seperti bukti pencairannya itu
Flow 4 (Repeat Donation & Donation History)
- Tidak ada kendala
- Sudah cukup sesuai tetapi pengguna membutuhkan juga informasi mengenaik sudah berapa banyak donasi terkumpul
- secara detail riwayat sudah cukup menggambarkan informasi yang dibutuhkan,
- akan lebih tertarik apabila ada parameter yang menggambarkan sudah berapa banyak donasi yang sudah terkumpul
- kalo bisa di detail riwayat transaksi ada total dari donasi yang diberikan juga
- kalau bisa ditambahkan jam donasinya karena terkadang ada orang berdonasi pada hari yang sama
- di bagian nominal yang ada tanda positif sepertinya terlihat kurang tepat karena seharusnya pasti ada tombol negatif sekali
Flow 5 (Sensitive Content Filter)
- Tidak ada kendala
- Cukup mengganggu
- Lebih memilih untuk menekan tombol lanjut karena button lanjut itu primary
- Untuk perasaan iba, walaupun ada filternya rasa iba akan tetap ada
Handling Feedback
Based on feedback from the users, we redesigned some of the UI to better meet their needs and wants. The updated version of the redesign can be found below.
Side-by-Side Design Comparison
Conclusion
Based on the interviews, we can conclude that our redesign has successfully fulfilled the goals we set out at the beginning of this case study, which were:
- To provide an easier way for donors to find information about campaign updates, which will allow them to become more emotionally invested in the campaigns they have donated to.
- To encourage donors to make donations back to campaigns they have previously supported or related campaigns. This was achieved through the implementation of 5 new features such as video format, redesign of the news card, sensitive content filter, repeat donation, donor donation history, and campaign reimbursement page details. The redesign received a SEQ score of 7 and 6.5 for the respective users.
We understand that this idea needs further refinement through feedback from a larger pool of users and that keeping the users at the center of the ideation process is crucial.
Thank you for reading this case study and we hope it will be beneficial for all stakeholders involved with Kitabisa.
