Optimalisasi Gamifikasi pada Aplikasi Campaign.com

Pendahuluan

Disclaimer

This project is part of the UI/UX training program implemented by skilvul.com Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Campaign.com is the Challenge Partner. I am not working for nor contracted professionally by Campaign.com

Project Info

Nama Aplikasi : Campaign.com
Campaign.com adalah jaringan sosial pertama yang dibangun untuk perubahan dan memberikan dampak sosial. Dibangun di Indonesia sejak 2015, Campaign.com bertujuan untuk membantu organisasi, komunitas dan perusahaan maupun individu mengorganisir sebuah kampanye yang berkelanjutan dan berdampak pada perubahan sosial.
Campaign.com adalah sebuah platform yang digunakan sebagai wadah dalam melakukan kampanye komunitas sosial secara daring (online) dan penyelenggaraan donasi secara publik. Terdapat tantangan kampanye yang terdiri dari serangkaian tindakan sosial yang bertujuan untuk mendidik dan mengembangkan kebiasaan sosial baru dalam kehidupan sehari-hari pengguna kami.

Objektif dalam Studi Kasus UX ini adalah
1. Merancang fitur gamification untuk aplikasi Campaign.com
2. Membuat prototype aplikasi Campaign.com

Tools
Tools yang kami gunakan untuk melakukan define dan ideation serta membuat userflow memanfaatkan figjam pada figma serta Membuat Design System dan UI menggunakan Figma.

kami menggunakan Google Docs dan Google Spreadsheet untuk dokumentasi stimulus User Research dan data record user research.

Tim
Saya sebagai UI/UX Designer bersama dengan 2 anggota tim bernama Firda Mega Shafira dan Vella Oktavianti Dalam tim ini, tanggung jawab saya adalah :

1. Melakukan survei pengguna menggunakan methode In-depth Interview
2. Melakukan identifikasi Permasalahan User
3. Membantu membuat How-Might We sebagai Opportunity
4. Brainstorming ide solusi
5. Melaksanakan Crazy 8's
6. Mendesain User Interface dari hasil Crazy 8's
7. Menyusun User-flow yang sesuai dengan ide solusi
8. Selain membuat wireframe saya juga bertanggungjawab atas mendesain Design System dan halaman UI dari wireframe yang telah dibuat oleh rekan rekan tim.
9. Membuat prototype yang dapat digunakan untuk testing
10. Melakukan Usability Testing
11. Serta melakukan publikasi hasil design process

Proses Desain

Pada studi kasus ini, kami melakukan pendekatan design process dengan menggunakan metode Design Thinking yang bertujuan membuat ide baru dan inovasi yang sesuai dengan kebutuhan pengguna.

Dalam metode design thinking terdapat beberapa fase seperti yang ditunjukkan dibawah ini

Skema design thinking Stanford (d.school)

1-Empathize

Pada tahap Empathize untuk mendapatkan pemahaman empatik dari terhadap kebutuhan pengguna serta keinginan client yang mencoba untuk dipecahkan. Pada tahap ini dilakukan analisis kebutuhan pengguna dengan melakukan riset dengan membuat google form seputar pengalaman memakai aplikasi Campaign terutama pada bagian gamifikasi karena pihak dari Campaign mengembangkan fitur tersebut selain menyebarkan angket kami melakukan juga analisis kebutuhan client berdasarkan brief yang diberikan.

Berdasarkan riset ini, hasil yang kami dapat ada 9 responden yang mengisi google form. Berikut rangkumannya :

• 1 dari 9 responden belum pernah mencoba aplikasi Campaign.

• Umur berkisar dari 20–24 tahun.

• 1 dari 9 responden sudah bekerja sebagai desainer dan sisanya mahasiswa.

• Kelebihan aplikasi menurut 8 responden :

• Kekurangan aplikasi menurut 8 responden :

Selain melakukan penyebaran angket dan analisis brief kami juga melakukan secondary research yaitu mencari informasi dari artikel maupun kompetitor analisis, berikut hasilnya :

Analisis Kompetitor

Hasil dari temuan di lapangan ini dijadikan landasan dalam proses pengembangan pada proses selanjutnya.

2-Define

