Studi Kasus UI/UX: Skilvul — Mentor on Demand

Eka Sulistiawati
5 min readOct 11, 2022

--

Disclaimer: Studi Kasus UI/UX ini dibuat berdasarkan challenge dari Skilvul dalam program DTS Pro Academy Kominfo

Halo temen-teman. Perkenalkan saya Eka, ini tulisan pertama saya di medium. Di sini saya akan menceritakan pengalaman saya menyelesaikan challenge project yang diberikan Skilvul bersama 2 rekan saya, yaitu Alifia Widya Sari dan Tasya Nadina Firyal.

Apa itu Mentor on Demand?

Mentor on Demand adalah sebuah layanan di Skilvul yang memungkinkan siswa untuk memesan sesi bersama mentor untuk membantu proses belajar coding dan UI/UX.

Latar masalah dari layanan ini adalah sistem kursus online yang pada umumnya memiliki rasio mentor berbanding siswa yang besar sehingga membatasi waktu mentor dalam membimbing siswa satu per satu.

Oleh karena itu, fitur pemesanaan jasa belajar bersama mentor ini hadir untuk menjawab permasalahan tersebut.

Apa yang diharapkan dari fitur Skilvul — Mentor on Demand?

  1. Pengguna diharapkan dapat melakukan registrasi & login sebagai siswa/mentor
  2. Siswa diharapkan dapat melakukan pencarian mentor dan melihat list mentor
  3. Siswa diharapkan dapat memeriksa profil mentor
  4. Siswa diharapkan dapat melakukan chat dengan mentor
  5. Siswa diharapkan dapat membuat janji dengan mentor
  6. Siswa diharapkan dapat melakukan pembayaran sewa mentor

Peran dalam Tim

Tim kami terdiri dari 3 orang. Pada tahap emphatise (empati) sampai dengan ideate (menghasilkan ide), kami mengerjakan bersama. Namun, pada pembuatan prototype kami membagi tugas. Pembagian tugas dalam pengerjaan prototype adalah sebagai berikut:

  1. Kak Tasya: Pendaftaran dan login pengguna (siswa, mentor)
  2. Kak Alifia: Pencarian mentor dan pembayaran
  3. Saya: Profil dan buat janji dengan mentor

Selama pengerjaan project kami dibantu oleh Kak Dara Adhelia sebagai mentor kami.

Design Thinking

Sumber Ilustrasi: Materi Skilvul
Sumber Ilustrasi: Materi Sklivul

Alasan kami memilih metode design thinking karena merupakan metode yang melibatkan manusia, teknologi, dan kebutuhan dalam melakukan perancangan.

  1. Emphaties (empati)

Langkah pertama dimulai dengan melakukan riset agar perancang memilki empati terhadap permasalahan dan kebutuhan lebih dalam dari pengguna. Riset yang tim kami lakukan adalah dengan melakukan pencarian kelebihan dan kekurangan dari layanan kompetitor dengan membaca ulasan dari pengguna layananan kompetior, mencoba layanan kompetitor, dan bertanya pada layanan pelanggan kompetitor. Hasil Riset kami selengkapnya dikumpulkan ke dalam tabel berikut.

Tebel Secondary Research

2. Define (menentukan)

Langkah selanjutnya kami melakukan brainstroming dan pendokumentasian menggunakan FigJam Board untuk menyusun pain point & how-might we dari hasil secondary research, callenge brief, dan menentukan tujuan yang akan dicapai dalam perancangan.

a. Pain Points

Dalam pain points ini masing-masing anggota kelompok menuangkan masalah apa yang ditemukan dari secondary research dan callenge brief.

Pain Points

b. How-Might We

Pada langkah ini masing-masing menuangkan solusi dari permasalahan yang ditemukan dan kemudian melakukan vote.

How — Might — We

3. Ideate (menghasilkan ide)

Setelah kami menuliskan solusi dari permasalahan yang ditemukan, kami membahas kembali solusi-solusi yang dituliskan, solusi yang memiliki kemiripan, dan mana yang memungkinkan untuk diterapkan pada permasalahan pada project ini.

