## UI/UX Design Web-Based Online Course as a Place for Hard Skill Improvement
1 Muhammad Taufik Azis, 2 Mohamad Jajuli
1,2 Program Studi Teknik Informatika, Universitas Singaperbangsa Karawang Email: muhammad.taufik18215@student.unsika.ac.id

## Abstract
With intense job competition, skills are needed that can give them an advantage over other candidates. Skills greatly affect what kind of work you want. When choosing a job, the important thing to have is hard skills. Hard skills can be learned by anyone. One of the places to improve hard skills is by using an online course platform. Currently, there are lots of online courses to improve skills, but many users are still confused about choosing the right course. The category of courses that are only divided according to academic knowledge and the absence of difficulty levels in the courses also make users confused about choosing a course. Therefore, from this problem an idea and solution was made in the form of an online course prototype called Skilverse. In this research, the method used is a Design Thinking  approach  which  has  5  stages,  namely  empathize,  define,  ideate,  prototype,  and  test.  The prototype that has been made is also tested on  respondents to validate whether the solution that has been  made  can  solve  user  problems.  The  test  method  uses  SEQ,  namely  by  giving  a  task  to  the respondent by giving a Likert scale from 1 to 7.
Keywords— UI/UX, Online Course, Skill, Design Thinking, SEQ

## 1. INTRODUCTION
Pesatnya perkembangan era digital dan lahirnya resolusi Society 5.0 membuat banyak lulusan muda  dituntut  untuk  mempunyai  keahlian  tambahan  selain  kemampuan  akademis  yang  dimilikinya. Persaingan  yang  ketat  membuat  banyak  lulusan  muda  yang  masih  menjadi  pengangguran  [1]. Kurangnya pengalaman organisasi, magang, atau kegiatan lain di luar kemampuan akademis yang dapat menjadi seseorang lulusan muda kurang dilirik oleh perusahaan.
Perkembangan yang terjadi dengan cepat menuntut banyak individu untuk bisa meningkatkan skill [2] . Mengambil professional course penting untuk meningkatkan skill dalam pekerjaan tertentu. Online course telah menjadi paradigma baru dalam proses meningkatkan skill mengingat kemampuan teknologi modern dan akses yang tidak terbatas selama proses pembelajaran. Mengikuti online course memberi  kita  kepercayaan  diri  tentang  dasar-dasar  dari skill tertentu. Online  course memenuhi kebutuhan  berkelanjutan  untuk  meningkatkan skill ,  ini  memungkinkan  talenta-talenta  muda  untuk mengidentifikasi  kekuatan  dan  kelemahan  mereka. Online  course sering  kali  disesuaikan  dengan kebutuhan perusahaan yang bermanfaat bagi lulusan baru maupun mereka yang telah [3].
Dalam  prakteknya,  para  talenta  muda  yang  sedang  mempertimbangkan  program  pelatihan untuk meningkatkan skill , mereka sendiri mengalami kesulitan dalam menentukan online course yang tepat  untuk  mereka.  Sangat  penting  untuk  mengetahui  tujuan  karir  untuk  membantu  memilih online course yang tepat sehingga dapat meningkatkan prospek pekerjaan mereka. Karena itu diperlukan suatu
platform online  course yang  dapat  mewadahi  penggunanya  untuk  bisa  meningkatkan  skill  sekaligus juga mengarahkan tujuan karir dari penggunanya.
Sebenarnya  saat  ini  sudah  banyak  sekali  platform online  course untuk  meningkatkan  skill. Namun, platform online course yang sudah ada kebanyakan tidak menyelesaikan masalah ini, karena tidak  mengarahkan  tujuan  karir  penggunanya  [4]. Online  course yang  ada  hanya  mengkategorikan kursus  berdasarkan  bidang  ilmu  akademis,  sehingga  pengguna  bingung  untuk  memilih  kursus  yang sesuai untuk mereka. Tidak adanya level tingkatan pada kursus juga membuat pengguna bingung untuk bisa memilih kursus yang tepat sesuai tingkat pemahaman penggunanya.

