UX Case Study : Fitur Mentor on Demand pada website Skilvul.com

Anton Sulistiawan
8 min readNov 27, 2021

--

Skilvul adalah platform pendidikan teknologi yang menyediakan konten pelajaran digital skills dengan metode “bleanded-learning” dalam bentuk online maupun offline. Misi Skilvul adalah untuk mengurangi tingkat pengangguran anak muda di Indonesia, dengan melahirkan generasi siap kerja melalui akses pembelajaran teknologi yang luas. Oleh karena itu, diperlukan kurikulum pembelajaran yang praktikal dan sesuai dengan kebutuhan industri.

Disclaimer : This project is part of the UI/UX training program implemented by Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia.

Overview Permasalahan

Dalam meng-update skill, seseorang perlu belajar dan berlatih bidang yang ingin di update secara rutin. Banyak cara untuk seseorang dalam mendalami dan meningkatkan sebuah kemampuan, bisa dengan cara mengikuti kursus, bisa mengikuti magang, bisa mengikuti pelatiahn, bisa dengan cara memperbanyak koneksi untuk belajar dibidang yang sama. Hal tersebut bisa dilakukan secara online maupun offline.

Dimasa teknologi yang semakin canggih banyak orang yang melakukan update skill secara online, namun dalam menjalani masa kursus atau pelatihan online, user terkadang menemukan beberapa kedala. Salah satunya saat user melakukan kursus online, dan saat mempelajari materi yang tersedia, user kebingungan dengan materi tersebut, dan user kebingungan mau bertanya kepada siapa. Dari permasalahan tersebut saya bersama tim mendapatkan ide untuk membuat sebuah fitur website yang memudahkan user dalam menjalani kursus online. Fitur tersebut adalah “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 untuk berkomunikasi kepada siswa satu per satu. Oleh karena itu, terkadang siswa merasa tidak dibimbing sepenuhnya. Layanan ini hadir untuk menjawab permasalahan tersebut.

Tujuan

Mendesain tampilan website yang sesuai dengan kebutuhan pengguna khususnya saat siswa melakukan proses belajar, siswa bisa memesan sesi bersama mentor. Hal tersebut diharapkan mampu membantu proses belajar siswa.

Peran dalam Tim

Dalam menyelesaikan project ini, saya tidak sendiri. Ada sebuah tim dibalik suksesnya pembuatan project ini. Dalam satu tim terdapat 3 anggota yaitu saya Anton Sulistiawan berperan sebagai Product Designer dan UX Designer, ASRI RAHMAWATI berperan sebagai UI Designer, dan Anandia Dwi Puspita berperan sebagai UX Researcher.

Berikut merupakan tugas dari masing-masing peran :

UX Designer

  • Membuat Information Architecture
  • Membuat User Flow
  • Membuat Low Fidelity Wireframes
  • Membuat Prototyping

UI Designer

  • Membuat High Fidelity wireframes
  • Membuat Polished UI design
  • Greating or sourcing icons/imagery
  • Creating and maintaining Pattern Libraries and Style Guides
  • Preparing the design for prototyping
  • (sometimes) UI animations such as loading indicators or other interaction feedback

UX Researcher

  • Wawancara atau survei pengguna
  • Membuat wawasan dari riset
  • Membuat persona
  • User testing

Product Designer

Product Designer bertanggung jawab atas penelitian, UI design, UX Design, Information Architecture dan testing.

Recearch Plan

Setelah mengidentifikasi permasalahan, saya dan tim membuat research plan sebagai berikut :

  1. Testing dengan menggunakan wawancara online
  2. User merupakan pelajar atau karyawan/karyawati
  3. User berdomisili di seluruh wilayah Indonesia
  4. User mempu berbahasa Indonesia sebagai native language
  5. User mempunyai artikulasi dan komunikasi dengan baik
  6. User memiliki semangat dalam melakukan pembelajaran online maupun offline
  7. User memiliki wawasan teknologi yang baik

Design Thinking

Dalam kasus ini kami memilih Design Thinking sebagai pendekatan metodologis untuk menemukan solusi dari permasalahan. Dengan metode design thinking, saya bersama tim dapat melakukan identifikasi permasalahan dan selanjutnya mendapatkan solusi. Berikut tahapan dari design thinking.

