UX Case Study: Belancar — Merancang Aplikasi Pembelajaran Online yang User Friendly

12 min readOct 24, 2021

Latar Belakang

Pada abad ke-21 ini, lebih tepatnya di era revolusi industri 4.0, manusia berorientasi pada teknologi dalam kehidupan sehari-harinya. Sehingga dengan memanfaatkan teknologi ini, pembelajaran dalam kehidupan masyarakat dapat dilakukan kapan dan di mana saja. Dengan demikian, tentu saja pembelajaran melalui online course sudah bukan hal asing lagi. Banyak pengguna teknologi, baik dengan mobile maupun web, menambahkan ilmu pengetahuan mereka dengan belajar melalui online course yang sudah banyak tersedia sekarang. Mereka dari jangkauan umur berapa saja, baik pelajar, pekerja, atau yang lain dengan kesibukan masing-masing, dapat meluangkan waktu mereka dengan mudah untuk belajar melalui online course.

Selain materi yang diberikan mampu menambahkan ilmu dan keterampilan pembelajar dengan baik, aspek dari sisi teknologi itu sendiri penting agar aplikasi pembelajaran ini mendapatkan objektif pembelajaran daring tersebut sepenuhnya. Sisi teknologi yang mendukung tujuannya adalah dari segi antarmuka dan bagaimana pengalaman pengguna dalam menggunakannya atau secara umum disebut sebagai UI/UX. Aplikasi online course dengan UI/UX yang user friendly, atau memberi kemudahan untuk digunakan, kebergunaan, dan kepuasan pengguna, adalah hal utama yang akan dibahas dari studi kasus UX ini. Saya yang mengikuti program Skilvul Virtual Internship (SVI) diberikan UX Challenge untuk merancang sebuah aplikasi online course yang user friendly berdasarkan deskripsi tantangan yang diberikan.

Permasalahan

UX Challenge tersebut memberikan studi kasus di mana sebuah perusahaan X yang bergerak di bidang edutech sedang melakukan perubahan total pada platform edukasinya. Platform edukasi tersebut memiliki objektif memberikan berbagai macam kursus online untuk menyiapkan talenta-talenta digital di Indonesia dengan menyediakan berbagai macam kursus online di bidang digital, seperti Programming, Digital Marketing, UI/UX Design, Product Management dan masih banyak lagi. Akan tetap berdasarkan riset kecil dari tim, diketahui Perusahaan X mengalami penurunan revenue sejak 1 tahun lalu dikarenakan permasalahan sebagai berikut:

User tidak senang dengan tampilan
Platformnya rumit untuk digunakan
Loading yang sangat lama
Susah mencari motivasi untuk belajar

Tujuan Perancangan

Dengan hasil riset permasalahan ini, Perusahaan X ingin mengubah total platformnya dengan tujuan agar aplikasi pembelajaran tersebut lebih menjadi user friendly dengan tampilan yang menarik dan dapat meningkatkan motivasi belajar ketika menggunakan platformnya. Aplikasi tersebut dapat memberikan manfaat sesuai objektifnya untuk pengguna dengan pengguna merasa mudah dan puas dalam penggunaannya. Hasil rancangan yang diharapkan adalah aplikasi pembelajaran online yang user friendly sehingga dapat memenuhi kebutuhan pengguna untuk meningkatkan motivasi belajar dalam melakukan pembelajaran online. Dengan aplikasi ini memenuhi objektif, diharapkan pula semakin banyak pengguna berminat belajar dengan platform edukasi tersebut sehingga revenue Perusahaan X akan terdapat kenaikan kembali.

Peran dalam Perancangan Aplikasi

Saya merupakan peserta SVI dari kelompok 16, di mana saya termasuk bagian dari kelompok kecil 10. Kelompok kecil tersebut terdiri dari 4 anggota, yaitu saya, Rachel Haryawan, Muhammad Diki Hendriyanto, dan Diyah Anggraeny. Khusus pada tahap Design Thinking: Define dan Ideate, pengerjaan dilakukan secara berkelompok. Saya mengerjakan seluruh bagian lainnya secara individu. Bagian-bagian tersebut terdiri dari tahap:

Design Thinking: Empathize
Design Thinking: Prototyping

==> Pembuatan user flow & wireframe

==> Pembuatan desain user interface

==> Pembuatan prototype

Design Thinking: Testing

==> Pembuatan stimulus user research

==> Melakukan usability testing

Deskripsi Perancangan

Berdasarkan permasalahan yang telah dijelaskan sebelumnya, UX Challenge ini meminta untuk merancang desain UI/UX untuk platform Learning Management System. Berikut merupakan deskripsi yang harus dilakukan beserta target penggunanya:

Tema: Learning Management System (Online Course)
Platform: Mobile Application
Cakupan Proses Bisnis:

==> Pendaftaran Akun

==> Login

==> Home

==> Detail Kursus

==> Transaksi Pembelian

==> Proses Pembelajaran

Catatan: Warna dan logo dibebaskan menggunakan aset apapun serta nama perusahaan dapat diubah sesuai dengan preferensi.

Target pengguna:

Berumur 18–55 tahun
Mahasiswa/mahasiswi atau Karyawan/karyawati
Berdomisili di seluruh wilayah Indonesia
Memiliki kemampuan Bahasa Indonesia sebagai bahasa utama
Memiliki level ekonomi tingkat menengah ke atas
Pernah atau sedang menggunakan platform pembelajaran online
Memiliki tingkat pemahaman tentang penggunaan IT dengan baik

Proses Desain

Proses desain digunakan untuk meningkatkan usability dan desain tampilan yang lebih optimal sehingga merupakan proses yang akan digunakan untuk menyelesaikan solusi permasalahan kasus ini. Untuk studi kasus ini, saya menggunakan proses desain Design Thinking yang terdiri dari 5 tahap, yaitu empathize, define, ideate, prototyping, dan testing. Berikut merupakan masing-masing tahap proses yang dilakukan untuk merancang aplikasi pembelajaran online yang user friendly.

1. Empathize

Tujuan dari tahap empathize adalah untuk mencari tahu kebutuhan pengguna dengan melakukan riset sebelum mendefinisikan permasalahan dan membuat ide solusi. Telah diketahui sebelumnya dari tim riset bahwa fokus permasalahan yang dialami pengguna adalah merasa aplikasi online course yang digunakan tidak memenuhi kriteria user friendly. Karena telah diberikan secara langsung pada deskripsi permasalahan, tahap empathize tidak dilakukan pada tantangan ini.

2. Define

Tahap define adalah mendefinisikan permasalahan pengguna dari hasil empathize dengan menentukan pain points. Untuk pengerjaan bagian ini, kelompok saya dapat memberikan definisi permasalahan tambahan yang belum disebut dari permasalahan yang diberikan. Berikut merupakan daftar hasil pain points dari pengguna melalui aplikasi FigJam:

Selanjutnya adalah membuat How-Might We sebagai opportunity di mana pengguna ditempatkan sebagai pusat objek permasalahan. Pada tahap ini, kami membuat daftar yang dapat menjadi solusi yang dibutuhkan target pengguna dari pain points di atas. Setelah menentukannya, kami melakukan voting untuk solusi yang dapat diprioritaskan untuk dibuat terlebih dahulu. Berikut merupakan hasil voting How-Might We dari kelompok saya:

Berdasarkan hasil voting di atas, kami memilih dua solusi untuk dilanjutkan ke tahap proses berikutnya. Kedua solusi tersebut adalah:

Membuat aplikasi yang memotivasi user untuk belajar
Membuat tampilan aplikasi yang lebih bagus

3. Ideate