Dari berbagai hasil yang didapatkan pada tahap Empathize, kemudian dilakukan tahap selanjutnya yaitu tahap Define dengan yang bertujuan untuk mendefinisikan permasalahan yang ada serta megidentifikasikan strategi solusi yang dapat dilakukan. Dalam tahapan ini tim mendefinisikan pain point.

Pain Point adalah permasalahan yang dihadapi calon pengguna yang dapat digunakan untuk membangun atau mungkin meningkatkan bisnis/kualitas layanan.

How Might We, ini adalah pertanyaan berdasarkan pain points yang dibuat dengan harapan dari pertanyaan-pertanyaan tersebut menjadi dasar kita membuat solusi ide untuk fitur aplikasi. Disini anggota tim bebas mengutarakan ide yang ingin diwujudkan. Lalu ketika masing-masing anggota tim sudah menuliskan How Might We yang dibuat, kami melakukan voting dengan menempelkan stiker pada daftar how might we. Tim merancang How Might we sebagai opportunity. Pada tahapan ini Tim melakukan voting terhadap How Might We, kemudian Berdasarkan voting terbanyak terpilihlah “Bagaimana agar tampilan lebih simpel, menarik dan mudah dipahami oleh user?” sebagai how might we.

3-Ideate

Setelah terpilih how might we, kemudian tim melakukan brainstorming ide yang akan yang sekiranya dapat memenuhi how might we.

Solution Idea

Pada tahap ini setiap anggota tim melakukan brainstorming untuk memenuhi kebutuhan dari how might we yang telah ditentukan

Afinity Diagram

Afinity diagram merupakan tahap pengelompokan ide solusi fitur yang didapat pada tahap solution idea. Pada case kali ini tim mengelompokkan solusi idea kedalam 4 kategori yaitu Gamification, Tampilan, Notifikasi dan Reward.

Prioritization Idea

Prioritization Idea merupakan kuadran untuk mendefinisikan prioritas realisasi solution idea dengan berdasarkan user value(memiliki nilai yang bagus/tidak) dan effort(secara upaya sanggup/tidak). Nantinya fitur tersebut menjadi minimum value product (MVP) Seperti yang tertera pada gambar, ada 4 bagian yaitu :

1. Yes, Do It Now, yaitu fitur yang memiliki prioritas paling tinggi dari segi user value tetapi effort-nya tidak terlalu besar jadi akan diimplementasikan terlebih dahulu. Fitur-fitur pertama yang akan kami kerjakan dalam desain UI ini terbagi menjadi 3 kategori yaitu Reward, Tampilan dan Gamification.
2. Do Next, yaitu fitur yang memiliki user value tinggi namun effort yang dibutuhkan untuk merealisasikan hal itu cukup tinggi jadi fitur-fitur yang ada dibagian ini sebaiknya dikerjakan selanjutnya (bisa saat aplikasi ingin melakukan pengembangan ke versi kedua). Tim memutuskan Kategori Notifikasi masuk pada bagian ini.
3. Do Last, pada bagian ini dari segi effort yang kecil namun dari user value juga kecil yang ditakutkan fitur ini tidak bisa memenuhi kebutuhan atau keinginan user jadi sebaiknya dilakukan nanti.
4. Later, yaitu memiliki user value yang kecil dan effort yang tinggi sehingga kami pasti akan memikirkan dua kali untuk merealisasikan fitur dalam kuadran ini, jadi sebaiknya dilakukan nanti saat Kami sudah melakukan research yang banyak dan membuat ide ini memiliki nilai lebih.

Kuadran “Yes, Do it now” merupakan kuadran yang memiliki prioritas paling utama karena memiliki effort yang tidak cukup besar akan tetapi memiliki value tinggi kepada user.

Crazy 8's

Crazy 8’s adalah latihan membuat sketsa cepat yang menantang orang untuk membuat sketsa delapan ide berbeda dalam delapan menit. Tujuannya adalah untuk mendorong melampaui ide pertama Anda, seringkali yang paling tidak inovatif, dan untuk menghasilkan berbagai macam solusi untuk masalah yang sedang ingin diselesaikan.

Pada metode crazy 8’s ini tim melakukan 8 sketch, yang kemudian dilakukan vote untuk memilih design mana yang kemudian akan dibuatkan wireframe.

