UI/UX Case Study: Skilvul Mentor on Demand

Background

Disclaimer! 📢 Project ini dilakukan sesuai dengan arahan dan di bawah pengawasan yang diberikan oleh Skilvul sebagai bagian dari Program “Studi Independen Kampus Merdeka 2022: UI/UX Design Mastery” yang diselenggarakan oleh Skilvul X Kampus Merdeka.

Hallo teman-teman 👋. Perkenalkan saya Farhan Muhammad ingin berbagi tentang apa yang saya lakukan selama mengikuti studi independen bersertifikat kampus merdeka. Skilvul telah berkolaborasi dengan kampus merdeka untuk mengadakan program Skilvul #Tech4Impact: UI/UX Design Mastery. Sebelumnya, saya telah diterima di program studi independen UI/UX Design Mastery yang sudah beberapa bulan berjalan , Dalam program ini Skilvul telah berkolaborasi dengan beberapa challenge partner untuk membuat tantangan sebuah project UI/UX design. Saya memilih satu challenge partner yaitu Skilvul, dan ditugaskan untuk membuat Hi-Fi design dan prototipe yang dapat diklik berdasarkan kebutuhan. Dalam challenge ini saya ditugaskan untuk membuat fitur baru yaitu mentor on demand untuk Mahasiswa/Siswa yang ingin mentoring secara private. Proses desain dilakukan sesuai dengan arahan yang diberikan oleh mentor minggu demi minggu sesuai dengan timeline.

Latar Belakang

Apa itu skilvul ? Skilvul adalah sebuah platform pendidikan teknologi yang menyediakan konten pelajaran digital skills dengan metode “blended-learning” dalam bentuk online maupun offline (Skilvul, 2021).

Gambar 2

Deskripsi Produk: Mentor on demand adalah sebuah layanan Skilvul yang memungkinkan siswa untuk memesan sesi bersama mentor untuk membantu proses belajarnya di bidang IT Produk.

📝 Metode: Emphatize, Define, Ideate, Sketches, Userflow, Wireframe, Prototype, and User Testing.

📅 Timeline: Oktober-Desember 2022.

✒️ Tools: Figma, FigJam, Google Spreadsheet, Google Doc, dan Discord.

Ringkasan

Gambar 3

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 untuk berkomunikasi kepada siswa satu per satu. Oleh karena itu, terkadang siswa merasa tidak dibimbing sepenuhnya. Layanan ini hadir untuk menjawab permasalahan tersebut.

Research Objektif

1. Mencari tahu apakah kebutuhan pengguna sudah terpenuhi terkait private mentoring.
2. Mencari tahu apa kesulitan dalam melakukan pencarian mentor, mengetahui detail tentang mentor dan melakukan booking mentor.
3. Mencari tahu apa kesulitan di proses mentoring berlangsung.
4. Mencari tahu hal apakah dari sisi UI sudah bagus dan memenuhi kebutuhan user.

Berikut adalah alur pengguna saat menggunakan layanan mentor on demand:

1. Siswa sebagai user akan mengunjungi laman Skilvul.com untuk melihat Daftar Mentor yang ada
2. Siswa juga bisa melihat beberapa informasi seperti harga, jumlah pengalaman, bahasa pemograman yang dikuasai, lokasi dan beberapa parameter berkaitan lainnya
3. Mereka akan melihat tombol “Sewa Mentor” dan dilanjutkan ke halaman pembayaran yang memerlukan Login atau Daftar terlebih dahulu ke platform Skilvul
4. Untuk memudahkan pengguna, sebelum sewa atau booking mentor, mereka dapat menghubungi untuk bertanya beberapa informasi umum mengenai bahasa pemograman dan materi yang akan dibahas melalui fitur “Chat Mentor”
5. Setelah melakukan pembayaran sesuai detail, maka proses belajar bersama private mentor dapat dilakukan

Peran Dalam Tim

Ini merupakan project kolaborasi bersama, Dalam project ini saya tidak sendiri melainkan berkelompok yang berjumlah 4 orang terdiri dari saya Farhan Muhammad, Alim Amalia, Martalisa, Wahyu Nur, Dalam kerja tim ini, tanggung jawab kita sama seperti:

1. Melakukan penelitian untuk tahap define dan ideate untuk membuat List of Pain Point, How-Might We, Solution Idea, dan Prioritization Idea
2. Membuat User Flow, Wireframe, dan UI Style Guide.
3. Membuat Hi-Fi design dan Prototype.
4. Serta yang terakhir adalah melakukan Usability Test.

Kami mengerjakan project ini mulai Oktober 2022 sampai November 2022. Jadi kami membuat project ini selama kurang lebih 1 Bulan.

Design Process

Dalam hal merancang sebuah produk, ada beberapa tahapan yang perlu dilakukan. Dalam studi kasus ini, langkah-langkah yang dilakukan mengikuti tahapan dasar dalam proses Design Thinking.

Design Thingking

