UI/UX Case Study : Fitur Gamifikasi untuk Campaign.com

DISCLAIMER⚠️: Proyek ini merupakan bagian dari UI/UX Training Program Kampus Merdeka yang diadakan oleh Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia dengan Skilvul dan Campaign.com sebagai Challenge Partner. Kami tidak bekerja atau diikat dalam kontrak professional oleh Campaign.com.

Latar Belakang

Mari kita mulai dengan pertanyaan…

Aplikasi Campaign.com itu apa sih? dan mengapa saya tertarik memilihnya untuk UX case study ke dua saya?

Campaign merupakan jejaring sosial pertama yang dibangun untuk perubahan dan dampak sosial yang didirikan pada tahun 2015. Namun, beberapa user telah mengeluh tentang bagaimana menggunakan aplikasi ini terkait dengan UI Design. Oleh karena itu, saya memilih aplikasi ini sebagai case study untuk project akhir UI/UX Challenge Partner dari Skilvul. Project akhir ini bertujuan untuk mengidentifikasi masalah kegunaan dan meningkatkan User Interface dan User Experence pada aplikasi untuk memberikan pengalaman yang lebih baik bagi user.

Objective

Tujuan dari project ini adalah:

1. Untuk menyediakan fitur gamifikasi untuk meningkatkan motivasi user untuk menyelesaikan challenges.
2. Untuk melihat kemudahan penggunaan dan kegunaan dari ide-ide solusi yang telah dibuat.

Tools

Tools yang digunakan oleh saya dan rekan tim saya adalah :

Peran dalam Tim

Dalam project ini, saya bekerja sama dengan dua anggota tim saya, Amanda Chelsi Nofanti dan Nugrahani. Kami bekerja sama dan berkolaborasi untuk menghasilkan solusi desain terbaik bagi Campaign. Serta untuk mentor saya, kak Sarah Anindya Shofi yang membimbing kami selama kegiatan program ini berlangsung.

Meet our team!

Di dalam tim, tanggung jawab saya adalah sebagai berikut:

1. Mencari ide selama tahap define dan ideate saat tahap Design Thinking.
2. Membuat user flow dan wireframes dari sketsa crazy 8's.
3. Bersama rekan tim saya membuat UI Style Guide untuk aplikasi.
4. Mendesign UI (Profile, Leaderboard, Badges, Sertifikat, Reward).
5. Membuat Flow Prototype dari Desain yang sudah dibuat.
6. Bersama rekan tim saya membuat dokumen stimulus research dan data record.
7. Melakukan interview dan testing user tentang fitur yang telah dibuat.

Design Process

Dalam pemecahan masalah tentunya harus dipilih pendekatan-pendekatan tertentu dalam prosesnya. Nah, dalam kasus ini, saya dan rekan tim saya memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Design thinking digunakan karena diyakini proses ini akan mampu memberikan solusi desain yang efektif karena pendekatan ini sistematis dan detail.

Design Thinking Concept Photo by Ex3 Labs on Medium

1 — Empathize 🧐

Pada tahap ini, kami akan melakukan 3 hal utama; Merencanakan Penelitian; Membuat Stimulus Research, dan Melakukan Penelitian. Proses awal ini adalah tahap untuk menemukan masalah dari aplikasi Campaign.

Aplikasi Campaign

Campaign merupakan jejaring sosial pertama yang dibangun untuk perubahan dan dampak sosial yang didirikan pada tahun 2015. Dengan menggunakan hashtag #ForChange, Campaign.com memiliki tujuan untuk membantu organisasi, komunitas, dan perusahaan, serta individu, mengatur kampanye yang berkelanjutan dan berdampak sosial. Kita dapat berpartisipasi dalam merealisasikan dampak dalam bentuk donasi ke berbagai kegiatan sosial tanpa harus mengeluarkan uang tetapi menggantinya dengan tindakan produktif.

Aplikasi Campaign, yang telah diunduh oleh lebih dari lima puluh ribu pengguna, mendapat rating 4,5 (Google play store) dan 4,6 (App store). Berdasarkan beberapa ulasan yang diberikan oleh user, aplikasi ini memiliki banyak masalah termasuk loading yang lama dan lainnya. Berikut adalah beberapa ulasan di google play store:

Untuk mengetahui lebih lanjut tentang masalah aplikasi ini, kami melakukan research menggunakan metodologi kualitatif (In-Depth Interview) kepada 3 users yang menggunakan atau pernah menggunakan aplikasi Campaign dengan kriteria sebagai berikut:

