Melampaui Batas: Laman Berita Baru KitaBisa Memimpin Transformasi Informasi Sosia

Muhammad Rafi Shalahudin
8 min readNov 28, 2021

--

Latar belakang

Durasi: 1 Bulan

Metode: Secondary Research, Design Thinking

Aplikasi: Figma, Figjam, Zoom, Google Docs

Kitabisa merupakan salah satu platform crowdfunding (penggalangan dana) terbesar di Indonesia. Dalam penggunaan aplikasinya, user dapat menggunakan platform ini untuk melakukan penggalangan dengan berbagai tujuan. Sebagian besar tujuannya untuk kebutuhan medis. Selain itu, user juga bisa melakukan penggalangan untuk beberapa kategori seperti bencana alam, pendidikan, lingkungan, kegiatan sosial, kemanusiaan dan lainnya.

Kitabisa berdiri di Indonesia sejak 2013 dengan total lebih dari 6 juta orang telah berdonasi, 100.000 penggalang donasi mengadakan penggalangan dana, dan Kitabisa telah bekerja sama dengan 3.000 yayasan dan Lembaga Sosial serta memiliki 250 Program CSR / Brand / Perusahaan.

Definisi Masalah

Dalam riset yang dilakukan oleh Kitabisa melalui How might we Kitabisa, terdapat temuan bahwa ada beberapa fitur yang ingin dilakukan optimalisasi terkait dengan fitur berita di apps Kitabisa. Diharapkan melalui revamp aplikasi Kitabisa, aplikasi yang baru dapat dengan mudah menemukan informasi mengenai pembaruan kampanye yang dapat menarik para donatur untuk dapat terlibat secara emosional dengan campaign yang telah didonasikan.

Selain itu kami juga mempertimbangkan bahwa dalam upaya melibatkan donatur untuk terlibat secara emosional, perlu adanya transparansi terkait donasi yang sudah disalurkan akan disalurkan kemana nya dengan jelas sehingga donatur dapat melihat perkembangannya terus menerus melalui fitur berita yang telah disediakan. Kami juga berupaya untuk mengembangkan efektifitas dan efisiensi agar donatur dapat kembali berdonasi ketika mereka sudah pernah berdonasi ke salah satu penggalang.

Objektif

Dalam proses UI/UX Research dan Revamp ini, kami menyimpulkan ada beberapa hal yang kami coba gapai, yaitu

  1. Riset kebutuhan user dalam menggunakan Aplikasi Kitabisa.
  2. Riset motif penggunaan Fitur Berita pada user.
  3. Riset Consumer Behaviour pada pengguna Aplikasi Donasi.
  4. Mencari tahu tingkat keberhasilan dari SEQ untuk Fitur Berita pada aplikasi Kitabisa.
  5. Riset mengenai efisiensi dan efektivitas serta tingkat kepuasan ide yang ditawarkan pada alur proses Donasi dan Fitur laman Berita.

Peran

Dalam proses pengerjaan ini Saya bersama Kelompok Saya yaitu Jessica Elizabeth Kwee, Dionisius Chandra Irawan, Ismaya Krisdawati. Untuk pembagian kerja, kami semua saling melengkapi untuk bekerja sama dalam pengerjaan Design Thinking, User Flow, Wireframe, UI Style Guide, UI/UX Design, UI/UX Prototype, User Research. Namun untuk saya sendiri, saya lebih banyak mengerjakan pada bagian UI/UX Design, Prototype, dan juga User Research.

Design Process

Selama proses pembuatan Revamp UI Design Kitabisa, kelompok kami menggunakan metode design thinking untuk brainstorming sampai implementasi UI yang dibuat. Design thinking juga terbagi kedalam lima tahapan, yaitu tahapan pertama ada Emphatize, lalu dilanjutkan dengan Define, Ideate, Prototype dan juga Testing yang akan dijelaskan di paragraf selanjutnya.

Tahapan design thinking (confiespace.com)

1. Emphatize

Di dalam tahap ini, kami harus mengenal dan memahami dari kebutuhan pengguna dengan penelitian sebelum mendefinisikan problem statement secara langsung dengan metode secondary user research melalui tautan yang dapat diakses di sini Secondary User Research. Kami berupaya untuk mencari kompetitor yang setimpal dari aplikasi Kitabisa dan ditemukan beberapa kompetitor seperti campaign.com, wecare.id dan lainnya. Tahap ini menjadi awal yang dilakukan untuk mencari tahu kebutuhan dari target user, kami juga mulai berdiskusi dan melakukan pengamatan pada aplikasi Kitabisa sehingga kami dapat memahami apa yang dibutuhkan pengguna melalui tahapan ini.

