Kitabisa Inbox Tab Redesign | UI/UX Case Study

Introduction

Hi everyone, I’m Redho, a Visual Designer, and now I’m currently in the last stage of the UI/UX Design Mastery Program held by Skilvul. This case study is a final project to complete the program and I choose Kitabisa as the challenge partner.

About This Study Case

Kitabisa has a feature called “Kabar Terbaru” which provides updates on donations made by their donors. The goals of this feature are:

  1. Provide donors an easier access to campaign updates. this will allow donors to get more emotionally involved to campaigns they had contributed to
  2. Encourage donors to make donations back to a campaign to which donors have been donated or other campaigns related to the previous campaign

Because the current design doesn't deliver its goals, therefore, Kitabisa needs a new “Kabar Terbaru” interface design that can bring the latest information or news about the campaign to the donors so donor donation experience is more emotionally attached and increases the retention rate of regular users who are using the KitaBisa application product.

Redesign Objective

To support the general goals of this redesign and directly solve Kitabisa’s problems, based on our user research and usability testing, which I will explain later, we proposed the new design which contains seven main changes,

  1. Add support for video format for delivering the latest information or news about the campaign
  2. Redesign the text-based latest information or news card
  3. Create a new disbursement of fund page
  4. Add information about their total donation to the campaign
  5. Add the CTA (call-to-action) button to donate again at the same campaign inside the latest news/update page
  6. Give access to the donor’s donation history to the campaign
  7. Add disturbing content filter

The Roles

In this program, we are expected to work together in a team. I worked alongside my teammates Eksanto, Andre Mohammad Fadillah, & Muhammad Iqbal Ramdhani in this collaboration redesign project. There is no specified job description in this team, so we work together in every step of the design process that we choose which is Design Thinking as a framework to guide us in this project.

User Persona

We use a direct user persona from Kitabisa which is The Activist.
Age 20–25 y.o
Work as an employee in a private company
Live in Jakarta Raya orBandung Raya
Single
Ever donated to any campaign with any cause especially in public facilitation and education cause

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.

Design Thinking

Part 1 — Empathize

In this phase, we conduct secondary research by reading Kitabisa’s Google Play Story review, especially the one-star rating review to collect any user pain points as much as possible here are the results,

Summarize user pain points

Part 2— Define

In this phase, we try to conclude all the users' pain points using the How-Might-We method to pinpoint where the problems are.

How-Might-We

Part 3— Ideate

After all the problems are pinpointed, we try to generate as many ideas as possible to address all of those points in the define phase.

All of our solution idea

Then we try to group it into some categories to make the UI development easier in further process, we use an affinity diagram as a framework to make it simpler in the grouping process.

4 categories of features

At the end of this ideate phase, we try to prioritize the features that should be moving forward in this project based on the effort to develop and the impact to solve the user pain points.

Prioritization Idea

As you can see, all the features in the affinity diagram based on our opinion and discussion should be brought forward because of their effort and impact, then we try to simulate the user steps in the form of task flow for every idea that we build.

Latest Video Flow
Latest News Update Flow
Disbursement of Fund Flow
Repeat Donation Flow
Donation History Flow
Sensitive Content Flow

Then we made the visual abstract that represents what it should look like in the prototyping phase, so we use the paper prototyping method with the limitation of 8 screens for every diagram or mostly known as Crazy 8.

The Crazy 8

When we finished making crazy 8, we create and visualize the idea into a low-fidelity mockup (wireframe).

Low-Fidelity Mockup

Part 5— Prototype

In this prototyping phase, we try to simulate user behavior towards our solution so we create user flow which is the high-fidelity mockups and live prototyping in Figma.

Latest Video Feature

Latest Video Feature Flow

Latest News Update

Latest News Update Flow

Disbursement of Fund Page

Disbursement of Fund Flow

Repeat Donation

Repeat Donation Flow

Donation History

Donation History Flow

Sensitive Content Filter

Sensitive Content Filter Flow

Live Prototype

Part 6— Testing

In this phase, we try to test our redesign project to the real users using moderated interview methodology. “this interview was conducted in Bahasa Indonesia, so all questions and answers are also written in Bahasa Indonesia.

