Perancangan User Interface Dan User Experience Pada Customer Interface Website Perusahaan Transportasi Menggunakan

## Metode Usability Testing
Imam Syafii 1* , Ahmad Aufar Ribhi 2 , Mutia Ulfa 2 , Vincensia Seranede 3 , Nita Ilmiyatul Lailiah 4
1 2 3 4 Bisnis Digital, Institut Teknologi Sains dan Kesehatan Sugeng Hartono, 47442, Indonesia Imam.mct23@gmail.com, pakaufar@gmail.com, mutiaulfa@sugenghartono.ac.id, vseranede@sugenghartono.ac.id, nitalailiah@sugenghartono.ac.id

## Abstrak
Pemesanan layanan transportasi melalui customer service memerlukan waktu yang lama untuk negosi- asi terkait harga, jenis armada dan jumlah jasa angkut barang. Negosiasi tersebut membutuhkan waktu yang  lama  sampai  dengan  setuju  untuk  memesan.  Dari  permasalahan  tersebut  dibuatkan  halaman in- terface dimana pelanggan dapat mengetahui harga per rute dan jenis armada serta jumlah jaasa angkut barang  secara  mandiri  dan  bisa  menjadi  pertimbangan  oleh  pelanggan  terkait  harga  yang  dapat  dita- warkan. Halaman user interface (UI) dibuat  untuk memudahkan  implementasi berbasis website . Hal- aman user  interface dibuat  dengan software figma  dengan  menggunakan  metode usability testing . Hasil dari analisis menunjukan adanya 4 UI/UX meliputi User interface (UI) halaman customer , user interface (UI) halaman cek pengiriman, user interface (UI) halaman stepper 1, user interface (UI) hal- aman stepper 2, user  interface (UI)  halaman stepper 2,  user  interface  (UI)  halaman stepper 3.  Hasil dari usability testing menggunakan aspek indikator indikator learnability , memorability , efficiency , er- rors ,  dan satisfaction yang  telah  dihitung  menghasilkan  nilai  rata-rata  diatas  0,78%  per  indikator. Hasil nilai tersebut menunjukan nilai yang besar dan menunjukan halaman UI/UX dari customer inter- face sangat baik.
Kata kunci: UI/UX, Usability Testing, Figma

## Abstract
Ordering  transportation  services  through  customer  service  requires  a  long  time  for  negotiations  re- garding prices, types of fleets and the amount of goods transportation services. The  negotiations took a long time until agreed to order. From these problems, a safe interface  is  created  where customers can find out the price per route and type of fleet as well as the number of goods transport services in- dependently and can be considered by customers regarding the prices that can be offered. The user in- terface (UI) page is made to facilitate website-based implementation. User interface pages are created with figma software using the usability testing method. The results of the analysis show that there are 4  UI/UX  including  User  interface  (UI)  customer  page, user  interface  (UI)  check  delivery  page,  user interface (UI) page stepper 1, user interface (UI) page stepper 2, user interface ( UI) page stepper  2, user interface (UI) page-safe stepper 3. The results of usability testing using aspects of the indicators of learnability, memorability,  efficiency,  errors, and satisfaction have been calculated to  produce an average value above 0.78% per indicator. The results of this value show a large value and show that the UI/UX page of the customer interface is very good.
Keywords: UI/UX, Usability Testing, Figma

