Studi Kasus UX: Aplikasi Mobile Pembelajaran Online (SkillUp)
Halo semuanya. Saya akan membahas studi kasus UX mengenai sebuah aplikasi mobile pembelajaran online guna meningkatkan kemampuan dalam bentuk hardskill dan softskill yang sangat dibutuhkan oleh banyak perusahaan akhir-akhir ini.
Background
SkillUp merupakan sebuah aplikasi e-learning dari perusahaan X. Aplikasi ini menyediakan kursus online di berbagai bidang, mulai dari Programming, UI/UX Design, Business, Personal Development, Data Science, dan masih banyak lagi. Melalui SkillUp, kami siap untuk menghasilkan talenta-talenta di Indonesia yang melek terhadap dunia digital, sehingga matang untuk melangkah ke jenjang karir impian.
Namun, terdapat penurunan revenue yang dialami oleh perusahaan X sejak 1 tahun terakhir. Hal tersebut mengharuskan perusahaan yang bergerak di bidang edutech ini untuk melakukan perombakan besar-besaran terhadap platform aplikasinya yang meliputi tampilan dan struktur sistem. Oleh karena itu, saya dan tim melakukan perombakan total pada platform dengan tujuan supaya aplikasi lebih menjadi user friendly dan tampilan menjadi lebih menarik, sehingga dapat meningkatkan motivasi belajar pengguna.
Team Role
Pada kesempatan kali ini, saya bersama dua teman saya, Yanda Nafiri dan Muhammad Shidqi Hadafi, sebagai UI/UX Designer diberikan tanggung jawab untuk melakukan perombakan platform pembelajaran sesuai dengan brief yang telah diberikan oleh perusahaan X. Berikut tanggung jawab yang saya lakukan di tim:
- Mencari tahu kendala, kebutuhan, dan ekspektasi yang menjadi permasalahan, baik dari sisi pengguna dan bisnis. (Tim)
- Menyusun berbagai peluang yang dapat menjadi solusi pokok permasalahan. (Tim)
- Melakukan brainstorming ide atas pokok permasalahan yang dipilih. (Tim)
- Melakukan kategorisasi sesuai data yang diperoleh. (Tim)
- Menentukan skala prioritas fitur yang akan dikembangkan. (Tim)
- Membuat user flow. (Tim)
- Membuat solusi desain. (Individu)
- Melakukan testing aplikasi SkillUp. (Individu)
- Dokumentasi hasil akhir. (Individu)
Tools
Gambar di atas merupakan beberapa tools yang saya gunakan saat mengerjakan studi kasus ini. Untuk lebih lengkapnya dijelaskan sebagai berikut:
- Figma: Melakukan brainstorming dengan dua anggota lainnya melalui Figjam File dan menggambar solusi desain menggunakan Design File. Selain mendesain, pada Figma juga digunakan untuk testing aplikasi SkillUp berupa prototype.
- Notions: Mendokumentasikan copy yang terdapat dalam interface design.
- Google Docs: Mendokumentasikan stimulus user research.
- Google Sheets: Mendokumentasikan hasil data user research dengan partisipan.
- Google Meet: Media interview dengan partisipan riset.
- Medium: Mendokumentasikan hasil akhir UX Case Study.
Objective
- Mencari tahu kebutuhan, kendala, dan ekspektasi pengguna dalam melakukan pembelajaran online.
- Mencari tahu kebiasaan pengguna dalam melakukan pembelajaran online.
- Mempermudah pengguna dalam menggunakan aplikasi untuk mengakses pembelajaran.
- Membuat tampilan antarmuka yang lebih nyaman dilihat.
- Membantu pengguna untuk belajar secara daring di luar jam kantor maupun perkuliahan.
- Mencari tahu tingkat kegunaan, kemudahan, dan kepuasan dari solusi ide yang ditawarkan pada alur proses pendaftaran dan masuk, pencarian kursus dan transaksi, kelas, serta detail materi dan hasil belajar.
Process Method
Saya menggunakan metode Design Thinking dalam mencari solusi masalah pada studi kasus UX ini. Alasannya, yaitu berpusat pada pengguna dalam memcahkan masalah (user-centric), proses yang tidak harus linear sehingga memudahkan pada saat melakukan iterasi, menciptakan banyak ide ketika sesi brainstorming, mengadopsi pendekatan langsung dalam pembuatan desain awal dan pengujian desain tersebut.
Design Thinking memiliki 5 fase atau tahapan proses, antara lain:
Emphatize, mengeksplorasi dan mengerti apa yang menjadi kebutuhan dan kendala dari pengguna. Memahami situasi terbaru yang pengguna lakukan, rasakan, dan pikirkan.
Define, memprioritaskan dan mendefinisikan insights, masalah, dan kesempatan yang diidentifikasi dalam penelitian.
Ideate, melakukan brainstorming terhadap semua kemungkinan ide dan solusi terhadap apa yang telah diidentifikasi dalam tahapan define.
Prototype, membuat solusi ide ke dalam prototype. Mencari tahu apa yang berguna dan tidak dengan cara mendefinisikan MVP.
Testing, menguji solusi desain prototype terhadap real users. Catat semua feedback dari penguna dan lakukan iterasi desain agar produk dapat memenuhi kebutuhan pengguna.
Design Thinking
1. Emphatize
Sebelum mendefinisikan problem statement dan melakukan ideation, kami diminta oleh perusahaan X untuk membuat atau melakukan improvisasi dengan beberapa brief atau requirement. Terdapat beberapa masalah yang telah tim riset perusahaan X dapatkan dari penggunanya. Masalah tersebut antara lain:
- Pengguna tidak senang dengan tampilan.
- Platform-nya rumit untuk digunakan.
- Loading yang sangat lama.
- Susah mencari motivasi untuk belajar.
Oleh karena itu, saya dan tim melakukan benchmarking dengan aplikasi dan website platform kelas online terkait, seperti SkillAcademy, Skilvul, Coursera, dan Udemy.
2. Define
Setelah mengetahui masalah dari sudut pandang pengguna pada tahap empathize, selanjutnya saya dan tim mencoba untuk merincikan berbagai masalah dan kendala, sesuai dengan yang pengguna rasakan.
User Target
- Berusia 18–55 tahun.
- Mahasiswa atau Pekerja.
- Memiliki ketertarikan untuk meningkatkan skill.
- Berdomisili di seluruh wilayah Indonesia.
- Memiliki kemampuan berbahasa Indonesia sebagai native language.
Pain Points
Diperoleh beberapa pain points, seperti tampilan tidak user friendly, tidak ada fitur proses materi belajar, sulit untuk mendapatkan solusi belajar, dan sebagainya. Untuk lebih lengkapnya bisa dilihat sebagai berikut:
How Might We
Setelah mendefinisikan pain points dari sudut pandang pengguna, hal yang selanjutnya dilakukan adalah mengubah permasalahan menjadi tantangan melalui pertanyaan singkat (HMW). Berikut hasil diskusi HMW yang kami peroleh:
Berdasarkan hasil voting tim, kami memilih hasil HMW berikut untuk dilanjutkan ke tahap ideate:
How Might We mempermudah user dalam menggunakan aplikasi untuk mengakses pembelajaran?
3. Ideate
Berdasarkan hasil HMW yang telah dipilih pada tahap define, selanjutnya kami melakukan brainstorming untuk mendapatkan solusi ide permasalahan. Kami membagi solusi ide menjadi 3 warna sebagai berikut:
- Warna kuning → Berhubungan dengan pengguna.
- Warna biru → Berhubungan dengan teknis aplikasi.
- Warna hijau → Berhubungan dengan jaringan internet.
Solution Idea
Berikut hasil beberapa solusi yang kami dapatkan:
Affinity Diagram
Setelah melakukan brainstroming dan mengumpulkan solusi ide, kami mengelompokkan ide-ide tersebut sesuai dengan kategori. Terdapat 9 kategori di dalam Affinity Diagram kami, antara lain:
- Pembayaran dan Diskon
- Mentor dan Diskusi
- Login
- Penghemat Data
- Interface atau Tampilan
- Bookmark atau To Do List
- Review Capaian Pembelajaran
- Gamification
- Pencarian Course yang Ingin Diambil
Prioritization Idea
Kami menyusun dan memasukkan Affinity Diagram ke dalam 4 kuadran prioritas, di antaranya:
Kuadran 1 — Yes, Do It Now = Yang akan diimplementasikan pertama atau paling diprioritaskan karena memiliki user value yang tinggi, tetapi membutuhkan effort yang rendah.
Kuadran 2 — Do Next = Memiliki user value dan effort yang tinggi.
Kuadran 3 — Do Last = Memiliki user value dan effort yang rendah.
Kuadran 4 — Later = Memiliki user value yang rendah, tetapi membutuhkan effort yang tinggi.
Crazy 8's
Setelah melakukan brainstorming solusi ide dan menyusunnya ke dalam kuadran prioritas, hal yang selanjutnya dilakukan adalah menuangkan solusi ide ke dalam sebuah desain. Kami menggunakan metode Crazy 8’s untuk membuat solusi desainnya. Setiap anggota menggambar kerangka desain aplikasi SkillUp selama 8 menit di sebuah kertas HVS yang dibagi menjadi 8 bagian.
User Flow
4. Prototype
Pada tahap prototype berisikan user flow, desain dalam bentuk Low-Fidelity Design dan High-Fidelity Design, serta prototype aplikasi SkillUp. Kerangka aplikasi SkillUp yang telah dibuat dalam Crazy 8’s dilengkapi kembali pada tahap Low-Fidelity Design.
Low-Fidelity Design (Wireframe)
Low-Fidelity Design atau yang biasa disebut dengan Wireframe merupakan sebuah desain yang masih memiliki tingkat presisi rendah, baik dari sisi jarak antar elemen, warna, ukuran tombol, dan komponen lainnya. Wireframe dibuat untuk menentukan tata letak ketika pertama kali mendesain.
Design System
- Atom
1 — Logo and Color Style Guideline
2 — Text Style, Button, and Text Field Guide Line
3 — Iconography
- Molecule
High-Fidelity Design
High-Fidelity Design merupakan sebuah desain yang telah memiliki tingkat presisi tinggi, baik dalam segi ukuran, warna, jarak, dan komponen lainnya. Desain dalam Hi-Fi memiliki akurasi yang detail.
1 — Splash Screen & Onboarding
Pada halaman Splash Screen terdapat logo aplikasi SkillUp. Sedangkan, pada halaman Onboarding terdapat logo aplikasi dan Copywriting diikuti dengan tombol Call to Action.
2 — Login & Sign Up
3 — Home
Pada halaman beranda terdapat kategori kelas, kelas yang populer atau paling banyak diminati, dan kelas yang terakhir dipelajari oleh pengguna. Terdapat perbedaan di fitur ‘terakhir dipelajari’ sebelum dan sesudah pengguna melakukan transaksi pembayaran kelas.
4— Material Detail / Learning Page
Gambar di atas merupakan perbedaan ketika pengguna melihat detail materi dalam case sebelum dan sesudah melakukan pembayaran. Apabila pengguna berhasil menyelesaikan transaksi, maka secara otomatis silabus materi akan terbuka dan dapat diakses.
5— Course Categorization
Pada halaman materi, di section ‘semua’, terdapat berbagai pilihan kategorisasi kelas, seperti UI/UX Design, Digital Marketing, Business, Data Science, dan sebagainya. Terdapat perbedaan sebelum dan sesudah pengguna melakukan transaksi pembayaran kelas.
6 — Material Process
Apabila pengguna sudah membayar, tetapi belum pernah menyelesaikan kelas, maka pengguna akan diarahkan ke section ‘sedang dikerjakan’.
7 — Transaction Page
8— Learning Outcomes
Saat pengguna telah berhasil menyelesaikan seluruh materi di satu kelas, maka pengguna dapat mengakses ‘hasil belajar’ dan dapat mengunduh sertifikat, melihat hasil capaian, serta melihat rekapitulasi nilai.
Prototype Link
5. Testing
Tahap terakhir dalam metode Design Thinking adalah Testing. Saya menggunakan metode In-Depth Interview (IDI) untuk melakukan user testing dan usability testing. Untuk mempermudah proses wawancara dengan pengguna, saya membuat dokumen Stimulus Research, yang mana berisi research objective, responden criteria, question list, dan research scenario. Terdapat 4 task flow yang akan saya lakukan pengujian kegunaan terhadap solusi desain yang telah dibuat kepada pengguna, antara lain:
[Task 1] — Pendaftaran dan Masuk
Meminta pengguna untuk melakukan Pendaftaran dan Masuk ke dalam aplikasi (berhenti di halaman Home) dan observasi apa yang dilakukan oleh responden.
[Task 2] — Pencarian dan Transaksi
Meminta pengguna untuk melakukan Pencarian Kursus UI/UX dan meminta untuk melakukan Transaksi hingga berhasil (berhenti di halaman Transaksi Berhasil) dan observasi apa yang dilakukan oleh responden.
[Task 3] — Kelas
Meminta responden untuk melihat halaman Kelas dan observasi apa yang dilakukan oleh responden.
[Task 4] — Detail Materi dan Hasil Belajar
Setelah menyelesaikan kelas, minta responden untuk melihat Detail Materi dan Hasil Belajar dan observasi apa yang dilakukan oleh responden.
Scoring
Untuk penilaian, saya memilih untuk menggunakan metode SEQ (Single Ease Question). Metode SEQ merupakan sebuah skala yang memiliki rating dari 1 hingga 7 poin untuk mengukur kemudahan yang dirasakan pengguna saat mengerjakan semua skenario atau tugas yang diberikan. Pengguna akan dinyatakan passed jika memperoleh skor ≥ 5,5.
Usability Testing Result
Setelah melakukan uji prototype dengan pengguna, diperoleh beberapa feedback dan penilaian dari pengguna terhadap solusi desain yang telah dicoba.
- Participant 1 (PASSED)
>> Feedbacks Overall:
[Ease of Use]
- Memudahkan pengguna karena tampilan fresh dan simpel.
[Usability]
- Untuk sekedar kursus online, kegunaannya cukup bagus. Materinya cuman ada di aplikasi ini.
- Video pembelajaran sebaiknya tidak dihubungkan ke YouTube agar pengguna lebih merasa premium.
[Satisfaction]
- Puas karena pembelajaran ada dalam bentuk video agar bisa di-download, sehingga dapat dipelajari kembali tanpa harus mengeluarkan kuota lagi.
- Mentor harus sabar karena bisa jadi ada pertanyaan ulang (fitur forum diskusi).
>> Feedbacks of Tasks:
[Task 1] — Pendaftaran dan Masuk
- Kalo bisa daftarnya pake sosial media, seperti Google atau Facebook.
[Task 2] — Pencarian dan Transaksi
- Cukup membantu karena penempatan untuk checkout, pemilihan layout pas di bawah karena pake tangan dan mudah dijangkau sama ibu jari.
- Button ‘lanjutkan’ agak di ke ataskan, disesuaikan dengan ketinggan total harga karena ada sedikit space antara voucher dan button. Untuk beberapa orang yang ibu jarinya besar, kurang enak untuk menjangkaunya.
[Task 3] — Kelas
- So far so good, cuman lebih diperhatikan untuk beberapa fitur agar dapat responsif di setiap device.
- Button copy dan state sudah baik karena dapat mengarahkan user untuk langsung ke kelas (efisien).
- Presentase proses agak kurang jelas. Bisa jadi apa yang sudah dipelajari atau presentase dari kita ketika selesai mengerjakan materi itu (video-nya belum ke play, tetapi sudah mengerjakan kuis).
- Lebih baik jika elemen UI/UX (video) poinnya berapa persen, kerjakan kuis juga memperoleh persen proses. Di materi juga lebih baik dikasih penjelasan, misal 1/2 (1/x).
[Task 4] — Detail Materi dan Hasil Belajar
- Dapat memahami sesuai arahan button.
- Sebaiknya rank diganti oleh rekap nilai. Dari hasil nilai di rank, yang dimunculkan bukan rank-nya, tetapi lebih baik presentasenya, misal kita lebih baik dari 70% total peserta.
- Participant 2 (PASSED)
>> Feedbacks Overall:
[Ease of Use]
- Tingkat kemudahan sudah baik. Tidak neko-neko, tidak keruweten, tidak simpel-simpel banget, tetapi tetap menarik.
[Usability]
- Tingkat kegunaannya sudah cukup baik. Namun, lebih baik tampilan menu jangan di bawah karena sudah sering digunakan (bosen) dan supaya pas nge-scroll lebih clear.
[Satisfaction]
- Secara overall sudah puas karena warnanya pada aplikasinya adem.
>> Feedbacks of Tasks:
[Task 1] — Pendaftaran dan Masuk
- Informasi pada pendaftaran kurang tambahan umur dan tanggal lahir karena biasanya disuruh mengisi jenis kelamin & tanggal, bulan, tahun lahir. Kalo untuk pengguna ngga penting-penting amat. Namun, pengaruh untuk pengguna tidak sekarang, tetapi mungkin 10 tahun yg akan datang.
[Task 2] — Pencarian dan Transaksi
- Responden tidak biasa menggunakan fitur kategori, tetapi ngeliatnya visual. Kalo cuma mau nyobain aplikasinya dan blm ada keinginan mau ngikutin apa, visual yang utama. Beda cerita kalo dari awal sudah nentuin pengen belajar A, maka akan langsung memilih A.
- Button copy sudah jelas, tidak bikin bingung.
- Informasi sudah sesuai & bgaus, ada deskripsi, materi, silabus, dan lain-lain.
[Task 3] — Kelas
- Video sebaiknya tidak terhubung ke YouTube agar hanya ada di dalam aplikasi SkillUp.
- Informasi yang ditampilkan sudah sesuai untuk pengguna.
- Tidak terdapat kendala, mudah diakses.
- Lebih senang liatnya jika submateri ada deskripsi singkat mengenai apa yang mau dipelajari agar user penasaran buat belajar.
- Proses tidak perlu karena bikin penuh, prefer apa yang telah dipelajari warnanya dibedain karena lebih simpel & tidak memakan tempat.
[Task 4] — Detail Materi dan Hasil Belajar
- Tidak terdapat kendala.
- Bintang diganti tulisan “Congratulations telah menyelesaikan …”
- Fitur kerjakan kuis sudah cukup segitu, cuman bagusnya kuisnya di-lock dulu. Jadi, sebelum menyelesaikan video, tidak dapat mengerjakan kuis.
- Fitur bintang (peringkat) agak membingungkan.
- Konsep bintang, lebih baik diganti ucapan selamat & grade-nya. Misal, C (belum memuaskan) atau langsung bintang 1.
Conclusions
What did I learn?
Pada pengerjaan UX Case Study ini saya belajar bahwa berempati kepada (calon) pengguna sangat diperlukan karena dengan berempati, kita akan lebih memahami kebutuhan, kendala, dan ekspektasi apa yang pengguna rasakan. Saya juga belajar untuk melatih critical thinking dan teamwork yang baik. Teamwork menjadikan saya pribadi yang lebih berpikiran terbuka terhadap pendapat, saran, dan juga kritik. Selain mengasah softskills, saya merasa jika hardskills saya meningkat, seperti jadi lebih mengetahui bagaimana cara membuat desain yang lebih rapih, konsisten, dan efisien melalui penggunaan design systems. Meski sebelumnya sudah pernah melakukan user testing dan usability testing, hal tersebut membuat saya ingin lebih melakukan yang terbaik dalam tahap wawancara dengan real-users. Namun, satu hal yang paling menjadikan pengalaman berkesan saya adalah saya bersyukur dapat mengenal teman-teman baru di grup SVI 10, khususnya rekan satu tim saya, Yanda Nafiri dan Muhammad Shidqi Hadafi. Tak terkecuali mentor terbaik saya yang dengan sabar memberikan ilmu dan wawasan baru kepada para mentee, kak Sarah Anindya Shofi. Semoga dengan pengalaman ini bisa menjadikan batu loncatan saya untuk berkarir di bidang Product Design.
Research Results
Berdasarkan hasil wawancara pengujian kegunaan dengan 2 partisipan, dapat disimpulkan bahwa aplikasi SkillUp yang saya buat telah dapat memberikan kemudahan bagi pengguna. Namun, masih terdapat beberapa feedback yang disampaikan oleh pengguna terhadap aplikasi SkillUp. Hal ini menandakan bahwa aplikasi SkillUp masih perlu dilakukan iterasi agar dapat memenuhi apa yang pengguna butuhkan.
What are the next steps?
- Melakukan iterasi sesuai feedbacks pengguna.
- Melengkapkan fitur dan halaman agar flow desain lebih clear dan proses bisnis berjalan baik.
- Mengasah empati, sehingga kita dapat menempatkan diri di sudut pandang pengguna dan dapat memahami pengguna lebih dalam.
- Mengeksplor banyak desain agar menjadi terbiasa dalam mendesain.
- Mengikuti trend design agar selalu up-to-date karena desain akan selalu berevolusi.
Sekian studi kasus UX yang saya tulis. Ini adalah studi kasus UX pertama saya yang didokumentasikan. Mohon dimaklumi apabila masih terdapat banyak kekurangan. Jika berkenan untuk memberikan feedbacks, silakan reply artikel ini. Saya akan sangat mengapresiasinya. Terima kasih. :)
