Studi Kasus UX : Redesign E-Learning Universitas Mulawarman (MOLS)

Muhammad Faris
10 min readMay 27, 2023

Studi Kasus ini diambil berdasarkan skripsi saya yang berjudul “Perancangan Ulang UI/UX Mulawarman Online Learning System (MOLS) dengan Metode Design Thinking”

Overview

Sekilas tentang MOLS…

Landing Page MOLS

Mulawarman Online Learning System (MOLS) adalah e-learning yang digunakan di Universitas Mulawarman (tempat saya berkuliah). Hampir seluruh masa perkuliahan saya menggunakan MOLS sebagai platform e-learning utama, khususnya ketika memasuki masa pandemi menjadikan MOLS sebagai pusat kegiatan perkuliahan selain aplikasi Zoom saat transisi dari kuliah offline ke kuliah online.

Ide melakukan redesign

Selama penggunaan MOLS terutama saat masa pandemi, MOLS ini sangat membantu mahasiswa maupun dosen dalam melakukan kegiatan perkuliahan online karena fitur-fiturnya yang udah sangat sesuai sama kebutuhan dosen dan mahasiswa, contohnya bisa ngumpul tugas di MOLS dan dikasi nilai sama dosen, dosen bisa buat postingan absensi untuk mahasiswa, dosen bisa upload file materi dan fitur-fitur lainnya untuk kegiatan perkuliahan.

Jadi MOLS sendiri sebetulnya udah cukup banget buat kegiatan perkuliahan. Tapi, ada beberapa kendala yang mengurangi tingkat kenyamanan saya saat menggunakan MOLS, yaitu :

  • Kalau mau absen harus masuk ke kelas dulu karena tombol absennya gabisa muncul di dashboard utama, padahal postingan itu muncul di dashboard utama
  • Komentar yang udah dikirim di postingan gabisa dihapus atau diedit
  • Kalau salah masuk kelas, gabisa keluar sendiri dari kelas tersebut
  • Designnya masih template banget, jadi ada beberapa tombol yang useless

Singkatnya alasan utama saya mau redesign MOLS adalah keresahan saya sendiri saat menggunakannya. Tapi, saya masih butuh validasi apakah yang saya rasakan juga dirasain sama pengguna lain. Maka dari itu, saya melakukan riset untuk ngevalidasi masalah dan buat coba cari apa ada masalah lainnya.

Validasi Masalah dengan Riset

Tujuan saya melakukan riset adalah untuk validasi keresahan saya dan cari insight baru tentang MOLS. Lingkup pengguna MOLS sendiri cukup luas yang terdiri dari dosen dan mahasiswa, jadi saya melakukan riset ke 10 pengguna MOLS yang terdiri dan 5 dosen dan 5 mahasiswa. Metode yang saya gunakan adalah dengan interview dan usability testing. Interview saya gunakan untuk dapetin insight dari pengguna dan usability testing untuk ngetes apakah flow dan informasi dari setiap fitur MOLS udah sesuai sama kebutuhan pengguna atau belum.

Interview & Usability Testing

Saya melakukan proses riset kepada pengguna MOLS dengan interview dan usability testing. Untuk usability testing, saya menguji beberapa flow diantaranya :

Mahasiswa :

  1. Pengguna login ke MOLS
  2. Pengguna masuk ke kelas dengan kode
  3. Pengguna absen mata kuliah di kelas
  4. Pengguna mengumpulkan tugas di kelas
  5. Pengguna melihat deskripsi tugas di kelas

Dosen :

  1. Pengguna login ke MOLS
  2. Pengguna membuat kelas baru
  3. Pengguna membuat absensi
  4. Pengguna menigirimkan pengumuman
  5. Pengguna membuat tugas
  6. Pengguna menilai tugas yang telah dikumpulkan

Saat melakukan usability testing kepada dosen, saya memiliki kendala karena untuk MOLS versi dosen beberapa fitur sedang dinonaktifkan karena ada kenadala teknis, jadi untuk sebagian besar task saya uji berdasarkan ingatan dari dosen saat melakukannya.

Perumusan Masalah

Setelah saya melakukan riset, saya mendapatkan beberapa insight baru mengenai permasalahan mereka menggunakan MOLS dari dosen dan mahasiswa sebagai berikut :