## 2. METHODS
Dalam penelitian ini menggunakan metode Design Thinking yang terdiri dari 5 tahapan, yaitu empathize, define, ideate, prototype , dan test [5]. Pada tahap pengujian menggunakan metode Single Ease Question (SEQ) yang berfokus pada tingkat efektivitas, efisiensi, dan kepuasan pengguna  pada prototipe  desain  UI/UX  [6]. Design  thinking dipilih  karena  pada  proses  pengembangan  inovasi didukung oleh pemahaman secara menyeluruh melalui   pengamatan langsung kepada calon pengguna sebagai  sasaran  untuk  mengetahui  kebutuhan  dan  keinginan  pengguna  serta  langkah  –langkah  yang cukup efektif dalam menentukan solusi [7].

## 2.1 Empathize
Pada  tahap empathize ini  berempati  dengan  memahami  dan  mengenali  pengguna  melalui metode In-depth  Interview ke responden sebagai  bahan  untuk  mendapat  insight  dari  sisi  pengguna. Interview dilakukan dengan memberikan beberapa pertanyaan kepada responden yang berfokus kepada persoalan kebiasaan penggunaan platform online course .

## 2.2 Define
Pada tahap define ini mengumpulkan informasi  yang telah  didapat pada tahap empathize . Di sinilah insight yang didapat diteliti ke dalam masalah yang berpusat pada pengguna dan menguraikan pernyataan masalah tersebut. Selanjutnya mengumpulkan ide-ide untuk membangun fitur, fungsi, dan elemen  lain  yang  memungkinkan  menyelesaikan  masalah  pengguna  dengan  kesulitan  yang  minimal [8].

## 2.3 Ideate
Pada tahap ideate ini menentukan ide dan solusi dari proses how might we untuk memecahkan masalah. Pada tahap ini, semakin banyak ide yang dapat dikumpulkan, semakin banyak peluang yang diciptakan  untuk  menganalisis  dan  menguji  untuk  melihat  apakah  ide  tersebut  berhasil  memecahkan masalah pengguna.

## 2.4 Prototype
Pada  tahap prototype ini  menyusun  UI  menjadi  sebuah flow proses  yang  sesuai  dengan  ide solusi  dari  tahap ideate dimulai  dari  menyusun task  flow , wireframe, mendesain  UI  dan  membuat prototyping . Prototype berguna untuk mendapatkan respon atau umpan balik dari pengguna terhadap interaksi dengan sistem [9].

## 2.5 Testing
Pada  tahap testing ini  dilakukan usability  testing terlebih  dahulu  untuk  mengetahui  apakah pengguna  dapat  mudah  menggunakan  produk,  seberapa  efisien  dan  efektif  desain  yang  dibuat  dapat membantu pengguna mencapai tujuannya dan apakah pengguna puas dengan produk yang digunakan. Pengujian menggunakan metode Single Ease Question , SEQ (Single Ease Question) merupakan metode pengujian  yang  digunakan  untuk  mengukur  kemudahan  menggunakan  skala  likert  1  hingga  7  yang dirasakan pengguna setelah menyelesaikan task yang diberikan [10].

## 3. RESULTS AND DISCUSSION