Dalam hal ini kami memilih Design Thinking karena penekanan pada pencarian solusi. Dengan menerapkan design thinking, maka akan ada banyak ide yang bisa dikembangkan.

Empathize.

Pada tahap pertama, yang kami lakukan yaitu mencoba untuk mendapatkan pemahaman kebutuhan pengguna dengan melakukan Penelitian dengan metode In-depth interview dan Secondary Research. Penelitian In-depth interview adalah metode penelitian yang dilakukan dengan wawancara secara langsung untuk mendapatkan data dan menganalisis data dari responden.

Riset In-depth interview yang kami lakukan kami mencari responden yang sesuai kriteria yaitu mahasiswa/siswa setelah dapat responden tersebut kami melakukan wawancara secara langsung dengan responden tersebut.

Secondary Research yang kami lakukan adalah melakukan analisis pesaing, mencari ulasan pengguna dari aplikasi serupa, dan mencari referensi kasus terkait di Medium.

Define

Pada tahap define kami mengumpulkan data dari hasil Empathize dengan wawancara responden. Kemudian kami melakukan observasi analisis data yang telah kami dapatkan untuk mengetahui apa saja yang dibutuhkan oleh pengguna.

Pain Points

Dengan menggunakan hasil dari langkah sebelumnya, kami kemudian merumuskan kedalam pain points, Karena kami mendapakat permasalahan dari riset tersebut. Dalam melakukan langkah ini, tim kami menggunakan FigJam Board. Berdasarkan hasil diskusi terdapat beberapa paint points yang dihasilkan diantaranya:

1. Siswa susah mencari atau menemukan mentor sesuai yang diinginkan karena kurang nya informasi mentor
2. Siswa sulit untuk menemukan waktu yang tepat untuk mentoring dikarenakan perbedaan jadwal dengan mentor
3. Siswa ribet dengan Informasi pembayaran dan hanya bisa bayar dengan e wallet saja

Pain Poin

How-Might We

Dari beberapa pain poin di atas kami dan kelompok lanjut berdiskusi untuk menentukan cara mengubah sebuah masalah menjadi pertanyaan. Dengan mengubah masalah menjadi pertanyaan, kita mengubah mindset kita bahwa masalah itu pasti dapat di selesaikan Berikut beberapa How-Might We hasil brainstorming dari kami:

How-Might We

Setelah itu kami voting karena kami mengumpulkan beberapa HMW jadi hanya tiga How Might We yang kami pilih sebagai berikut:

1. Bagaimna agar siswa bisa melakukan live bareng mentor dimna saja dan kapan saja.
2. Bagaimana cara siswa menemukan mentor sesuai yang diinginkan.
3. Bagaimana cara mempermudah sistem pembayaran.

Ideate

Pada tahap ini kami melakukan brainstroming berdasarkan How Migh We dimana kami memberikan solusi atau Ide kami dan kelompok memberikan solusi buat menyelesaikan masalah tersebut yang telah kami kumpulkan di Pain Poin.

Solution Idea

Berdasarkan hasil How-Might We terdapat beberapa ide solusi yang kami hasilkan diantaranya:

Solution Idea

Di atas kita bisa simpulkan solusi ide kami sebagai berikut:

1. Membuat fitur Mentor on Demand supaya mahasiswa/siswa dapat bimbingan langsung dari mentor dengan topik bebas di tentukan oleh mahasiswa/siwa tersebut.
2. Membuat fitur detail kategori dan Membuat fitur yang menampilkan detail informasi tentang mentor Biodata, Pendidikan, Skill & Pengalaman, shingga siswa lebih tahu dan tidak ragu untuk memilih mentor.
3. Menyediakan sistem pembayaran yang lengkap menyediakan beberapa sistem pembayaran seperti: e-wallet, m-bank, dan Pemilihan media yang akan digunakan pada sesi private mentoring seperti : chatt, voice call dan video conference.

Affinity Diagram

Setelah kami membuat solution idea dan mengumpulkan fitur-fitur apa saja yang akan kami kembangkan. Kami mengelompokkan setiap ide solusi dalam affinity diagram.

Affinity Diagram

Prioritization Idea

Selanjutnya kami bareng kelompok setelah mengelompokan ide yang sama ke Affinity Diagram terus kami voting bareng temen-temen buat di masukin ke dalam diagram Prioritization Idea fitur apa dulu yang akan di kerjakan berdasarkan kebutuhan prioritas yang menggunakan skala dari rendah ke tinggi dalam hal nilai dan upaya pengguna.

1. Membuat fitur yang menampilkan detail informasi tentang mentor seperti Biodata Pendidikan Skill & Pengalaman dan penghargaan.
2. Membuat list info mentor yang tersedia.
3. Fitur sistem pembayaran yang lengkap menyediakan beberapa sistem pembayaran seperti: e-wallet, m-bank sehingga siswa bisa booking mentor dengan jadwal yang flexible.

Prioritization Idea

Prototyping