## 1. PENDAHULUAN
Di era Revolusi Industri 3.0 saat ini, hampir se- luruh  aktivitas  kehidupan  manusia  tidak  lepas dari  penggunaan  teknologi  informasi  sebagai alat  penunjang  aktivitas  dan  layanan  lainnya.
Layanan  TI  yang  muncul  sebagai  sistem  infor- masi yang tersedia secara luas untuk semua ka- langan  (Triyunsari,  2022).  Pesatnya  perkem- bangan  teknologi  informasi  mendorong  PT  Pi- lar  Transport  untuk  membuat  sistem  informasi berbasis web yang  mampu  memfasilitasi
pemesanan  pelanggan  (Rachmatsyah  et  al. 2022).  Sebelumnya  pelanggan  melakukan pemesanan dengan cara menghubungi customer service untuk  melakukan  pemesanan,  sehingga proses  pemesanan  membutuhkan  waktu  untuk bernegosiasi  sehingga  tidak  efisien  dan  efisien (Arumsari,  Lailyah,  and  Rahayu  2022).  Aki- batnya,  sistem  informasi  baru  dibuat,  lebih us- er-friendly dalam  tampilan  dan  lebih  spesifik dalam  fungsi  (Rahmawati,  Sharyanto,  and  ... 2022).
Dalam  pengembangan  website  terbagi  menjadi beberapa  bagian  yaitu User  Interface (UI)  dan User Experience (UX)  (Oktaviani, Candra, and Irsyad  2022).  Melihat  potensi  di  atas,  penulis mengusulkan  untuk  merancang User  Interface (UI)  dan User  Experience (UX)  (Relawati, Primanda,  and  Zamroni  2022).  Saat  mendesain antarmuka  pengguna  (UI)  dan  pengalaman pengguna  (UX),  beberapa  pendekatan  dapat digunakan  termasuk  desain  yang  berpusat  pada manusia,  pemikiran  desain, dual  diamond ,  UX Lean,  menilai  berdasarkan  pengalaman,  dll (Hasibuan  et  al.  2022).  Pendekatan  Human- Centered Design (HCD)  adalah pendekatan de- sain  produk  yang  berfokus  pada  pengguna  dan kegunaan  produk  (Isangula  et  al.  2022).  Oleh karena  itu,  hasil  desain  dari  desain  layar  dapat meningkatkan  pengalaman  pengguna.  Metode ini  memiliki  beberapa  langkah  proses  seperti observasi, ide, prototyping , dan pengujian.
Metode  Human  Centered-Design  (HCD)  yang kemudian  dilanjutkan  ke  tahap  evaluasi kegunaan dengan menggunakan metode Usabil- ity Testing (Ravelino and Susetyo 2022). Kedua metode  dipilih  penulis  karena  dapat  menjawab kebutuhan  pengguna  yang  berfokus  pada user dan bagaimana produk atau layanan yang terse- dia  dengan  mendeskripsikan  hasil  pengamatan aplikasi  berdasarkan  evaluasi  kegunaan  dari sudut pandang pengguna dan melakukan iterasi perbaikan (Rahmah, 2016). Tools atau alat yang digunakan penulis untuk membuat perancangan User  Interface (UI)  adalah  Figma,  karena  ap- likasi yang ringan serta dapat menghemat waktu dengan  fitur  kolaborasi  sepserti  mengubah rancangan design dalam waktu yang bersamaan atau  memberi  komentar  (Al-Faruq,  Nur‟aini, and Aufan 2022).
Dengan adanya pengembangan kembali website PT  Pilar  Transport  berupa customer  interface dapat  menjadi  solusi  yang  bagus  guna  mem- berikan  efektifitas  dan  efisien  dalam  melakuan
pemesanan. Customer  interface juga  dapat membantu pelanggan memukan rate harga yang dibutuhkan oleh pelanggan  sehingga pelanggan memiliki  pengetahuan  dan  perencanaan  dalam menggunakan jasa layanan PT Pilar Transport.

## 2. METODE