Background Check & Behavioural Question

  1. Boleh perkenalkan diri dulu untuk memastikan apakah anda adalah user persona yang tepat untuk testing ini? Seperti nama, umur, domisili, dan pekerjaan saat ini.
  2. Pernah berdonasi secara rutin gak? Dan kalo iya mendingan offline apa online?
  3. Kalau misalkan offline biasanya ke lembaga apa? Apa kaya ke masjid gitu?
  4. Kalo online platform yang dipake apa?
  5. Punya anggaran yang anda sisihkan (bisa perbulan atau perminggu) untuk didonasikan?
  6. Pernah mengalami masalah dalam pengelamanmu berdonasi gak?
  7. Menurut kamu, kewajiban apa yang harusnya dijalankan oleh lembaga penerima donasimu?
  8. Lebih suka berdonasi dimana saja tanpa preferensi tertentu, atau cuma berdonasi di satu lembaga atau satu cause saja?
  9. Pernah nyoba donasi di Kitabisa?
  10. Pernah ada kendala saat berdonasi di Kitabisa?
  11. Apakah anda mengetahui tentang fitur inbox di Kitabisa? Dan apa kegunaan dari fitur tersebut?
  12. Apakah anda pernah mencoba mengakses fitur inbox tersebut?
  13. 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)

  1. Tanyakan apakah ada kendala?
  2. Apakah dengan format vidio membantu anda untuk secara cepat mengetahui apa update dari kampanye tersebut? Mengapa demikian?

Flow 2 (Latest News Update)

  1. Tanyakan apakah ada kendala?
  2. Apakah informasi pada kabar terbaru sudah sesuai dengan kebutuhan pengguna? Mengapa?
  3. Ada perasaan tertentu kah saat membaca kabar terbaru kampanye tersebut?
  4. Apakah dengan mengetahui update tersebut dari satu kampanye membuat anda merasa mengetahui bahwa uang yang anda donasikan benar-benar digunakan untuk kebaikan?
  5. 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)

  1. Tanyakan apakah ada kendala?
  2. Apakah fitur ini sesuai dengan kebutuhan kamu?
  3. Apakah fitur riwayat pencairan dana membantu kamu untuk mengetahui secara detil kemana uang disumbangkan?
  4. Apakah dengan adanya fitur ini dapat meningkatkan kepercayaan kamu terhadap penggalangan dana yang dilakukan?

Flow 4 (Repeat Donation & Donation History)

  1. Tanyakan apakah ada kendala?
  2. Apakah fitur berdonasi ulang pada halaman kabar terbaru sesuai dengan apa yang anda butuhkan?
  3. Apakah fitur histori pada halaman kabar terbaru sesuai dengan apa yang anda butuhkan?
  4. Apakah dengan mengetahui anda bisa melakukan donasi ulang pada halaman tersebut meningkatkan keinginan anda untuk berdonasi pada kampanye tersebut?
  5. Apakah fitur histori donasi anda pada satu kampanye ini membantu anda mengetahui berapa konstribusi anda pada kampanye tersebut?

Flow 5 (Sensitive Content Filter)

  1. Tanyakan apakah ada kendala?
  2. Apakah konten seperti itu benar-benar menganggu untuk anda?
  3. Apakah dengan adanya fitur filter konten menggangu membantu anda untuk membuat keputusan apakah tetap dilanjutkan atau tidaknya? Mengapa?
  4. Apakah dengan adanya filter ini membuat anda menjadi tidak iba/prihatin pada kampanye tersebut?

User’s Answers to Background Check & Behavioural Question

User 1

  1. Nama: Salma
    Domisili: Kota Bandung
    Pekerjaan: Admin sosmed
  2. Pernah melakukan donasi, lebih sering offline, karena lebih sering tidak terencana (implusif)
  3. Tidak ada spesifik ke lembaga manapun, lebih sering random secara implusif
  4. Secara online lebih sering menggunakan kitabisa, karena lebih terpercaya dibanding transfer ke rekening langsung
  5. Memiliki anggaran untuk donasi (100rb- 200rb Rupiah/ bulan), tidak terencana misal per minggu berapa banyaknya
  6. Offiline/online : kurang percaya dengan lembaga penggalang dana, memiliki trust issue apakah donasinya disalurkan dengan sesuai atau tidak
  7. Wajib memberi laporan penyaluran dana, bukti penyaluran dana
  8. Pendidikan, Kesehatan, Binatang terlantar, contoh kucing
    Sudah pernah berdonasi di kitabisa
  9. Tidak ada kendala
  10. Pernah lihat fitur inbox
  11. Fungsi untuk mengabarkan kabar follow-up donasi, notifikasi donasi sejenis
  12. Belum mencoba
  13. Pernah, karena cukup mengganggu user saat menggunakan aplikasi

User 2

  1. Nama Febrina tinggal di Jakarta, kerja di BCA sebagai IT
  2. Iya rutin, selalu online sih untuk donasi sekarang2 ini karena lebih praktis
  3. Pernah offline, biasanya ke lembaga zakat atau yatim
  4. Kitabisa
  5. Ada anggaran khusus untuk donasi
  6. Tidak ada kendala sampai saat ini
  7. Ingin mengetahui uang yang didonasikan digunakan untuk apa
  8. “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”
  9. Pernah
  10. Tidak ada kendala sampai saat ini
  11. Pernah mengakses, kegunaannya memunculkan rekomendasi penggalangan dana berdasarkan penggalanan dana yang sudah didonasi
  12. Pernah
  13. 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)

  1. Tidak ada kendala
  2. No comment
  3. No comment
  4. No comment

