UX Case Study : reDesign Inbox KitaBisa
Hi! kali ini kita akan berbagi pengalaman proses flow re-design Inbox Aplikasi KitaBisa yang saya kerjakan bersama tim, Kak Rahma dan Kak Zul.Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul dan KitaBisa sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh KitaBisa.
Semoga studi kasus ini bisa menjadi pembelajaran bagi kita semua mulai dari proses awal sampai kesimpulan testing User Interface.
Tim Project UIX-19- Kelompok 4
Anggota tim yang termasuk dalam project ini sebagai berikut :
- Amalia Azizah R (Saya) sebagai UX Researcher dan UI Designer.
- Rahma Maulidya sebagai UX Researcher dan UI Designer.
- Zulfikri sebagai UX Researcher dan UI Designer.
Aplikasi Pendukung
Adapun aplikasi yang kami gunakan selama mengerjakan project ini mulai dari brainstorming hingga testing adalah zoom dan Figma.
Zoom
Play Store : https://play.google.com/store/apps/details?id=us.zoom.videomeetings&hl=en&gl=US
Apps Store : https://apps.apple.com/id/app/zoom-cloud-meetings/id546505307
Figma
Note: Aplikasi Figma dipilih untuk mengerjakan project karena dinilai mudah tanpa perlu menginstal software karena hanya membutuhkan laptop/ipad/tab dan jaringan internet. Kekurangannya, jika jaringan internet bermasalah atau lemah, project akan terganggu.
Tentang KITA BISA
KitaBisa merupakan suatu platform online yang bergerak di bidang amal untuk menghubungkan para donatur dan penerima donasi. Bukan hanya donasi saja melainkan bisa untuk zakat, sedekah, wakaf serta penggalangan dana juga termasuk dalam program yang dijembatani KitaBisa.
Bagi para donatur, tidak perlu khawatir, KitaBisa merupakan platform galang dana dan donasi terpercaya no 1 di Indonesia sejak 2013. KitaBisa juga memiliki ijin dan legalitas untuk menjalankan semua kegiatan penggalangan dana yang diawasi Kementrian Hukum dan HAM , Kementrian Sosial, KomInfo, dan BAZNAZ.
Challenge ini dibuat dalam rangka memberikan pelayanan dan performa terbaik bagi para calon donatur, donatur maupun penggalang dana agar lebih mudah mengakses laporan progres donasi yang terdapat di inbox.
REQUEST FITUR CHALLENGE
Ada beberapa rekomendasi fitur yang diinginkan tim KitaBisa dalam design inbox terbaru, diantaranya :
- Info pembaharuan kampanye lebih mudah diakses serta isinya lebih komunikatif sehingga dapat membuat user lebih dekat secara emosional antara donatur dan penerima donasi.
- Mendorong donatur untuk donasi kembali di kampanye yang sudah pernah dilakukan ataupun kampanye baru.
UX WORKFLOW
Adapun lamanya pengerjaan dari awal hingga akhir adalah selama 9 hari dengan skema seperti berikut ini.
METHODE - DESIGN THINKING
Ada berbagai macam metode yang bisa kamu gunakan untuk mencari masalah sampai menemukan solusi sebagai panduan membuat UX Design seperti Lean UX, Design Sprint Methode, atau Design Thinking. Saya pribadi jujur, baru belajar mengenai UI/UX Design dan mendapat panduan dari tim skillvul serta mentor menggunakan metode design thinking.
Apa itu Design Thinking?
Melansir dari Interactive Design Foundation ,
Design thinking is a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test.
Kalau kita terjemahkan ke dalam Bahasa Indonesia, Design Thinking merupakan proses iteratif non-linier yang digunakan tim untuk memahami pengguna, menantang asumsi, mendefinisikan kembali masalah, dan menciptakan solusi inovatif untuk prototipe dan pengujian.
Bisa dibilang juga Design Thinking merupakan proses perumusan dan pemecahan masalah dengan fokus pada manusia sebagai pengguna.
Nah, design thinking ini diprakarsai oleh Founder IDEO (agen konsultan desain dengan latar belakang desain produk berbasis inovasi) yaitu David Kelley dan Tim Brown.
Ada 5 tahapan dalam design thinking, yaitu :
1. Empathize
Di stage emphatize, kita harus memahami pengguna untuk menemukan kendala dan masalah serta sudut pandang lain. Bagaimana cara memahami pengguna?
Ada beberapa cara untuk memahami pengguna, diantaranya :
- Assume a beginner’s mindset
- What? How? Why?
- User camera study
- Interview (for empathy)
- Extreme users
- Analogous empathy
- Story share-and-capture
- Bodystorming
Karena terbatas waktu, tim kami melakukan emphatize dengan mengeksplor sendiri sebagai user dengan metode Assume a beginner’s mindset.
2. Define
Stage Define merupakan proses untuk merekam semua temuan permasalahan yang kita temukan setelah mengeksplor aplikasi KitaBisa. Agar lebih terstruktur, kami menyusun define ini dalam beberapa tahapan diantaranya, pain points dan how-might we yang kami buat bersama tim di website figma- FigJam File.
Pain points merupakan masalah, kekurangan atau kendala yang kami temukan selama melakukan eksplorasi di tahap empathize. Berikut masalah atau kendala yang tim kami temukan saat mengekplorasi aplikasi KitaBisa khususnya bagian Inbox yang berisi berita.
Semua kumpulan pain points tersebut selanjutnya akan dicarikan solusi pada proses How-Might We.
Berikut solusi dari setiap pain points.
Setelah mengumpulkan solusi dari pain points, setiap peserta dalam tim melakukan voting dimana masing-masing tim memiliki hak suara 5 vote.
Pada saat voting, semua peserta harus lebih objektif untuk menentukan rangka awal pengembangan ideate. Dari hasil voting, How-Might We yang selanjutkan akan dikembangkan yaitu :
- Tampilan laporan donasi yang lebih mudah.
- Tampilan Informasi yang lebih rinci mengenai progres donasi.
- Kemudahan mengakses donasi ulang.
3. Ideate
Hasil voting How-Might We akan memberikan arahan yang lebih spesifik untuk mengembangkan ide. Dari hasil temuan tersebut, setiap solusi dikembangkan kembali lebih terperinci menjadi suatu ide. Untuk menjabarkan ide itu sendiri, maka kami membuat flow Stage Ideate yang terdiri dari :
A. Solution Idea
Seperti yang bisa kita lihat, Solution Idea tersebut merupakan jabaran masing-masing hasil How-Might We yang sudah dipilih.
Agar setiap solusi yang sudah dibuat di solution idea tersebut menjadi lebih terstruktur, langkah selanjutnya adalah mengelompokkan setiap solusi berdasarkan fungsinya masing-masing dalam affinity diagram.
B. Affinity Diagram
Affinity diagram sendiri merupakan diagram yang berisi susunan sesuatu yang dikelompokkan berdasarkan kepentingan.
Dari hasil solution Idea yang sudah dibuat, kelompok kami sendiri mengelompokkan solusi di affinity diagram berdasarkan pembaharuan fitur, improvement aplikasi serta improvement pada landing page.
Selesai dikelompokkan berdasarkan kepentingan yang sama, selanjutnya akan difokuskan di Prioritization Idea.
C, Prioritization Idea
Sebelumnya dalam affinity diagram sudah dikelompokkan berdasarkan kepentingan yang sama. Namun, ide inti yang lebih singkat, padat dan jelas belum tergambarkan secara nyata. Oleh karena itu, semua solusi di affinity diagram perlu dikelompokkan lagi berdasarkan skala prioritas dalam prioritization idea.
Mengapa harus disusun berdasarkan prioritas?
Karena, dengan menyusun solusi/ide berdasarkan skala prioritas akan mempermudah designer untuk lebih fokus pada hal terpenting yang ingin dicapai. Yang menjadi hal terpenting di challenge ini adalah fitu laporan berita (progres donasi dan donasi ulang)
Setelah disusun berdasarkan skala prioritas, terdapat kesimpulan yang membantu kita untuk membuat sketsa wireframe Crazy 8’s.
Apa kesimpulan yang menjad dasar pembuatan wireframe Crazy 8's?
- Section khusus progres donasi di Home.
- Tampilan progres donasi dalam bentuk foto/video dengan tambahan narasi singkat, padat, dan jelas di caption.
- Fitur laporan keuangan yang simpel dan interaktif.
- Tambahan tombol donasi lagi ke kampanye yang pernah dilakukan ataupun kampanye baru.
Crazy 8's sendiri merupakan metode brainstorming design untuk memberikan gambaran serta mengumpulkan ide dalam waktu yang singkat. Masing-masing peserta dalam kelompok harus mengambil bagian agar bisa mendapatkan ide sebanyak-banyaknya.
Crazy 8’s juga dibuat sebagai kerangka awal sebelum membuat wireframe di aplikasi.
Alat yang digunakan juga mudah ditemukan seperti alat tulis (pensil/pulpen/spidol)dan kertas HVS.
Langkah pembuatan Crazy 8’s :
- Lipat kertas HVS menjadi 8 bagian.
- Gambar setiap bagian dengan durasi masing-masing bagian 20 detik.
- Setiap akan pindah bagian, istirahat dulu 20 detik.
- Setelah masing-masing peserta dalam kelompok selesai menggambar crazy 8’s, persentasikan ide masing-masing berdasarkan crazy 8’s yang dibuat.
Crazy 8’s yang sudah dibuat masing-masing anggota tim kemudian dikembangkan menjadi wireframe yang lebih rapi.
Wireframe adalah kerangka kasar (low fidelity) untuk menata suatu item pada halaman website/tampilan aplikasi. Aplikasi yang digunakan adalah Figma- Design File.
Berikut wireframe yang kami buat berdasarkan tampilan crazy 8’s masing-masing.
Dari masing-masing wireframe, kami sepakat untuk menyatukan hal-hal penting dari setiap wireframe sehingga bisa saling melengkapi. Hal tersebut berdasarkan diskusi yang mengacu pada fokus challenge dan skala prioritas ide yaitu progres donasi serta donasi ulang.
4. Prototype
Prototype merupakan fase eksperimental yang memberikan gambaran secara high-fidelity. Ada 4 tahap untuk membuat prototype yakni:
A. Membuat User Flow
Setelah selesai menggabungkan wireframe, langkah selanjutnya sebelum membuat prototype adalah membuat user flow untuk mengetahui bagaimana pengguna nantinya akan menjalankan task sesuai kebutuhan.
Pembuatan User Flow juga akan mempermudah UI Designer dalam merancang frame di proses UI Design agar lebih terstruktur. Aplikasi yang digunakan untuk membuat user flow adalah Figma-FigJam.
B. Membuat Design System
Langkah selanjutnya sebelum membuat prototype UI Design adalah membuat Design System terlebih dahulu sebagai pegangan untuk membuat design. Design system ini penting agar design yang kita gunakan konsisten dan menjadi ciri khas serta mempermudah kerja designer jika membutuhkan komponen yang sama di frame selanjutnya.
Beberapa hal yang harus ada di design system :
- Color pallet.
- Typography.
- Button style yang dijadikan variant.
- Input Field.
- Tabbing.
- Icon.
- Navigation Bar.
- Status Bar.
- Master Component.
- etc
Untuk KitaBisa sendiri sudah memiliki design system sehingga mempermudah pengembang lain jika akan bekerjasama dengan KitaBisa.
Berikut Design System yang kelompok kami buat berdasarkan panduan KitaBisa Product Language.
C. Membuat UI Design
Ketika Design System yang kita kerjakan sudah selesai, tahap selanjutnya yakni membuat UI Design berdasarkan User Flow. Kami menggunakan aplikasi Figma-DesignFile.
UI Design dibuat dengan panduan Design System yang sebelumnya telah dibuat. Setiap frame dikerjakan serapih mungkin dengan mempertimbangkan jarak margin agar konsisten.
Sebelum lanjut membuat prototype, ada baiknya untuk mengevaluasi UI design dan tahapan User Flow agar ketika lanjut ke fase pembuatan prototype tidak ada design ulang atau tambah design. Dengan demikian pengerjaannya akan jadi lebih efisien dan efektif.
D. Membuat skema Prototype
Setelah semuanya lengkap, tahap selanjutnya adalah membuat prototype. Berikut prototype yang kami buat.
Setelah selesai membuat prototype, evaluasi kembali oleh seluruh tim sebelum melakukan testing ke Responden. Berikut re-design inbox KitaBisa yang tim kami kerjakan.
Untuk lebih jelasnya, berikut perbandingan design inbox aplikasi KitaBisa saat ini dan re-design inbox yang kami kerjakan.
Tampilan Inbox KitaBisa saat ini :
Tampilan Re-Design Inbox KitaBisa :
Berdasarkan hasil Prioritization Idea di stage Ideate, berikut improvement re-design yang kami buat.
- Home : Section khusus progres donasi.
Improve progres donasi di Landing page home diharapkan dapat mengingatkan donatur kembali terkait donasi yang pernah dilakukan.
Selain itu, progres donasi di home juga bisa membantu donatur untuk melihat berita jika ada pembaharuan inormasi atau laporan keuangan donasi yang telah dilakukan.
Kedepannya, dengan adanya section progres donasi di home bisa membuat donatur melakukan donasi ulang di kampanye yang sama.
- Tampilan Progres Donasi di Inbox Lebih Menarik.
Tampilan progres donasi yang tergabung dalam laporan berita kami improve dalam bentuk foto/video dengan tambahan narasi singkat, padat, dan jelas di caption agar lebih mempermudah donatur melihat keseluruhan progres.
Ada dua pilihan bagi donatur ketika melihat inbox :
- Berdonasi kembali dengan meng-klik tombol donasi lagi yang akan langsung diteruskan ke jumlah donasi hingga selesai pembayaran.
- Sedangkan, jika donatur ingin mengetahui lebih jelas tentang progresnya, donatur bisa melihatnya di laporan berita dengan meng-klik gambar program donasi yang ingin dilihat lebih detail.
- Improvement Fitur laporan keuangan di Laporan Berita.
Frame Laporan Berita ini merupakan salah satu fitur terbaru yang kami coba design dimana isiny terkait informasi yang dibutuhkan donatur yang lebih detail. Seperti informasi Progres Donasi Umum, Informasi Penggalang Dana, dan Info Kabar Terbaru (berisi laporan keuangan serta berita terbaru lainnya tentang donasi ini dengan foto/video).
- Improvement Fitur Tombol donasi lagi dan fitur tambahan.
Improvement lain yang kami tambahkan juga di frame Laporan Berita adalah fitur info riwayat donasi donatur, tombol donasi ulang, tombol donasi ke kampanye lain dan tombol untuk share ajakan donasi.
Dengan adanya fitur baru tersebut diharapkan dapat lebih mempermudah banyak orang untuk melakukan dan menyebarkan kebaikan.
5. Test
Stage terakhir dari Design Thinking adalah testing. Testing ini dilakukan sebelum launching untuk digunakan public. Fungsi dari testing sendiri adalah untuk mengevaluasi kelayakan project yang sudah dikerjakan apakah sudah sesuai dengan keinginan pengguna. Dari hasil testing kita bisa mengetahui jika masih terdapat kekurangan. Sehingga, saat launching nanti sudah merupakan project sempurna.
Metode yang Kami gunakan adalah In Depth-Intrview dan Usability Testing.
In Depth-Interview adalah teknik wawancara mendalam yang dilakukan langsung oleh UX Research dan User secara langsung untuk menggali informasi sedalam mungkin.
Usability Testing merupakan metode yang digunakan untuk tes kelayakan apakah design yang dibuat sudah cukup mudah bagi user untuk menggunakan produk.
Agar In Depth- Interview dan Usability Testing berjalan dengan baik dan efektif, perlu ada rencana atau panduan. Oleh karena itu, ada dua hal yang harus kita siapkan sebelumnya.
Apa saja yang harus disiapkan?
A. Membuat Stimulus User Research
Stimulus User Research merupakan panduan atau langkah-langkah apa saja yang harus kita lakukan. Mulai dari saat akan interview, testing, sampai akhir interview.
Berikut contoh panduan membuat Stimulus User Researcher : https://docs.google.com/document/d/16ganEOaC3Tcnn9cHL4KI-3OSIOukSeUnodry3Adl2Rg/edit
B. Membuat Record Data User
Record Data User merupakan kegiatan mendokumentasikan hasil wawancara agar lebih mudah jika ada yang harus dievaluasi.
Berikut contoh panduan membuat Record Data User :https://docs.google.com/spreadsheets/d/1cLTKEg6y_6pBdEbd49-U1hbImFj4CGO1N4gRX3w9mqA/edit
C. Interview User
Setelah selesai membuat Stimulus Research dan Record Data User , waktunya melakukan wawancara user. Kami memilih user berdasarkan kriteria yang sudah dibuat sebelumnya di stimulus user. Kriteria tersebut diantaranya:
- Berusia 18–55 tahun.
- Pekerjaan sebagai karyawan/karyawati pada instansi apapun.
- Berdomisili di seluruh wilayah Indonesia.
- Memiliki kemampuan Bahasa Indonesia sebagai native language.
Dari hasil penyaringan Kriteria User, berikut satu user yang kami interview.
User Persona
D. Usability Metric
Salah satu cara mengukur aplikasi yang kita buat sudah esuaiatau belum bagi user, banyak metode pengukuran yang dapat dipilih. Tim kami memilih metode pengukuran Single Ease Question (SEQ) yang metode penilaian berdasarkan kemudahan suatu aplikasi secara keseluruhan.
Adapun skala tersebut bernilai 1 -7 dimana nilai 1 berarti sangat sulit dan nilai 7 berarti sangat mudah.
KESIMPULAN
Dari hasil Design Thinking yang kami lakukan selama mengerjakan project dan hasil wawancara hingga testing, berikut kesimpulannya.
- Hasil Interview Pertanyaan Umum Single Ease Question
- Hasil interview pertanyaan selama dan setelah Arin melakukan Usability Testing KitaBisa yang ada dan re-design inbox KitaBisa yang kami buat.
Berdasarkan hasil interview serta testing prototype dengan menggunakan metode In Depth-Interview disimpulkan bahwa:
Dari yang dapat kami rangkum, Arin merasakan berbagai kemudahan yang tersedia pada fitur Kitabisa yang sudah kita presentasikan (baik yang Existing maupun yang New Design), lebih kurangnya aplikasi ini tidak menyulitkan user dalam mengakses laman aplikasi tersebut. Baik untuk melihat progress donasi, informasi donasi, juga untuk melakukan Donasi Ulang (pada Kitabisa new design).
Berdasarkan Usability testing, penilaian Arin terhadap redesign yang kami buat menurut skala Single Ease Question :
Menurut Arin, redesign dari aplikasi inbox KitaBisa yang kami buat mempermudah Arin untuk memantau hingga melakukan donasi ulang, baik donasi di kampanye yang sudah pernah dilakukan ataupun kampanye baru. Arin juga merasa terbantu dengan adanya fitur tambahan share jika ia ingin membagikan atau menyebarkan kebaikan kepada yang lain.
Penutup
Demikian UX Case Study ReDesign Inbox Aplikasi KitaBisa yang telah kelompok kami lakukan. Project ini masih bisa lebih disempurnakan kembali kedepannya. Semoga UX Case Study ini memiliki manfaat bagi semua. Terima kasih untuk teman kelompok satu tim Kak Rahma dan Ka Zul yang sudah bekerjasama dengan baik sehingga project challenge ini dapat terselesaikan dengan baik dan tentunya terima kasih banyak untuk Allah S.W.T atas ilmunya. Saran dan kritik yang bermanfaat tentu terbuka.