## 2.1. Observasi
Dalam  aktivitas  ini  dilakukan  observasi  lang- sung kepada pihak karyawan dan pelanggan un- tuk mengetahui kebutuhan pengguna. Hasil dari aktivitas observasi adalah berupa definisi masa- lah  yang  akan  diselesaikan.  Terdapat  beberapa langkah yang dilakukan pada penelitian, yaitu :
a) Mengumpulkan informasi kebutuhan Dalam langkah ini, penulis mengumpulkan informasi menggunakan teknik wawancara yang  dilakukan  dengan  CEO  PT  Pilar Transport  dan  didapatkan  hasil  sebagai berikut :
Perlunya  optimasi  pemesanan  yang  dil- akukan oleh pelanggan sehingga pelanggan dapat  mengetahui  harga  per  rute  yang ditawarkan.  Pemesanan  yang  dilakukan secara mandiri oleh pelanggan menyingkat waktu  tanya  jawab  yang  dilakukan  oleh customer  service.  Sehingga  customer  ser- vice  hanya  melakukan  konfirmasi  atas  pe- sanan yang dilakukan oleh pelanggan.
b) Analisis kebutuhan informasi Perancangan User Interface (UI) dan User Experience (UX) website PT Pilar Transport  yang  akan  dibuat  ini  akan memuat  dua  sisi,  yaitu  dari  sisi  customer service dan sisi pelanggan. Untuk sisi cus- tomer service akan diakses oleh karyawan, dari  sisi  pelanggan  akan  diakses  oleh  cus- tomer PT Pilar Transport. Seperti yang ter- tera pada gambar 1, alur pemesanan dimu- lai  dari  pelanggan  menuju  ke  PT  Pilar Transport.  Kemudian,  setelah  sampai  di perusahaan  akan  melakukan  konfirmasi atas  pemesanan  yang  dilakukan.  Proses bisnis dapat dilihat pada Gambar 1.
c) Analisis pengumpulan data Pada  penelitian  ini  instrumen  penelitian yang  dibuat  berupa  kuesioner  dengan- menurunkan  item-item  pernyataan  dari kelima  indikator  yang  ada  pada  usability testing.  Kelima  indikator  yang  digunakan adalah learnability , memorability , efficien-
cy , errors ,  dan satisfaction .  Adapun kuesioner  yang  digunakan  tertera  pada Tabel 1.
Gambar 1. Skema Sistem Tabel 1.  Kuesioner Indikator Kode Keterangan learnabil- ity Q1 Customer interface web- site mudah dipelajari memora- bility Q2 Saya dengan mudah mengingat penggunaan customer interface efficiency Q3 Saya dengan mudahnya memperoleh informasi yang ada terkait customer interface Q4 Saya mampu langsung menemukan informasi yang saya ingin cari dari awal membuka pada customer interface errors Q5 Saya tidak menemukan menu yang error atau tid- ak sesuai dengan fungsinya satisfac- tion Q6 Saya senang dengan de- sign antarmuka yang ada pada customer interface secara keseluruhan

## 2.2. Idea Generation
Dalam  tahap ideation setelah  masalah  yang ingin  diselesaikan  sudah  diketahui,  langkah  se- lanjutnya  adalah  men- generate solusi  potensial atas masalah yang ada. Hasil dari aktivitas idea generation  berupa  ide  pengembangan  sebagai solusi  potensial  (berupa  ide user  interface (UI) design  dalam  bentuk  wireframe  yang  nantinya akan dibuat dalam versi mockup ).
Dari  analisis  kebutuhan  fungsional,  dapat disimpulkan user  interface (UI)  yang  dibutuh- kan adalah :
a) User interface (UI) halaman customer b) User  interface (UI)  halaman  cek  pengi- riman c) User interface (UI) halaman stepper 1 d) User interface (UI) halaman stepper 2 e) User interface (UI) halaman stepper 2 f) User interface (UI) halaman stepper 3

## 2.3. Human Centered-Design (HCD)
Sebuah  pendekatan  untuk  mendesain  produk yang  berfokus  pada  manusia  atau  pengguna. HCD  dimulai  dengan  memahami  orang-orang terlebih  dahulu  dan  mengetahui  apa  kebu- tuhannya  (Putu  et  al.  2021).  Untuk  dapat  me- mahami  orang  atau  pengguna  bisa  dilakukan observasi  terlebih  dahulu.  Dalam  pendekatan HCD  dilakukan  iterasi-iterasi  supaya  dapat mencapai  apa  yang  dibutuhkan  oleh  pengguna. Seperti yang dikatakan Don Norman pada buku “The Design of Everyday Things” dalam siklus iteratif HCD terdapat 3 aktivitas, yaitu observa- tion , idea  generation (ideation), prototyping , dan testing (Chen et al. 2022).