Mahasiswa :

  • Tidak bisa absen dari dashboard utama
  • Kelas lama tidak bisa dihapus/keluar
  • File yang udah dikumpul sulBeberapa tombol tidak berfungsi
    karena design masih templateit untuk dicek lagi karena namanya jadi random
  • Tampilan di HP tidak responsive
  • Beberapa tombol tidak berfungsi karena design masih template

Dosen :

  • Beberapa informasi masih belum jelas/lengkap (cont. instruksi pembuatan kelas, instruksi login dan format waktu masih format global mm/dd/yyyy)
  • Tidak ada fitur search dan filter untuk mencari nama mahasiswa saat menilai tugas
  • Tampilan di HP tidak responsive
  • Nilai mahasiswa tidak bisa di download (dalam bentuk file)
  • UInya belum sesuai dengan e-learning dan Universitas Mulawarman
  • Pop up view file saat menilai tugas tidak ada form penilaiannya
    jadi harus bolak balik untuk ngasi nilai tugas

Masalah di atas merupakan masalah yang dirasakan lebih dari satu pengguna. Dari masalah tersebut dan proses riset yang telah dilakukan, saya menyimpulkan bahwa

masalah yang ada di MOLS kebanyakan adalah masalah minor, karena menurut hasil riset, secara fungsional MOLS sudah memenuhi kebutuhan mereka untuk kegiatan perkuliahan, tapi masih ada beberapa hal kecil yang perlu ditingkatkan untuk membuat pengguna semakin nyaman menggunakan MOLS.

Selain itu juga keresahan yang saya rasakan tervalidasi dengan adanya pengguna lain yang merasakan hal yang sama saat menggunakan MOLS.

Solusi untuk MOLS

Setelah masalah diketahui, saya mencoba untuk merancang beberapa solusi untuk dapat menyelesaikan masalah tersebut.

Brainstorming Ide

Dari masalah yang ada, saya menghasilkan beberapa ide yang akan menjadi solusi untuk permasalahan tersebut.

Login

  • Menambahkan form login langsung pada landing page

Dashboard

  • Membuat filter pada dashboard untuk memudahkan pencarian postingan
  • Tombol absen muncul dari home untuk memudahkan pengguna melakukan absensi

User Interface

  • Membuat tampilan responsive untuk hp agar mudah diakses
  • Melakukan redesign dari segi UI untuk meminimalisir banyaknya fitur yang useless karena design masih template dan menyesuaikan dengan warna Universitas Mulawarman

Kelas & Tugas

  • Membuat step/langkah per poin pada bagian pembuatan kelas (untuk dosen)
  • Mengubah susunan kelas dari list tabel menjadi lebih detail
  • Menambahkan form untuk penilaian ketika membuka pop up lihat file (untuk dosen)
  • Menambah tombol preview untuk file yang sudah diupload agar pengguna bisa cek ulang file tugasnya
  • Menambah tombol sync nilai dengan Sistem Informasi Akademik (untuk dosen)
  • Menyesuaikan format waktu sesuai dengan format indonesia
  • Tombol hapus/keluar kelas agar pengguna bisa melakukan manajemen kelas dengan nyaman
  • Menambah fitur screen recording saat ingin mengupload post (untuk dosen)
  • Menambahkan tombol download pada nilai mahasiswa (untuk dosen)
  • Membuat filter pada list mahasiswa berdasarkan NIM dan nama (untuk dosen)

Informasi

  • Menyesuaikan format waktu sesuai dengan format indonesia
  • Memberikan informasi gagal/berhasil saat pengguna melakukan task

Optimalisasi Fitur

  • Mengoptimalkan fitur yang sudah ada tetapi belum bisa digunakan (fitur quiz dan pencarian)

Fitur Baru

  • Membuat fitur forum untuk berdiskusi
  • Membuat fitur kalender agar pengguna lebih mudah melihat jadwal

Membuat Prioritas Solusi

Solusi yang sudah dihasilkan di atas saya kerucutkan lagi untuk menentukan prioritas solusi yang akan dirancang.

Kumpulan ide yang ada pada kotak berwarna abu-abu adalah ide yang akan saya fokuskan pada tahap perancangan. Mayoritas ide yang terdapat pada kotak tersebut merupakan solusi-solusi untuk masalah minor yang dirasakan pengguna sehingga dampaknya bagi user akan signifikan dan effort yang diperlukan rendah.

Implementasi Solusi ke Desain

Solusi yang jadi prioritas saya implementasikan ke dalam desain dengan merancang user interface.

Wireframe

