ISSSN: 2745-701X E-ISSN: 2745-7028 http://journals2.ums.ac.id/index.php/abditeknoyasa/

## PERANCANGAN USER INTERFACE DAN USER EXPERIENCE PADA WEBSITE BELAJAR BEKERJA MENGGUNAKAN PENDEKATAN HUMAN CENTERED DESIGN
Rama Elian Zuldi * Teknik Informatika Universitas Muhamadiyah Surakarta L200190046@student.ums.ac.id

## Azizah Fatmawati
Teknik Informatika Universitas Muhammadiyah Surakarta af157@ums.ac.id
* Corresponding author

## ABSTRAK
Kesiapan  kerja  adalah  sikap,  keterampilan  dan  pengetahuan    yang dimiliki  oleh  seorang  untuk  menyelesaikan  suatu  pekerjaan  tertentu tanpa mengalami kesulitan dan hambatan dengan hasil maksimal. Ketika kesiapan  kerja  dipersiapkan  dengan  baik,  maka  dimungkinkan  bagi seorang  individu  untuk  berhasil  didunia  kerja.  Belajar  Bekerja  adalah sebuah website / platform yang di bangun oleh PT.Kawan Kerja Indonesia dengan  tujuan  memudahkan  para  pencari  kerja  ( job  seeker) untuk mendapatkan  keterampilan  yang  dibutuhkan  dalam  mempersiapkan memasuki dunia kerja. Metode yang digunakan adalah Human Centered Design, karena pada perancangan user interface dan user experience ini membutuhkan  pendekatan  empati  yang  kuat  kepada  pengguna, sehingga  desainer  dapat  memposisikan  diri  sebagai  pengguna  sistem. Perancangan user  interface dan user experience  ini  juga  dapat memudahakan developer dalam  membangun  produknya  sebelum dilakukan coding dan launching ke  pengguna.  Setelah  dilakukan pengujian kepada pengguna secara langsung didapatkan hasil pengujian, yaitu  pengguna  sudah  paham  dengan  tampilan website yang  disajikan dan pengguna tidak merasa kesulitan ketika menggunakannya.
KATA KUNCI: Website, User Interface , User Experience , Human Centered Design, Usability Testing
Naskah dikirim 21 November 2022 Naskah direvisi 19 Desember 2022 Naskah diterima 20 Desember 2022

## PENDAHULUAN
Kesiapan  kerja  adalah  sikap,  keterampilan  dan pengetahuan    yang  dimiliki  oleh  seorang  untuk menyelesaikan  suatu  pekerjaan  tertentu  tanpa mengalami  kesulitan  dan  hambatan  dengan  hasil maksimal  dan  dengan  target  yang  telah  ditentukan[1]. Pendidikan  diharapkan  dapat  membantu  seseorang melatih  dirinya  agar  dapat  mempersiapkan  diri menghadapi  dunia  dan  masyarakat  luas  guna menghadapi  dunia  kerja[2].  Ketika  kesiapan  kerja dipersiapkan  dengan  baik,  maka  dimungkinkan  bagi seorang  individu  untuk  berhasil  didunia  kerja. Kebutuhkan  akan  tenaga  kerja  yang  profesional  dan
memiliki  keterampilan  yang  kuat  dan  sangat  tinggi, bahkan  menjadi  tuntutan  dalam  dunia  kerja  saat  ini. Menghadapi kenyataan tersebut, sumber daya manusia melalui segala bentuk dan potensinya merupakan faktor utama  pembentuk  keunggulan  kompetitif dan menjadi kunci kemajuan dimasa mendatang[3].
Kesiapan kerja yang kurang baik akan menimbulkan beberapa masalah seperti masalah belum mendapatkan  pekerjaan  dan  masalah  pengangguran. Berdasarkan  data  yang  ditampilkan  oleh  Badan  Pusat Statistik  pada  Februari  2022,  tingkat  pengangguran orang di Indonesia naik 4.20 juta orang menjadi 144.01 juta  orang  dibanding  Februari  2021[4].  Faktor  penting untuk menghasilkan sumber daya manusia yang mampu
bersaing    dan  profesional  pada  dunia  kerja  nantinya yaitu  dengan  membangun  kesiapan  kerja  yang diharapkan  mengurangi  jumlah  pengangguran  di Indonesia.
Belajar  Bekerja  adalah sebuah website / platform yang di bangun oleh PT.Kawan Kerja Indonesia dengan tujuan  memudahkan  para  pencari  kerja  ( job  seeker) untuk  mendapatkan  keterampilan  yang  dibutuhkan dalam  mempersiapkan  memasuki  dunia  kerja.  Pada perancangan platform berbasis website dibutuhkan desain user  interface berdasarakan user  experience dalam  meningkatkan  kegunaan  pengguna  ketika berinteraksi dengan website . Desain user  experience (UX)  telah  mendapatkan perhatian khusus di dunia modern. Pada titik ini, sebuah user  experience dapat  dikatakan  mendukung  tingkat keberhasilan  dalam  membangun website [5].  Prinsip dalam mendesain UX adalah menjaga nilai kenyamanan dan  kepuasan  pengguna.  Merancang  sistem  juga dibutuhkan  desain user  interface (UI). User  interface harus  memudahkan  pengguna  untuk  memahami  apa yang  harus  dilakukan  dan  menghindari  kebingungan saat  menggunakan  sebuah  sistem[6].  Perancangan  UI juga  bertujuan  untuk  menciptakan  media  komunikasi yang efektif antara manusia dan komputer.