1. Pelajar, Mahasiswa dan Internship

2. Berusia 16–24 tahun

3. Gender : Perempuan dan Laki-laki

4. Berdomisili di seluruh wilayah Indonesia

5. Memiliki ketertarikan dalam bidang kegiatan sosial

6. Ingin bertemu dengan orang-orang baru

7. Sedang mempersiapkan diri masuk dunia kerja atau baru bekerja

Dalam disituasi pandemi ini, proses In-Depth Interview dilakukan secara online menggunakan zoom.

Untuk hasil research selengkapnya bisa dilihat di bawah ini:

Emphatize — Research aplikasi Campaign

2 — Define📝

Setelah melakukan tahap emphatize dan telah mengumpulkan masalah bagi para user, kami melanjutkan ke tahap define untuk mendefinisikan apa yang user butuhkan ke Pain Point.

— Pain Point

Di bawah ini adalah Pain Point yang dihadapi user dari aplikasi Campaign.

Pain Points from users

— How Might We

Setelah pain points dikumpulkan, kami melanjutkan dengan membuat How Might We (HMW) untuk mencari ide solusi dari pain points yang ada. Setelah semua anggota memberikan ide, kemudian yang kami lakukan adalah voting untuk menentukan ide yang selanjutnya akan digunakan.

Di sini, kita dapat menemukan hal yang mendapat suara terbanyak dan akan menjadi HMW kami, yaitu bagaimana cara pengguna agar tertarik menggunakan aplikasi Campaign untuk mengikuti Challenge kegaiatan sosial?

3 — Ideate 💡

Pada tahap ini, kami melakukan brainstorming semua ide yang mungkin akan dapat digunakan untuk mengatasi masalah yang telah didefinisikan sebelumnya.

— Solution Idea

Berdasarkan HMW yang telah ditentukan sebelumnya, kami telah memilih poin “bagaimana cara pengguna agar tertarik menggunakan aplikasi Campaign untuk mengikuti Challenge kegaiatan sosial?” dan kemudian masing — masing anggota tim harus menemukan ide solusi dari poin tersebut.

— Affinity Diagram

Tim saya dan saya mengeluarkan cukup banyak ide dalam tahap solution idea. Selanjutnya, kita menggunakan Affinity Diagram untuk mengklasifikasikan fitur-fitur ini dalam kelompok berdasarkan karakteristik dan penggunaan yang sama.

Pada saat proses diskusi affinity diagram ini kami membagi menjadi 6 category diantaranya adalah: Gamification, Social, Challenge, Notification, Profile, dan Others.

— Prioritization Idea

Berdasarkan prioritization idea, ide solusi yang berada dalam posisi “Yes, Do It Now” akan kami coba untuk membuat wireframe UI dengan teknik Crazy 8's ini.

Ide solusi pada posisi pertama adalah :

1. Check — in harian
2. Fitur gamification seperti Quiz
3. Fitur Story
4. Fitur Journey mood
5. Reward
6. Leaderboard
7. Level Account
8. Badge dan Sertifikat

— Crazy 8's

Pada tahap ini, kami membuat sketsa pada sebuah kertas HVS yang berjumlah 8 bagian dalam 8 menit sesuai dengan prioritization idea dan affinity diagram yang kami buat sebelumnya. 1 menit untuk 1 layar.

Crazy 8’s yang kami lakukan beserta voting

Dari hasil Crazy 8’s kami memilih design terbaik yang akan dibuat menjadi UI Hight Fidelity.

— User Flow

Pada tahap ini, kami juga membuat user flow untuk beberapa proses. Dengan adanya user flow, alur kerja suatu fitur dapat dengan mudah terlihat dan memudahkan untuk pembuatan wireframe.

Berikut ini adalah flow dari aplikasi yang sudah saya lakukan bersama anggota tim:

4 — Prototyping 👩🏻‍💻

Pada tahap ini, kami membuat Wireframe, high fidelity dan prototype dari hasil user flow yang telah kami buat pada tahap sebelumnya.

— Wireframe

Setelah menyelesaikan user flow, kita lanjutkan dengan membuat wireframe berdasarkan apa yang kita sketsa dalam metode crazy 8’s. Berikut hasil wireframe berdasarkan user flow yang sudah tim kami buat sebelumnya :

