Desain Fitur Gamifikasi untuk Aplikasi Mobile Campaign #ForChange — UI/UX Case Study
Halo semuanya! Perkenalkan, saya Koes Safira Amanidyansari. Saat ini saya merupakan peserta magang yang tergabung dengan program MBKM-MSIB (Merdeka Belajar Kampus Merdeka — Magang dan Studi Independen Bersertifikat) Skilvul Virtual Internship : UI/UX Challenge yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia dan Skilvul, dengan posisi sebagai UI/UX Design Intern. Pada kesempatan ini, saya akan memaparkan hasil proyek yang telah saya dan tim kerjakan selama dua minggu kebelakang ini, yaitu pembuatan fitur gamifikasi untuk aplikasi milik challenge partner, Campaign #ForChange.
⚠️ DISCLAIMER ⚠️
Pengerjaan proyek ini merupakan bagian dari rangkaian kegiatan MBKM-MSIB Skilvul Virtual Internship : UI/UX Challenge yang diselenggarakan oleh Skilvul dan Campaign.com sebagai challenge partner untuk proyek ini. Sehingga saya dan anggota tim bukanlah bagian dari pihak challenge partner terkait.
Latar Belakang
Penggunaan internet sebagai alat untuk membantu manusia melakukan pekerjaan dalam kehidupan sehari-hari merupakan hal yang sudah sangat diandalkan oleh banyak orang pada masa ini. Apalagi semenjak pandemi Covid-19 melanda seluruh penjuru dunia, hampir semua kegiatan yang seharusnya dikerjakan secara luring dialihkan untuk dilakukan secara dalam jaringan (daring). Dengan pemanfaatan internet ini dapat mempermudah penyelesaian pekerjaan tanpa harus berpergian ke suatu tempat terlebih dahulu, meskipun juga ada beberapa pekerjaan lain yang menjadi terbatas karena jika dikerjakan secara daring menjadi kurang leluasa. Salah satu kegiatan yang ternyata dapat ditangani secara daring adalah pengadaan gerakan sosial atas suatu isu yang ada di masyarakat.
Sebuah isu sosial yang ada di masyarakat dapat diperjuangkan dengan adanya gerakan sosial. Berbagai macam kegiatan dapat dilakukan dalam gerakan sosial tersebut, diantaranya adalah dengan berinteraksi langsung dengan masyarakat yang terdampak ataupun dengan melakukan donasi untuk membantu organisasi yang akan membantu dalam melakukan gerakan sosial tersebut. Namun kedua hal tersebut memerlukan materi, berupa uang, untuk melakukan hal tersebut. Sehingga terkadang beberapa orang merasa keberatan untuk menyisihkan uangnya untuk hal yang menurut mereka bukan termasuk prioritas hidup mereka. Maka dari itu, dibuatlah aplikasi Campaign #ForChange untuk menyelesaikan permasalahan tersebut.
Campaign #ForChange merupakan sebuah aplikasi mobile dimana pengguna, yang disebut supporter, dapat memberikan donasi tanpa harus mengeluarkan uang sepeserpun. Di dalam aplikasi Campaign #ForChange, para supporter dapat bergabung dalam berbagai macam challenge untuk berbagai isu sosial yang ada dan menyelesaikan aksi kampanye dari challenge tersebut yang berhubungan dengan kegiatan sehari-harinya. Setelah sebuah challenge diselesaikan, supporter tersebut akan men-unlock donasi untuk isu sosial yang dipilih. Donasi tersebut akan diberikan oleh berbagai organisasi, atau yang disebut sebagai sponsor. Sehingga, supporter yang menggunakan aplikasi ini tidak perlu mengeluarkan uang mereka untuk berdonasi pada isu sosial yang mereka ingin dukung.
Proyek ini merupakan tugas akhir dari rangkaian kegiatan MBKM-MSIB Skilvul Virtual Internship : UI/UX Challenge yang dikerjakan dalam kurun waktu kurang lebih dua bulan. Di dalam proyek ini, saya bersamaan dengan anggota tim diminta untuk membuat fitur gamifikasi dari aplikasi Campaign #ForChange dan mengimplementasikannya ke dalam bentuk digital prototype.
Objektif
Berikut merupakan objektif dari pengerjaan proyek ini:
- Mengetahui kebutuhan dan hambatan dari target pengguna aplikasi Campaign #ForChange.
- Merancang fitur gamifikasi yang akan diimplementasikan ke dalam aplikasi Campaign #ForChange.
- Membuat desain High-Fidelity dan digital prototype untuk fitur gamifikasi aplikasi Campaign #ForChange sesuai dengan kebutuhan dan hambatan yang dimiliki oleh target pengguna.
- Mengetahui apakah ide solusi yang ditawarkan mengenai fitur gamifikasi yang dibuat sudah memenuhi kebutuhan dan keinginian target pengguna aplikasi Campaign #ForChange.
Peran dalam Tim
Dalam pengerjaan proyek ini, saya berkolaborasi dengan 2 anggota tim saya, yaitu Andi Intan dan Prihart J P. Hal yang saya kerjakan didalam proyek ini adalah sebagai berikut:
- Melakukan analisis bersama tim terhadap masalah yang dimiliki oleh aplikasi Campaign #ForChange, baik dari yang dikatakan oleh pihak challenge partner itu sendiri maupun berdasarkan dari aplikasi yang sudah ada.
- Mendefinisikan fitur apa saja yang akan dimasukkan ke dalam sistem fitur gamifikasi untuk aplikasi Campaign #ForChange bersama tim.
- Membuat userflow untuk menggambarkan alur fitur gamifikasi aplikasi Campaign #ForChange dengan menggunakan Figma FigJam bersama dengan tim.
- Membuat desain Low-Fidelity (Wireframe) untuk fitur gamifikasi aplikasi Campaign #ForChange alur Reward dengan menggunakan Figma.
- Membuat tampilan High-Fidelity dari aplikasi Campaign #ForChange untuk alur Komunitas dan Reward dengan menggunakan Figma.
- Membuat UI Styleguide aplikasi Campaign #ForChange dengan menggunakan Figma sesuai dengan Design System yang telah diberikan.
- Membuat animasi untuk digital prototype fitur gamifikasi aplikasi Campaign #ForChange dengan menggunakan figma agar dapat dicoba secara langsung oleh target pengguna.
- Melakukan user research bersama tim, yang terdiri dari in-depth interview dan usability testing, untuk mengetahui apakah ide solusi yang ditawarkan berupa fitur gamifikasi untuk aplikasi Campaign #ForChange sudah sesuai dengan kebutuhan target pengguna.
- Melakukan iterasi desain alur komunitas yang telah dibuat sesuai dengan hasil user research yang telah dilakukan sebelumnya.
Design Process
Dalam proyek pembuatan fitur gamifikasi untuk aplikasi Campaign #ForChange ini, saya dan tim menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Alasan mengapa metode ini kami gunakan adalah Design Thinking dapat mendefinisikan dan memecahakan suatu permasalahan yang kompleks menjadi jelas dan terstruktur dengan cara mengunakan pendekatan pada kebutuhan manusia yang terlibat. Di dalam Design Thinking terdapat lima tahapan yang dilalui. Berikut merupakan tahapan yang saya dan tim lakukan untuk pengerjaan proyek ini:
1 — Empathize
Tahap empathize merupakan tahap dimana desainer dapat mencari tahu pandangan dan kebutuhan dari target penggunanya dengan research sebelum mendefinisikan problem statement dan melakukan ideation. Untuk tahap empathize ini, saya dan tim mengikuti sesi AMA (Ask Me Anything) bersama dengan pihak challenge partner, yakni Campaign. Dari pihak Campaign menyatakan bahwa masalah yang sedang saat ini mereka alami adalah:
- Bagaimana cara untuk menarik lebih banyak supporter baru
- Bagaimana cara untuk membuat para supporter tertarik untuk memulai challenge baru
- Bagaimana cara untuk membuat para supporter yang ada untuk menyelesaikan challenge yang telah diambil
Setelah itu, kami diminta untuk membuat sebuah fitur gamifikasi untuk diimplementasikan kedalam aplikasi Campaign #ForChange yang diharapkan dapat memecahkan permasalahan yang saat ini sedang dihadapi.
Langkah yang selanjutnya saya dan tim ambil adalah kami coba mencoba menggunakan aplikasi mobile Campaign #ForChange itu sendiri untuk mengetahui alur kerja dari aplikasi tersebut, juga kelebihan dan kekurangan yang saat ini terdapat pada aplikasi tersebut. Kami juga mencoba untuk mengerjakan beberapa challenge agar kami tahu cara kerja dari unlock donasi setelah challenge selesai dikerjakan. Setelah selesai, kami melanjutkan pengerjaan proyek ini ke tahap define, juga mengumpulkan hasil temuan kami untuk dimasukkan kedalam pain points dari aplikasi Campaign #ForChange.
User Persona
2 — Define
Tahap define merupakan tahap dimana desainer mendefinisikan permasalahan dari hasil tahap emphatize, juga membuat How-Might We sebagai opportunity yang dapat dilakukan pada tahap selanjutnya. Untuk tahap ini dilakukan dengan cara berdiskusi juga brainstorming bersama dengan tim saya, dan mencatat hasilnya dengan menggunakan Figma Figjam. Berikut merupakan hasil diskusi dan brainstorming kami dalam tahap define:
Pain Points
Dari proses ini, dapat disimpulkan bahwa 3 permasalahan besar yang saat ini sedang dihadapi adalah:
- Pengguna kurang termotivasi untuk mengerjakan challenge yang telah di ambil
- Pengguna ingin menjalin koneksi dengan pengguna lain yang memiliki ketertarikan isu yang sama
- Pengguna sering lupa dalam mengerjakan aksi harian dari challenge yang telah diambil
How Might We
Berdasarkan hasil diskusi saya dengan tim dalam tahap ini, dapat disimpulkan bahwa hal yang dapat kami lakukan untuk menangani pain points yang ada adalah:
- Bagaimana membuat para pengguna terkoneksi dan saling menjalin komunikasi antar sesama pengguna yang memiliki ketertarikan isu yang sama
- Bagaimana membuat pengguna merasa senang setelah mengerjakan challenge
- Bagaimana membuat pengguna agar tidak lupa mengerjakan aksi harian dari challenge yang telah diambil
3 — Ideate
Tahap ideate merupakan tahap dimana para desaier memulai brainstorming ide solusi berdasarkan How-Might We yang telah dikumpulkan, membuat affinity diagram, prioritasi ide, dan juga membuat gambaran kasar dengan metode Crazy 8’s. Tahap ini juga dilakukan bersama dengan tim saya dengan menggunakan Figma Figjam. Berikut merupakan hasil dari diskusi dan brainstorming kami:
Solution Idea
Affinity Diagram
Prioritazion Idea
Crazy 8's
Setelah selesai melakukan diskusi dan brainstorming, saya dan tim mendefinisikan sistem gamifikasi yang akan diimplementasikan kedalam aplikasi, juga membuat user flow berdasarkan dari hasil diskusi yang telah dilakukan. Berikut merupakan hasil diskusi dari sistem gamifikasi yang akan dibuat:
User flow
Selanjutnya, berikut merupakan hasil dari user flow yang telah dibuat:
4 — Prototyping
Tahap prototyping merupakan tahap dimana designer mendesain interface atau tampilan dari hasil Crazy 8’s, Menyusun UI menjadi sebuah flow proses yang sesuai dengan ide solusi, dan membuat prototype yang dapat digunakan untuk tahap testing. Dalam tahap ini, saya dengan tim membuat desain tampilan Low-Fidelity dan High-Fidelity dengan menggunakan Figma.
Wireframe
Berikut merupakan hasil dari tampilan low-fidelity, berupa wireframe, yang telah dibuat:
1 — Sistem Gamifikasi untuk Challenge
2 — Leaderboard
3 — Challenge untuk Community
4 — Reward Store
UI Styleguide
Setelah membuat tampilan low-fidelity, saya dan tim membuat UI Styleguide terlebih dahulu dengan tujuan untuk memudahkan kami dalam pembuatan tampilan high-fidelity nya. UI Styleguide dibuat sesuai dari design system aplikasi Campaign #ForChange yang diberikan oleh pihak challenge partner. Berikut merupakan UI Styleguide yang telah kami buat:
1 — Logo
2 — Color Style
3— Typography
4— Button Style
5 — Text Field Style
6—Bottom Bars: Bottom Navigator
7 — Layout
8 — Background
9 — Iconography
10 — Champ Illustration
High-Fidelity Design
Setelah selesai membuat UI Styleguide, langkah selanjutnya yang kami lakukan adalah membuat desain tampilan high-fidelity nya. Untuk tahap ini kami mengerjakannya dalam waktu kurang lebih 2 minggu. Berikut merupakan hasil desain tampilan high-fidelity yang telah kami kerjakan:
1 — Sistem Gamifikasi dengan Poin, Badges dan Leveling
Setiap menyelesaikan aksi ataupun challenge, pengguna akan mendapatkan Exp dan Pts. Exp (experience) digunakan untuk menaikan level, sedangkan Pts (points) dapat dikumpulkan dan ditukarkan dengan berbagai hadiah dalam laman Reward Store. Pengguna juga akan mendapatkan badge sebagai tanda menyelesaikan milestone tiap 5 level. Pengguna juga dapat membagikan pencapaiannya ke akun media sosialnya dengan menggunakan fitur share.
2 — Sistem Leaderboard
Untuk saat ini, leaderboard yang telah dibuat adalah untuk jangka waktu perminggu dan perbulan. Leaderboard bersifat publik sehingga dapat dilihat oleh semua pengguna dan akan di restart tiap minggu dan bulannya.
3 — Community Challenge
Para pengguna dapat berkumpul dan menyelesaikan challenge bersama didalam Komunitas. Terdapat juga chartoom agar para anggota dapat saling berinteraksi dan mengingatkan untuk menyelesaikan challenge komunitas yang ada.
4 — Reward Store
Pengguna dapat menukarkan Pts yang telah mereka kumpulkan dengan hadiah menarik sebagai bentuk apresiasi telah berpartisipasi dalam gerakan perubahan.
Prototyping
Berikut merupakan digital prototype awal dari hasil kerja kami:
5 — Testing
Tahap testing merupakan tahap dimana designer mengevaluasi setiap ide solusi, dan juga melakukan interview atau online survey untuk testing. dilakukan untuk mengetahui apakah ide solusi yang ditawarkan sudah sesuai dengan kebutuhan dan keinginan target pengguna. Dalam tahap ini, saya dan tim melakukan in-depth interview dan juga usability testing bersama dengan satu responden yang sesuai dengan kriteria responden yang telah dibuat. Pembuatan kriteria responden ini mengikuti demografi infografis yang diberikan dari pihak Campaign. Berikut kriteria yang dibutuhkan untuk menjadi responden:
- Berusia 18–24 tahun
- Jenis kelamin perempuan
- Berdomisili di seluruh wilayah Indonesia
- Merupakan Socially Minded User (pengguna yang sadar akan isu sosial)
- Memiliki smartphone dan aktif menggunakan media sosial
Usability Testing
Berikut merupakan hasil usability testing bersama dengan responden:
1 — Sistem Gamifikasi: 8.5/10
Responden merasa untuk alur gamifikasi dan sistem poin, badges dan leveling sudah baik. Namun responden menginginkan feedback, seperti reward, yang dapat memberikan kesan atau dorongan kembali kepada pengguna agar lebih termotivasi dalam mengambil dan menyelesaikan challenge.
2 — Leaderboard: 9/10
Adanya leaderboard dirasa kurang perlu menurut responden, karena dalam melakukan kampanye ini bukanlah suatu perlombaan. Untuk sistem leaderboard-nya sudah baik, hanya saja penempatannya kurang pas karena responden lebih menginginkan untuk melihat informasi yang lebih penting dan terkini ketimbang melihat leaderboard ketika membuka aplikasi dan masuk ke laman home.
3 — Community: 6.5/10
Ide komunitas ini cukup unik, namun adanya chatroom di dalam komunitas dirasa memberi kesan agak ambigu. Responden merasa takut jika komunitas ini malah membuat aplikasi menjadi platform messenger ketimbang untuk berkampanye dan melakukan gerakan sosial.
4 — Reward Store: 7/10
Adanya reward store ini sudah baik dan responden merasa senang karena dalam testing gamifikasi, responden mengatakan bahwa ia menginginkan feedback, seperti reward, yang dapat memberikan kesan atau dorongan kembali kepada pengguna agar lebih termotivasi dalam mengambil dan menyelesaikan challenge. Namun untuk beberapa pilihan reward-nya, seperti kaus dan hoodie, masih harus dipertimbangkan kembali karena dinilai dapat menimbulkan isu lingkungan fast-fashion.
Untuk dokumen stimulus user research, record data dan video rekaman hasil wawancara dengan responden dapat dilihat pada tautan berikut ini:
Design Iteration
Setelah melakukan user research terhadap desain yang telah dibuat, saya dan tim melanjutkan untuk membuat iterasi desain berdasarkan hasil user research tersebut. Beberapa hal yang diubah berdasarkan hasil testing adalah sebagai berikut:
- Memindahkkan tata letak leaderboard pada laman home sedikit lebih kebawah agar ketika pengguna membuka aplikasi dan masuk kedalam laman home, pengguna dapat melihat informasi terkini yang ada di dalam aplikasi terlebih dahulu. Setelah itu pengguna dapat men-scroll tampilan sedikit kebawah untuk melihat leaderboard.
- Mengubah letak chatroom pada komunitas sehingga chatroom ada untuk setiap challenge, bukan untuk setiap jenis komunitasnya. Hal ini dilakukan dengan tujuan untuk meminimalisir chatroom yang terlalu ramai karena tujuan utama dari adanya chatroom ini adalah untuk saling mengingatkan agar challenge dari komunitas dapat cepat selesai.
- Mengganti tampilan laman detail challenge komunitas. Sehingga pengguna hanya dapat mengerjakan challenge pada tiap komunitas satu kali sehari. Pengguna juga dapat melihat postingan hari sebelumnya dari seluruh anggota komunitas.
Berikut merupakan hasil digital prototype akhir setelah melakukan iterasi desain:
Kesimpulan dan Saran
Berdasarkan hasil testing yang telah dilakukan, responden telah menilai bahwa fitur gamifikasi aplikasi Campaign #ForChange untuk alur sistem gamifikasi dengan poin, badges dan level, leaderboard, komunitas dan reward store sudah cukup baik dengan rata-rata nilai usability testing keseluruhan adalah 7,75/10. Namun masih ada beberapa hal yang masih bisa diperbaiki ataupun dikembangkan kembali. Berapa hal yang dapat dilakukan dalam perancangan ataupun pengembangan selanjutnya adalah sebagai berikut:
- Memperbaiki tampilan yang masih berantakan, contohnya pada laman chatroom komunitas.
- Mengimplementasikan ide solusi yang belum dibuat dalam proyek ini. Daftar ide solusi yang belum dibuat dapat dilihat pada kolom do next, do later dan later pada tahap prioritazion idea.
- Mengimplementasikan fitur notifikasi kedalam sistem agar notifikasi pengingat dapat muncul secara otomatis pada notification bar pada smartphone milik pengguna.
- Mempertimbangkan untuk pengimplementasian beberapa saran yang diberikan oleh respondedn ketika melakukan user research dan testing, yaitu untuk fitur donasi dan fitur people power (petisi atau pengumpulan suara).
- Mencari ide baru untuk menggantikan ide yang telah ada dengan barang yang cocok untuk ditampilkan pada laman Reward Store.
- Menentukan bagaimana sistem pengiriman dan pembayaran ongkir untuk pengiriman hadiah fisik yang ada pada laman Reward Store.
