UI/UX Case Study — Mentor on Demand (Skilvul)

yeni mulyani
4 min readSep 28, 2022

--

Disclaimer

Projek ini merupakan salah satu challenge dalam pelatihan UI/UX yang diadakan oleh Kominfo dan bekerjasama dengan Skilvul. Saya tidak dikontrak dengan Skilvul.

Latarbelakang

Banyak sekali courses online ataupun offline yang ada saat ini salah satunya adalah Skilvul. Skilvul merupakan platform pembelajaran digital yang menyediakan kursus terkait dengan bidang teknologi. Mengingat banyaknya antusias pengguna yang menggunakan platform ini, sehingga jumlah siswa yang bisa konsultasi dengan mentor memiliki keterbatasan waktu. Sehingga siswa merasa tidak dibimbing sepenuhnya oleh mentor. Untuk itu layanan mentor on demand ini hadir untuk solusi masalah tersebut. Sehingga siswa bisa memesan sesi dengan mentor untuk sharing terkait mendalami materi, sehingga membantu proses belajar mereka.

Objektif

Objektif ini menghasilkan prototype dan UI design untuk kebutuhan fitur mentor on demand yang meliputi proses pendaftaran dan login akun, memilih mentor berdasarkan dari materi tertentu, pembayaran untuk sesi sewa mentor.

Pembagian Peran dalam Tim

Dalam pengerjaan design ini saya berkolaborasi dengan 6 anggota tim (Feruzzi, Firmansyah, M. Soekarno, Jejen, Bayu), dimana pengerjaan tugas dan tanggungjawab sama, yang meliputi : empathize, define & ideate, prototyping, sampai usability testing.

Design Process

Pada tahapan ini saya menggunakan Design Thinking, yang mana terdapat 5 tahapan yaitu Emphatize, Define, Ideate, Prototype dan Test. Pada tahapan Design Thinking ini proses yang dilakukan tidak harus secara berurutan, tergantung dengan kondisi.

Define

Pada tahapan define, saya dan tim melakukan brainstorming menggunakan figma. Adapun hasil dari brainstorming ini meliputi Paint Points dan How Might We.

Pain Points

Dalam tahapan ini, saya dan tim melihat permasalahan user dengan mengidentifikasikan pada Paint Points, yang kami dokumentasikan sebagai berikut :

Pain Points

Kemudian dari permasalahan tersebut, kami membuat solusi dengan How Might We sesuai dengan kebutuhan, yang meliputi:

  1. Membantu user atau siswa mendapatkan informasi mengenai course dan mentor yang sesuai
  2. Membantu user atau siswa meningkatkan motivasi belajar
  3. Mendapatkan mentor dalam course yang berkualitas

Affinity Diagram

Setelah kita membuat How Might We, langkah selanjutnya adalah mengumpulkan ide-ide yang serupa kedalam sub yang sama.

Prioritization Idea

Pada tahapan ini ide-ide yang sudah dikelompokan, kami pilah lagi menjadi bagian mana saja yang menjadi hal utama dalam pengimplementasian solusi untuk masalah mentor on demand.

User flow

Setelah pengelompokan ide solusi, kami mengidentifikasikan solusi menjadi 3 flow. 3 flow yang mana user melakukan pendaftaran akun, melihat dan mencari mentor berdasarkan kelas yang diikuti, dan siswa bisa booking mentor.

Wireframe

Langkah selanjutnya adalah pembuatan wireframe, sebagai acuhan hight fidelity pada proses beriktunya. Dalam pembuatan wireframe ini saya dan tim belum membuat secara keseluruhan, karena masih banyak perubahan dalam implementasi wireframe dan user interface.

Design System

Sebelum saya dan tim membuat user interface, kami membuat komponen yang dibutuhkan untuk membuat high fidelity. Beberapa komponen ini meliputi color style, text style, button, card.

User Interface

Berikut adalah tampilan user interface yang kami buat untuk solusi permasalahan yang sudah diuraikan sebelumnya.

Prototyping

Selanjutnya pembuatan prototye untuk mengetahui alur produk yang sudah dibuat. Untuk detailnya bisa diklik link dibawah ini:

Testing

Dalam proses ini digunakan untuk mengetahui apakah alur produk sudah berjalan dengan baik. Saya dan tim mengukur kesuksesan dari solusi desain dengan menggunakan survey kepada 5 orang. Ringkasan hasil dari UT kami rangkum kurang lebih dalam tabel dibawah :

Summary

Dari hasil testing tersebut, terdapat beberapa masukan dari pengguna yang mana user interface belum responsif, tambahan untuk tombol daftar di halaman utama. Kami dan tim melakukan iterasi design secara fleksibel, itu artinya perubahan yang kami lakukan adalah setelah melakukan testing.

Sekian dari saya. Terima kasih sudah membaca dokumentasi UX Case Study yang saya buat. Salam Sukses!

--

--