## 3.1 Empathize
Pada  tahap empathize melakukan  wawancara  dengan  metode In-depth  Interview kepada  5 responden  sesuai  dengan  kriteria  yang  telah  ditentukan.  Hasil  dari  wawancara  menunjukan  bahwa semua  responden  pernah  menggunakan  platform online  course ,  dan  memilih  platform online  course sebagai  platform  untuk  meningkatkan skill mereka.  Record  data  hasil  wawancara  dapat  dilihat  pada Tabel 1. Record data hasil interview.
Tabel 1. Record data hasil interview Responden Rangkuman hasil interview Responden 1 Menggunakan  online  course  karena  materi  yang  diajarkan  kurang  dan  hanya sebatas  praktik  dan  teori.  Di  jam  mata  kuliah  hanya  diajarkan  sebatas  dasar materinya  dan  tidak  ada  studi  kasus  real  worldnya.  Biasanya  menggunakan platform  Coursera,  Dicoding.  Karena  materinya  yang  bagus  langsung  to  the point ke real case nya. Disukai : pembelajarannya langsung to the point kepada real  world casenya, dan pembelajaran yang lebih interaktif seperti kuis di tiap chapternya. Tidak  disukai :  pembelajarannyang  hanya  mengandalkan  video course, dan tidak ada learning path.
Responden 2
Menggunakan online course karena sebagai desainer selalu ingin level up untuk support  karir.  Kadang  insecure  melihat  orang  lain  mampu  belajar  untuk meningkatkan  skill-nya.  Biasanya  menggunakan  platform  Skilvul,  dan Coursera.  Karena  dapat  info  dari  teman  dan  ada  program  gratis  kemudian
materinya  bagus. Disukai :  tampilan  simple,  banyak  promo  dan  mempunyai exercise  setelah  video  (bisa  latihan  setelah  belajar). Tidak  disukai :  Lupa terakhir  belajar  materi  apa,  buka  coursenya  lumayan  ribet  (harus  buka  profile terlebih dahulu), kesulitan mencari dokumen materi.
Responden 3
Menggunakan  online  course  karena  materi  di  mata  kuliah  hanya  dijelaskan dasar-dasarnya  saja.  Jam  mata  kuliah  yang  terbatas  juga  menuntut  kita  harus belajar  di  luar  kelas.  Biasanya  menggunakan  platform  Dicoding,  Codepolitan. Karena  materi  yang  bagus  dan  dapat  program  beasiswa  gratis  di  platform tersebut. Disukai : diberikan fundamental dari materi agar paham dengan konsep dari kursus yang diambil, ada sertfikat untuk bukti telah menyelesaikan kursus tersebut. Tidak disukai : kursusnya kurang lengkap untuk skill-skill tertentu dan kadang tidak ada level kesulitan pada kursus.
Responden 4
Menggunakan  online  course  karena  belajar  saat  jam  dikelas  terbatas.  Untuk keperluan setelah lulus kuliah juga untuk bisa meningkat value dari diri sendiri untuk  bisa  bersaing  di  dunia  kerja.  Biasanya  menggunakan  platform  Dqlab, Dicoding. Karena materinya sesuai tentang data scientist dan materinya menarik. Disukai : banyak kelas gratis dan kelas lanjutannya juga cukup murah, tampilan dan  akses  kelasnya  juga  cukup  mudah. Tidak  disukai :  tampilannya  kurang menarik dan mengakses materi kelas lumayan ribet.
Responden 5
Menggunakan  online  course  karena  kalau  mengikuti  materi  di  kelas  kurang tentang  penerapan  kasusnya  dan  tidak  ada  projek  nyatanya.  Biasanya menggunakan  platform  Dicoding,  Build  with  Angga.  Karena  banyak  kelas gratisnya  dan  materinya  terarah. Disukai :  tampilannya  simple,  banyak  kelas gratis  dan  materinya  terarah  sesuai  bidang  skill  dan  tingkat  level  kursusnya. Tidak  disukai :  Masih  mengandalkan  video  belum  ada  latihan  atau  test  saat menyelesaikan materi.

## 3.2 Define
Pada  tahap define ini  informasi  yang  telah  didapat  dari  5  responden  akan  di  analisis  untuk menentukan masalah inti. Setelah masalah inti di identifikasi di lakukan analasis lagi untuk menentukan apa yang pengguna butuhkan.