a. Affinity Diagram

Mengelompokan ide yang telah divote lalu memberikan nama.

Affinity Diagram

b. Prioritization Idea

Mengelimpokan ide-ide berdasarkan:

  1. Lakukan sekarang: memiliki manfaat yang besar dan mudah dilakukan
  2. Lakukan selanjutnya: memiliki manfaat yang besar, tetapi memerlukan usaha yang tinggi
  3. Lakukan nanti: tidak terlalu memberikan manfaat yang besar, tetapi mudah dilakukan
  4. Lakukan terakhir: tidak terlalu memberikan manfaat yang besar dan memerlukan usaha yang tinggi
Prioritization Idea

4. Prototype (prototipe)

a. User Flow

Flow Pencarian Mentor
Flow Buat Janji dengan Mentor

b. WireFrame

Wireframe halaman beranda dan fitur mentor
Wireframe halaman profil mentor dan buat janji
Wireframe halaman transaksi/pembayaran
Wireframe halaman selesai pembayaran dan Chat Mentor

c. Design System

Menentukan komponen warna kombinasi, huruf, dan tombol yang akan digunakan dalam perancangan. Kami memilih warna merah sebagai warna utama menyesuaikan warna logo Skilvul dan warna biru sebagai alternatifnya.

Design System

d. Mood Board

Mengumpulkan referensi untuk perancangan user interface.

Mood Board

d. User Interface

UI: Home Setelah Login, Pencarian Mentor, dan Halaman Profil Mentor (Ulasan)
UI: Halaman Profil Mentor, Buat Janji, Chat Mentor
UI: Transaksi Pembayaran
UI: Chat dan Dashboard Siswa Notifikasi Jadwal Mentoring

f. Prototype

5. Test (uji coba)

Untuk mendapatkan masukan kebutuhan pengguna dan tingkat keberhasilan dari solusi desain yang telah dibuat, kami melakukan Usability Testing berupa survey menggunakan google form terhadap 6 responden dengan kriteria sebagai berikut:

  • Berusia 18–45 tahun
  • Siswa/mahasiswa/karyawan/karyawati pada instansi apapun
  • Berdomisili di seluruh wilayah Indonesia
  • Memiliki kemampuan Bahasa Indonesia sebagai native language
  • Dapat mengoperasikan perangkat desktop (PC/laptop)
  • Memiliki akses internet

Stimulus research dan hasil survey terlampir.

System Usability Scale (SUS)

Berdasarkan hasil perhitungan SUS penilaian responden diperoleh skor rata-rata 78,75 (passed).

Masukan, penilaian Single Ease Question (SEQ) dan dari responden sebagai berikut:

Masukan dan Kesimpulan Task Pendaftaran dan Login
Masukan dan Kesimpulan Task Pencarian dan List Mentor
Masukan dan Kesimpulan Task Chat Mentor, Buat Janji, dan Pembayaran

Kesimpulan & Rekomendasi Selanjutnya

Setelah melakukan uji coba solusi desain dan mendapat beberapa masukan dari responden, maka dapat diambil kesimpulan dan rekomendasi sebagai berikut:

  1. Pada halaman login/masuk agak membingungkan karena terdapat pilihan masuk sebagai siswa atau mentor dengan tampilan yang sama. Rekomendasi untuk perbaikan atau untuk case serupa dapat dibuat 1 akun pengguna dapat diberikan akses sebagai siswa maupun mentor.
  2. Pada halaman chat mentor perlu ditambahkan tanda pesan telah terkirim dan dibaca.
  3. Pada halaman buat janji perlu diubah untuk pemilihan tanggalnya menggunakan date picker dan waktu sesuai/jam mentor yang tersedia untuk dibuat janji
  4. Pada halaman pembayaran perlu ditambahkan keterangan harga apabila mendapat potongan harga.

Semoga tulisan ini dapat bermanfaat. Terima kasih.

Referensi

Skilvul. Diakses pada 11 Oktober 2022 melalui utasan https://skilvul.com/challenges/skilvul-uiux-challenge#project

--

--