Sebelum masuk ke tahap desain user interface, saya membuat beberapa wireframe untuk menyusun terlebih dulu layout dan susunan informasi yang akan ditampilkan.

Wireframe

Secara umum, layout dan susunan informasi sama dengan MOLS yang sekarang karena berdasarkan hasil riset tidak ditemukan masalah layout. Jadi, pengguna sudah nyaman dengan layout yang ada.

Mockup

Setelah membuat wireframe, saya membuat mockup untuk keseluruhan halaman dari solusi yang sudah dihasilkan. Warna yang saya gunakan adalah kombinasi warna putih dan hijau. Warna hijau saya ambil dari logo Universitas Mulawarman agar sesuai dengan nuansa universitas.

Halaman Login

Landing Page MOLS

Jika ingin login di MOLS, pengguna masuk ke landing page dan harus scroll dulu untuk memilih role pengguna. Setelah itu masuk ke halaman login. Saya membuat perubahan dengan membuat halaman login langsung di landing page untuk mengurangi usaha pengguna untuk login.

Landing Page Baru

Pengguna dapat langsung mengisi username dan password sesuai dengan akun Sistem Informasi Akademik (SIA) dan memilih role pengguna.

Dashboard

Dashboard MOLS

Pada desain baru, saya menambahkan filter untuk jenis post dan jadwal kuliah pada card deadline serta merapikan layout dan susunan informasi.

Dashboard Baru

Pengguna dapat mencari post sesuai dengan kategori post yang ingin dicari menggunakan tab filter yang ada. Absensi juga bisa dilakukan melalui dashboard utama tanpa harus masuk ke kelas dulu.

Kelas

Halaman Kelas MOLS

Pada halaman kelas, saya melakukan perubahan terhadap informasi kelas menjadi lebih detail sehingga pengguna bisa menerima informasi lebih banyak sebelum masuk ke kelas yang dipilih.

Halaman Kelas Baru

Pengguna juga bisa mencari nama kelas dan mengurutkan kelas dari yang terbaru atau terlama.

Dashboard Kelas

Dashboard Kelas MOLS

Pada dashboard kelas lama, pengguna tidak dapat meninggalkan kelas jika salah masuk kelas. Saya menambahkan tombol keluar kelas pada menu agar pengguna dapat mudah keluar kelas saat salah masuk kelas.

Dashboard Kelas Baru

Saya juga menambahkan menu “Anggota Kelas” agar pengguna dapat melihat siapa saja isi mahasiswa di dalam kelas tersebut. Untuk tampilan juga saya sesuaikan dengan dashboard utama MOLS.

Koreksi Tugas Mahasiswa (untuk Dosen)

Halaman Koreksi Tugas Mahasiwa

Pada halaman koreksi tugas mahasiswa (MOLS versi dosen), jika ingin melihat file yang diupload akan muncul pop up file tersebut. Lalu, jika ingin memberi nilai harus menutup pop up lalu memberi nilai. Berdasarkan hasil riset, dosen agak kesulitan dengan skema tersebut khususnya saat file memiliki isi yang panjang sehingga terkadang dosen bolak-balik untuk melihat file dan memberi nilai.

Halaman Koreksi Tugas Mahasiswa Baru

Pada desain baru, saya membuat pop up file dilengkapi dengan form penilaian agar memudahkan dosen memberi nilai sambil mengoreksi tugas.

Membuat Kelas (untuk dosen)

Pop Up Membuat Kelas MOLS

Jika dosen ingin membuat kelas, bisa masuk ke menu kelas dan memilih tombol “+” di pojok kanan atas lalu akan muncul pop up yang harus diisi mengenai detail kelas. Setelah mengisi detail kelas, pengguna akan diminta menambahkan dosen kedua (jika ada) dan terakhir memilih skema nilai.

Pop Up Membuat Kelas Baru

Pada desain baru, saya membuat tombol lebih jelas dengan caption “Buat Kelas” agar pengguna lebih mudah notice dengan tombol tersebut. Pop up detail kelas saya buat berdasarkan susunan step pembuatan kelas agar pengguna mengetahui langkah selanjutnya yang akan dilakukan untuk membuat kelas.

Membuat Post

Halaman Buat Post MOLS

Pada halaman membuat post, saya mengubah tampilan yang awalnya jadi satu dengan halaman dashboard kelas menjadi sebuah tombol yang diikuti dengan pop up untuk meminimalisir penggunaan space dan memberikan ruang yang lebih luas kepada pengguna untuk membuat post.