Design Thinking Process

Tahap 1 Emphatise

Emphatise merupakan tahap pertama dari proses design thinking untuk mendapatkan pemahaman empatik tentang masalah yang coba untuk diselesaikan. Berdasarkan dari beberapa artikel dalam proses emphatise terdapat 4 tahapan yaitu Discovery, Immersion, Connection, dan Detachment.

  • Tahap Discovery merupakan tahap awal pada proses emphatise. Dalam tahap ini dapat diartikan sebagai fase perkenalan kepada user dan kemudian melakukan pendekatan.
  • Tahap kedua yaitu Immersion, dalam tahap ini kami pelan-pelan mulai mengamati user setelah itu melaukan pemahaman terhadap user.
  • Tahap ketiga yaitu Connection, di tahap ini kami bener-bener melakukan pemahamam kepada user, apa yang dibutuhkan user dan apa permasalahan user.
  • Tahap terakhir yaitu Detachment tahap ini merupakan tahap dimana saya mempelajari dan merapikan kebutuhan dan permasalahan user.

Tahap 2 Define

Pada tahap define, kami mengumpulkan informasi yang telah kita buat, di tahap inilah kami melakukan pengamatan untuk menemukan permasalahan ini yang telah diidentifikasi. Tahap define membantu kami untuk mengumpulkan ide-ide untuk membangun fitur, fungsi, dan elemen lain yang memungkinkan user untuk menyelesaikan permasalahan.

Dalam tahap define ini saya bersama tim membuat pain points dari hasil emphatise dan selanjutnya kami mendapakan How-Might We.

Pain points merupakan identifikasi permasalahan yang dihadapi oleh user. Pain points dapat digunakan untuk menentukan beberapa kemungkinan How-Might we.

Pain Points

Selanjutnya setelah pain points terbentuk, saatnya menentukan How-Might We. Tim saya mendapatkan How-Might We sebagai berikut : Bagaimana cara kita bisa membantu siswa berinteraksi dengan mentor sesuai dengan profil dan skill yang dia butuhkan sesuai budget yang dimiliki.

How-Might We

Tahap 3 Ideate

Dalam tahap ideate ini saya dan tim siap untuk mulai menghasilkan ide-ide yang diharapkan mampu menjadi solusi dari permasalahan yang dihadapi user. Pada tahap ini kami harus menghasilkan ide yang se-kreatif mungkin.

Berikut adalah solution idea yang sudah dihasilkan oleh tim.

Solution Idea

Setelah ide-ide terkumpulkan kemudian dikelompokkan berdasarkan kategori solusi ide dalam affinity diagram.

Affinity Diagram

Setelah selesai dikelompokkan, dan agar proses mendesain tidak memerlukan waktu yang berlebih, maka dari itu kami perlu menentukan prioritas ide menggunakan prioritization idea. Masing-masing kelompok fitur akan dilihat berdasarkan user value dan effort.

Prioritization Idea

Selanjutnya saya bersama tim membuat crazy 8’s, pada tahap ini kami membuat kerangka kasar desain UI di kertas HVS yang di lipat menjadi 8 bagian atau 8 screen. Setiap bagian terdapat gambaran kasar sebuat desain UI. Setelah semua anggota tim menyelesaikan crazy 8’s, selanjutnya adalah melakukan voting gambar mana yang akan dikembangkan.

Crazy 8's

Tahap 4 Prototyping

Langkah ini menjadi sesuatu yang penting karena kamu akan mencoba mengubah ide yang didapatkan dari tim tadi menjadi tiruan produk nyata atau produk uji coba. Di tahap prototipe ini tim akan fokus pada kendala dan kekurangan prototiype tersebut. Prototipe ini juga akan terus ditingkatkan, dirancang, diperbaiki sehingga mendekati hasil dari produk yang diinginkan. Namun sebelum masuk ke tahap prototyping tim saya membuat user flow, wireframe, design system, dan UI Design.

User flow atau alur pengguna mengacu pada serangkaian langkah yang harus dilakukan pengguna situs web atau aplikasi untuk menyelesaikan tugas. Dalam proses desain web, alur pengguna dapat berfungsi sebagai dasar persyaratan konten untuk situs web dan halaman. User flow dapat dirancang oleh tim proyek yang dapat berkolaborasi pada hasil yang diinginkan dari peran yang akan dimainkan oleh aliran pengguna dalam proyek tim.

