UI /UX Case Study-Kitabisa Revamp Challange Partner
⚠️ 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.
Introduction
Hallo temen-temen Mediumđź‘‹,
Kali ini aku mau share proses desain, aplikasi Kitabisa bersama mas Affan, mas Tam dan mas Adjie. Sedikit gambaran, aplikasi Kitabisa ini merupakan salah satu platfrom crowdfunding (penggalangan dana) terbesar di Indonesia, kamu bisa melakukan donasi maupun galang dana, dengan berbagai macam kategori seperti bencana alam, medis dll, yang tersedia di android, IOS dan website.
Tools yang kita pake: Figma, Gmeet, Google Doc, dan Google Spreadsheet.
Role
Dalam team ini, semua proses dilakukan bersama-sama dari awal research sampai testing, dan yang membedakan aku dengan anggota teamku yang lain adalah alhamdulillah, aku dipercaya menjadi ketua team ini🥳.
Objektif:
- Menyediakan dan mempermudah menemukan informasi mengenai pembaharuan kampanye. Hal ini 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.
Masalah:
Masalah yang ingin kami selesaikan dalam study case ini adalah membuat tampilan informasi berita menjadi lebih mudah ditemukan, dan memberikan rasa emosional sehingga donatur dapat melakukan donasi.
Design Process
#1 Empathize
Tujuan: Mencari tau pandangan dan kebutuhan dari target user.
Dalam tahapan ini kita melakukan Secondary Research, dengan melihat komentar penggunaan aplikasi Kitabisa dan aplikasi kompetitor di play store terkait kekurangan, kelebihan dan juga saran yang dirasa dapat dijadikan sebuah fitur yang berguna, selain itu kita juga mengumpulkan feedback dari apa yang kita rasakan ketika menggunakan aplikasi tersebut, yang hasilnya kita rundingkan untuk dijadikan bahan diskusi pada tahap selanjutnya.
#2 Define
Tujuan: Mendefinisikan masalah masalah user.
Pain points yang di dapatkan, dari pengguna aplikasi Kitabisa dan aplikasi penggalangan dana yang serupa.
Setelah pain points terkumpul kita bersama-sama melakukan seleksi terhadap masalah yang ada, dan dibuatnya How Might We, yang hasilnya dapat dilihat pada gambar di bawah:
#3 Ideate
Tujuan: Menciptakan ide dari masalah yang ada.
Pada tahapan ini kita melakukan brainstroming terkait permasalahan yang ada dengang dibuatnya Solusi dari How Might We, Affinity Diagram, Prioritization Idea, create Crazy 8’s dan membuat User Flow.
Setelah sebelumnya pada Affinity Diagram melakukan vote untuk ide apa yang akan diambil, pada tahap selanjutnya kita memprioritaskan ide berdasarkan User Value dan Effort yang hasilnya dapat dilihat pada gambar di bawah ini.
Setelah team kita sebelumnya telah menentukan prioritas pengerjaan, selanjutnya masing-masing anggota team, membuat sketsa sederhana (Crazy 8's) menggunakan kertas HVS yang dibagi menjadi 8 bagian, kita dituntut untuk mengeluarkan ide dan kreatifitas kita dalam merancang sebuah tampilan antarmuka, adapun hasil rancangan dari kelopok kami adalh sebagai berikut:
Setelah semuanya berhasil membuat sketsa antarmuka aplikasi, kita melakukan vote untuk desain terbaik, yang akan dilanjutkan pada tahap selanjutnya yaitu wireframing, namun sebelum itu pada akhir tahapan Ideate ini kita membuat User Flow yang dapat dilihat pada gamabar di bawah ini:
#4 Prototyping
Tujuan: membuat solusi berupa tampilan UI
Setelah sebelumnya pada Crazy 8’s membuat sketsa kasar dan melakukan voting untuk desain yang terbaik, pada tahapan selanjutnya kita membuat Lo-Fi Wireframe, agar mempercepat dalam memvalidasi ide/isi konten tanpa terganggu oleh tuntutan warna ataupun asset lainnya, yang pengerjaannya memakan waktu yang lama.
Sebelum membuat UI Design kita terlebih dahulu membuat UI Style Guide agar desain yang kita buat konsisten dan style yang kita buat, dapat disepakati bersama, untuk acuan style guidenya sendiri kita menggambil dokumentasi style guide aplikasi Kitabisa yang dapat kamu akses disini.
Dan yang ditunggu-tunggu, UI Design yang kami buat adalah seperti berikut:
Pada desain login kita menambahkan opsi untuk melewati tahapan login, sehingga pengguna bisa melihat terlebih dahulu konten yang ada di dalam aplikasi.
Pada tampilan home ini, kita menambahkan rekomendasi campaign terdekat berdasarkan lokasi pengguna, yang diharapkan pengguna bisa lebih peduli terhadap sekitar dan menumbuhkan rasa untuk berdonasi.
Pada tampilan berita yang sebelumnya terdapat pada navigasi inbox sekarang di pisah agar visibilitas berita lebih baik dan user dengan mudah memahami hal tersebut dikarenakan penempatan tombol berita sama halnya dengan feed yang biasa digunakan di media sosial, dan untuk pesan dipindahkan di bagian header dimana hal tersebut juga sering diterapkan oleh kebanyakan aplikasi media sosial sehingga diharapakan dengan perubahan desain ini user dapat dengan mudah beradaptasi dengan tampilan baru dan visibilitas berita yang berfungsi sebagai media informasi progres donasi, agar donatur dapat berdonasi kembali dapat tercapai.
Pada tampilan detail berita ini kami menambah progres donasi dan ditambahnya button CTA untuk donasi kembali.
Pada tampilan donasi ini kami memisahkan informasi donasi dan kabar terkait donasi(berita), agar pengguna lebih mudah dipahami dan untuk progres penyaluran donasipun dapat dengan mudah di akses/dilihat.
Untuk lebih detailnya, kamu bisa coba prototyping melalui link ini.
#5 Testing
Tujuan: Memvalidasi ide yang kita buat untuk di uji kepada user.
Setelah semua desain beres, kita melakukan pengujian desain yang kita buat dengan metode In Depth Interview, Single Ease Question dan System Usability Scale.
Adapun Research Objektifnya sebagai berikut:
- Mengetahui feedback terkait perubahan tampilan khususnya pada tampilan berita.
- Mencari tau kebiasaan pengguna dalam melakukan donasi, secara online.
- Mengetahui tingkat kemudahan menggunakan SEQ (Single Ease Question) dan Usability (kegunaan) menggunakan SUS (Sytem Usablity Scale).
Respondent Criteria:
- Jenis kelamin Pria dan Wanita.
- Berusia 25–35 tahun.
- Pekerjaan tidak spesifik.
- Berdomisili di seluruh wilayah Indonesia.
- Memiliki kemampuan Bahasa Indonesia sebagai native language.
- Memiliki tingkat pemahaman teknologi yang baik.
- Memiliki ketertarikan dalam melakukan donasi.
Point Penting Hasil In-Depth Interview
- Faktor yang mendorong seseorang untuk berdonasi adalah ada rasa ingin membantu (empati), sehingga bisa meringankan beban orang lain.
- Hal positif penggunaan donasi secara online: Bisa tau orang yang membutuhkan secara pasti, bisa tracking perkembangan donasi, lebih praktis karena bisa dimanapun dan kapanpun.
- Fitur rekomendasi berdasarkan kategori membantu user dalam menentukan pilhanya dalam berdonasi.
- Prioritas kategori terhadap sesuatu yang urgent itu sangat dibutuhkan.
- Lokasi terdekat tidak mempengaruhi seseorang untuk menjadikannya prioritas utama, dimana hal yang menjadi prioritas utamanya adalah urgensi dan valditas orang/organisasi yang menggalang dana.
- Tampilan navigasi berita yang baru, dapat menciptakan keterikatan emosi karena dapat mengingatkan terhadap tujuan awal yaitu berdonasi, dan penambahan icon love dan share juga membantu dalam mengikuti perkembangan berita dan juga bisa mengajak orang lain untuk melakukan donasi.
Hasil Testing
Hasil testing yang dilakukan kepada seorang desainer grafis, bernama Dela(27 tahun) kita mendapatkan dengan hasil seperti berikut:
Singgle Ease Question (SEQ) merupakan salah satu Post Task Questionnaire yang digunakan dalam menilai tingkat kemudahan pada suatu fitur produk berdasarkan pengalaman user dengan menggunakan satu pertanyaan saja. yaitu “Secara keseluruhan bagaimana tingkat kemudahan dalam task ini?” Penilaian yang digunakan yaitu dari skala 1 sampai 7, Nilai 1 untuk sangat sulit dan Nilai 7 untuk sangat mudah.
Nilai SEQ:
- Task 1 Daftar dan Login : 7 Passed
- Task 2 Mencari Kategori Donasi : 7 Passed
- Task 3 Menemukan Informasi Berita : 6 Passed
System Usability Scale (SUS) merupakan sebuah alat pengujian, untuk mengukur tingkat Usability (Kegunaan) suatu aplikasi, yang terdiri dari 10 pertanyaan. Setiap pertanyaan dijawab menggunakan skala likert 1–5.
Setiap pertanyaan dengan nomor ganjil maka perhitungannya adalah, jawaban responden-(dikurangi)1 dan apabila pertanyan dengan nomor genap, 5-(dikurangi) jawaban responden semua hasil dari pertanyaan 1 sampai dengan 10 di jumlahkan dan dikali dengan 2.5, dan hasilnya merupakan score dari SUS.
Hasil dari pengujian SUS di atas menunjukan bahwa desain yang kita buat dapat diterima dan sudah bagus sehingga kedepannya dapat di implementasikan.
Conclusion
Kesimpulan dari proses desain ini apabila dilihat dari hasil pengujian sementara ini, hasilnya sudah baik atau layak untuk di lanjutkan ke proses develop, namun sebelumnya untuk memastikan memiliki nilai kemudahan dan kegunaan yang lebih valid, di rekomendasikan untuk melakukan pengujian kembali dengan menambah 4 orang responden, sehingga dengan 5 responden nantinya dapat mewakili atau setidaknya memilki tingkat validitas lebih tinggi. Dan untuk kedepanya bisa melakukan koreksi kembali terhadap desain berdasarkan temuan dari User Research.
Terimkasih udah baca sampe akhir, kalo ada pertanyaan atau mau cari referensi desain punyaku bisa lihat disini yaa, Instagram, Dribble, Behance, see-u guys…
