UI/UX Case Study: E-Learning Mobile App “Belajar Yuk”
Disclaimer
“Proyek ini merupakan bagian dari program training UI/UX yang diadakan oleh Skilvul (skilvul.com) untuk program Kampus Merdeka yang diselenggarakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia.”
Latar Belakang
Disclaimer: Ini merupakan UX challenge brief Skilvul, Skilvul memberikan brief berupa latar belakang, masalah, dan user persona.
Sebuah perusahaan Belajar Yuk yang bergerak di bidang edutech sedang melakukan perombakan besar-besaran pada platform edukasinya yang meliputi tampilan dan struktur sistem. Perusahaan Belajar Yuk 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.
Objektif
Tujuan dari aplikasi Belajar Yuk adalah Pengguna senang dengan tampilan aplikasi, platform mudah digunakan, waktu akses tidak terlalu lama, dan mampu menumbuhkan motivasi belajar Pengguna.
Peran Dalam Tim
Tim kami terdiri dari Laili alfizah, Abidatur Rohmah, Achmad Azka Muaffan .S.P, dan saya sendiri. Tim kami membagi tanggung jawab yang sama dalam menangani proyek ini sehingga kami memiliki fokus tanggung jawab yang berbeda. Dalam tim ini, tanggung jawab saya adalah sebagai berikut:
Tools
- Figma
- Google Docs
- Google Sheet
- Zoom
Design Process
Design process menggunakan design thinking. Berikut adalah setiap tahapan yang dilakukan dan hasil yang didapatkan.
1 — Empathize
Untuk sumber data dan informasi, kami mendapatkannya dari:
- Challenge Brief
Disclaimer: UX Challenge brief dilakukan oleh Skilvul. Kami melanjutkan tahap Emphatize (Secondary Research), Define, Ideate, Prototype, dan Testing.
- Secondary Research: Jurnal, Artikel, Data Analitik Pemerintah
2 — Define
Pada tahap ini, kami mengumpulkan informasi yang telah diperoleh pada tahap Empathize. Kemudian, kami melakukan observasi untuk mengetahui kebutuhan pengguna.
Pain Points
Kami merumuskan hasil dari tahap sebelumnya ke dalam pain points. Berdasarkan hasil diskusi, terdapat beberapa pain points yang dihasilkan.
How-Might We
Dari masalah tersebut, kami melakukan How-Might We untuk mengubah masalah tersebut menjadi pertanyaan.
3 — Ideate
Pada tahap ini, kami melakukan brainstorming untuk menemukan solusi berdasarkan How-Might We.
Solution Idea
Berdasarkan How-Might We, terdapat beberapa ide solusi yang dihasilkan.
Affinity Diagram
Setelah membuat solution idea, didapatkan fitur apa saja yang dapat dikembangkan untuk setiap ide solusi.
Prioritization Idea
Ide-ide tersebut ditentukan skala prioritasnya berdasarkan parameter user value dan effort untuk dikembangkan pada tahap selanjutnya.
4 — Prototyping
User Flow
User flow merupakan diagram alur mengenai langkah-langkah yang harus dilakukan pengguna untuk menyelesaikan task. Berikut adalah user flow untuk aplikasi Belajar Yuk.
Wireframe
Wireframe merupakan tata letak dalam versi Low-Fidelity untuk membantu desainer menyajikan informasi dan membentuk outline struktur serta layout interface dengan cepat. Berikut adalah wireframe untuk aplikasi Belajar Yuk.
Design System
Design system merupakan kumpulan komponen yang memudahkan desainer dalam pengerjaan user interface. Berikut adalah design system untuk aplikasi Belajar Yuk.
High-Fidelity
Setelah menyelesaikan tahap user flow, wireframe, dan design system, langkah selanjutnya adalah membuat High-Fidelity dengan menggunakan design system yang telah dibuat sebelumnya. Berikut adalah High-Fidelity untuk aplikasi Belajar Yuk.
Halaman Onboarding
Sebelum masuk ke Sign Up dan Sign In, aplikasi akan menampilkan splash screen dan onboarding page.
Halaman Sign Up
Sebelum masuk ke halaman home, Pengguna diharuskan untuk melakukan SignUp dengan memasukkan nama, email, dan password apabila belum memiliki akun.
Halaman Sign In
Sebelum masuk ke halaman home, Pengguna diharuskan untuk melakukan Sign In dengan memasukkan email dan password apabila sudah memiliki akun.
Halaman Home dan Kursus
Setelah berhasil masuk, Aplikasi akan menampilkan halaman home. Pengguna dapat melihat video rekomendasi, promo, dan kursus yang tersedia pada aplikasi Belajar Yuk.
Halaman Transaksi
Untuk melakukan transaksi pembelian kursus, Pengguna dapat memilih kursus yang ingin dibeli. Kemudian, Pengguna memilih voucher dan metode pembayaran.
Halaman Pembelajaran
Untuk melakukan pembelajaran, Pengguna dapat memilih kursus yang ingin dikerjakan. Kemudian, Pengguna dapat memilih materi apa yang ingin dipelajari.
Halaman Leaderboard
Untuk melihat fitur gamifikasi seperti pencapaian, posisi dan runtutan hari, Pengguna dapat masuk ke halaman leaderboard.
Halaman Profil
Untuk melihat pencapaian dan kursus yang diikuti, Pengguna dapat melihat di halaman profil.
Prototype
Setelah proses desain untuk seluruh halaman selesai, langkah selanjutnya adalah membuat prototype. Desain High-Fidelity diurutkan berdasarkan user flow. Berikut adalah prototype untuk aplikasi Belajar Yuk.
5 — Testing
Setelah membuat prototype, kami melakukan Usability Testing dan In-Depth Interview bersama target pengguna dengan kriteria yang dilakukan secara daring. Narasumber memberikan saran dan masukan untuk prototype aplikasi Belajar Yuk. Kami memberikan masing-masing 5 task yaitu pendaftaran dan login, transaksi daftar pembelian, pembelajaran, halaman leaderboard, dan halaman profil.
Setelah menyelesaikan prototype, tahap terakhir adalah pengujian. Sebelum melakukan pengujian, kami melakukan beberapa persiapan seperti membuat dokumen stimulus user research dan record data user research yang digunakan untuk sesi wawancara dengan target pengguna. Dalam pengujian ini, kami menggunakan SEQ (Single Ease Question) untuk mengukur tingkat kemudahan penggunaan aplikasi dengan 5 skenario.
- Melakukan pendaftaran dan login
- Melakukan transaksi pembelian kursus
- Melakukan pembelajaran
- Mengakses halaman leaderboard
- Mengakses halaman profil
Dari penilaian dengan menggunakan SEQ, hasilnya adalah 6 dari 7 yang berarti setiap tugas yang dilakukan mudah dimengerti. Selain itu, usability testing dilakukan untuk mendapatkan feedback secara detail dari pengguna. Narasumber memberikan beberapa hal yang perlu diperhatikan untuk evaluasi aplikasi Belajar Yuk sebagai berikut.
Untuk ukuran font pada halaman profil dan leaderboard terlalu kecil sehingga sulit untuk dibaca.
Fitur riwayat transaksi sebaiknya tidak perlu diletakkan di halaman profil.
Berdasarkan feedback dari pengguna, berikut adalah hasil evaluasi untuk aplikasi Belajar Yuk.
1 — Mengubah ukuran font pada halaman profil dan leaderboard.
2 — Menghilangkan fitur riwayat transaksi pada halaman profil
Kesimpulan
Saya merasa senang dan bangga untuk menyelesaikan UX case study Aplikasi EduTech berbasis mobile dengan nama “Belajar Yuk”. Ini adalah sebuah pengalaman baru bagi saya untuk mengerjakan studi kasus yang berkaitan dengan EduTech. Dengan studi kasus tersebut, saya belajar banyak mengenai bagaimana membuat flow yang baik, mencari motivasi untuk lebih giat mengerjakan kursus, dan situasi dimana saya harus mendalami peran sebagai pengguna. Hal tersebut tentu saja diperlukan terutama pada saat membuat prototype sehingga menarik dan mudah dipahami oleh pengguna.
Apa yang saya pelajari dari Proyek ini ?
Mendesain suatu aplikasi menjadi hal yang seru ketika kita melakukannya dengan niat yang baik serta dapat berkomunikasi baik dengan tim. Ketika sudah ditetapkan apa saja tugas dan batas waktu pengerjaan, maka dengan jelas harus dilaksanakan dengan baik. Banyak hal yang harus diperhatikan dalam mendesain sebuah aplikasi. Tidak hanya tentang keindahan, pengalaman pengguna pun harus diperhatikan.
Menurut saya, aplikasi yang baik adalah aplikasi dengan tampilan menarik sehingga pengguna tidak bosan pada saat menggunakannya serta flow atau alur proses yang mudah dimengerti pengguna sehingga tidak menimbulkan kesalahpahaman antara desainer, developer, dan pengguna.
Terimakasih sudah membaca sampai selesai !
Let’s get connected with LinkedIn here 😊