User Flow

Wireframe adalah sebuah kerangka untuk menata suatu item di laman website atau aplikasi. Pembuatan wireframe biasanya dilakukan sebelum pembuatan produk tersebut dilakukan. Item yang berkaitan seperti teks, gambar, layoiting, dan sebagainya.

Wireframe

Design system adalah kumpulan komponen desain yang bisa digunakan berulang-ulang, jadi design system itu kumpulan komponen yang konsisten. Manfaat design system yaitu jika tim designer membutuhkan elemen yang sama, bisa dengan membuat design system tanpa harus buat dari nol.

Design System

Desain User Interface (UI) adalah proses yang digunakan desainer untuk membuat tampilan dalam perangkat lunak atau perangkat terkomputerisasi, dengan fokus pada tampilan atau gaya. Tujuan dari desainer UI adalah untuk membuat desain antarmuka yang membuat pengguna mudah untuk digunakan dan menyenangkan.

UI Design

Setelah semua elemen sudah dibuat termasuk UI Design , selanjutnya masuk ke tahap prototyping, disini solusi ide yang dibuat menjadi lebih nyata. Berikut link prototype nya.

Tahap 5 Testing

Tahap terakhir dari design thinking merupakan testing, dalam testing saya menggunakan metode wawancara kepada user. User kami berikan beberapa pertanyaan dan kemudian juga kami berikan link prototype, setelah itu user melakukan prototyping dan memberikan feedback terkait desain dan prototype yang sudah kami buat. Dalam proses testing kami membuat dokumen stimulus user research dan record data sebagai acuan untuk melakukan testing.

UX metric yang saya gunakan adalah Single Ease Question (SEQ), metode ini saya pilih karena cukup mudah dilakukan bagi saya yang terbilang masih pemula. SEQ menggunakan skala nilai 1–7 untuk mengukur tingkat kemudahan, angka 5,5 menjadi parameter keberhasilan yang dapat menjadi acuan target.

Tahapan kami saat melakukan wawancara adalah :

  • Memberi salam sapa ketika bertemu user
  • Memperkenalkan diri sendiri dan kelompok dan menjelaskan maksud tujuan dari kegiatan ini
  • Menjelaskan alur proses kegiatan
  • Menanyakan pertanyaan yg ada di question list
  • Menjelaskan singkat tentang apa yang harus dilakukan dan cara pengoperasian figma prototype oleh user
  • Menanyakan apakah user sudah paham dengan yang kita jelaskan
  • Memberikan link prototype kepada user
  • Meminta user untuk membuka prototype dan meminta untuk di share screen
  • Meminta user untuk memberikan feedback terkait UI Design dan protoype

User memberikan nilai SEQ yang cukup positif terkait UI Design dan prototype yang kami buat yaitu memberikan nilai 6 karena user cukup puas dengan project yang kami buat. Berikut feedback yang diberikan user.

Hasil Testing

Pada testing kali ini kami mendapatkan skala 6 dari 7 yang mana sudah melewati standar yaitu 5,5 dan dapat dikatakan bahwa solusi desain yang dibuat sudah mengatasi permasalahan yang dihadapi oleh pengguna.

Kesimpulan

Dari proses yang saya lakukan bersama tim, mulai dari tahap overview permasalahan hingga proses design thinking membuahkan hasil yang cukup bagus, user memberikan feedback positif artinya desain yang saya buat bersama tim cukup bagus. Namun user memberikan saran untuk menambahkan beberapa metode pembayaran lainnya, dan interaksinya diperlengkap lagi mulai dari scroll, dan fitur lainnya. Maka dari beberapa rekomendasi itu, dalam mendesain berikutnya, bisa lebih membuat pengguna nyaman dengan menggunakan desain yang kami buat.

Terimakasih sudah berkenan membaca UX Case Study saya, harapan saya dengan adanya tulisan ini dapat menjadi bahan referensi untuk pembuatan UX Case Sttudy dengan desain yang serupa. Saya sangat senang jika terdapat kritik atau saran yang membangun terhadap kasus studi yang telah saya buat. Anda dapat menjadi koneksi saya di Linkedin.

--

--