UX Case Study: GamEdu — Perancangan Aplikasi Pembelajaran dan K…

Eveline

Eveline Kurnia

UX Case Study: GamEdu — Perancangan Aplikasi Pembelajaran dan Kursus Online berbasis Gamification

8 min read
·
Oct 9, 2022

Introduction

Hai teman-teman semua! Pertama-tama saya ingin mengucapkan terima kasih atas kesediannya untuk membaca UX Study Case: GamEdu mengenai Perancangan Aplikasi Pembelajaran dan Kursus Online berbasis Gamification yang telah saya dan tim buat. Sebelumnya perkenalkan saya Eveline Kurnia Dharma seorang Mahasiswa Sistem Informasi yang sedang mengikuti kegiatan Kampus Merdeka bersama Skilvul #Tech4Impact UI/UX Design Mastery pada program Studi Independen Bersertifikat.
Senang dapat bergabung dan menjadi bagian dari program ini karena selain menambah ilmu dan pengalaman, saya juga mendapatkan komunitas baru yang isinya teman-teman dari seluruh Indonesia dengan berbagai jurusan untuk dapat saling berkolaborasi. Tidak hanya itu di Skilvul saya juga difasilitasi mentor-mentor yang berpengalaman sehingga mendapatkan banyak hal baru mengenai serba-serbi dalam bidang UI/UX Design.
Dalam studi kasus ini saya akan membahas mengenai Challenge Brief mengenai sebuah perusahaan yang bergerak di bidang edutech dengan menyediakan kursus di bidang Programming, Digital Marketing, UI/UX Design, Product Management, dan lainnya. Senang dapat bermanfaat, selamat menikmati dan Membaca!

Challenge Brief

Latar Belakang

Sebuah perusahaan X yang bergerak di bidang edutech sedang melakukan perombakan besar-besaran pada platform edukasinya yang meliputi tampilan dan struktur sistem. Perusahaan X merupakan pemilik platform edukasi yang memberikan berbagai macam kursus online untuk menyiapkan talenta-talenta digital di Indonesia dengan menyediakan kursus di bidang Programming, Digital Marketing, UI/UX Design, Product Management, dan masih banyak lagi. Akan tetapi, perusahaan X mengalami penurunan revenue sejak 1 tahun lalu dan tim riset telah melakukan riset kecil dimana hasilnya sebagai berikut.

Masalah

User tidak senang dengan tampilan
Platformnya rumit untuk digunakan
Loading yang sangat lama
Susah mencari motivasi untuk belajar
Dengan hasil riset ini, Perusahaan X ingin merombak total platformnya dengan tujuan untuk lebih menjadi user friendly dengan tampilan yang menarik dan dapat meningkatkan motivasi belajar ketika menggunakan platformnya.

Target Pengguna

Umur : 18–55 tahun
Profesi : Karyawan/karyawati
Bahasa : Indonesia
Level ekonomi : Menengah ke atas

Deskripsi Tugas

Berdasarkan permasalahan yang dialami oleh Perusahaan X, buatlah desain UI/UX untuk platform Learning Management System dengan target user di atas. Berikut kriteria tugas yang diberikan. Tema : Learning Management System (Online Course) Platform : Mobile Application Cakupan Proses Bisnis : - Pendaftaran Akun - Login - Home - Detail Kursus - Transaksi Pembelian - Proses Pembelajaran

Research Objective

Mencari tahu apa yang dibutuhkan user ketika melakukan pembelajaran online.
Mengetahui aktivitas user saat melakukan pembelajaran online.
Mencari tahu motivasi user dalam melakukan pembelajaran online.

Peran dalam Tim

Sebagai UX Designer dalam pengerjaan project ini saya berkolaborasi dengan keempat rekan saya yaitu
,
,
, dan
di tim Skilvul — Kelompok 33(Tirti Gangs). Dalam tim ini kami berkolaborasi bekerja secara bersama-sama dalam pembuatan project Aplikasi ‘GamEdu’ dari tahap awal(secondary research) sampai dengan tahap akhir(usability testing)