Flow 2 (Latest News Update)

  1. Tidak ada kendala
  2. Iya masalah trust issue nya bisa terselesaikan
  3. Dengan adanya gambar yang dikelompokan dapat membantu untuk mendapatkan informasi secara sekilas dari update penggalangan dana
  4. Informasi yang diberikan sudah cukup men-cover data yang dibutuhkan
  5. 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)

  1. Tidak ada kendala
  2. Memudahkan untuk menambah donasi ketika merasa donasi yang diberikan kurang
  3. Menu history dapat memberikan informasi riwayat berdonasi pada penggalangan dana yang sudah dipilih. cukup penting karena pada tampilan sebelumnya hanya ditampilkan total donasinya.
  4. Mendorong untuk melakukan donasi ulang
  5. Membantu sekali

Flow 5 (Sensitive Content Filter)

  1. Tidak ada kendala
  2. Saya akan merasa terggangu konten sensitif. Fitur ini membantu memberikan warning ketika ingin mengakses gambar sensitif
  3. Saya tetap lanjut berdonasi.
  4. Karena konten sensitif akan memberi dorongan bagi saya untuk melakukan donasi
  5. Filter ini tidak mengurangi iba/prihatin

User 2 (SEQ Points: 6.5 — Passed)

Flow 1 (Latest Video Feature)

  1. Tidak ada kendala
  2. Cukup terbantu kadang memang lagi males membaca jadi format vidio/visual sangat membantu
  3. Apa vidionya cuma 5? mungkin bisa dibuat halaman untuk bisa mengakses vidio vidio terlama diluar 5 terbaru
  4. Memang diutamakan untuk melihat vidio? Kalau diutamakan memang vidio maka design ini sudah sesuai

Flow 2 (Latest News Update)

  1. Tidak ada kendala
  2. Sudah cukup memenuhi kebutuhan informasi dari update penggalangan dana yang dilakukan
  3. ikut merasa bahagia ketika melihat aktifitas yang di update di kabar berita
  4. Bisa mengetahui dana yang didonasikan benar-benar digunakan untuk aktifitas donasi yang terkait
  5. Dengan adanya pengelompokan gambar ini merasa lebih tertarik

Flow 3 (Disbursement of Fund Page)

  1. Tidak ada kendala
  2. Sudah cukup sesuai akan tetapi kalau bisa total dana yang dicairkan sudah ditampilkan di depan sebelum pengguna mengakses detailnya
  3. Menggambarkan kemana uang digunakan oleh penggalang dana
  4. Kalo bisa ada gambarnya, seperti bukti pencairannya itu

Flow 4 (Repeat Donation & Donation History)

  1. Tidak ada kendala
  2. Sudah cukup sesuai tetapi pengguna membutuhkan juga informasi mengenaik sudah berapa banyak donasi terkumpul
  3. secara detail riwayat sudah cukup menggambarkan informasi yang dibutuhkan,
  4. akan lebih tertarik apabila ada parameter yang menggambarkan sudah berapa banyak donasi yang sudah terkumpul
  5. kalo bisa di detail riwayat transaksi ada total dari donasi yang diberikan juga
  6. kalau bisa ditambahkan jam donasinya karena terkadang ada orang berdonasi pada hari yang sama
  7. di bagian nominal yang ada tanda positif sepertinya terlihat kurang tepat karena seharusnya pasti ada tombol negatif sekali

Flow 5 (Sensitive Content Filter)

  1. Tidak ada kendala
  2. Cukup mengganggu
  3. Lebih memilih untuk menekan tombol lanjut karena button lanjut itu primary
  4. Untuk perasaan iba, walaupun ada filternya rasa iba akan tetap ada

Handling Feedback

Based on feedback from both users we redesign some of the UI to meet their needs and wants, the version of the redesign is linked below,

Redesign Version of Detail News Page

Side-by-Side Design Comparison

Conclusion

Based on both interviews we can conclude that both goals that we stated in the beginning of this case study 1) Provide and make it easier for donors to find information about campaign updates. This will allow donors to get emotionally attached to the campaign that has been donated 2) Encourage donors to make donations back to a campaign to which donors have been donated or other campaigns related to the previous campaign, can be fullfilled with our 5 new features (video, redesign news card, sensitive content filter, repeat donation, donor donation history, and campaign reimbursement page details) with proven 7 and 6.5 SEQ points for respective users.

But we understand that this idea needs to be polished further with a lot of feedback for many users and keep users as the centered in this ideation.

Thank you for reading this case study and we hope this case study could benefit all stakeholders involved around Kitabisa.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store