Pop Up Buat Post Baru

Pada pop up ini juga saya membuat informasi yang lebih detail seperti menambahkan fitur postingan terjadwal dan menambahkan absensi pada post.

Kalender

Kalender MOLS

Kalender merupakan fitur baru yang saya buat untuk MOLS dengan tujuan untuk memudahkan pengguna melihat jadwal tugas maupun jadwal kuliah. Format kalender saya buat per 7 hari (seminggu) untuk memudahkan pengguna melihat jadwal lebih detail dan memudahkan saat pembuatan versi responsive

Halaman Responsive

Halaman Responsive MOLS

Saya juga membuat beberapa halaman responsive untuk menjawab permasalahan MOLS yang tidak responsive saat dibuka di HP.

Prototype

Prototype saya buat dengan 2 versi yaitu versi mahasiswa dan versi dosen. Untuk prototype dapat diakses di bawah ini.

Mahasiswa

Dosen

Pengujian Solusi

Pengujian dilakukan untuk mendapatkan validasi apakah solusi yang dibuat sudah sesuai dengan kebutuhan pengguna. Pada pengujian skripsi, saya menggunakan data kuantitatif sebagai metriks. Saya melakukan pengujian dengan metode usability testing menggunakan platform Maze. Untuk metriks pengukuran yang saya gunakan adalah dengan System Usability Scale (SUS) dengan pengisian kuisioner.

Usability Testing

Usability Testing saya lakukan kepada 21 pengguna MOLS yang terdiri dari 15 mahasiswa dan 6 dosen Universitas Mulawarman menggunakan Maze. Untuk task yang saya uji adalah :

Mahasiswa

  1. Login
  2. Melakukan absensi melalui dashboard
  3. Bergabung ke kelas baru
  4. Membuka jadwal di kalender
  5. Mengerjakan tugas
  6. Mengerjakan quiz/ujian

Dosen

  1. Login
  2. Membuat kelas baru
  3. Membuat post absensi melalui dashboard kelas
  4. Membuat post pesan terjadwal melalui dashboard kelas
  5. Membuat post tugas melalui dashboard utama
  6. Membuat post ujian melalui dashboard kelas
  7. Koreksi dan memberi nilai tugas mahasiswa
  8. Membuka kalender
  9. Melihat rekap nilai mahasiswa
  10. Melihat data absensi mahasiswa

Untuk data yang ada di Maze, saya tidak menggunakannya sebagai metriks karena untuk skripsi saya belum menemukan jurnal atau skripsi terdahulu yang menggunakan data Maze sebagai metriks utama pengukur keberhasilan. Maze hanya saya gunakan untuk membantu proses usability testing.

Kuisioner System Usability Scale (SUS)

Setelah pengguna melakukan usability testing, saya meminta pengguna untuk mengisi kuisioner berisikan 10 pernyataan yang terdiri dari 5 pernyataan bernilai positif dan 5 pernyataan bernilai negatif. Jawaban dari pernyataan tersebut adalah skala likert 1 (sangat tidak setuju) — 5 (sangat setuju) yang diisi pengguna sesuai pengalaman mereka saat usability testing.

Hasil dari kuisioner tersebut akan dihitung sesuai dengan rumus SUS yang akan menghasilkan skor SUS. Untuk rumus dan perhitungan SUS dapat dilihat di sini.

SUS Acceptability Score. Image credit 10up.com.

Skor SUS yang saya dapatkan adalah 81 atau masuk ke kategori good menuju excellent.

Kesimpulan

Pengguna MOLS sejauh ini sudah merasa cukup dengan fungsional dari MOLS, tapi masih ada beberapa masalah minor yang harus diselesaikan untuk lebih meningkatkan kenyamanan pengguna. Hasil pengujian dari solusi yang saya buat menunjukan desain MOLS yang baru dapat diterima oleh pengguna. Namun, hasil tersebut akan lebih baik jika ada skor juga pada desain lama untuk dibandingkan dengan skor desain baru. Maka dari itu untuk validasi yang lebih akurat kedepannya mungkin bisa melakukan uji SUS terhadap MOLS yang sekarang untuk dibandingkan hasilnya dengan desain MOLS yang baru agar lebih akurat secara skor perbandingan.

Penutup

Terima kasih kepada pembaca yang sudah meluangkan waktunya untuk membaca studi kasus yang cukup panjang ini. Jika ada feedback bisa disampaikan di komentar :D

--

--