2. Define

Dalam tahap define ini, setelah sebelumnya kami mengumpulkan sumber yang ada dari Secondary User Research sebelumnya, kami memutuskan untuk membuat pain points bersama tiga teman kelompok saya, lalu kami menghasilkan beberapa temuan terkait dengan penemuan fitur berita yang masih dapat kami optimalkan.

Setelah Pain Points kami kumpulkan, kami melihat bahwa permasalahan yang ada dalam aplikasi kitabisa lebih mengerucut karena kami melakukan klasterisasi permasalahan menjadi ceruk yang lebih kecil. Di tahap How-Might We, diambil permasalahan yang paling relevan dengan objektif dan permasalahan dari Kitabisa berdasarkan data yang ada. Sehingga dari pemilihan komponen tersebut kami melakukan brainstorming agar mendapatkan pilihan dan ide yang tepat.

Setelah selesai di tahap How Might We sebelumnya, kami melakukan pengelompokan untuk How Might We yang memiliki kemiripan dan kami menentukan poin How Might We yang mana yang akan diprioritaskan untuk revamp laman berita KitaBisa.

3. Ideate

Pada tahap ideate ini, kami mencoba untuk meramu solusi yang telah dibuat berdasarkan How Might We yang sudah ada sebelumnya. Masing-masing dari tim kami mencoba untuk mengusulkan ide yang muncul berdasarkan solusi yang ada di tahap sebelumnya. Dalam Ideate ini kami mencoba untuk membuat dua bahasan yaitu Affinity Diagram, untuk melakukan klasterisasi terkait ide ide yang ada, setelah Affinity Diagram selesai, kami mencoba untuk memasukan hasil dari Affinity Diagram kedalam Prioritization Idea yang ada.

Affinity Diagram

Dalam tahap Prioritization Idea, kami melakukan klasterisasi kembali berdasarkan fitur mana yang perlu kami kerjakan terlebih dahulu jika dilihat berdasarkan sudut pandang kesulitan dan juga urgensi fitur.

Setelah klasterisasi prioritas ide sudah diselesaikan, kami melakukan Crazy 8’s yang dipandu oleh mentor bersama di kelas. Kami membuat Crazy 8 berdasarkan ide Prioritas yang telah dibuat. Crazy 8’s kami berfokus pada pembuatan delapan gambar yang berbeda dalam delapan menit. Setiap anggota tim bebas untuk membuat ide gambar sebanyak mungkin, sehingga terkumpul 64 gambar frame yang dipilih berdasarkan voting.

4. Prototyping

Setelah kami selesai melakukan perancangan ide yang telah dikumpulkan, kami mencoba untuk melakukan implementasi terhadap ide yang telah kami buat kedalam beberapa tahap, untuk tahap yang pertama merupakan penyusunan Userflow yang kami buat mirip dengan apa yang diberikan oleh pihak Kitabisa.

Userflow

Userflow yang kami buat
Userflow yang disediakan oleh Kitabisa.

Dalam Userflow yang kami buat, kami berfikir untuk memperbaiki fitur berita sesuai dengan arahan dari presentasi Kitabisa. Pada menu inbox pengguna juga dapat menggunakan fitur Story atau Live Streaming yang bisa mengarahkan untuk melakukan donasi lagi, sementara donasi lagi menjadi hal yang berupaya untuk kami tekankan agar tujuan donasi ulang dapat tercapai.

Wireframe

Setelah melakukan perancangan Userflow, kami mencoba untuk membuat wireframe yang dikategorisasikan kedalam Medium Fidelity Frame. Berbeda sebelumnya dengan Crazy 8’s, frame ini mulai memperlihatkan peletakan dan asset yang akan dipakai, namun belum disertai dengan beberapa unsur penghias seperti gambar dan warna yang belum ada dalam Wireframe ini.

Setelah wireframe selesai kami garap, kami mencoba untuk membuat UI Styleguide mengikuti Kitabisa Product Language (KBPL) yang disediakan sebagai panduan elemen dalam perancangan UI Design.

UI Styleguide

Style guide adalah kumpulan elemen, rancangan visual grafis dan aturan yang dibuat sebelum pembuatan design product untuk memastikan desain produk konsisten, dan menyatu mulai dari proses perancangan sampai akhir.

Dalam proses perancangan UI Styleguidenya sendiri, kami mencoba untuk membuat dua jenis UI Styleguide, yaitu yang berbentuk Atom dan juga Molecule.

