UX Case Study — Redesign Fitur Berita Pada Aplikasi Kitabisa

9 min readNov 28, 2021

Proyek ini merupakan bagian dari Skilvul Internal Internship yang diadakan oleh Magang Bersama Kampus Merdeka dengan Skilvul dan Kitabisa sebagai Challenge Partner. Saya tidak bekerja atau terikat dalam kontrak professional oleh Kitabisa.

Latar Belakang

Pada saat ini, Kitabisa ingin melakukan redesign bahkan revamp atau perubahan untuk bagian “Berita” yang bisa kita temukan melalui menu Inbox di navigasi menu lalu lihat bagian Berita di sebelah bagian Pesan. Fitur ini merupakan cara Kitabisa untuk mendistribusikan informasi dari kampanye yang telah mereka donasi. Tidak hanya itu, informasi yang diberikan juga bisa berkaitan dengan kampanye sejenis sehingga pengguna bisa melakukan donasi ulang di kampanye lain.

Oleh karena itu, Kitabisa membutuhkan sebuah desain aplikasi yang bisa menghadirkan informasi atau berita terbaru mengenai kampanye kepada donatur sehingga pengalaman berdonasi mereka lebih terikat secara emosional dan meningkatkan tingkat retensi atau pengguna tetap yang menggunakan produk aplikasi Kitabisa.

Objektif

Pada bagian objektif ini dari Kitabisa untuk gambaran redesign aplikasi sebagai berikut:

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.

Peran Dalam Tim

Sebagai UX Designer yang berkolaborasi dengan 2 anggota tim, Dewiaastt dan Zajuli Taupiq Bisri pada bagian define stage, ideate stage, user flow, UI Styleguide, Wireframe, UI Design, Prototyping, dan User Research. Dalam tim ini, tanggung jawab saya adalah :

Mendefinisi poin — poin setiap permasalahan dari user.
Membuat kemungkinan yang akan dicapai dalam permasalahan user.
Membuat ide solusi yang akan dicapai.
Membuat diagram afinitas dan membagi secara berkelompok.
Membuat ide prioritas dari hal yang pertama dilakukan hingga selanjutnya.
Membuat crazy 8’s sebagai gambaran wireframe secara kasar.
Membuat user flow pesan.
Membuat tampilan wireframe halaman pesan.
Membuat tampilan UI Design donasi saya, berita, dan komentar.
Melakukan prototyping keseluruhan UI Design menggunakan figma.
Membuat list question pada User Research.
Melakukan wawancara dan mencatatat hasil feedback dari pengguna.

Sedangkan peran saya sebagai individu adalah membuat UX Case Study menggunakan medium.

Design Process

Dalam kasus ini kami memilih menggunakan metode Design Thinking sebagai pendekatan design process yang kami lakukan. Karena kami ingin memecahkan permasalahan terlebih dahulu dari user dan kemudian bisa disusun solusi nya per step-by-step.

1. Empathize

Tujuan dari tahap empathize adalah untuk membantu para desainer dalam mengetahui pandangan dan juga kebutuhan pengguna dengan melakukan penelitian sebelum mendefinisikan pernyataan masalah dan membuat ide. Pada tahap awal empathize, desainer diberikan gambaran tentang UX Challenge Test dimana tahap empathize telah dilakukan dan hasilnya sebagai berikut :

2. Define

Pada tahap define ini kami mendefinisikan permasalahan user dari hasil empathise sebelumnya dan lalu membuat How-Might We sebagai peluang yang akan dicapai, setelah itu melakukan voting untuk menentukan hasil dari How-Might We.

Pain Points

How-Might We

Dan hasil dari How-Might We yang disepakati adalah sebagai berikut :

Meningkatkan semangat donatur untuk terus melakukan kebaikan pada platform Kitabisa.
Menyediakan fitur feedback antar donatur dengan donasi.
Membuat tampilan tambahan dengan user friendly.
Menampilkan update donasi setelah dana donasi ditarik.

3. Ideate

Pada tahap ideate kami melakukan pembuatan brainstorming ide berdasarkan How-Might We, melakukan brainstorming ide solusi yang akan diberikan kepada user, dan setelah itu membuat gambaran kasar (wireframe) dengan Crazy-8’s.

Solution Idea

Dan khirnya kami mendapatkan 14 ide solusi untuk platform ini.

Affinity Diagram

Setelah membuat ide solusi, selanjutnya ide tersebut dibagi dalam beberapa kelompok seperti keterangan & judul, fitur update, fiture reward, fitur feedback, tampilan, dan fitur berita.

Prioritization Idea

Setelah membuat affinity diagram lalu kami membagi kedalam ide prioritas yang dimana ada 4 kelompok yaitu Yes, Do It Now, Do Next, Do Last, dan Later sesuai dengan user value yang ingin dicapai dan terbagi seperti gambar yang ada diatas.

Crazy 8's

Selanjutnya setelah melakukan prioritization idea kami melakukan pembuatan Crazy 8’s yaitu pembuatan wireframe secara kasar menggunakan kertas A4 yang dibagi 8 kemudian membuat 8 frame dalam waktu 8 menit.