## METODE PENELITIAN
Dalam  perancangan user  interface dan user experience website Belajar  Bekerja  menggunakan software Figma  dan  menerapkan  metode Human Centered Design (HCD). Human Centered Design (HCD)
merupakan metode yang digunakan untuk pengembangan  sistem  yang  interaktif  dengan  tujuan untuk  membuat  sistem  tersebut  dapat  digunakan  dan berguna[7]. Metode ini dipilih karena desain website ini membutuhkan  pendekatan  empati  yang  kuat  kepada pengguna,  sehingga  desainer  dapat  memposisikan  diri sebagai  pengguna  sistem.  Gambar  tahapan  metode Human Centered Design ditunjukkan pada gambar 1.
Gambar 1. Tahapan metode Human Centered Design

## A. Inspiration
Tahap inspiration adalah kunci dalam  metodologi human centered design. Hal ini dikarenakan pada tahap
ini  memungkinkan penulis  untuk  menemukan  masalah dan memahami tujuan yang telah dicapai pengguna dan hambatan yang mereka hadapi.
B. Ideation
Pada  tahap ideation ,  pemahaman  yang  kuat mengenai pengguna dan pernyataan masalah yang jelas dapat  membantu  penulis  dalam  mengerjakan  solusi potensial.  Tahapan  ini  juga  merupakan  wadah  untuk kreativitas  tanpa  perlu  memperhatikan  batasan  dari pengguna.  Penulis  melakukan  tahapan  ini dengan  cara brainstorming untuk  mendapatkan  solusi  terbaik.  Ide dan gagasan yang telah diperoleh pada tahap ini akan di identifikasi  menjadi  solusi  terbaik  untuk  merancang prototype desain.

## C. Implementation
Tahap implementation bertujuan untuk memperoleh validasi  dari  pengguna  untuk  tahap  akhir  desain  yang tepat untuk membuat produk sesuai target pengguna.

## HASIL DAN PEMBAHASAN

## A. Hasil tahap inspiration
Dalam tahap  ini, penulis  melakukan research untuk menemukan  masalah  dan  memahami  tujuan  yang pengguna  hadapi. Research dilakukan  dengan  cara memperdalam  teori  permasalahan  yang  diangkat  yang bersumber dari jurnal serta mewawancarai user secara langsung.  Tabel  permasalahan  pengguna  ditunjukkan pada tabel 1.
Tabel 1. Permasalahan pengguna
No.