4-Prototyping

Tahap ini merupakan bentuk 1:1 dari tampilan produk yang akan dikembangkan namun belum nyata. Prototype digunakan untuk mencoba & mensimulasikan solusi desain yang telah dibuat.

Tahapan ini memiliki beberapa keuntungan, yaitu: Dapat mencoba produk dengan mudah & murah, Dapat mempelajari & mengevaluasi solusi desain yang telah dibuat, dan dapat mencegah perubahan yang besar.

Userflow
Userflow merupakan alur yang harus dilalui oleh user untuk menyelesaikan sebuah task. Pada projek ini kami membuat userflow dari user dimulai dari user diminta untuk melakukan login, kemudian memilih challenge, yang selanjutnya mengerjakan aksi, kemudian menyelesaikan challenge dan mendapatkan reward dengan melakukan spin. Pada userflow ini user juga bisa mengakses bagian leaderboad dan mendapatkan badge (bronze, silver, dan gold) yang sudah diklasifikasikan berdasarkan total menyelesaikan challenge.

Wireframe
Wireframe merupakan sebuah layout dalam bentuk Low-Fidelity (Lo-Fi) berdasarkan userflow yang telah dibuat.

Design System
Design System merupakan komponen yang dapat digunakan kembali untuk keperluan perancangan dan pengembangan produk baik dari sisi desain maupun code programming. setelah membuat dan menyusun skenario penggunaan aplikasi atau disebut dengan userflow kemudian tim membuat design system sesuai dengan kebutuhan yang terdapat pada desain wireframe Disini design system yang kami buat yaitu :

1. Bagian Atom, yaitu bagian terkecil/sederhana dari suatu komponen seperti icon, typography, text field, color pallette, button, logo dan ilustrasi Champ. Design system yang kami buat menyesuaikan dari design system yang dimiliki oleh Campaign.com dengan sedikit tambahan sesuai dengan kebutuhan untuk menunjang proses desain UI nantinya.
2. Bagian Molekul, yaitu perpaduan dari 2 atom atau lebih seperti statusbar yang terdiri atas beberapa icon dan text dsb. Pada bagian molekul ini kami membuat komponen untuk navbar, card (challenge, challenge yang sudah diambil, donasi, aksi dan notifikasi), spinner, header, headline menu,status bar, search bar, thumbnail, profil user & kolaborator, dashboard, peringkat leaderboard, kategori, chip kategori, tab, tabel dan slide.

User Interface
pada tahap ini kami mulai melakukan konversi wireframe yang telah dibuat kedalam bentuk UI (High-Fidelity) yang sudah memiliki warna, gambar, animasi dan teks konten. Kami menggunakan design system yang sudah dibuat untuk mempermudah pengerjaan desain UI serta menghasilkan desain yang konsisten.

Prototype

5-Testing

Pada proses tahap ini kami dari tim 4 melakukan validasi atau uji coba mengenai solusi ide yang telah dirancang melalui beberapa proses yang panjang.Tahap ini merupakan tahap yang sangat penting karena kita akan menguji coba solusi serta akan mengetahui apakah solusi yang elah kita buat itu berjalan dan sesuai dengan keinginan user dan client atau tidak?. Selain itu kita juga dapat melihat bagaimana user berinteraksi dengan prototype dan apa saja tanggapan dari user untuk meningkatkan desain aplikasi yang dibuat

Proses testing dilakukan menggunakan metode interview secara daring kepada user melalui zoom meeting. Interview ini kami jalani secara, sehingga kami responden memperoleh 4 responden yang mana itu juga melampaui batas minimal yang ditentukan oleh mentor (perkelompok minimal 3 responden). selain melakukan interview pada tahap ini kami juga meminta user untuk memberi nilai dari tingkat kepuasan, kemudahan, keberhasilan dengan Single Ease Question setiap user menyelesaikan task.

Berikut hasil berdasarkan tanggapan responden mengenai redesign aplikasi Campaign yang kami lakukan didapatkan hasil sebagai berikut yang sudah kami ringkas dari keempat responden :