Wireframe yang dibuat sebelum prototyping

— Design System (UI Style guide)

Setelah kita membuat wireframe, selanjutnya kami membuat komponen Design system untuk memudahkan kami menyusun design UI. Di sini, kami membuat styleguide untuk color, typography, icons, buttons, dan text fields.

— UI Design

Setelah Design system dan wireframe selesai, kami lanjut membuat high-fidelity design mockup yang bertujuan untuk menunjukkan hasil akhir dari solusi ide yang diberikan.

Hi-fi Design - secara keseluruhan

— Prototype

Setelah tahap empathize, define, dan ideate telah dilakukan, kami membuat prototype Figma. Prototype ini berisi 45 screen yang mencakup kegiatan check-in point, ambil challenge, melaksanakan aksi, mendapatkan sertifikat, dan melihat profile.

Untuk melihat prototype aplikasi Campaign, anda dapat melihatnya di bawah ini:

5 — Testing 📄

— Usability Testing

Tahap terakhir adalah usability testing. Usability testing berguna untuk menguji apakah design baru yang kami buat dapat membantu user menyelesaikan task mereka. Seperti proses research IDI, proses usability testing dilakukan secara online menggunakan aplikasi zoom dengan 5 users. User akan melakukan share screen ketika menggunakan prototype yang kami buat.

Usability Testing

— Task

Kami meminta user untuk melakukan tasks berikut. Kami melakukan ini dengan memberi mereka scenario, seperti “Bayangkan bahwa anda akan mengikuti challenge pada aplikasi Campaign. Apa yang akan anda lakukan di aplikasi Campaign untuk mengikuti challenge itu”

1. Melakukan check — in harian
2. Memilih challenge dan melakukan aksi
3. Mendapatkan badge dan sertifikat
4. Melihat posisi di Leaderboard
5. Menukarkan reward

https://openfieldx.com/choose-ux-metrics-for-edtech-product/

Di sini, kami menggunakan Single Ease Question (SEQ) sebagai UX metric yang merupakan skala 1–7 yang diukur dari sisi kemudahan, kegunaan serta fungsinya. Usability Testing dilakukan dengan skor keberhasilan minimum 5 yaitu 75% dari goals kami. Berikut adalah hasil tes kami:

User Research

Hasilnya cukup memuaskan karena skor yang diperoleh dari setiap tugas melebihi tingkat keberhasilan yang telah ditentukan yaitu 75% dari goals kami, di mana kami dapat mencapai skor rata — rata 6 untuk setiap 5 tasks yang kami berikan kepada user, juga skor 6,5 untuk re-design secara keseluruhan.

Setelah mengajukan beberapa pertanyaan dan meminta user untuk melakukan tasks berdasarkan scenario dalam proses usability testing, semua user setuju bahwa design baru lebih baik dan terlihat lebih modern daripada design campaign saat ini. Para user menyukai fitur — fitur yang ditawari oleh ide kami, seperti story, games, sertifikat, dan leaderboard.

Iterasi

Setelah melakukan proses Usability Testing, kami membuat perbaikan design yang telah didiskusikan terlebih dahulu berdasarkan rekomendasi dari user.

Kesimpulan

Berdasarkan hasil tes kami, semua task mencapai skor minimum, bahkan ada beberapa yang melampauinya. Semua fitur yang kami tawarkan menerima respon positif dari user, sehingga dapat disimpulkan bahwa ide — ide yang kami berikan cukup untuk menjawab gamifikasi solusi untuk Campaign.

Saya ingin mengucapkan terima kasih kepada Skilvul yang merupakan tempat di mana saya dapat belajar UI/UX dan juga mentor saya, kak Sarah Anindya Shofi, untuk memberi saya banyak feedback saat belajar di Skilvul mengenai UI/UX. Dan tidak lupa rekan tim saya Amanda Chelsi Nofanti dan Nugrahani, yang telah bekerja sama untuk menyelesaikan project ini sampai akhir 💙.

Saat mengerjakan case study ini, saya belajar bahwa melakukan case study UI/UX tidaklah mudah. Proses mengerjakan project akhir ini akan menjadi pelajaran bagi saya di masa depan. Tentu saja, masih banyak yang harus ditingkatkan pada design ini, jangan ragu untuk meninggalkan feedback atau saran :).

Terima kasih sudah membaca! Semoga Anda menemukan insightful dan berharap tulisan ini dapat menginspirasi Anda.