## Permasalahan Pengguna
1 Pengguna merasa tidak siap ketika terjun langsung pada dunia kerja
2 Banyak  pengguna  yang  merasa  memiliki kekurangan  keterampilan  yang  memenuhi syarat
3 Pengguna merasa memiliki pengetahuan yang minim dalam persiapan memasuki dunia kerja
B. Hasil tahap Ideation
Dalam  mencegah  terjadinya  kesalahan  ketika pembuatan desain, penulis melakukan tahap pembuatan wireframe .  Tahap  ini  juga  bertujuan  untuk mencari serta menentukan solusi. Wireframe merupakan  sebuah  struktur  dasar  atau  sketsa  awal untuk  tampilan  desain,  di  tahap  inilah  ditentukan  tata
letak awal untuk tampilan website seperti tata letak fitur menu,  gambar, icon ,  dan text [8].  Perancangan wireframe tersebut penulis buat dengan menggunakan software Figma.  Contoh  beberapa  hasil wireframe ditunjukkan pada gambar dibawah.
Gambar 2. Wireframe halaman landing
Gambar 3. Wireframe halaman daftar akun
Gambar 4. Wireframe halaman masuk akun
Gambar 5. Wireframe halaman dashboard akun
Gambar 6. Wireframe halaman daftar kursus
Gambar 7. Wireframe halaman daftar mentor
Gambar 8. Wireframe halaman profil mentor
Setelah tahap wireframe selesai, selanjutnya adalah tahap  perancangan  tampilan high  fidelity  design . Perancangan high fidelity design merupakan hasil akhir dari  desain  produk  yang  dibuat  secara  detail  dengan disertai pewarnaan, icon, gambar, font, shape , dan yang lainnya[9]. Pada tahap  pembuatan high  fidelity  design , penulis menggunakan software Figma dikarenakan tools ini  mudah  digunakan  dan  sudah familiar .  Berikut  ini merupakan contoh dari high fidelity design dari produk Belajar Bekerja pada gambar dibawah.
Gambar 9. High fidelity design halaman landing
Pada  gambar  9,  berupa  tampilan  halaman landing,  yang  terdiri  dari  beberapa  fitur  yang  tersedia, seperti  kategori  kursus,  mentoring,  acara  webinar, daftar  akun,  masuk  akun  serta  fitur  lainnya.  Pengguna dapat menggunakan berbagai fitur dengan mudah untuk menambah pengetahuan dalam kesiapan kerja.
Gambar 10. High fidelity design halaman daftar akun
Pada  gambar  10,  berupa  tampilan  halaman membuat akun. Pengguna dapat membuat akun dengan mengisi  beberapa  identitas  seperti  nama, e-mail, password dan nomor HP aktif. Selain itu, terdapat juga fitur  mendaftar  dengan  menggunakan  akun  google pengguna.
Gambar 11. High fidelity design halaman masuk akun
Pada gambar 11, berupa tampilan halaman masuk akun.  Pengguna  perlu  mengisi email dan password untuk masuk kedalam akun. Pengguna juga dapat masuk menggunakan akun google yang telah terdaftar. Apabila
pengguna  lupa password akun,  dapat  menggunakan fitur lupa password yang telah tersedia .
Gambar 12. High fidelity design halaman dashboard akun
Pada  gambar  diatas,  merupakan  tampilan  ketika pengguna telah berhasil masuk kedalam website Belajar Bekerja.  Halaman  ini  memuat  beberapa  fitur  seperti kursus  yang  diikuti,  mentoring  yang  diikuti,  webinar yang tersedia, serta fitur lainnya.
Gambar 13. High fidelity design halaman  daftar kursus
Pada  gambar  diatas,  merupakan  tampilan  yang memuat beberapa kursus yang tersedia dan bisa diikuti oleh  pengguna.  Untuk  memudahkan  pengguna  dalam memilih kursus, website ini juga menyediakan fitur filter
untuk  menyortir  kursus  berdasarkan  kebutuhan pengguna.
Gambar 14. High fidelity design halaman daftar mentor
Pada  gambar  14,  merupakan  tampilan  yang memuat  beberapa  mentor  yang  berpengalaman  untuk membantu pengguna dalam mendapatkan keterampilan  untuk  mempersiapkan  kesiapan  kerja. Pengguna  dapat  memilih  mentor  sesuai  yang dibutuhkan.
Gambar 15. High fidelity design halaman profil mentor
Pada gambar 15, merupakan tampilan yang memuat profil  dari  mentor  yang  dipilih.  Didalam  halaman  ini, pengguna  dapat  melihat  keahlian  mentor,  latar
belakang  mentor,  portofolio  mentor  serta  lain sebagainya.
C. Hasil tahap Implementation Setelah tahapan ideation selesai, tahapan selanjutnya  adalah implementation. Pada  tahap  ini, bentuk sistem berupa prototype website . Prototype ini bertujuan  untuk  memudahkan  pengguna  dalam mensimulasikan desain yang telah dibuat, yang nantinya dapat  diperolah  umpan  balik  saat  melakukan  test terhadap  produk  yang  telah  dibuat[10].  Disini,  penulis melakukan  pengujian  sistem  dengan  menggunakan System  Usability  Scale (SUS)  dengan  5  responden. Menurut Jakob Nielsen, pengujian dengan 5 responden memungkinkan  penguji  untuk  menemukan  masalah kegunaan  yang  hampir  sama  banyaknya  dengan  yang ditemukan ketika menggunakan lebih banyak responden[11].  Terdapat  10  pertanyaan  yang  akan diberikan  kepada  responden  untuk  mengukur  nilai kepuasan  pengguna.  Pertanyaan  yang  diberikan mengacu  pada Standart  Usability  Questionnaires dari SUS[12].    Detail  pertanyaan  ditujukkan  pada  tabel dibawah.