Pada tahap ketiga ini, kami memulai brainstorming ide berdasarkan kedua How-Might We yang terpilih, yaitu membuat aplikasi yang memotivasi pengguna untuk belajar dan membuat tampilan aplikasi yang lebih bagus. Berikut merupakan daftar ide solusi yang kami buat:

Solution Idea berdasarkan 2 *How-Might We yang terpilih*

Selanjutnya, kami solusi-solusi yang telah kami berikan dikelompokkan dalam Affinity Diagram berdasarkan kategori fungsinya. Berdasarkan Affinity Diagram yang dapat dilihat di gambar bawah ini, terdapat 7 kategori dan 1 yang tidak termasuk kategori manapun:

Affinity Diagram berdasarkan Solution Idea yang telah ditentukan

Setelah membuat kategori yang dimasukkan ke dalam Affinity Diagram, kami membuat Prioritization Idea, yaitu untuk memilih ide prioritas dalam perancangan desain aplikasi ini. Pembagian ini dibagikan menjadi 4 kategori (berdasarkan user value dan effort) di mana setiap kelompok dari Affinity Diagram dimasukkan ke salah satu dari keempat kategori tersebut melalui persetujuan kelompok. Keempat kategori tersebut adalah:

YES, DO IT NOW! (kiri atas)
DO NEXT (kanan atas)
DO LATER (kiri bawah)
DO LAST (kanan bawah)

Berikut merupakan hasil Prioritization Idea kami:

Prioritization Idea dari Affinity Diagram yang telah dibuat

Berdasarkan Prioritization Idea di atas, fitur yang menjadi prioritas perancangan desain kami adalah:

Personal Stats
Discount
Category
User Interface

Setelah menentukan fitur-fitur prioritas, kami lanjut ke tahap berikutnya, yaitu membuat Crazy 8’s. Crazy 8’s ini adalah membuat 8 wireframe dalam satu kertas selama 8 menit (namun untuk tantangan ini diperbolehkan lebih dari 8 menit) berdasarkan cakupan proses bisnis yang telah ditentukan. Sehingga, kami membuat gambaran kasar pada halaman Pendaftaran Akun, Login, Home, Detail Kursus, Transaksi Pembelian, dan Proses Pembelajaran. Hasil Crazy 8’s kami dapat dilihat sebagai berikut:

4. Prototyping

Berlanjut ke tahap proses berikutnya di mana seluruh pengerjaannya mulai dilakukan secara individu, saya membuat user flow dari tiga alur proses utama yang dibutuhkan, yaitu Pendaftaran Akun, Transaksi Pembelian, dan Proses Pembelajaran. Untuk Pendaftaran Akun yang memiliki alur sederhana dapat digabung dengan Transaksi Pembelian dalam 1 user flow, sedangkan Proses Pembelajaran dengan 1 user flow sendiri. Pembuatan userflow dibuat dengan FigJam lalu dimasukkan ke halaman Figma. Berikut merupakan kedua user flow yang saya buat:

User Flow Pendaftaran Akun — Transaksi Pembelian & User Flow Proses Pembelajaran

Setelah menentukan user flow, saya membuat wireframe menggunakan aplikasi Figma pada halaman yang sama dengan user flow. Saya membuat wireframe ini berdasarkan hasil voting dari Crazy 8’s di mana setiap cakupan proses dipilih 1 dari 4 yang telah digambar oleh setiap anggota kelompok di kertas. Walaupun wireframe ini diambil berdasarkan hasil voting Crazy 8’s, diizinkan untuk tidak meniru persis hingga membuat perubahan untuk pengerjaan wireframe ini. Saya membuat 8 wireframe sebagai berikut:

Setelah membuat wireframe agar dapat membantu pembuatan desain UI, saya membuat UI styleguide dengan fungsi untuk membantu pembuatan desain pula. Beberapa di antaranya adalah color style dan text style untuk menentukan warna dasar dan pengaturan text. Warna utama yang saya pilih adalah warna biru, dikarenakan warna biru dapat merupakan warna yang tenang dan umum berasosiasi dengan edukasi, sehingga cocok untuk aplikasi online course.