4. Prototyping

Pada tahap prototyping itu mendesain interface dari hasil Crazy 8’s, lalu menyusun UI menjadi sebuah flow, membuat proses yang sesuai dengan ide solusi, selanjutnya membuat prototype yang dapat digunakan untuk melakukan percobaan redesign aplikasi kitabisa.

User Flow

User flow adalah diagram langkah — langkah yang harus dilakukan user untuk menyelesaikan sebuah task. Pembuatan user flow menggunakan FigJam.

Wireframe

Pada tahap pembuatan wireframe yaitu sebuah layout dalam versi Low-fidelity (Lo-Fi) yang membantu para desainer dalam mempresentasikan informasi dalam interface, memberikan outline struktur dan layout interface, dan mempercepat proses ideation. Disini saya menggunakan figma dalam pembuatan wireframe nya.

UI Styleguide

UI Styleguide ini memiliki fungsi untuk memudahkan pembuatan UI Design yang menjadikan desain tersebut konsisten dalam segi pewarnaan dan penempatan.

UI Design

Setelah membuat User Flow, Wireframe, dan UI Styleguide kemudian diimpelentasikan ke dalam UI Design untuk memaksimalkan usability dan user experience pada sebuah tampilan software.

Prototype

Prototype

Setelah membuat UI Design selanjutnya membuat prototype untuk mencoba dan mensimulasikan solusi desain yang telah dibuat secara maksimal. Dan prototype yang digunakan adalah digital prototype yang dibuat dari mockup
UI, dari segi aspek visual sudah merepresentasikan tampilan aslinya, dan berfungsi untuk mendapatkan feedback user pada aspek usability. Dan pembuatan prototype ini menggunakan Figma dengan frame iPhone X.

5. Testing

Pada tahapan testing ini, kami melakukan user research dan meminta salah satu responden untuk mencoba dan memberikan saran ataupun masukan dari prototype yang sudah dibuat sebelumnya.

[17] - Kelompok [07] - Usability Testing

Edit description

drive.google.com

Nama Aplikasi : Kitabisa

Metode Research : In-Depth Interview & Usability Testing

Tanggal Research : 22 Oktober 2021

Research Objective

Mencari tahu kebutuhan pengguna dalam berdonasi secara online
Mencari tahu tingkat keberhasilan dari SEQ untuk aplikasi Kitabisa
Mencari tahu apakah aplikasi Kitabisa sudah sesuai dengan fungsinya.

Respondent Criteria

Berusia 25–35 tahun.
Pekerjaan semua kalangan.
Berdomisili di seluruh wilayah Indonesia.
Memiliki keinginan untuk berdonasi.
Menggunakan bahasa Indonesia sebagai bahasa asli.
Pernah menggunakan aplikasi donasi online.

List of Questions

Memperkenalkan diri Anda terdiri dari nama, pekerjaan, usia, dan domisili.
Selama Anda bekerja, apakah Anda pernah menyempatkan untuk berdonasi di luar jam kerja? Mengapa?
Media donasi apa yang Anda gunakan? Kotak amal atau Aplikasi Donasi? Mengapa?
Menurut Anda, seberapa penting berdonasi bagi Anda? Mengapa?
Organisasi apa yang pernah Anda donasikan? Mengapa?
Apakah Anda pernah menggunakan aplikasi donasi online untuk melakukan donasi kepada yang membutuhkan?
Biasanya berapa donasi yang Anda keluarkan? Mengapa?
Apakah Anda suka berbincang dengan para donatur lain? Mengapa?
Lebih baik mana antara mengikuti donasi offline atau donasi online melalui aplikasi?
Lebih baik mana antara mengikuti donasi online melalui aplikasi atau donasi online melalui website?
Apakah menurut Anda penting dalam aplikasi donasi terdapat banyak link ajakan untuk berdonasi?
Bagaimana jika dalam aplikasi donasi memiliki fitur berita dengan pilihan berita utama dan berita umum?
Apakah lebih baik berita tidak perlu dipisah-pisah dan cukup menjadi satu-kesatuan?
Apakah sebagai user Anda akan merasa nyaman jika banyak notifikasi berita yang akan Anda terima?
Apakah Anda akan membaca notifikasi yang tertampil pada ponsel Anda?
Mengapa demikian?
Jika terdapat notifikasi berupa apresiasi kepada Anda yang telah melakukan donasi, apakah Anda merasa benar-benar dia presiasi?
Apakah sebaiknya aplikasi donasi terdapat kolom komentar pada masing-masing berita/notifikasi
Apakah Anda akan senang jika dapat membagikan pengalaman berdonasi Anda?
Seberapa penting menurut Anda jika aplikasi donasi memberikan apresiasi baik kepada Anda maupun donatur lain?
Menurut Anda, apakah user harus memiliki target untuk dapat menikmati fitur yang lebih lengkap?
Desain seperti apa yang Anda sukai?

Research Scenario