## 2.4. Usability Testing
Sebuah metode untuk mengevaluasi User Expe- rience (UX) terhadap software ataupun website yang  dibuat.  Pada  umumnya,  metode  ini  dil- akukan  oleh  para  UX  developer  dengan  meli- batkan beberapa user (pengguna) tertentu untuk diteliti  bagaimana  proses  mereka  selama  ber- interaksi  dengan website (Valentino  Adhy Nuantra  et  al.  2022). Usability  Testing perlu dilakukan untuk mengetahui lebih dulu kemungkinan  kendala  penggunaan  aplikasi yang  akan  dihadapi  oleh  pengguna. Usability juga berkaitan dengan kualitas dari pengalaman yang dirasakan user pada saat menggunakan ap- likasi  baik  berupa  peralatan  ataupun  aplikasi berbasis website ,  berbasis  desktop,  hingga  ber- basis mobile (Relawati, Primanda, and Zamroni 2022).
Dalam  perhitungan  statistik  deskriptif  ini,  hasil rata-rata  usability  testing  yang  dilakukan  pada website  customer  interface  kemudian  dibagi menjadi empat kategori dan rentang penaliaian. Tabel  2  menunjukkan  kategori  dan  rentang penilaian  website.  Aspek  usability  dikatakan baik  jika  hasil  persentase  menunjukkan  nilai yang tinggi.

## Tabel 2.  Kategori dan Rentang Penilaian
Persentase Keterangan 1 Sangat Buruk 2 Kurang Baik (Tidak Setuju)
3 Baik (Setuju) 4 Sangat Baik (Sangat Setuju) Tabel 3.  Aspek Usability Persentase Keterangan 0 – 23,99 Sangat Buruk 24 – 39,99 Kurang Baik (Tidak Setuju) 40 – 73,99 Baik (Setuju) 74 – 100 Sangat Baik (Sangat Setuju)

## 3. HASIL DAN PEMBAHASAN

## 3.1. User Interface
Berdasarkan  hasil  analisis  kebutuhan  disimpul- kan  terdapat  4  jenis user  interface (UI)  yang akan diimplementasikan ke dalam website.
a) User interface (UI) halaman customer
Tampilan  user  interface  halaman  customer berisi  keterangan  yang  ada  dalam  perus- ahaan  meliputi  logo  perusahaan,  jenis layanan yang ada, spesifikasi armada yang ditawarkan,  sosial  media  perusahaan  dan lokasi  perusahaan.  Halaman customer merupakan  antar  muka  terdepan  setelah membuka  alamat  website. User  interface halaman customer dapat dilihat pada Gam- bar 2.
b) User interface halaman cek pengiriman Tampilan user  interface halaman  cek pengiriman  diawali  dengan  memilih  jenis layanan  yang  ada  meliputi  pindahan,  sewa truck ,  dan  kargo.  Setelah  memasuki  jenis layanan  akan  diberikan form alamat  origin berupa  provinsi,  kabupaten/kota,  kecama- tan,  serta  keluruhan,  form  alamat  destinasi berupa  provinsi,  kabupaten/kota,  kecama- tan  serta  kelurahan,  jenis  armada  yang digunakan,  dan  nomer  whatsapp.  Setelah terisi  pelanggan  dapat  melihat  harga  yang ditawarkan oleh perusahaan. Apabila harga tersebut  disepakati  oleh  customer  dapat melanjutkan  dengan  menekan  tombol pemesanan. User  interface halaman  cek pengiriman dapat dilihat pada Gambar 2.
Gambar 2. User Interface Customer
Gambar 2. User Interface Cek Pengiriman
c) User interface (UI) halaman stepper 1 Tampilan  user  interface  halaman  step- per  1  berisi form nama  pemensan, nomer  whatsapp  pemesan  dan  email pemesan.  Informasi  tersebut  digunakan untuk  melakan  konfirmasi  pihak cus- tomer  service setelah  pemesanan  dil- akukan. User interface halaman stepper 1 dapat dilihat pada Gambar 3.
d) User interface (UI) halaman stepper 2 Tampilan user  interface halaman step- per 2  berisi form data  alamat  pemesan berupa form provinsi,  kabupaten/kota, kecamatan dan kelurahan pemesan. Us- er  interface halaman stepper 2  dapat dilihat pada Gambar 4.
Gambar 3. User Interface Stepper 1
Gambar 4. User Interface Stepper 2
e) User interface (UI) halaman stepper 2
Tampilan user  interface halaman step- per 2  berisi  detail  pemesanan  dari cus- tomer yang  dilakukan  pada  halaman cek pengiriman. Pelanggan hanya perlu menambahi alamat catatan secara detail guna  menghindari  salah  rute  atau  salah alamat. User  interface halaman stepper 2 dapat dilihat pada Gambar 6.
Gambar 6. User Interface Stepper 2
f) User interface (UI) halaman stepper 3 Tampilan user  interface halaman step- per 3  berisi  rangkuman  hasil  pemesan- an  dari  pelanggan.  Dihalaman  ini pelanggan  dapat  melihat  rangkuman yang  telah  dipesanan  sebelum  di  kirim ke  dalam  pesanan  pelanggan. User  in-
terface halaman stepper 3  dapat  dilihat pada Gambar 7.
Gambar 7. User Interface Stepper 3.