Dalam UI Styleguide Atom, kami mencoba untuk membuat palet warna primer, secondary color dan netral. Selain itu juga kami mencoba untuk membuat beberapa input field.

Sementara dalam UI Styleguide Molecule, kami mencoba untuk membuat hal yang lebih rinci dari Atom. Unsur yang dibuat meliputi header bar, tabbing, notification bar, action list dan lainnya.

UI Design

Setelah kami selesai membuat UI Styleguide, kami melakukan proses desain UI dengan memperbaiki laman Kitabisa bagian inbox dan berita sesuai dengan permasalahan awal.

Laman berita inbox di awal
Laman berita detail kampanye

Berikut merupakan beberapa desain dari UI Kitabisa yang baru. Dalam laman berita terbaru, ada beberapa fitur yang kami upayakan untuk revamp dan juga penambahan fitur agar donasi dapat lebih transparan.

Laman Inbox (Berita)
Laman Kabar Terbaru
Laman Rincian Kabar Terbaru
Fitur Baru Story

Prototyping

Untuk lebih jelasnya, kami berupaya untuk memperlihatkan prototype yang sudah kami buat untuk lebih jelasnya.

Prototype Kitabisa Apps

5. Testing

Dalam tahap testing ini, kami melakukan riset UI bersama Pria berumur 27 tahun yang memiliki profesi sebagai wirausaha bernama Rian Soleh. Harapan kami setelah melakukan testing ini, aplikasi yang kami revamp dapat terevaluasi baik secara desain maupun secara alur desain.

Dalam melakukan User Research ini, kami mencoba untuk melakukannya dengan metode in depth interview. Adapun kriteria responden kami berupa:

  1. Berusia 25–35 tahun
  2. Pekerjaan sebagai pelajar atau mahasiswa umum maupun karyawan/karyawati pada instansi apapun
  3. Berdomisili di seluruh wilayah Indonesia
  4. Memiliki kemampuan Bahasa Indonesia sebagai native language
  5. Pernah melakukan donasi pada platform apapun

Adapun hasil dari SEQ dalam UX Research ini pengguna memberikan nilai 6 pada skala 1–7. Penemuan kami mengenai usability metrics yang dilakukan dirangkum kedalam 2 poin dibawah ini:

Positif

  1. Pengguna dapat menyelesaikan tugas dengan cepat.
  2. Pengguna menikmati konsep dan desain UI.
  3. Pengguna menyukai konsep fitur video dan live streaming.
  4. Pengguna merasa transparansi alokasi dana sudah cukup baik.

Negatif

  1. Pengguna bingung saat mencoba menjalankan fitur story dan live streaming saat pertama kali.
  2. Pengguna menyarankan perubahan transisi pada metode pembayaran.
  3. Pengguna menyarankan untuk memikirkan storage jika fitur story dan live streaming diimplementasikan.

Berikut merupakan video proses user research yang dilakukan selama kurang lebih 40 menit pada hari Kamis, 25 November 2021 pukul 20.00:

Kesimpulan

Dalam proses pembuatan UI Revamp Kitabisa ini, kami mendapati bahwa desain yang ada dalam laman Inbox masih dapat kami optimalkan. Laman berita ini memiliki sumbangsih yang penting untuk menjadi pembaruan informasi penggalangan dana yang telah dilakukan untuk tercapainya transparansi dana yang disalurkan oleh penggalang dan juga menyentuh sisi emosional dari donatur untuk dapat berdonasi ulang. Kami berharap pengguna dapat menikmati alur aplikasi yang lebih jelas dan juga dimanjakan dengan desain UI yang baru, kami juga berharap pengguna dapat memanfaatkan fitur video dan live streaming agar dapat lebih melihat bagaimana proses dana digunakan dan terpacu untuk berdonasi ulang.

Referensi

https://medium.com/@pakzam/design-guidelines-ui-kit-tiket-com-74498f500d33#:~:text=Style%20guide%20adalah%20kumpulan%20elemen,dari%20proses%20perancangan%20sampai%20akhir.&text=Elemen%2Delemen%20dalam%20design%20guidelines%20bisa%20disebut%20dengan%20istilah%20UI%20Kit.

https://www.google.com/url?sa=i&url=https%3A%2F%2Fconfiespace.com%2Ftemukan-ide-brilian-dengan-design-thinking%2F&psig=AOvVaw0fnC2wFTJAuEGcUHOY8N4J&ust=1638198905896000&source=images&cd=vfe&ved=0CAwQjhxqFwoTCPDpodGsu_QCFQAAAAAdAAAAABAD

--

--