Untuk bagian yang dapat berinteraksi dengan pengguna, saya membuat components. Components ini merupakan bagian dari desain UI yang dapat dibentuk secara grup dan dianggap sebagai satu elemen. Hal ini dapat mempermudah apabila bagian tersebut digunakan beberapa kali dalam mendesain UI sehingga tidak perlu membuat dari awal bagian yang mengulang atau memiliki dasar yang sama. Components yang saya buat adalah untuk header, buttons, bottom navigation, dan lain-lain.

Setelah dua bagian yang dapat membantu perancangan desain UI ini, saya mulai membuat nama untuk aplikasi pembelajaran online ini beserta logonya yang diambil dari website logoipsum. Saya memilih nama Belancar sebagai nama aplikasinya, yang terdiri dari dua kata belajar dan lancar, di mana diharapkan pembelajaran pengguna akan lancar dengan aplikasi ini. Berikut merupakan desain logo dari aplikasi Belancar:

Logo aplikasi Belancar (sumber: logoipsum.com)

Untuk pembuatan desain UI, banyak bagian mengambil dasarnya dari wireframe dan styleguide maupun components yang telah dibangung sebelumnya. Namun seiringnya pembuatan lebih dalam, terdapat beberapa perubahan dari wireframe dan components maupun penambahan styleguide. Beberapa components juga dilakukan pengaturan ulang agar pas dengan desain UI yang dibuat. Selanjutnya, pembuatan UI dari kedua user flow, yaitu Pendaftaran Akun — Transaksi Pembelian dan Proses Pembelajaran, terus dirancang hingga selesai, termasuk dengan mencari referensi UI dari aplikasi edukasi yang ada.

Tahap terakhir dari tahap proses prototyping adalah pembuatan prototyping itu sendiri dari desain aplikasi yang sudah dibangun. Terdapat sekitar 12 bagian dari desain halaman-halaman yang telah dibuat, yaitu Login, Daftar Akun, Home (termasuk menampilkan kursus yang sedang diskon dengan harga berwarna merah), Detail Kursus, Keranjang, dan Kursus Saya untuk user flow Pendaftaran Akun — Transaksi Pembelian, serta Overview Kursus, Materi Video/Teks, Latihan, Proyek Akhir, dan Sertifikat. Berikut merupakan hasil prototyping yang dibuat untuk aplikasi Belancar:

Prototyping aplikasi Belancar

5. Testing

Tahap proses terakhir, yaitu testing, dilakukan untuk mengevaluasi setiap ide solusi dengan melakukan tes. Tampilan yang telah dibangun perlu diklarifikasi dengan testing, di mana untuk tantangan UX ini diperlukan cukup 1 orang. Saya diwajibkan membangung Stimulus User Research untuk menentukan research objective, kriteria responden, daftar pertanyaan, dan research scenario. Research objective dibuat untuk mencari tahu kebutuhan, kebiasaan, dan bagaimana meningkatkan motivasi belajar pengguna dalam melakukan pembelajaran online, di mana dengan melakukan usability testing pada alur proses Pendaftaran Akun, Transaksi Pembelian, dan Proses Pembelajaran aplikasi Belancar. Kriteria responden diambil berdasarkan target pengguna yang telah ditentukan. Daftar pertanyaan untuk pertanyaan yang diberikan kepada responden sebelum memulai testing dengan pertanyaan seputar pengalamannya dalam melakukan pembelajaran online serta preferensinya dalam aplikasi yang digunakannya. Research scenario ditulis untuk skenario yang dilakukan untuk usability testing dari responden. Saya juga membuat sheet berisi Record Data User Research, yaitu untuk mencatat dari hasil usability testing yang dilakukan. Record Data ini menentukan apakah setiap alur proses dari aplikasi saya sudah sesuai dengan kebutuhan pengguna atau belum, menggunakan Single Ease Question (SEQ). Apabila tingkat SEQ yang dari 1 hingga 7 telah melewati 5.5, maka alur proses tersebut sudah baik.