## 3.2.1 Pain Points
Pada fase ini kesulitan yang ditemukan responden saat menggunakan platform online course yang  telah  digunakan  dijabarkan  untuk  mendapatkan  masalah  inti.  Hasil pain  points yang  telah dijabarkan dapat dilihat pada Gambar 1. Hasil pain points .
Gambar 1. Hasil pain points

## 3.2.2 How-Might We
Pada  fase  ini pain  points yang  telah  dijabarkan  di  analisis  untuk  ditemukan  ide-ide  solutif.
Disini  dapat  disimpulkan  bahwa  pengguna  menginginkan  platform online  course yang user  friendly dan fiturnya lengkap untuk menunjang pembelajaran yang menyenangkan. Hasil how-might we yang telah dijabarkan dapat dilihat pada Gambar 2. Hasil how-might we .
Gambar 2. Hasil how-might we

## 3.3 Ideate
Pada tahap ideate ini ide-ide solutif dikembangkan berdasarkan how-might we. Setelah ide-ide solutif dikembangkan, ide tersebut di clusterisasi untuk dijadikan Minimum Viable Product (MVP) .

## 3.3.1 Solution Idea
Pada fase ini melakukan brainstorming dengan mengembangkan ide-ide solutif pada fase how- might we yang telah didefinisikan di tahap define . Ide-ide ini lah yang akan mewujudkan goal dari how- might we yang telah disimpulkan. Ide-ide solutif pada tahap solution idea dapat dilihat pada Gambar 3. Hasil solution idea .
Gambar 3. Hasil solution idea

## 3.3.2 Affinity Diagram
Pada  fase  ini  ide-ide  solutif  yang  telah  dihasilkan  pada  fase solution  idea di  klusterisasi  ke dalam kelompok-kelompok yang sesuai dengan hubungan antar ide. klusterisasi ide-ide solutif dapat dilihat pada Gambar 4. Kelompok ide affinity diagram.
Gambar 4. Kelompok ide affinity diagram

## 3.4 Prototype
Pada  tahap prototype ini  ide-ide  solusi  yang  telah  dikembangkan  pada  tahap ideate dibuat perancangan  UI.  Sebelum  masuk  perancangan  antarmuka,  dibuat user  flow dan wireframe terlebih dahulu sebagai kerangka perancangan UI.

## 3.4.1 User Flow
Pada fase ini mendefinisikan flow atau rute yang dilalui pengguna saat menggunakan platform online course . Flow yang akan dibuat yaitu membeli kursus, dan mengakses kursus. Detail hasil dari user flow dapat dilihat pada Gambar 5. User flow Skilverse.
Gambar 5. User flow Skilverse

## 3.4.2 Wireframe (Low-fidelity)
Pada fase ini membuat kerangka sesuai dengan flow yang telah dibuat untuk menentukan tata letak dan konten yang dinginkan pengguna. Wirefram e berfungsi agar tata letak dan konten konsisten dan saat masuk ke fase high-fidelity tidak stuck memikirkan tata letak dan konten apa yang dinginkan pengguna. Detail dari wireframe dapat dilihat pada gambar dibawah.
Gambar 7. Wireframe dashboard pengguna

## 3.4.2 High-fidelity
Pada fase ini membuat perancangan UI yang lebih detail lagi dengan adanya warna, gambar, dan illustrasi yang membuat interface secara visual dapat dengan mudah digunakan pengguna dengan mengikuti  panduan  dari wireframe dan user  flow .  Pada  fase  ini  UI  yang  dibuat  akan  di  coba  oleh pengguna pada tahap test . Berikut adalah beberapa desain high-fidelity yang telah dibuat.
Gambar 8 diatas memperlihatkan halaman landing page dari platform online course Skilverse. Pada  halaman landing  page ini  yang  pengguna  pertama  kali  lihat  saat  membuka  halaman  Skilverse. Pada halaman landing page memiliki beberapa infromasi yang ditampilkan. Dimulai dari paling atas terdapat navigasi bar, hero header sebagai elemen yang membuat pengguna tertarik untuk menelusuri lebih lanjut, keunggulan dari Skilverse untuk meyakinkan pengguna, kategori yang disesuaikan dengan skill, kursus unggulan yang sering dibeli, review dari pengguna  sebagai testimoni kepada  pengguna, CTA untuk mengarahkan pengguna untuk menggunakan Skilverse, dan terakhir footer untuk informasi legalitas dari Skilverse.