## Tabel 2. Pertanyaan SUS
No Pertanyaan SUS 1 Saya berpikir akan menggunakan sistem ini lagi
2 Saya merasa sistem ini rumit digunakan
3 Saya merasa sistem ini mudah untuk digunakan
4 Saya membutuhkan bantuin dari orang lain atau teknisi dalam menggunakan sistem ini
5 Saya  merasa  fitur-fitur  sistem  ini  berjalan dengan semestinya
6 Saya  merasa  ada  banyak  hal  yang  tidak konsisten (tidak serasi) pada sistem ini
7 Saya  merasa  orang  lain  akan  memahami  cara menggunakan sistem ini dengan cepat
8 Saya merasa sistem ini membingungkan
9 Saya  merasa  tidak  ada  hambatan  dalam menggunakan sistem ini
10 Saya  perlu  membiasakan  diri  terlebih  dahulu sebelum menggunakan sistem ini
Gambar 16.Sesi wawancara dan usability testing kepada pengguna
Gambar  16,  merupakan  sesi  wawancara  dan pengujian  rancangan website dengan  pengguna  yang bertujuan untuk  mendapatkan masukan dari pengguna agar website yang dirancang sesuai dengan kebutuhan pengguna. Selanjutnya,  untuk  mengukur  nilai  dari pengujian,  maka  hasil  pengujian  SUS  dapat  dilihat melalui tabel 3.

## Tabel 3. Hasil perhitungan penilaian SUS
Responden Jumlah Nilai Hasil Penilaian (Jumlah nilai x 2.5) 1 35 87,5 2 33 82,5 3 32 80 4 36 90 5 39 97,5 Skor Rata-Rata (Hasil Akhir) 87,5
Berdasarkan  aturan  metode  perhitungan  nilai  SUS, hasil penilaian responden terhadap rancangan website Belajar  Bekerja  mendapatkan  nilai  rerata  87,5  dan melalui nilai tersebut dapat diartikan bahwa pengguna menyukai  rancangan website yang  dibangun  karena telah memenuhi kebutuhan mereka dan pengguna akan merekomendasikannya kepada teman-teman mereka.
Gambar 17. Sesi meeting Bersama seluruh tim Kawan Kerja di virtual office
Gambar 17, merupakan sesi meeting bersama CEO, CTO  dan  seluruh  tim  Kawan  Kerja  untuk  membahas progress yang telah dikerjakan setiap divisi.
Gambar 18. Sesi evaluasi dan review dengan divisi UI/UX di virtual office
Gambar  18,  merupakan  sesi  evaluasi  dan review dengan divisi UI/UX. Sesi ini bertujuan untuk membahas hasil  pengujian  rancangan website Belajar  Bekerja terhadap pengguna, Kemudian hasil pengujian tersebut ditinjau  kembali dengan  memperhatikan  masukan  dari pengguna  supaya website yang  dirancang  dapat memenuhi kebutuhan pengguna.

## KESIMPULAN
Dapat  disimpulkan  bahwa  dengan  dibentuknya perancangan user  interface dan user  experience pada website Belajar  Bekerja  dapat  mempermudah  dan mempercepat  pengembangan  atau  pembuatan  suatu website sesuai dengan kebutuhan pengguna. Selain itu, perancangan user interface dan user experience dalam pengembangan website juga  dapat  memudahkan developer dalam  membangun  produknya  sebelum dilakukan coding dan launching ke  pengguna.  Hasil pengujian  kepada  pengguna  menggunakan  metode system usability scale menghasilkan kesimpulan bahwa
pengguna sudah paham dengan tampilan website yang disajikan  dan  pengguna  tidak  merasa  kesulitan  ketika menggunakannya.