Selanjutnya adalah melakukan usability testing dengan responden langsung. Saya menggunakan aplikasi Google Meet untuk melakukan wawancara ini dengan responden saya, di mana seluruh proses wawancara tersebut direkam. Responden saya sudah ditentukan memenuhi kriteria responden yang ditentukan, yaitu mahasiswi berumur 19 tahun. Saya memulai wawancara dengan perkenalan singkat dan memberikan daftar pertanyaan terlebih dahulu sebelum testing prototype aplikasi Belancar tersebut. Responden tersebut menyempatkan untuk belajar di jam kuliah untuk mempelajari beberapa bahasa baru, seperti bahasa Korea, dengan aplikasi pembelajaran bahasa secara online. Responden memberi jawaban berikutnya untuk media pembelajaran yang digunakan, kendala dalam pembelajaran bahasa online, fitur yang disukai dan tidak disukai, apakah tampilan aplikasi penting, platform pembelajaran yang mudah digunakan, dan yang dibutuhkan agar tetap termotivasi belajar dengan aplikasi yang digunakan. Setelah responden memberikan seluruh jawaban tersebut, saya mencatat jawaban tersebut di Record Data User Research.

Selesai pada bagian daftar pertanyaan, saya melanjutkan sesi wawancara ke bagian research scenario. Saya menjelaskan singkat tentang aplikasi Belancar dan apa yang akan responden saya lakukan dengan link Figma yang telah diberikan. Berikut merupakan tanggapan responden dari masing-masing alur proses yang dilakukan testing:

TASK 1 — Pendaftaran & Login

Responden diminta untuk melakukan pendaftaran dan login ke dalam aplikasi dan berhenti di halaman Home. Saya lalu mengobservasi apa yang dilakukan oleh responden. Setelah sampai pada di halaman Home, saya menanyakan kendala dan apakah informasi pendaftaran sudah sesuai dengan kebutuhannya di mana responden menjawab bahwa seluruh alur proses task ini sudah dimengerti semuanya dan semua fitur sudah ada. Terakhir, SEQ yang diberikan responden adalah 7 sehingga TASK 1 — Pendaftaran & Login lulus.

TASK 2 — Transaksi Pembelian

Responden kembali diminta untuk melakukan pemilihan kursus dan diminta untuk melakukan transaksi hingga berhasil dan berhenti di halaman Transaksi Berhasil. Saya juga kembali mengobservasi apa yang dilakukan oleh responden. Untuk alur proses ini, responden mengalami kebingungan dalam bagian Tambah Keranjang. Responden merasa bahwa tahap memilih pilihan keranjang lebih baik dapat dilakukan pada setiap opsi, bukan terlalu terarah seperti pada prototyping sekarang. Tidak seperti bagian Beli Sekarang yang langsung mudah untuk melakukan pembayaran, Tambah Keranjang membuat alur proses lebih sulit. Untuk bagian Pembayaran, responden tidak merasa kesulitan. Terakhir, SEQ yang diberikan responden adalah 4 sehingga TASK 2 — Transaksi Pembelian belum lulus.

TASK 3 — Proses Pembelajaran

Pada task terakhir, responden diminta untuk melihat halaman Kelas, pembelajaran, hingga mendapatkan sertifikat. Saya juga melakukan observasi apa yang dilakukan oleh responden. Walaupun responden tidak kebingungan dalam alur proses ini, responden memberikan masukan pula akan lebih ada poin buat jawaban yang salah pula. Setelah itu, responden memberikan masukan pula bahwa alur proses lainnya sudah lancar, termasuk karena sudah skor jawaban benar dan desain tampilan sudah memenuhi. Terakhir, SEQ yang diberikan responden adalah 6 sehingga TASK 3 — Proses Pembelajaran lulus.