Setelah membuat Prioritization Idea selanjutnya kami masuk ke prototyping dimna disini kita bikin merancang user flow mendesain interface (low-fi dan high-fi), menyusun user interface menjadi alur proses yang sesuai dengan ide solusi, membuat UI style guide. kemudian dibuat prototipe digital menggunakan figam yang dapat digunakan untuk Usabity Testing ke user.

User Flow

User flow merupakan diagram alur yang berisikan langkah-langkah yang harus dilakukan pengguna untuk mencapai tujuan atau menyelesaikan suatu task. Berikut adalah user flow dari fitur Mentor on demand.

User Flow

Wireframe

Setelah membuat user flow, kami melanjutkan untuk membuat gambar rangka Low-Fidelity atau wireframe di Figma. Wireframe adalah tata letak dalam versi low-fidelity yang dapat membantu desainer menyajikan informasi dalam interface, memberikan outline struktur dan layout interface, serta mempercepat dalam proses ide. Berikut adalah wireframe untuk fitur Mentor on Demand.

Wireframe

Design System

Untuk memudahkan dalam pengerjaan dan user interface memiliki komponen yang konsisten, kami membuat sebuah design system. Berikut adalah design system yang kami buat untuk digunakan pada desain high-fidelity dari project ini.

Design System

High-Fidelity

Setelah menyelesaikan tahap user flow, wireframe, dan design system, langkah selanjutnya adalah membuat desain high-fidelity menggunakan design system yang telah kita buat sebelumnya.

Login dan Registet

Hampir semua

Proses pembelajaran

Prototype

Setelah desain High-Fidelity semua halaman selesai, langkah selanjutnya adalah membuat Prototype. Desain High-Fidelity kemudian diurutkan berdasarkan alur yang akan diikuti oleh pengguna untuk menyelesaikan sebuah task.

Test

Setelah membuat Prototype, kami melakukan Usability Testing dan In-Depth Interview yang dilakukan secara daring atau jarang jauh menggunakan google meet dengan responden yang awal pertama kami research, kami memberikan 4 task yaitu Register dan Login, Pembayaran Pembelajaran, ulasan sebelum melakukan Usability Testing kami membuat Research Scenario yang berbentuk Stimulus Research agar usability terarah dan berjalan lancar

User Research

System Usability Scale

System Usability Scale adalah alat pengukuran yang dapat digunakan untuk mengukur tingkat usability sebuah sistem. Dibentuk oleh John Brooke pada tahun 1986, system usability scale dapat digunakan untuk mengukur tingkat usability 10 satuan ukuran yang diuraikan menjadi 10 pertanyaan dan dihitung dengan skala Likert (1–5). Metrik ini mencakup dari sisi kepuasan, kemudahan, hingga efektivitas.

Berikut hasil usability testing kami yang dapatkan:

System Usability Scale

Foto https://measuringu.com/interpret-sus-score/

Single Ease Question

Single Ease Question merupakan skala 1–7 yang diukur hanya dari sisi kemudahan. Berdasarkan hasil Usability Testing yang telah kami lakukan, responden memberikan nilai rata-rata Single Ease Question 6 dari 7. Hasil dari nilai rata-rata tersebut dapat disimpulkan bahwa solusi desain yang kami tawarkan cukup informatif, mudah untuk dipahami, dan mudah digunakan oleh pengguna.

Single Ease Question

SEQ Percentile Rank

Documentation Usability Testing

Feedback

Ada beberapa feedback dari user

1. Tampilan sudah oke

2. Bagian profil mentor sudah sangat jelas

3. Penjadwalan untuk booking mentor juga mudah dimengerti.

Saran masukan user pada saat interview.

1. Tambah icon centang hijau untuk mentor yang sudah diberi penilaian/rating
2. Di halaman feedback pas dikasih bintang ada suggestions buat feedback template

Rekomendasi Selanjutnya

Setelah selesai tahap demi tahap dari mulai Define sampai Usability Testing kami masih banyak yang harus di perbaiki dari tampilan dari bisnis nya jadi rekomendasi selanjutnya:

1. Memperbaiki dari segi informasi visual menjelaskan secara detail.
2. Menambahkan icon centang hujau pada tampilan mentor yang udah di interview.

Kesimpulan

Kesimpulannya disini kami telah melaksanakan tugas dari skilvul x Kampus Merdeka kami mengerjakan projects di atas dengan metode design thinking yang dimana mulai dari tahap research empathy sampai test telah kami jalani tapi disini kami masih harus banyak belajar lagi dan explore lagi tentang proses design atau bikin produk yang bisa kepake sama user atau pengguna. karena mendesain UI/UX bukan hanya tentang membuat tampilan yang indah, tetapi juga bagaimana membuat tampilan yang dapat digunakan pengguna dengan nyaman dan efisien. selain mendesain kita juga belajar kami juga belajar tentang bagaimana berkomunikasi pengerjaan secara kelompok.

Sekian dari saya terimakasih semuanya mohon maaf bila ada kata-kata yang mejingung atau yang lain.