## Gambar 9. High-fidelity halaman dashboard
Gambar  9  diatas  memperlihatkan  halaman dashboard pengguna  dari  platform online  course Skilverse. Pada halaman dashboard pengguna ini terdapat beberapa fitur berupa navigasi pada sisi kiri.
Pada  halaman  ini  juga  terdapat  informasi  berupa  materi  yang  terakhir  dipelajari,  performa  belajar pengguna, aktivitas mingguan, progres kursus yang telah dipelajari, dan statistik penyelesaian kursus.

## 3.5 Test
Pada tahap test ini memastikan solusi yang dibuat dapat membantu pengguna menyelesaikan masalahnya  secara  efektif  dan  efisien,  selain  itu  untuk  mengetahui  apakah  pengguna  mencapai
tujuannya  dan  mengukur  kepuasan  saat  menggunakan  platform online  course .  Pada  penelitian  ini metode  yang  digunakan  untuk Usability  Testing adalah Single  Ease  Question (SEQ).  SEQ  dipilih karena dapat menganalisis  lebih  lanjut tentang persepsi pengguna mengenai kesulitan dari task yang diberikan.
Pada Usability Testing ini 5 responden akan diberikan 3 task untuk dicoba. Berikut hasil dari Usability Testing dapat dilihat pada tabel dibawah ini.
Tabel 2. Hasil Usability Testing pencarian kursus & transaksi
Responden SEQ Feedback Responden 1 5 Saat menekan button CTA responden mengaharapkan detail kursus bukan langsung untuk membeli. Responden 2 6 Responden mengharapkan ada input untuk memasukan kode promo atau promo yang telah di klaim. Responden 3 6 Saat  melihat  deskripsi  course,  responden  mengharapkan  yang terlihat pertama kali overview tentang course bukan harga course. Responden 4 6 Responden mengharapkan ada banner promo, karena saat checkout ada diskon. Responden 5 6 Responden mengharapkan adanya fitur notifikasi, agar kebih mudah mengakses action tertentu. Rata-rata SEQ 5,8 PASSED Tabel 3. Hasil Usability Testing akses kursus Responden SEQ Feedback Responden 1 6 Responden  mengharapkan  ada  overview  course  saat  membuka kelas yang telah dibeli. Responden 2 7 Layout silabus sudah sesuai dibagi per topik materi. Responden 3 6 Saat  transaksi  selesai  responden  mengharapkan  langsung  ke halaman video kursus bukan ke menu dashboard kelas saya. Responden 4 6 Sudah jelas namun kurang detail. Responden 5 7 Flow sudah sesuai dan tidak ada kendala. Rata-rata SEQ 6.4 PASSED
Tabel 4. Hasil Usability Testing menyelesaikan kursus Responden SEQ Feedback Responden 1 7 Flow sudah sesuai dan tidak ada kendala. Responden 2 7 Flow sudah sesuai dan tidak ada kendala. Responden 3 7 Flow sudah sesuai dan tidak ada kendala. Responden 4 7 Flow sudah sesuai dan tidak ada kendala. Responden 5 7 Flow sudah sesuai dan tidak ada kendala. Rata-rata SEQ 7 PASSED Tabel 5. Total hasil Usability Testing Task SEQ Task 1 (pencarian kursus & transaksi) 5,8 Task 2 (akses kursus) 6,4 Task 3 (menyelesaikan kursus) 7 Total rata-rata SEQ 6,4 PASSED (Mudah)