## 3.2. Usability Testing
Dilakukan usability  testing design  baru kepada  meliputi karyawan dan  pelanggan tetap. Hasil usability  testing dapat  dilihat  pada Tabel di bawah ini
Tabel 2. Usability Testing Que stion Q1 Q2 Q2 Q3 Q4 Q6 R1 3 3 3 2 3 4 R2 2 3 3 3 3 4 R2 3 4 4 4 4 4 R3 3 3 3 3 3 4 R4 3 3 3 3 3 4 R6 4 3 3 3 3 4 R7 3 3 3 2 3 4 R8 4 3 3 2 3 4 R9 4 3 3 3 3 4 R10 4 3 3 3 3 4 R11 3 3 3 3 3 4 R12 3 3 3 2 3 4 R12 3 3 3 2 3 4 R13 3 3 3 3 3 3 R14 4 3 3 3 3 4 Jum 49 46 46 41 46 55 ave 0,84 0,81 0,78 0,81 0,99
Berdasarkan  hasil  kuesioner  terhadap usability testing , didapatkan bahwa indikator satisfaction menjadi  indikator  aspek  tertinggi  dengan  nilai 0,99.  Hasil  indikator  aspek  tersebut  menun-
jukan  nilai  indikator  sangat  baik.  Hal  ini pengguna  senang  dengan design antarmuka yang  ada  pada customer  interface secara  kese- luruhan.  Dilanjutkan  kedua  aspek  indikator learnability dengan  nilai  0,84.  Hasi  ini  menun- jukan  aspek  indikator  sangat  baik.  Hal  ini menunjukan customer  interface website  mudah dipelajari oleh pengguna.
Indikator  aspek memorability ,  dan errors me iliki  nilai  yang  sama  dengan  nilai  0,81.  Hasil tersebut  menunjukan  aspek  indikator  yang  sa gat baik. Hal ini menunjukan pelanggan dengan mudah  mengingat  penggunaan customer  inter- face dan  tidak  menemukan  menu  yang error atau tidak sesuai dengan fungsinya.
Indikator  aspek efficiency memiliki  nilai  aspek terendah  dibandingkan  ke  4  aspek  tersebut. Nilai  aspek  tersebut  menjadi  rata-rata  sebesar 0,78.  Hasil  tersebut  masih  menunjukan  sangat baik.

## 4. KESIMPULAN
Design  website customer  interface PT  Pilar Transport telah dirancang dengan menggunakan perangkat  lunak  figma  yang  meliputi  menu pemesanan pelanggan untuk mempermudah dan mempersingkat kegiatan negosiasi antara pelanggan  dan customer  service .  Hasil custom- er  interface ditesting  menggunakan usability testing pada  semua  fitur  dengan  menggunakan lima  indikator learnability , memorability , effi- ciency , errors , dan satisfaction yang telah dihi- tung  menghasilkan  nilai  rata-rata  diatas  0,78% per  indikator  yang  memiliki  arti  bahwa design tersebut sangat baik

## UCAPAN TERIMA KASIH
Terimakasih kepada ITSK Sugeng Hartono atas dukungan dalam melakukan penelitian. Terimakasih  kepada  PT  Pilar  Transport  atas dukungan  guna  melancarkan  proses  penelitian ini.