## DAFTAR PUSTAKA
[1] A. A. Baiti and S. Munadi, “Pengaruh pengalaman praktik, prestasi belajar dasar kejuruan dan dukungan orang tua terhadap kesiapan kerja siswa
SMK,” J. Pendidik. Vokasi , vol. 4, no. 2, pp. 164 – 180, 2014, doi: 10.21831/jpv.v4i2.2543.
[2] R. Diah Baiti, S. M. Abdullah, and N. S. Rochwidowati, “Career Self -Efficacy Dan Kesiapan Kerja Pada Mahasiswa Semester Akhir,” J. Psikol. Integr. Prodi Psikol. UIN Sunan Kalijaga , vol. 5, no. 2, pp. 128 – 141,
2017.
[3] F. Syahdan, “Hubungan Antara Keterampilan Kerja Dengan Pr oduktivitas Kerja,” Psikoborneo J. Ilm.
Psikol. , vol. 5, no. 1, pp. 81 – 88, 2017, doi:
10.30872/psikoborneo.v5i1.4334. [4] Badan Pusat Statistik, “Tingkat Pengangguran Terbuka (TPT) sebesar 5,83 persen dan Rata-rata upah buruh sebesar 2,89 juta rupiah per b ulan,”
bps.go.id , 2022. https://www.bps.go.id/pressrelease/2022/05/09/19 15/februari-2022--tingkat-pengangguran-terbuka-- tpt--sebesar-5-83-persen.html (accessed Nov. 02, 2022).
[5] A. R. Setiadi and H. Setiaji, “Perancangan UI/UX menggunakan pendekatan HCD (Human-Centered design) pada website Thriftdoor,” Automata , vol. 1, no. 2, pp. 228 – 233, 2020.
[6] M. T. Firmansyah, R. Fauzi, and S. F. S. Gumilang, “Perancangan User Interface dan User Experience Mobile Application SIBENGKEL Untuk Memenuhi Kebutuhan Pengguna Dengan Metode User Centered Design (UCD),” e-Proceeding Eng. , vol. 7, no. 2, pp.
7574 – 7580, 2020, [Online]. Available: https://openlibrarypublications.telkomuniversity.ac.i d/index.php/engineering/article/view/12857/12569
[7] L. Kirby, H. Tolle, and A. H. Brata, “Perancangan User
Experience Aplikasi Mobile Social Crowdsourcing Bencana Alam menggunakan Pendekatan Human- Centered Design (HCD),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. e-ISSN , vol. 2548, no. 5, p. 964X, 2019.
[8] M. D. Ariawan, A. Triayudi, and I. D. Sholihati, “Perancangan User Interface Design dan User Experience Mobile Responsive Pada Website Perusahaan,” J. Media Inform. Budidarma , vol. 4, no.
1, p. 161, 2020, doi: 10.30865/mib.v4i1.1896.
[9] N. Aulia, S. Andryana, and A. Gunaryati, “Use r Experience Design Of Mobile Charity Application Using Design Thinking Method,” Sisfotenika , vol. 11,
no. 1, p. 26, 2020, doi: 10.30700/jst.v11i1.1066.
[10] A. N. R. Refly Ilham Syabana1, Pramana Yoga Saputra2, “Penerapan Metode Design Thinking Pada Peran cangan User Interface Aplikasi Kotakku,” J. Phys. A Math. Theor. , vol. 44, no. 8, pp. 40 – 60, 2011.
[11] J. Nielsen, “How Many Test Users in a Usability Study?,” Nielsen Norman Group , 2012.
https://www.nngroup.com/articles/how-many-test- users/ (accessed Nov. 16, 2022).
[12] J. R. Lewis and J. Sauro, “Item Benchmarks for the System Usability Scale,” J. Usability Stud. , vol. 13, no.
3, pp. 158 – 167, 2018, [Online]. Available: https://uxpajournal.org/item-benchmarks-system- usability-scale-sus/