Design Process

Dalam mengerjakan tugas project ini saya dan tim menggunakan metode Design Thinking. Dimana Design Thinking merupakan salah satu metode pola pikir untuk berempati terhadap permasalahan dan masalah yang berpusat pada pengguna(kebutuhan user) dengan menyediakan pendekatan berbasis solusi.
Metode ini saya gunakan sebagai pendekatan design process karena melihat kepraktisan dalam penggunaannya dan dapat menyelesaikan suatu masalah yang kompleks dengan melibatkan kebutuhan user. Pada metode Design Thinking ini terdapat 5 tahapan yang terdiri dari:

1 — Emphatize

Pada tahap Emphatize ini, tim kami mulai melakukan secondary research dengan metode seperti berikut:
Competitor Analysis
Feedback User dari App Store/Play Store dari aplikasi serupa
Mencari referensi case terkait di website seperti Medium, IEEE, ACM, dll
Data analitik dari pemerintah/instansi riset
Secondary Research Saya dan tim melakukan pembuatan secondary research dengan tujuan untuk mengetahui permasalahan yang dialami user saat melakukan pembelajaran online sehingga dapat mencari solusi untuk kebutuhan yang user perlukan.
Berikut adalah hasil secondary research yang ditemukan:

2 — Define

Setelah melakukan tahap Emphatize, tahap selanjutnya yaitu Define. Pada tahap ini saya dan tim melakukan pembuatan Pain Points, How-Might We, Solution Idea, dan Prioritization Idea.
Pain Points Berikut saya lampirkan beberapa pain points yang sudah dikumpulkan berdasarkan hasil dari secondary research yang dialami user.
How-Might We Kemudian saya dan tim melakukan proses brainstorming dimana kita membingkai ulang pertanyaan sehingga jawaban yang muncul dapat menjadi langkah kongkrit dengan menggunakan metode How-Might We (HMW).

3 — Ideate

Setelah melakukan tahap emphatize dan define permasalahan user, saya dan tim melakukan tahap selanjutnya yaitu ideate dengan melakukan brainstorming ide solusi yang akan diberikan, kemudian kami menuangkannya ke dalam Solution Idea dan Prioritization Idea. Dalam pembuatan ini saya menggunakan tools Figjam.
Solution Idea Berdasarkan How-Might We yang dibuat sebelumnya, saya dan tim membuat beberapa solusi ide dari permasalahan yang dialami oleh user dalam melakukan pembelajaran online.
Prioritization Idea Setelah proses brainstorming kita memiliki banyak solusi ide, untuk mempermudahnya saya dan tim menyusun prioritization idea agar dapat memprioritaskan solusi ide berdasarkan effort dan value.

4 — Prototyping

Pada tahap ini saya dan tim akan melakukan Prototyping yang dimulai dari pembuatan UserFlow, Wireframe, Design System sampai dengan UI Design(High-Fidelity). Selain itu tujuan melakukan prototype disini, kita bisa mengetahui desain yang tepat dan berfungsi sesuai dengan kebutuhan user.

User Flow

Pertama saya dan tim membuat user flow yang merupakan sebuah diagram untuk menunjukkan user mengenai langkah-langkah dalam menjalankan aplikasi atau menyelesaikan sebuah task.

Wireframe

Setelah membuat User Flow saya dan tim masuk ke tahap pembuatan Wireframe atau tampilan low-fidelity yang dapat membantu dan mempermudah kami ketika masuk ke tahap UI Design dengan memberikan informasi yang ada pada aplikasi.

Design System

Setelah selesai dalam membuat wireframe, saya dan tim membuat Design System yang bertujuan untuk membuat desain terlihat lebih konsisten, selain itu juga membantu UI Designer agar dapat meminimalisir waktu yang digunakan. Berikut Design System yang saya dan tim buat yang terdiri dari Color Style, Button Style, Input Field, Font Style, Header Style, Icongraphy, dan lainnya.
High Fidelity — UI Design Pada tahap High Fidelity ini saya memulai untuk mengimplementasikan semua solusi ide yang telah dibuat sebelumnya ke dalam bentuk visual atau user interface design.
GamEdu — Prototype Hasil Prototype kami dapat diakses dibawah ini
Prototype GamEdu