## DAFTAR PUSTAKA
Al-Faruq,  Muhammad  Naufal  Muhadzib,  Siti
Nur‟aini,  and  Muhammad  Haikal  Aufan.
2022.  “Perancangan  Ui/Ux  Semarang
Virtual Tourism Dengan Figma.” Walisongo Journal of Information
Technology 3(1): 32–42.
Arumsari,  Nurul  Rizka,  Nurzahroh  Lailyah,  and Tina  Rahayu.  2022.  “Peran  Digital Marketing  Dalam  Upaya  Pengembangan
UMKM  Berbasis  Teknologi  Di  Kelurahan Plamongansari Semarang.” SEMAR (Jurnal Ilmu  Pengetahuan,  Teknologi,  dan  Seni bagi Masyarakat) 11(1): 92.
Chen, You et al. 2022. “Human-Centered Design to Address Biases in Artificial Intelligence.” Journal  of  Medical  Internet Research 24(Figure 1): 1–10.
Hasibuan, Fadliansyah, Hengki Setiawan, Edwar Ali,  and  Junadhi.  2022.  “Prototype  Design User Interface Sistem Preloved Menggunakan Metode Lean Ux.” ZONAsi: Jurnal Sistem Informasi 4(1): 127–38.
Isangula,  Kahabi  et  al.  2022.  “Strengthening
Interpersonal  Relationships  in  Maternal and  Child  Health  Care  in  Rural  Tanzania: Protocol  for  a  Human-Centered  Design
Intervention.” JMIR  Research  Protocols 11(7).
Oktaviani,  Bebi,  Reski  Mai  Candra,  and Muhammad  Irsyad.  2022.  “Desain  Sistem Pemasaran Produk UMKM Dengan Konsep  UI/UX  Menggunakan  Metode
Design  Thinking.” Journal  of  Information System Research 3(2): 980–87. https://ejurnal.seminar- id.com/index.php/josh/.
Pranatawijaya,  Viktor  Handrianus,  Widiatry Widiatry,  Ressa  Priskila,  and  Putu  Bagus
Adidyana Anugrah Putra. 2019.
“Penerapan  Skala  Likert  Dan  Skala Dikotomi  Pada  Kuesioner  Online.” Jurnal Sains dan Informatika 4(2): 128–27.
Putu,  Gusti  et  al.  2021.  “„Penerapan  Metode
Human Centered Design Dalam
Perancangan  User  Interface  (Studi  Kasus:
PT.X).‟” JITTER : Jurnal Ilmiah Teknologi dan Komputer
2(2): 349–70. https://ojs.unud.ac.id/index.php/jitter/articl
e/view/77829.
Rachmatsyah,  Agus  Dendi  et  al.  2022.
“Penggunaan Pelayanan Sistem Transportasi  Umum  Bus  Berbasis  Web.” Teknomatika 12(01): 38–48.
http://ojs.palcomtech.com/index.php/tekno matika/article/view/443/302.
Rahmah,  Devi  M.  2016.  “Analisis  Efektifitas Pendekatan  Human  Center  Design  Dalam Pengembangan  Industri  Kecil  Menengah Di  Kawasan  Pedesaan.” Agricore:  Jurnal Agribisnis  dan  Sosial  Ekonomi  Pertanian Unpad 1(1): 27–22.
Rahmawati,  D,  S  Sharyanto,  and  ...  2022.
“Information System Design And Manufacture  Online  Booking  Car  Service Website Based And Spare Part Availability At  CV.  Bersama  Maju  Service  Central Jakarta  ….” Journal  of  … 2:  1–10. http://journal.binainternusa.org/index.php/j etcom/article/view/80.
Ravelino,  Calvin,  and  Yeremia  Alfa  Susetyo.
2022. “Perancangan UI/UX Untuk Aplikasi Bank  Jago  Menggunakan  Metode  User Centered  Design.” Jurnal  JTIK  (Jurnal
Teknologi Informasi dan Komunikasi) 7(1): 121–29.
Relawati, Ambar, Yanuar Primanda, and Guntur Maulana  Zamroni.  2022.  “Unmoderated Remote  Usability  Testing:  An  Approach during  Covid-19  Pandemic.” International Journal  of  Advanced  Computer  Science and Applications 12(1): 282–89.
Triyunsari,  Desra.  2022.  “Analisis  Tingkat
Kematangan Manajemen Layanan Pegawai Berbasis Teknologi Informasi
Menggunakan  Framework  COBIT  4  Pada SMA  Negeri  19  Palembang.” Indonesian Journal of  Multidisciplinary  on Social and Technology 1(2): 136–42.
Valentino  Adhy  Nuantra  et  al.  2022.  “Faktor Usability  Testing  Terhadap  Penggunaan Presensi  Di  Web  SIA  UTY.” Jurnal
Teknologi dan Manajemen Industri Terapan 1(2): 172–82.