Studi Kasus UX: Penambahan Fitur Gamifikasi Aplikasi Mobile Campaign.com
Proyek ini merupakan bagian dari program pelatihan UI/UX yang dilaksanakan oleh Skilvul, untuk program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayan, Riset, dan Teknogi Republik Indonesia. Campaign.com adalah salah satu challenge partner dari Skilvul. Saya tidak bekerja atau dikontrak secara profesional oleh Campaign.com.
Background
Campaign.com merupakan platform aksi sosial yang menghubungkan beberapa organisasi, suporter, dan sponsor yang peduli tentang isu sosial. Startup yang didirikan pada tahun 2015 ini memiliki visi “Untuk membuat dunia menjadi tempat yang lebih baik bagi semua orang” dan misi “Membuat ruang aman untuk mengambil tindakan #ForChange”.
Campaign.com mempunyai pengguna yang disebut sebagai suporter. Pengguna dapat memilih berbagai challenge yang ingin diikuti, sesuai dengan minat mereka. Setelah menyelesaikan challenge, sponsor akan mencairkan donasi ke organisasi tujuan.
Tentunya, tidak mudah bagi pengguna dalam mengerjakan aksi selama beberapa hari untuk menyelesaikan suatu challenge. Oleh karena itu, dibutuhkan fitur gamifikasi yang akan menjadi motivasi pengguna dalam mengambil aksi. Metrics yang akan menjadi perhatian dalam pengembangan ini, yaitu completion rate dari pengguna yang telah mengikuti challenge.
Objective
- Meningkatkan engagement dan retensi.
- Menambahkan fitur gamifikasi untuk meningkatkan motivasi pengguna dalam menyelesaikan aksi/challenge dengan spesifikasi user level atau poin, tanda bahwa pengguna telah mencapai level atau poin tertentu, reward berdasarkan level atau poin yang dicapai.
- Mencari tahu kebutuhan, kendala, dan ekspektasi pengguna dalam mengakses aplikasi Campaign.com.
- Mencari tahu kebiasaan pengguna dalam melakukan kegiatan sosial melalui media online.
- Mencari tahu tingkat kegunaan, kemudahan, dan kepuasan dari solusi ide yang ditawarkan pada alur proses pendaftaran dan masuk, beranda, check-in harian, challenge, arena, sharing achievement, dan penukaran poin.
Team Role
Pada proyek ini, saya dan dua anggota tim lainnya, Herupurnama Hp dan Zulfa Agustri Annisa, berperan sebagai UI/UX Designer. Kami diberikan tugas oleh challenge mitra terkait untuk menambahkan fitur gamifikasi dalam aplikasi Campaign.com. Beberapa tanggung jawab yang saya lakukan di tim:
- Membuat dan menyebarkan survei kuesioner menggunakan Google Form ke target pengguna.
- Menyusun pain points dan peluang solusi dari permasalahan tersebut.
- Melakukan brainstorming ide berdasarkan pokok permasalahan yang dipilih.
- Mengkategorikan solusi ide sesuai data yang didapatkan.
- Memprioritaskan ide yang akan dikembangkan berdasarkan dua variabel.
- Membuat solusi desain melalui Crazy 8's.
- Mengembangkan user flow.
- Membuat solusi desain dalam Low-Fi & High-Fi.
- Melakukan uji kegunaan desain aplikasi dan melakukan iterasi.
Tools
- Figma: Melakukan brainstorming secara tim menggunakan Figjam File dan membuat solusi desain menggunakan Design File. Selain itu, kami juga menggunakan prototype dari Figma untuk testing desain aplikasi Campaign.com.
- Google Forms: Survei pertanyaan kuesioner ke target pengguna.
- Google Docs: Mendokumentasikan stimulus user research.
- Google Sheets: Mendokumentasikan hasil data user research dengan partisipan.
- Google Meet: Media interview dengan partisipan riset.
- Medium: Tempat dokumentasi hasil akhir Studi Kasus UX.
Research Method
Kami menggunakan metode Design Thinking selama masa pengerjaan studi kasus ini. Design Thinking dipilih karena dapat membantu tim dalam memecahkan masalah yang kompleks, menghasilkan solusi ide yang inovatif untuk prototype dan testing, proses non-linear sehingga memudahkan tim dalam memahami pengguna.
Berikut penjelasan singkat 5 fase dalam Design Thinking:
Empathize, mencari dan mengetahui apa yang menjadi kebutuhan dan permasalahan dari pengguna dalam menggunakan suatu produk.
Define, menyusun kebutuhan dan permasalahan yang dialami pengguna berdasarkan data yang telah dikumpulkan.
Ideate, melakukan brainstorming dengan mencari alternatif untuk melihat masalah dan mengidentifikasi solusi inovatif untuk pernyataan masalah yang telah dibuat.
Prototype, mengidentifikasi solusi terbaik berdasarkan setiap masalah yang ditemukan.
Test, melakukan pengujian terhadap solusi yang dihasilkan. Setelah itu, lakukan iterasi untuk menghasilkan produk yang lebih baik, sesuai dengan yang pengguna butuhkan.
Design Thinking Process
1. Empathize
Kami diminta oleh tim product Campaign #ForChange untuk menambahkan fitur gamifikasi dalam aplikasi Campaign.com. Tujuan ditambahkannya sistem gamifikasi adalah agar lebih memotivasi pengguna dalam menyelesaikan setiap aksi dari challenge yang dipilih karena tidak mudah bagi pengguna dalam menyelesaikan aksi selama beberapa hari.
Oleh karena itu, untuk mengetahui kebutuhan dan permasalahan yang pengguna rasakan, saya dan tim menyebarkan kuesioner sesuai dengan target pengguna melalui Google Form dan diperoleh hasil sebagai berikut:
Seluruh responden pernah berpartisipasi dalam kegiatan sosial (baik online maupun offline) dan 70% di antaranya menyatakan bahwa alasan mereka mengabdi kepada masyarakat karena ingin membantu sesama dan menjadi orang yang bermanfaat.
Untuk mengetahui lebih lanjut ketertarikan pengguna terhadap aksi sosial, diperoleh hasil 50% tertarik di bidang kesehatan, 40% tertarik di bidang lingkungan, diikuti bidang kesetaraan dan pendidikan sebanyak 30%.
Adapun alasan mereka tertarik pada bidang yang dipilih adalah sebagai berikut:
Dana menjadi hal yang paling dibutuhkan responden saat akan melakukan kegiatan sosial.
Setelah mengetahui apa yang responden butuhkan ketika melakukan kegiatan sosial, berikut kendala dan ekspektasi yang pengguna rasakan:
Setelah menanyakan seputar kegiatan sosial kepada responden, kami juga menanyakan reward yang pengguna inginkan setelah menyelesaikan challenge di aplikasi Campaign.com. Reward poin menjadi yang paling banyak diharapkan oleh responden.
Berikut beberapa motivasi yang membuat responden berpartisipasi dalam melakukan challenge di aplikasi Campaign.com:
70% responden akan lebih termotivasi dengan adanya fitur peringkat. Selain memiliki jiwa yang kompetitif, beberapa responden juga dapat melihat skor atau poin yang dimiliki oleh lawan.
Untuk memahami permasalahan pengguna lebih dalam, saya dan tim juga melakukan desk research serta benchmarking terhadap kompetitor. Untuk datanya dapat dilihat di link berikut.
2. Define
Setelah melewati tahap empathize dengan mengetahui masalah dari sudut pandang pengguna, selanjutnya kami menentukan dan merincikan masalah sesuai dengan data yang telah diperoleh.
User Target
- Laki-laki atau perempuan.
- Berusia 18-24 tahun.
- Memiliki ketertarikan di bidang kegiatan sosial
- Ingin bertemu dengan orang-orang baru.
- Dapat berkomunikasi dengan baik.
- Sedang mempersiapkan dirinya untuk masuk dunia kerja.
User Persona
Ayu adalah persona yang saya gambarkan, goals merupakan hal yang ingin dicapai oleh Ayu, frustations adalah kendala atau keresahan yang dihadapi Ayu dalam mencapai goals, dan needs adalah hal yang Ayu butuhkan. Ayu juga memiliki 9 aplikasi yang paling sering ia gunakan.
Problem Findings
Melalui primary research dan desk research yang telah kami lakukan, didapatkan permasalahan dari sudut pandang responden, seperti pengguna tidak memperoleh feedbacks berupa reward setelah menyelesaikan challenge, data aksi pengguna tidak sinkron (tertanda tidak terselesaikan), kurangnya motivasi pengguna dalam menyelesaikan challenge, dan lainnya. Untuk lebih lengkapnya bisa dilihat pada gambar di bawah ini:
Challenge Assumptions
Setelah menentukan dan merincikan permasalahan yang dialami pengguna, kami mengubah permasalahan tersebut menjadi tantangan melalui metode HMW (How-Might We).
Berdasarkan hasil voting tim, kami memilih HMW berikut untuk dijadikan fokus solusi permasalahan.
How-Might We meningkatkan motivasi pengguna dalam menyelesaikan tantangan?
3. Ideate
Berdasarkan hasil voting HMW pada tahap define, kami melakukan brainstorming untuk membahas solusi ide dari permasalahan yang ada.
Solution Idea
Untuk memecahkan permasalahan, kami membuat beberapa solusi ide, seperti memberikan reward kepada pemilik poin tertinggi, memberikan poin yang dapat ditukarkan dalam bentuk uang, membuat aturan permainan agar pengguna lebih tertarik untuk menyelesaikan challenge, dan sebagainya. Untuk lebih jelasnya dapat dilihat pada gambar berikut:
Affinity Diagram
Setelah mengumpulkan solusi ide pada sesi brainstorming, selanjutnya kami melakukan pengelompokan ide yang sejenis di satu kategori. Ada 6 kategori yang kami buat, yaitu:
- Point
- Reward
- Gamification
- App View
- Challenge Feature
- Social
Prioritization Idea
Kami memasukkan solusi ide yang telah dikumpulkan ke dalam 4 kuadran prioritas, antara lain:
- Kuadran 1 (Yes, Do It Now): Yang akan diimplementasikan pertama atau paling diprioritaskan karena memiliki user value yang tinggi, tetapi membutuhkan effort yang rendah.
- Kuadran 2 (Do Next): Memiliki user value dan effort yang tinggi.
- Kuadran 3 (Do Last): Memiliki user value dan effort yang rendah.
- Kuadran 4 (Later): Memiliki user value yang rendah, tetapi membutuhkan effort yang tinggi.
Crazy 8's
Selanjutnya, kami menuangkan solusi ide ke dalam sebuah kerangka desain melalui Crazy 8’s. Setiap anggota dalam tim membuat kerangka desain selama 8 menit di sebuah kertas HVS yang dibagi menjadi 8 bagian.
User Flow
Terdapat 5 user flow yang kami buat, yaitu:
- User Flow Basic
- User Flow Challenge (General)
- User Flow Arena
- User Flow Sharing
- User Flow Penukaran Poin
4. Prototype
Low-Fidelity Design
Sebelum membuat tampilan high-fidelity design, kami merancang tampilan dengan tingkat presisi rendah seperti gambar berikut:
Design System
Kami juga menggunakan design system agar desain akhir yang dihasilkan konsisten dan sesuai dengan guidelines dari mitra terkait, yaitu Campaign.com.
— Atom —
- Logo
- Colors Guideline
- Button Guideline
- Bottom Navigation Guideline
- Textfield Guideline
- Radio, Checkbox, & Toggle Guideline
- Text Style Guideline
- Illustration Guideline
— Molecule —
High-Fidelity Design
Kami menerjemahkan desain pada wireframe ke tampilan dengan tingkat presisi tinggi.
- Splash Screen & Onboarding
- Daftar & Masuk
- Home
Pada halaman home, kami menambahkan fitur baru, yaitu total poin yang diperoleh pengguna, medali yang menandakan progres level pengguna, check-in harian, dan motivational quotes.
- Challenge Solo
Pada fitur challenge solo, penggguna atau suporter Campaign.com dapat melakukan challenge secara individu dengan mengunggah bukti pada setiap aksi. Poin akan diberikan jika pengguna menyelesaikan setiap aksi dan akan mendapatkan bonus poin jika pengguna berhasil menyelesaikan challenge.
- Challenge Multi
Pada fitur challenge multi, pengguna dapat mengikuti challenge secara berdua. Pengerjaan aksi dibagi menjadi dua dengan reward bonus poin lebih tinggi dari tipe solo.
- Challenge Arena
Pada fitur challenge arena, pengguna dapat mengikuti challenge dengan lawan (1 vs 1). Pemenang ditentukan berdasarkan yang tercepat dalam mengisi aksi dan menyelesaikan challenge. Pemenang juga akan mendapatkan bonus poin yang lebih besar.
- Profile & Sharing Achievement
Pada halaman profile, kami menambahkan medali sebagai progres level penggguna, badge & sertifikat, insight, dan rank dari pengguna. Pengguna akan diarahkan ke halaman leaderboard untuk dapat mengetahui rank dari lawan. Untuk lebih memotivasi pengguna dan orang lain (di luar pengguna aplikasi Campaign.com), pengguna dapat membagikan hasil pencapaiannya ke media sosial lainnya, seperti instagram.
- Penukaran Poin
Pada halaman penukaran poin, pengguna dapat menukarkan poin yang telah dikumpulkan ke pembelian stiker chat, template PPT, bahkan dikonversikan ke e-wallet, seperti gopay, ovo, maupun dana.
Prototype Link
5. Testing
Kami menggunakan metode In-Depth Interview (IDI) dan metode User Task Analysis untuk melakukan user testing dan usability testing. Wawancara direkam dan dilakukan secara remote. Tim kami mewawancarai 4 responden dan menugaskan mereka untuk mempraktikkan beberapa skenario task di bawah ini:
- Task 1 — Meminta pengguna untuk melakukan Pendaftaran dan Masuk ke dalam aplikasi, serta Check-in Harian (berhenti di halaman Home) dan observasi apa yang dilakukan oleh responden.
- Task 2 — Meminta pengguna untuk melakukan Pencarian Challenge Solo (apa saja) Campaign.com dan meminta untuk menyelesaikan challenge tersebut hingga berhasil (berhenti di halaman Pop-up Poin) dan observasi apa yang dilakukan oleh responden.
- Task 3 — Meminta pengguna untuk melakukan dan menyelesaikan Challenge Arena Campaign.com dengan mengundang user Joey Maul sebagai lawan hingga challenge berhasil (berhenti di halaman Pop-up Poin) dan observasi apa yang dilakukan oleh responden.
- Task 4 — Meminta responden untuk melihat halaman Profile serta melakukan Sharing Achievement (berhenti di Pop-up Sharing). Observasi apa yang dilakukan oleh responden.
- Task 5 — Setelah menyelesaikan challenge, minta responden untuk melakukan Penukaran Poin dan observasi apa yang dilakukan oleh responden.
Usability Testing Results
- Responden 1
- Kegunaan → Sudah membantu banget, soalnya ternyata ada untuk check-in biar semangat & ada pengumpulan poin. Lalu, ada solo & multi juga bervariasi (udah dimudahkan dengan button-nya). Pada arena, kita bisa rival sama orang, cepet-cepetan siapa yg selesai terlebih dahulu, sharing achievement juga sudah bagus dan penukaran poin yang bisa dikonversikan ke uang.
- Kemudahan → Fitur-fiturnya mudah ditemukan dan button-button-nya sudah sesuai. Kita mau nyari apa sudah dimudahkan dengan ketersesuaian apa yang kita cari. Misal: Kalo rival bisa di arena, tukar poin di home, kalo achievement tempatnya di profile. Jadi penempatan fitur-fiturnya sudah sesuai.
- Kepuasan -> Cukup puas, sudah bagus, sudah sesuai. Ngeliatnya ga terlalu ramai banget di 1 page karena sudah disesuaikan kebutuhannya per page.
- Responden 2
Kegunaan → Fitur multi dan arena mempengaruhi motivasi user dalam mengikuti dan menyelesaikan challenge, fitur multi yang sama team sangat bermanfaat karena bisa saling mengingatkan untuk menyelesaikan aksi dan bisa nyelesain bareng. Fitur arena sangat memotivasi karena user pasti ingin menang, jangan sampe kalah.
Kepuasan → Fitur tukar poin sangat baik, apalagi bisa dikonversi ke e-money, jadi useful banget.
Kemudahan → UI Design mudah dimengerti, pemilihan warna bagus, gak ketimpah satu sama lain, dan menarik.
- Responden 3
- Responden 4
Scoring
Kami menggunakan metode SEQ (Single Ease Question) untuk penilaiannya. Metode ini mengukur persepsi pengguna tentang kegunaan berdasarkan tugas yang diberikan. Pengguna akan memberikan skala rating dari 1 (sangat susah) sampai 7 (sangat mudah) poin. Jika skor yang diberikan oleh pengguna ≥ 5.5, maka solusi desain dinyatakan passed.
Rata-rata Skor: (Responden 1+Responden 2+Responden 3+Responden 4)/4
Untuk hasil skor secara keseluruhan, diperoleh:
Rata-rata Skor: (6.7+6.5+6+6.4)/4 = 25.6/4 = 6,4
Didapatkan total skor rata-rata, yaitu 6,4. Hal ini menunjukkan solusi desain yang kami buat dapat dipahami dn digunakan dengan mudah oleh pengguna.
6. Iterate
Setelah menyelesaikan desain dan melakukan pengujian kepada 4 responden, selanjutnya yaitu melakukan iterasi berdasarkan feedbacks dari responden. Tidak semua feedbacks kami implementasikan ke dalam iterasi desain karena tentunya ada alasan di balik tidak atau diimplementasikannya feedbacks dari responden. Berikut rangkuman feedbacks yang kami dapatkan dari responden selama melakukan sesi wawancara:
Rangkuman Feedbacks Iterasi:
- Bottom navbar tidak begitu terlihat, seperti transparan, hampir menyatu dengan background warna putih — Task 3 [Challenge Arena], Responden 1
Kami memilih untuk melakukan iterasi pada poin ini karena memang warna menu pada bottom navbar terlalu muda (hampir menyatu dengan background halaman, yaitu warna putih). Untuk iterasinya, kami menambahkan shadow pada bottom navbar agar terlihat perbedaanya dari warna background halaman.
- Button bagikan hasil capaian kurang besar — Task 4 [Profile & Sharing Achievement], Responden 2
Kami memilih untuk melakukan iterasi pada poin ini karena memang button ‘bagikan hasil capaianmu’ terlalu kecil. Untuk iterasinya, kami memperbesar dan mempertebal text. Kami juga memperbesar logo di button tersebut.
- Button ‘undang’ Joey Maul kurang memicu user untuk meng-klik — Task 3 [Challenge Arena], Responden 4
Kami memilih untuk melakukan iterasi pada poin ini karena jarak button ‘undang’ dengan online/offline terlalu mepet. Untuk iterasinya, kami memindahkan status online/offline ke bawah nama pengguna sehingga button ‘undang’ akan lebih terlihat atau jelas.
- Konten sertifikat pengen lebih dari 1 — Task 4 [Profile & Sharing Achievement], Responden 4
Kami memilih untuk tidak melakukan iterasi pada poin ini karena responden tidak memberi tahukan konten secara rinci, responden hanya ingin tahu perihal tampilan jika sertifikat dibuat lebih dari 1 .
- Icon penukaran poin kurang jelas — Task 5 [Penukaran Poin], Responden 2 & Responden 4
Kami memilih untuk melakukan iterasi pada poin ini karena icon ‘gift’ pada halaman home kurang merepresentasikan poin (koin, skor) dalam imajinasi manusia. Untuk iterasinya, kami mengubah icon ‘gift’ pada halaman home menjadi icon ‘coin’.
Iteration Prototype Link
Link prototype iterasi dapat Anda coba di link berikut.
Conclusion
What did I Learn?
Ini merupakan real project pertama saya berkecimpung langsung dengan client, yaitu dari challenge mitra terkait, Campaign.com. Pada project kali ini, saya juga bekerja sama dengan 2 anggota tim, Herupurnama Hp dan Zulfa Agustri Annisa. Saya belajar mengenai cara berkomunikasi dan berkolaborasi, yang mana hal ini sangat bermanfaat untuk jenjang karir saya ke depannya. Saya belajar hal baru mengenai desain bareng tim, menyatukan perbedaan, dan membagi pengerjaan tugas secara merata. Tentunya, ilmu yang saya dapatkan tidak terlepas dari ajaran kak Sarah Anindya Shofi selaku mentor grup SVI UIX 10.
Research Results
Berdasarkan hasil skor wawancara usability testing dengan 4 partisipan, dapat dikatakan bahwa solusi desain aplikasi Campaign.com yang kami buat dapat memberikan kepuasan dan kemudahan bagi pengguna. Beberapa feedback dari pengguna juga telah kami lakukan iterasi, baik untuk high-fidelity design maupun prototype.