Revisi Desain

Revisi desain dilakukan pada alur proses Transaksi Pembelian yang belum lulus dan alur proses Proses Pembelajaran yang masih membutuhkan revisi berdasarkan masukan dari usability testing walaupun sudah lulus SEQ.

Revisi TASK 2 — Transaksi Pembelian

Revisi bagian transaksi pembelian dilakukan untuk kendala pengguna di mana merasakan kebingungan dalam alur proses Tambah Keranjang. Lebih tepatnya tanda pilihan untuk pilih semua, tidak pilih semua, pilih atau tidak jadi memilih beberapa, hingga memilih satu saja untuk melakukan pembayaran. Untuk mengurangi kebingungan pengguna dalam alur pembayaran pada keranjang ini, saya menghapus dua kursus yang dimasukkan ke dalam keranjang sebelumnya. Menurut saya, dengan hanya satu kursus yang berada di keranjang ini dapat memenuhi alur proses untuk melakukan transaksi pembayaran yang dapat menunjukkan fitur pilih dan tidak pilih, namun tidak memusingkan pengguna dalam melakukan pembayaran. Berikut merupakan perbandingan dari sebelum dan sesudah revisi yang telah dilakukan:

Sebelum revisi, memiliki banyak opsi namun terlalu terarah untuk melakukan checkout

Setelah revisi, cukup dilakukan satu opsi untuk melakukan checkout

Revisi TASK 3 — Proses Pembelajaran

Untuk bagian Proses Pembelajaran, revisi yang dilakukan adalah membuat tampilan untuk jawaban soal yang salah pada halaman Latihan. Sebelum revisi, pada prototyping hanya diberikan satu opsi yang benar, sehingga apabila yang dipilih adalah opsi salah tidak akan mengarah ke mana, termasuk tidak memberi tahu tentang poin dari hasil jawaban salah. Setelah revisi, saya menambahkan opsi salah pula dengan warna merah dan poin tidak bertambah (dalam kasus materi 1 yang belum mendapatkan poin sama sekali, tetap 0). Berikut merupakan perbandingan dari sebelum dan sesudah revisi yang telah dilakukan:

Sebelum revisi, hanya terdapat opsi jawaban benar

Setelah revisi, diberikan opsi salah jawaban

Kesimpulan

Berdasarkan hasil usability testing, dua dari alur proses sudah lulus, yaitu Pendaftaran & Login dan Proses Pembelajaran. Untuk alur proses Transaksi Pembelian, hasilnya belum lulus sehingga saya melakukan revisi desain kembali berdasarkan saran yang diberikan, yaitu memperbaiki alur bagian halaman Tambah Keranjang. Alur proses Proses Pembelajaran, walaupun sudah lulus, saya juga melakukan revisi dari masukan yang diberikan, yaitu apabila jawaban dari halaman Latihan yang salah.

Aplikasi Belancar ini masih memiliki kekurangan untuk menjadi solusi tepat untuk permasalahan yang diberikan. Dari salah satu solusi yang diberikan untuk menangani permasalahan pengguna tidak senang dengan tampilan ini, aplikasi ini sudah membuat tampilan aplikasi yang memenuhi ekspektasi berdasarkan hasil dari usability testing. Untuk menangani platform dengan alur rumit, dua dari tiga alur berhasil lulus SEQ sehingga sudah cukup user friendly. Namun, untuk menangani kendala motivasi belajar pengguna, meski aplikasi Belancar memiliki pemberian sertifikat bagi yang berhasil lulus kursusnya, belum dapat dipastikan bahwa sertifikat tersebut memenuhi solusi yang diberikan. Menurut saya, bagian menemukan cara agar pengguna tetap termotivasi belajar dengan aplikasi online course adalah dengan melakukan riset lebih dalam dan usability testing dengan jumlah orang yang lebih banyak.