Untuk keseluruhan tampilan, menurut responden terdapat beberapa penulisan yang kurang rapih pada bagian home di Top Challenge sedikit membingungkan karena tidak terlalu berbeda antara foto depan dan foto dibelakangnya jadi menimbulkan ambiguitas. Jadi, responden memberikan saran untuk penulisan dibuat rata kanan kiri dan membuat foto di Top Challenge agar lebih jelas. Seperti yang ada pada gambar diatas, kami melakukan testing kepada 4 responden dan setelah dilakukan rekapitulasi maka dihasilkan nilai sebagai berikut dan dapat diambil kesimpulan bahwa solusi ide yang kami tawarkan berjalan dengan baik , menarik dan mudah untuk digunakan sesuai dengan how might we yang telah ditentukan pada tahap ideate yaitu “Bagaimana agar tampilan lebih simpel, menarik dan mudah dipahami oleh user?”.

Iterasi Design

Pada tahap ini kami melakukan redesign dari masukan yang telah didapatkan dari responden, dimana terdapat beberapa masukan seperti berikut.

1. Perbaiki Pop-up
2. Tampilan Top Challenge rada ambigu karena menonjol semua jadi kurang fokus
3. Perbaiki frame foto challenge karena ada yang terpotong serta penulisan kurang rapi
4. Share twibbon sedikit membingungkan
5. Bagian pop-up berhasil menimbulkan ambigu karena terdapat button dan icon silang
6. Ambiguitas pada icon titik 3
7. fungsi button terima dan abaikan pada notifikasi yang belum berjalan dengan baik
8. Bagian This Month dan This Week kurang terlihat dan lebih baik dibuatkan pembatas agar lebih jelas
9. Challenge beragam klik buttonnya jadi 2 kali menurutku dan itu dirasa menimbulkan effort lebih kepada user jadi disarankan untuk tidak memakai ikuti challenge
10. Tampilan belum keseluruhan mencakup case seperti ketika hadih berhasil diambil akan tetapi ketika di klik hadiahmu masih belum diambil

Atas masukan tersebut kami melakukan perbaikan desain dan prototype menjadi sebagai berkut.

Kesimpulan

Design thinking adalah metodologi desain yang memberikan pendekatan berbasis solusi dan user centered untuk memecahkan masalah. Design Thinking ini sangat berguna dalam mengatasi masalah kompleks dengan memahami kebutuhan manusia yang terlibat, dengan membingkai ulang masalah, dengan cara yang berpusat pada manusia, dengan menciptakan banyak ide dalam sesi brainstorming, dan dengan mengadopsi pendekatan langsung dalam pembuatan ide prototype dan pengujian.

Dari hasil usability testing menggunakan SEQ didapatkan nilai 6.39 dari 7 yang berarti solusi ide redesign aplikasi Campaign yang kami tawarkan berjalan dengan baik , menarik dan mudah untuk digunakan sesuai dengan how might we yang telah ditentukan pada tahap ideate. Meskipun mendapatkan nilai yang cukup baik akan tetapi redesign aplikasi Campaign ini mendapatkan beberapa feedback yang harus diperbaiki kedepannya.

Rekomendasi

Berdasarkan hasil testing bersama responden, didapatkan beberapa feedback untuk perbaikan pada redesign aplikasi Campaign. Rencana tindakan selanjutnya ialah dengan melakukan perbaikan sesuai dengan feedback yang diberikan oleh responden. Pada saat melakukan perbaikan platform lebih teliti lagi dalam membuat design yang akan di testing kepada responden agar saat melakukan testing kembali, responden bisa dengan mudah mengakses aplikasi tersebut.

Terimakasih saya ucapkan kepada rekan terbaik saya Firda Mega Shafira dan Vella Oktavianti yang telah membersamai dalam menyelesaikan project redesign aplikasi Campaign ini bersama. Selain itu, saya ucapkan terimakasih banyak sekali kepada mentor terbaik saya Sarah Anindya Shofi yang selalu membimbing dan mengarahkan saya dalam mengerjakan project ini, tanpa bantuan beliau saya tidak akan bisa menyelesaikan project ini. Tak lupa juga saya ucapkan terimakasih kepada para responden yang telah memberikan feedback membangun untuk memperbaiki solusi ide pada redesign aplikasi Campaign.

Sekian saya ucapkan, semoga bermanfaat.

Wasalamualaikum Wr. Wb