Berikan salam saat bertemu dengan responden.
Perkenalkan diri dan jelaskan maksud tujuan kegiatan yang akan dilakukan.
Jelaskan alur proses kegiatan dari awal sampai akhir.
Meminta responden untuk memperkenalkan diri mulai dari Nama, Pekerjaan, dan Domisili.
Melakukan wawancara berdasarkan Question List.
Menjelaskan singkat tentang aplikasi Kitabisa.
Memberikan link Figma kepada responden dan minta responden untuk Share Screen.
Menjelaskan singkat tentang apa yang harus dilakukan dan cara mengoperasikan Figma Prototype oleh responden.
[TASK 1] Meminta pengguna untuk masuk ke bagian dalam aplikasi (berhenti di halaman Donasi Saya ) dan observasi apa yang dilakukan oleh responden.
Tanyakan apakah ada kendala?
Apakah informasi dibagian Donasi Saya sudah sesuai dengan kebutuhan pengguna? Mengapa?
[TASK 2] Meminta pengguna untuk masuk ke bagian dalam aplikasi (berhenti di halaman Inbox ( bagian Berita) ) dan observasi apa yang dilakukan oleh responden.
Tanyakan apakah ada kendala?
Apakah informasi dibagian Berita sudah sesuai dengan kebutuhan pengguna? Mengapa?
[TASK 3] Meminta pengguna untuk memilih berita dari kampanye yang pernah donasikan dan minta untuk melakukan ke langkah selanjutnya (berhenti di halaman Detail Berita) dan observasi apa yang dilakukan oleh responden.
Tanyakan apakah ada kendala?
Untuk button tampilan apakah dapat membantu pengguna dalam berinteraksi?
Apakah informasi yang ditampilkan sudah memenuhi kebutuhan?
[TASK 4] Meminta pengguna untuk melihat halaman Komentar dan observasi apa yang dilakukan oleh responden.
Tanyakan apakah ada kendala?
Apakah informasi yang ditampilkan apakah sudah sesuai dengan kebutuhan pengguna?
[TASK 5] Meminta pengguna untuk melihat halaman Nominal Donasi dan Metode Pembayaran dan observasi apa yang dilakukan oleh responden.
Tanyakan apakah ada kendala?
Apakah informasi yang ditampilkan apakah sudah sesuai dengan kebutuhan pengguna? Mengapa?
[TASK 6] Meminta pengguna untuk melihat halaman Notifikasi Umum dan Utama (berhenti di halaman Popup) lalu observasi apa yang dilakukan oleh responden.
Tanyakan apakah ada kendala?
Apakah informasi yang ditampilkan apakah sudah sesuai dengan kebutuhan pengguna? Mengapa?
Menanyakan tingkat kegunaan, kemudahan dan kepuasan dari responden setiap menyelesaikan alur Pendaftaran, Pencarian Kursus, dan Pembayaran dengan skala Likert.
Menanyakan tentang tingkat Single Ease Question kepada responden.
Penutup dan sampaikan terima kasih.

Berikut hasil sesuai dengan Single Ease Question (SEQ) :

Kesimpulan

Dari testing tersebut responden memberikan nilai sesuai dengan Single Ease Question(SEQ) adalah 7 dari skala 1 sampai 7 yang berarti PASSED, kecuali pada task 3 responden memberikan 6 dari skala 1 sampai 7 dan berarti PASSED, dan berikut masukan yang diberikan oleh responden :

Tidak perlu adanya notifikasi apresiasi karena menurut responden yang terpenting adalah niat user melakukan donasi dan donasi yang dilakukan sampai ke tangan yang dituju.
Pada detail berita bisa diperhatikan detail prototypenya agar bisa sesuai dengan alur yang seharusnya.
Design yang dibuat harus general untuk segala usia karena pengguna aplikasi Kitabisa mencakup general user.
Dengan mengajak user untuk melakukan donasi kembali dengan ada di fitur donasi saya dan pada notifikasi sangat baik untuk mengajak user melakukan donasi kembali.
Semua fitur yang dilakukan secara keseluruhan berjalan dengan baik dan sesuai dengan kebutuhan pengguna.

Dari tahap awal hingga akhir kami mengharapkan dari hasil ini bisa dapat memecahkan permasalahan user dan dalam lingkup keseluruhan bisa menggunakan Kitabisa sebagai salah satu media aplikasi donasi online yang digunakan oleh seluruh jangkauan masyarakat. Dan juga bisa menarik banyak pengguna yang ingin berinteraksi dengan donatur yang lain untuk berbagi didalam aplikasi Kitabisa.

Rekomendasi Selanjutnya

Dari ada masukan yang diberikan oleh responden kami bisa memperbaiki, meningkatkan, dan mengembangkan aplikasi Kitabisa menjadi lebih baik kedepannya.

Sekian hasil dari UX Case Study kami. Mohon maaf apabila ada kekurangan dalam penulisan UX Case Study ini dan kritik juga masukan sangat kami butuhkan untuk meningkatkan UX Case Study ini menjadi lebih baik.
Terima kasih.