## 4. CONCLUSION
Dengan  menggunakan  metode Design  Thinking maka  dapat  disimpulkan  bahwa Prototype platform online course Skilverse “Mudah” untuk pengguna gunakan. Selain itu untuk meningkatkan skill pengguna, telah dibuat  solusi desain  yang mempertimbangkan  kebiasaan pengguna berdasarkan informasi  dari  hasil In-depth  Interview .  Dari  informasi  tersebut  dapat  disimpulkan  masalah  inti pengguna  yaitu  masih  bingung  untuk  memilih  course  yang  tepat  sehingga  kursus  yang  dipilih  tidak dapat  memotivasi  pengguna  untuk  menyelesaikan  kursusnya.  Oleh  karena  itu,  di  Skilverse  terdapat kategori kursus berdasarkan skill yang dibutuhkan pengguna. Pada kursus juga terdapat level kesulitan kursus yang dapat mempermudah pengguna untuk memilih kursus yang sesuai dengan pengguna.

## REFERENCES
[1]. N.  M.  Widiastini,  M.  A.  Prayudi,  G.  Wirata,  N.  Dini  Andiani,  and  N.  L.  Agustini  Karta, “Peluang Kerja Perempuan Lulusan sekolah menengah Kejuruan Perhotelan di Bali,” Jurnal Kajian Bali (Journal of Bali Studies) , vol. 9, no. 2, p. 289, 2019.
[2]. M.  Zamroni,  “PERKEMBANGAN  TEKNOLOGI  KOMUNIKASIDAN  DAMPAKNYA TERHADAP KEHIDUPAN,” Jurnal Dakwah , vol. X, no. 2, pp. 195–211, Jul. 2009.
[3]. I.  M.  A.  Winangun,  “PERSPEKTIF  MAHASISWA  TERHADAP  PENGELOLAAN PEMBELAJARAN  ONLINE  DIMASA  PANDEMI  COVID-19,” Widyalaya:Jurnal  Ilmu Pendidikan , vol. 1, no. 1, pp. 19–27, Jul. 2020.
[4]. H.  Henderi,  M.  Maimunah,  and  R.  Andrian,  “Desain  aplikasi  e-learning  Sebagai  Media Pembelajaran Artificial Informatics,” CCIT Journal , vol. 4, no. 3, pp. 316–330, May 2011.
[5]. A.  A.  Razi,  I.  R.  Mutiaz,  and  P.  Setiawan,  “Penerapan  metode  design  thinking  Pada  model perancangan  UI/UX  APLIKASI  Penanganan  Laporan  kehilangan  Dan  Temuan  barang tercecer,” Desain Komunikasi Visual, Manajemen Desain dan Periklanan (Demandia) , vol. 3, no. 02, p. 219, Aug. 2018.
[6]. W.  S.  Nasution  and  P.  Nusa,  “UI/UX  design  web-based  learning  application  using  design thinking method,” ARRUS Journal of Engineering and Technology , vol. 1, no. 1, pp. 18–27, 2021.
[7]. A.  C.  Widodo  and E.  G.  Wahyuni,  “Penerapan  Metode  Pendekatan  Design  Thinking  dalam Rancangan Ide Bisnis Kalografi,” AUTOMATA , vol. 2, no. 2, 2021.
[8]. “PERANCANGAN UI/UX APLIKASI CERDAS SEPUTAR CORONA (CERNA) DENGAN METODE DESIGN THINKING,” Computatio: Journal of Computer Science and Information Systems , vol. 5, no. 2, pp. 52–60.
[9]. “Perancangan UI/UX menggunakan pendekatan HCD (Human-Centered design) pada website Thriftdoor,” AUTOMATA , vol. 1, no. 2.
[10]. J. Sauro and J. R. Lewis, Quantifying the user experience: Practical statistics for user research . Amsterdam: Morgan Kaufmann, 2016.