5 — Testing

Setelah membuat prototype, saya melakukan testing ke pengguna dengan tujuan untuk mengetahui hasil dari interaksi antara user dengan aplikasi yang sudah dibuat. Tidak hanya itu pada tahap testing ini saya dan tim sebagai UI UX Designer juga mendapatkan insight serta feedback dari pengguna yang dapat berguna untuk meingkatkan hasil dari desain produk. Saya dan tim melakukan testing kepada 1 user via Zoom.
Sebelum melakukan ini saya dan tim membuat Stimulus Research yang berisikan Research Objective, Respondent Criteria, List of Questions, dan Research Scenario, berikut saya lampirkan Stimulus Research yang telah saya buat disini.
Usability Metrics Pada project ini Usability Metrics yang saya gunakan adalah Single Ease Question yang merupakan skala 1–7 untuk mengukur tingkat dari sisi kemudahan. Dimana nantinya partisipan akan diberikan 12 pertanyaan terbuka yang telah disusun sebelumnya dalam stimulus research sehingga partisipan menjawab berdasarkan pengalaman yang pernah dilakukan saat menggunakan aplikasi pembelajaran online.
Setelah selesai menjawab pertanyaan user melakukan task yang diberikan saya dan tim untuk melakukan uji coba prototype pada aplikasi “GamEdu” dan dapat memberikan nilai yang sesuai dengan percobaannya.

Kesimpulan

Akhirnya, kita sampai di bagian kesimpulan, untuk menyelesaikan cas study ini banyak tahapan yang saya lakukan hingga dapat menyelesaikan permasalahan yang terdapat pada challenge brief. Selama proses pengerjaan dengan menggunakan metode Design thinking yang terdiri dari 5 tahapan yaitu Emphatize →Define →Ideate →Prototype →Testing dengan mengidentifikasi masalah yang dialami user hingga mengeluarkan berbagai ide solusi untuk memecahkan masalah tersebut, terima kasih untuk mentor saya dan tim yang telah membimbing dan selalu mendukung saya agar dapat memecahkan setiap masalah yang ada dengan berbagai solusi. Dari proyek inii saya ingin menyimpulkan:
Terus belajar dan berusaha untuk menggali hal-hal baru, tidak peduli seberapa jauh orang lain sudah melangkah, tapi yang penting fokus pada proses yang sedang kita jalani.
Menganalisa masalah sesuai dengan masalah yang benar-benar dialami pengguna hingga dapat memberikan solusi terbaik untuk menciptakan produk digital yang kreatif dan inovatif.

Rekomendasi Selanjutnya

Pada rekomendasi selanjutnya ini saya akan memberikan beberapa tips dari pembelajaran yang sudah saya lalui:
Pertama yaitu penting banget dalam melakukan pembuatan design system agar mempermudah dan mempercepat proses pengerjaan kita sebagai UI Designer.
Kedua jangan berpikir untuk berkompetisi tapi coba untuk melakukan kolaborasi yang baik dengan tim sehingga memunculkan rasa kekompakan dan menghasilkan ide-ide solusi yang terbaik.
Ketiga terus munculkan rasa keingintahuan dan jangan pernah takut untuk bertanya hingga memberikan hasil terbaik.
Terima kasih dan Selamat Anda telah selesai membaca studi kasus ini sampai akhir! Senang dapat berbagi pengalaman dan setiap proses yang saya lakukan pada studi kasus ini.
Salam Hangat, Eveline Kurnia Dharma.
Like this project

Posted Jun 23, 2025

Hai teman-teman semua! Pertama-tama saya ingin mengucapkan terima kasih atas kesediannya untuk membaca UX Study Case: GamEdu mengenai Perancangan Aplikasi Pemb…