Abstrak—Institut Teknologi Sepuluh Nopember (ITS) Surabaya memiliki  unit  organisasi  logistik  di  bawah  koordinasi Subdirektorat  Perencanaan  Sarpras  dan  Logistik,  Direktorat Perencanaan dan Pengembangan, yang memiliki tujuan untuk mengontrol  efisiensi  pengadaan  barang.  Untuk  saat  ini,  unit organisasi logistik ini memiliki sebuah sistem informasi berbasis open source bernama ODOO yang digunakan untuk keperluan kontrol pengadaan. Sistem informasi tersebut bernama myITS Logistics.  Namun,  setelah  dilakukan  evaluasi,  ditemukan beberapa kendala dalam penggunaan sistem informasi tersebut, yaitu  diantaranya  adalah  inkosistensi  data,  sulit  untuk diintegrasikan  dengan  sistem  lain  yang  ada  di  ITS  karena struktur  basis  data  dan  platform  yang  berbeda,  dan  proses pemakaian  yang  rumit,  dan  hal  ini  menyebabkan  proses operasional  logistik  menjadi  cukup  terhambat.  Untuk memecahkan masalah yang telah dipaparkan, akan digunakan proses  desain  User  Experience  (UX)  agar  produk  yang dihasilkan dapat memberikan pengalaman yang relevan kepada pengguna berdasarkan analisis perilaku mereka. Lalu, metode yang  akan  digunakan  adalah  metode  User-centered  Design, yaitu  metode  yang  mempertimbangkan  kebutuhan  pengguna sebagai  dasar  dari  perancangan  sistem  yang  akan  dibangun dengan  cara  menggali  kebutuhan  pengguna  dan  melibatkan mereka  dalam  proses  desain.  Diharapkan  hasil  dari  Tugas Akhir  ini,  yaitu  myITS  Logistics,  akan  dapat  mempermudah seluruh  unit  kerja  dan  departemen  di  lingkungan  ITS  dalam melaksanakan proses operasional logistic disetiap unit kerja di ITS.  Setelah  dilakukan  2  iterasi  usability  testing,  didapatkan hasil  akhir  yaitu  rata-rata  nilai  Single  Ease  Question  (SEQ) berada pada nilai 6,3 dan rata-rata nilai System Usability Scale (SUS)  adalah  81,07,  yang  berarti  dapat  disimpulkan  bahwa desain antarmuka pengguna aplikasi web myITS Logistics yang dibuat  memiliki  tingkat  kemudahan  dan  ketergunaan  yang cukup tinggi.
Kata Kunci—Logistik, ODOO, Pengadaan, Kebutuhan Pengguna.

## I. PENDAHULUAN
OGISTIK adalah salah satu bidang yang penting dalam sebuah organisasi.  Logistik yang dikelola dengan tepat, baik  secara  kuantitas,  kualitas  maupun  waktu  dan  biaya, dapat  menjadi  aset  utama  organisasi  publik,  yaitu  sebagai sumber  pendapatan  yang  strategis  dan  berperan mendorong kegiatan  ekonomi.  Secara  umum,  kegiatan  logistik merupakan  penyampaian  atau  pengiriman  barang  atau material dalam jumlah tertentu dan waktu yang tepat ke suatu lokasi  tertentu  dengan  biaya  seminim  mungkin.  Melalui proses  logistik,  material  dapat  sampai  ke  tempat  produksi melalui  saluran  distribusi  sehingga  mampu  memberikan kegunaan  ( utility )  yang  baik.  Manajemen  logistik  berfungsi untuk  merencanakan,  melaksanakan,  dan  mengendalikan keefisienan  aliran  penyimpanan  barang,  pelayanan  dan
informasi  yang  terkait  dari  saat  awal  hingga  pada  titik konsumen guna memenuhi kebutuhan pelanggan.
Institut  Teknologi  Sepuluh  Nopember  (ITS)  Surabaya memiliki  unit  organisasi  logistik  di  bawah  koordinasi Subdirektorat  Perencanaan  Sarpras  dan  Logistik, Direktorat Perencanaan dan Pengembangan, yang memiliki tujuan untuk mengontrol  efisiensi  pengadaan barang. Untuk saat  ini, unit organisasi  logistik  ini  memiliki  sebuah  sistem  informasi berbasis open source bernama ODOO yang digunakan untuk keperluan  kontrol  pengadaan.  Sistem  informasi  tersebut bernama  myITS  Logistics.  Namun,  setelah  dilakukan evaluasi,  ditemukan  beberapa  kendala  dalam  penggunaan sistem  informasi  tersebut,  yaitu  diantaranya  adalah inkosistensi  data,  sulit  untuk  diintegrasikan  dengan  sistem lain yang ada di ITS karena struktur basis data dan platform yang berbeda, dan proses pemakaian yang rumit, dan hal ini menyebabkan  proses  operasional  logistik  menjadi  cukup terhambat.
Desain User  Experience (UX)  merupakan  proses  yang digunakan  oleh  desainer  untuk  membuat  produk  yang memberikan  pengalaman  yang  relevan  kepada  pengguna berdasarkan  analisis  perilaku  mereka.  Tujuan  utama  dari desain  UX  adalah  untuk  meningkatkan  cara  pengguna berinteraksi  dengan  perangkat,  aplikasi  atau  situs  web, memberikan  nilai  kepada  mereka  dan  dengan  demikian meningkatkan kepuasan pengguna secara keseluruhan. Maka dari  itu,  penulis  akan  menggunakan  proses  desain User Experience untuk  memecahkan  masalah  yang  telah dipaparkan.
Metode yang akan digunakan pada Tugas Akhir ini adalah metode User-centered Design . Menurut  penulis,  metode ini merupakan  metode  yang  tepat  karena    mempertimbangkan kebutuhan  pengguna sebagai dasar dari perancangan sistem yang  akan  dibangun  dengan  cara  menggali  kebutuhan pengguna  dan  melibatkan  mereka  dalam  proses  desain, sehingga  diharapkan  hasil  dari  Tugas  Akhir  ini,  yaitu

## Desain dan Evaluasi Antarmuka dan Pengalaman Pengguna Aplikasi Web Responsif myITS Logistics Menggunakan Metode User-Centered Design
M. Frediansyah Sinaga, Hadziq Fabroyir, dan Rizky Januar Akbar Departemen Teknik Informatika , Institut Teknologi Sepuluh Nopember (ITS)
e-mail : hadziq@its.ac.id
L
Gambar 1. Fase pada User-centered Design.
antarmuka  pengguna  aplikasi  myITS  Logistics  akan  dapat mempermudah  seluruh  unit  kerja  dan  departemen  di lingkungan  ITS  dalam  melaksanakan  proses  operasional logistik disetiap unit kerja di ITS.

## II. TINJAUAN PUSTAKA
A. User Experience Design
UX  Design ,  yang  juga  berarti  Desain  Pengalaman Pengguna  dapat  didefinisikan  sebagai  proses  mendesain produk yang tujuan utamanya adalah merancang sistem yang memberikan pengalaman yang baik kepada pengguna akhir. Don  Norman,  seorang  ilmuwan  kognitif  dan  salah  satu pendiri  dari  perusahaan  “Nielsen  Norman  Group  Design Consultancy”,  menyatakan  bahwa  Pengalaman  pengguna mencakup  semua  aspek  interaksi  antara  pengguna  akhir dengan  perusahaan,  layanan,  dan  produknya.  Dari  definisi yang diberikan oleh Don Norman tersebut dapat disimpulkan bahwa, UX  Design itu  mencakup  segala  interaksi  antara seorang  pelanggan  dengan  sebuah  perusahaan. UX  Design adalah  tentang  bagaimana  kita  mengidentifikasi  dan memecahkan  masalah  pengguna.  Maka  dari  itu,  dalam melakukan  perancangan  desain  pengalaman  pengguna, UX Designer harus sadar akan kebutuhan pengguna.

## B. User-centered Design
Menurut  User  Experience  Professionals  Association (UXPA),  User-centered  Design  adalah  pendekatan  desain dengan proses berdasarkan informasi mengenai orang-orang yang  menggunakan  produk  tersebut.  Dengan  kata  lain, desainer  harus  berfokus  pada  pengguna  dan  kebutuhannya dalam setiap tahap dari proses desain. Umumnya, dasar yang digunakan  untuk  metodologi  UCD  adalah  international standard 13407.
Metode User-centered Design (UCD) merupakan metode yang  dilakukan  dengan  melakukan  proses  desain  secara iterative dimana  desainer fokus  kepada  pengguna  dan kebutuhan  mereka  di  setiap  fase  dari  proses  desain.  Dalam metode ini, desainer menggunakan gabungan antara metode dan alat investigasi  dengan metode dan alat yangt  generatif untuk  mengembangkan  pemahaman  tentang  kebutuhan pengguna.  Secara  umum,  setiap  iterasi  dari  metode  UCD terdiri  dari  empat  fase  yang  berbeda.  Fase  awal  yaitu memahami  konteks  tentang  cara  pengguna  menggunakan sistem,  Selanjutnya,  mengidentifikasi  dan  menentukan kebutuhan  pengguna.  Fase  yang  ketiga  adalah  fase  desain, yaitu  membuat  desain  yang  dapat  menjadi  solusi  dari kebutuhan pengguna. Dan fase keempat adalah fase evaluasi, yaitu  melakukan  evaluasi  terhadap  konteks  dan user requirements , untuk  memverifikasi  kinerja dari desain  yang telah  dibuat,  khususnya  pada  kecocokan  desain  dengan kebutuhan  pengguna  yang  ditunjukkan  pada  Gambar  1. Empat fase ini dilakukan secara iteratif hingga mendapatkan hasil evaluasi yang memuaskan.
Prinsip  dasar  dari  metode User-centered  Design adalah sebagai berikut :
1. Memahami pengguna dan mendukung tujuan mereka.
2. Mencari  cara  termudah  untuk  dipelajari  oleh  pengguna dan mengimplementasikannya pada antarmuka pengguna pengguna.
Tabel 1.
Contoh Daftar Pertanyaan Wawancara Supervisor, Administrator, dan Administrator Gudang.
No. Pertanyaan
1 Apakah anda sering melakukan proses layanan logistik di ITS menggunakan myITS Logistics?
2 Bagaimana peran anda dalam melaksanakan proses layanan logistik di ITS?
Tabel 2. Contoh Daftar Pertanyaan Wawancara Unit. No.
Pertanyaan
1 Apakah anda pernah menggunakan layanan logistik di ITS melalui myITS Logistics?
2 Jika pernah, apa alasan anda menggunakan layanan logistik di ITS menggunakan myITS Logistics?
3 Dalam kegiatan sehari-hari, apakah anda sering menggunakan layanan logistik yang ada di ITS melalui myITS Logistics? Gambar 2. Affinity Diagram myITS Logistics. Gambar 3. Persona myITS Logistics.
Tabel 3. Contoh Daftar Kebutuhan Pengguna Aplikasi Web myITS Logistics. No. Kebutuhan Pengguna Tujuan
1
Melihat grafik Supervisor Melihat grafik pengadaan barang, permintaan barang oleh unit serta data review pengadaan unit 2 Melakukan verifikasi penerimaan barang Supervisor Melakukan verifikasi penerimaan  barang  yang sudah diperikas oleh Administrator 3 Melakukan validasi  terhadap pengajuan  barang baru Supervisor Melakukan validasi terhadap pengajuan barang baru yang dilakukan oleh Administrator
3. Desain harus konsisten
4. Membuat desain yang user friendly.
5. Bebas dari masalah ( error ) .
Lalu  dalam  pengembangan  suatu  UCD  yang  baik  dan interaktif,  perlu  diperhatikan  beberapa  elemen  sebagai berikut:
1) Visibilitas, yaitu pengguna harus dapat mengetahui  apa yang bisa dilakukan dan cara menggunakan produknya.
2) Aksesibilitas,  yaitu  pengguna  harus  bisa  menemukan informasi dengan mudah dan cepat.
3) Keterbecaan, yaitu teks harus mudah dibaca.
4) Bahasa, kalimat yang digunakan harus mudah dipahami.

## C. Usability
Usability  mengacu  pada  kualitas  pengalaman  pengguna ketika berinteraksi dengan produk atau sistem, termasuk situs web, software, perangkat, ataupun aplikasi. Usability adalah tentang efektivitas, efisiensi, dan kepuasan pengguna secara keseluruhan.  Usability  bukanlah  properti  satu  dimensi  dari produk,  sistem  atau  antarmuka  pengguna.  Usability  adalah kombinasi dari beberapa faktor termasuk:
1. Intuitive design.
2. Ease of learning.
3. Efficiency of use.
4. Memorability.
5. Error frequency and severity.
6. User satisfaction.
Usability Evaluation berfokus kepada bagaimana pengguna dapat mempelajari dan menggunakan produk untuk mencapai  tujuan  mereka.  Hal  ini  juga  mengacu  pada kepuasan  pengguna  dengan  proses  tersebut. Usability Evaluation dapat menghasilkan dua jenis tipe data, yaitu data kualitatif  dan  data  kuantitatif.  Dimana  data  kualitatif mendeskripsikan  apa  yang  dikatakan  atau  dipikirkan  oleh
peserta  pengguna,  sedangkan  data  kuantitatif  mencatat tentang apa yang terjadi.
D. Single Ease Question (SEQ)
Single Ease Question (SEQ) adalah sebuah kuisioner pasca tugas  yang  berisi  satu  pertanyaan yang  digunakan  untuk mengukur  persepsi  pengguna  tentang  kegunaan  suatu  fitur produk berdasarkan pengalaman pengguna. Dimana pengguna  akan  memberikan  rating  tingkat  kesulitan  dari tugas  yang  baru  diselesaikan  dalam  skala  peringkat  7  poin dari “Sangat Sulit” hingga  “Sangat Mudah”.
E. System Usability Scale (SUS)
System  Usability  Scale (SUS)  dikembangkan  oleh  John Brooke  saat  berada  di  Digital  Equipment  Corporation (Brooke,  1996)  di  Inggris.  Kuisioner  SUS  berisi  10 pertanyaan. Sebagai sebuah variasi dari kuisioner biasa, SUS mengganti  pertanyaan  yang  bersifat  positif  dengan pertanyaan  yang  bersifat  negatif.  Pertanyaan  disajikan sebagai  pernyataan  deklaratif  yang  sederhana,  masing- masing  dengan five-point Likert scale yang dikaitkan dengan “sangat tidak setuju” dan “sangat setuju” dan dengan nilai 1 sampai 5.
Analisis  skor  SUS  dimulai  dengan  menghitung  skor numerik  tunggal untuk contoh kuesioner yang ditandai  oleh peserta.  Pertama,  untuk  setiap  item  yang  tidak  terjawab, berikan nilai peringkat tengah 3 sehingga tidak mempengaruhi  hasil  di  kedua  sisi.  Selanjutnya  hitung  skor yang disesuaikan untuk pernyataan dengan kata-kata positif, yaitu skor yang didapat dikurangi 1. Lalu untuk menghitung pernyataan negatif, skornya mengurangi dari 5. Selanjutnya, semua skor ditambah dan dikali 2,5 untuk mendapatkan skor akhir SUS dalam rentang 0-100.

## F. Evaluasi Formatif dan Evaluasi Sumatif
Dalam istilah yang sederhana, evaluasi formatif membantu dalam hal membentuk desain dan evaluasi sumatif membantu dalam meringkas desain. Evaluasi formatif biasanya bersifat
Gambar  4. Contoh Sitemap myITS Logistics role Unit.
Tabel 4.
Contoh Daftar Skenario Tugas Usability Testing myITS Logistics.
No. Daftar Tugas
1 Melihat Grafik Pengadaan dan Detail Pengadaan
2 Melakukan Verifikasi Penerimaan Barang
3 Menghapus Barang Pada Persediaan Baru
Gambar  5. Contoh Prototipe Kejituan Menengah Siklus Pertama.
diagnostik,  yaitu  mengumpulkan  data  kualitatif  untuk mengidentifikasi  dan  memperbaiki  masalah  UX  dan penyebabnya  dalam  desain.  Sedangkan  evaluasi  sumatif adalah  pengumpulan  data  kuantitatif  untuk  menilai  tingkat kualitas  karena  desain,  terutama  untuk  menilai  peningkatan pengalaman  pengguna  karena  evaluasi  formatif.  Data kualitatif  adalah  data  non-numerik  dan  deskriptif,  biasanya menggambarkan  masalah  UX,  yaitu  masalah  yang  diamati atau  dialami  selama  penggunaan  berlangsung.  Sedangkan data  kuantitatif  adalah  data  numerik,  seperti  metrik  kinerja pengguna atau opinion rating.
G. Heuristic Evaluation
Heuristic  Evaluation (evaluasi  heuristik)  adalah  metode penilaian  kegunaan  produk  digital  yang  memiliki  tujuan untuk  meningkatkan  pengalaman  pengguna.  Proses  ini dilakukan  oleh  ahli/evaluator  UI/UX  dengan  tujuan  untuk mendeteksi  masalah  yang  ada  pada  fungsionalitas  produk. Identifikasi masalah dilakukan dengan cara membandingkan produk  dengan  prinsip-prinsip  dasar  antarmuka  pengguna yang juga disebut heuristics yang diperkenalkan oleh Jakob Nielsen dan Rolf Molich pada tahun 1994.
Berikut  ini  adalah  10  aturan  umum  untuk interaction design yang  diberi  nama Heuristic  Evaluation yang dikemukakan oleh Jakob Nielsen :
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

## H. Figma
Figma adalah alat desain yang berupa web ataupun aplikasi berbasis  cloud  dan  alat  prototyping  untuk  proyek  digital. Diluncurkan pada tahun 2016 oleh pengembang Figma, Inc., Figma  telah  banyak  digunakan  sebagai  alat  desain  untuk merancang  antarmuka  pengguna  untuk  aplikasi  web  atau mobile.

## I. Maze
Maze  adalah  aplikasi  berbasis  situs  web  yang  digunakan dalam  pelaksanaan usabilkity  testing untuk  mendapatkan umpan balik dari pengguna, dengan cara pengguna mencoba prototipe yang telah dihubungkan ke Maze dan hasilnya akan diubah  menjadi  data  yang  dapat  dianalisis  seperti average duration dan miss  click  rate. Maze  juga  mendukung  untuk dapat terhubung dengan interaction prototype design seperti Invision, Marvel, Sketch dan Figma.

## J. HTML
HTML  (HyperText  Markup  Language)  adalah  blok pembangun  web  yang  paling  dasar,  dimana  HTML digunakan untuk merancang suatu halaman web. " Hypertext " mengacu  pada  tautan( links) yang  menghubungkan  halaman web satu sama lain, baik dalam satu situs web atau antar situs web,  dan  tautan  adalah  aspek  mendasar  dari  suatu  web. HTML menggunakan " markup " untuk menambahkan catatan keterangan teks, gambar, dan konten lain untuk ditampilkan di browser web.
Gambar  6. Contoh Prototipe Kejituan Menengah Siklus Kedua.
Tabel 5.
Penilaian SUS Pertama myITS Logistics No Partisipan Penilaian SUS myITS Logistics Q1  Q2  Q3  Q4  Q5  Q6  Q7  Q8  Q9  Q10 Nilai SUS 1  Partisipan 1 4 1 4 2 4 4 4 2 4 4 67.5 2  Partisipan 2 5 1 5 1 5 1 5 1 5 4 92.5 3  Partisipan 3 5 1 5 4 4 2 5 2 4 2 80 4  Partisipan 4 5 1 5 1 5 1 5 1 5 1 100 5  Partisipan 5 5 1 5 2 4 2 5 2 4 5 77.5
6  Partisipan 6 5 2 4 2 4 1 5 2 5 2 85
7  Partisipan 7 5 4 5 1 5 1 4 1 3 5 75 8  Partisipan 8 5 2 5 3 5 1 4 2 5 5 77.5 9  Partisipan 9 5 1 5 1 5 1 5 1 5 1 100 10  Partisipan 10  5 1 5 1 5 1 4 1 1 1 87.5
11  Partisipan 11  5 1 5 1 5 1 5 1 5 3 95 12  Partisipan 12  4 1 5 1 5 1 5 1 4 3 90 13  Partisipan 13  5 1 5 3 5 1 5 5 5 1 85 Rata-rata System Usability Scale 85.58 Tabel 6. Penilaian SUS Kedua myITS Logistics. No Partisipan Penilaian SUS Kedua myITS Logistics
Q 1 Q2  Q3  Q4  Q5  Q6  Q7  Q8  Q9  Q10 Nilai SUS
1  Partisipan 1 4  2 4 2 4 2 4 2 4 2 75 2  Partisipan 6 5  1 5 2 5 1 4 1 5 2 92.5
3  Partisipan 8 5  1 4 2 4 4 4 1 4 2 77.5
4  Partisipan 11  5  1 5 1 5 1 5 1 4 4 90 5  Partisipan 14  4  4 4 3 4 1 4 1 4 4 67.5
6  Partisipan 15  5  1 5 1 5 1 5 2 4 5 85
7  Partisipan 16  5  1 5 3 5 1 4 1 4 5 80 Rata-rata System Usability Scale 81.07

## K. CSS
CSS  atau Cascading  Style  Sheets adalah style  sheet language dan merupakan kode yang digunakan untuk menata konten  suatu  web,  dimana  CSS  dapat  digunakan  untuk mendesain  elemen  HTML  secara  selektif  seperti font,  text, warna,  dan  ukuran  dari  layout  web.CSS  biasa  digunakan untuk  mendeskripsikan  penyajian  dokumen  yang  ditulis dalam HTML atau XML (termasuk dialek XML seperti SVG, MathML  atau  XHTML).  CSS  mendeskripsikan  bagaimana elemen  harus  ditampilkan  di  layar,  di  atas  kertas,  dalam ucapan, atau di media lain. CSS adalah salah satu bahasa inti dari  web  terbuka  dan  telah  distandarisasi  di  seluruh web browser sesuai dengan spesifikasi W3C.

## L. JavaScript
JavaScript  adalah  bahasa  skrip  berorientasi  objek  yang lintas platform dan digunakan untuk membuat halaman web menjadi  interaktif  (misalnya,  memiliki  animasi  yang kompleks, tombol yang dapat diklik, menu popup, dll.).

## M. Bootstrap
Bootstrap  adalah  kerangka  kerja  HTML,  CSS,  dan JavaScript yang paling populer digunakan untuk mengembangkan situs web yang responsif. Bootstrap adalah kerangka kerja front-end yang digunakan untuk pengembangan  web  yang  lebih  mudah  dan  lebih  cepat, dimana Bootstrap memiliki design template berbasis HTML dan  CSS  untuk  tipografi,  formulir,  tombol,  tabel,  navigasi, modal, korsel  gambar, dan  sebagainya.  Bootsrap juga dapat menggunakan plug-in JavaScript dan memudahkan penggunanya dalam membuat desain yang responsif [1].

## N. Laravel Blades
Laravel adalah kerangka kerja aplikasi web dengan sintaks yang  ekspresif  dan  elegan.  Blade  merupakan  fitur  dari Laravel untuk proses pembuatan templat yang sederhana dan powerful yang  bermanfaat  dalam  proses  pengembangan tampilan  halaman  web.  Berbeda  dengan  fitur  pembuatan templat  PHP  populer  lainnya,  Blade  tidak  membatasi penggunaan kode PHP dalam pembuatan templat. Faktanya, semua  templat  Blade  dikompilasi  kedalam  kode  PHP  biasa dan  di- cache sampai  templat  termodifikasi,  yang  artinya Blade  sama  sekali  tidak  menambahkan overhead pada aplikasi yang dibuat.

## O. Dashforge
Dashforge  merupakan  templat  dasbor  dengan  kualitas premium  berbasis  Bootsrap  4  yang  memiliki style yang modern  dan clean dengan  desain  yang  sederhana  dan minimalis. Dashforge dibangun secara responsive sepenuhnya  dengan  menggunakan  SASS  preprocessor, HTML5, CSS3 dan jQuery plugins. Dashforge menggunakan helper/utilities  class yang  merupakan reusable  class yang dapat  membuat  peningkatan  kecepatan  dalam  memuat halaman.

## III. DESAIN DAN PERANCANGAN SISTEM

## A. Konteks Penggunaan Sistem
Konteks  penggunaan  sistem  ini  membahas  cara  untuk mendapatkan  kebutuhan,  kebiasaan  dan  masalah  yang dihadapi oleh pengguna myITS Logistics.

## 1) Meeting dengan Client
Dalam meeting dengan client yang dilakukan secara online berupa video conference via platform Zoom dan juga bertemu secara langsung. Pembahasan selama meeting adalah terkait bagaimana  sistem  layanan  logistik  di  ITS  berjalan  dan masalah-masalah yang selama ini dialami oleh administrator dan  juga  pengguna  myITS  Logistics  dalam  melakukan layanan logistik saat ini dan juga mengenai desain antarmuka pengguna aplikasi web myITS Logistics yang dikerjakan.

## 2) Wawancara Pengguna
Penulis  melakukan  wawancara  yang  melibatkan  13 partisipan  yang  terdiri  atas  1  supervisor,  3  administrator,  4
Tabel 7. Hasil Evaluasi Formatif Siklus Pertama No Tugas Permasalahan
Solusi
1 Membuat Purchase
Order pada Halaman Purchase Order Tampilannya kurang familiar dan memakan space pada laman Dibuatkan kedalam bentuk tabel agar ketika menambah barang banyak tidak terlalu memakan space pada laman
2 Melakukan review pada Data Pesanan Katalog Unit
Di logistik bahasanya bukan pesanan melainkan pengajuan
Mengubah nama fiturnya menjadi Periksa Pengajuan
3 Melakukan Pencarian Data Pesanan di Daftar Transfer Keluar Ada partisipan yang tidak tahu bahwa ikon search harus di klik untuk melakukan pencarian
Mengubah bentuk dan cara kerja search box yaitu mengisi search box field dan tekan enter untuk melakukan pencarian
4
Melakukan Verifikasi
Penerimaan Transfer Masuk Gudang Beberapa partisipan mengalami kesulitan dalam mengklik tabel yang harus diisi
Mengubah tampilan tabel agar mudah dalam mengisi data dimana pada desain awal tabel mencampur informasi yang tidak dapat diubah dengan informasi yang harus diisi, sehingga pada desain akhir diubah menjadi tabel hanya berisi informasi yang tidak dapat diubah dan informasi yang harus diisi ditempatkan pada grup elemen antarmuka pengguna yang lain dalam bentuk form isian
Tabel 8. Contoh Hasil Evaluasi Heuristik.
Poin Evaluasi Heuristik Masalah Rekomendasi 3 User control and freedom Tidak dapat melakukan pencarian data persediaan baru. Diberikan fitur search untuk mencari data yang diinginkan. Tidak ada tombol kembali bagi pengguna untuk kembali ke halaman sebelumnya. Sebaikmya dari sub menu ini, diberikan tombol back , supaya pengguna dapat dengan mudah kembali ke Halaman sebelumnya / Landing Page . Tidak muncul foto kwitansi asli ketika di klik tombol filenya. Memunculkan foto dengan menampilkan pop up agar dapat melihat lebih jelas foto kwitansi yang telah diunggah.
administrator gudang dan 5 unit untuk mengetahui mengenai kebutuhan,  kebiasaan  dan  kendala  yang  dialami  oleh pengguna. Tabel 1 dan Tabel 2 merupakan contoh dari daftar pertanyaan  wawancara  yang  diajukan  penulis  kepada partisipan.

## B. Affinity Diagram
Seluruh jawaban yang diberikan oleh partisipan kemudian dikelompokkan  menjadi affinity  diagram yang  bertujuan untuk  menemukan  permasalahan  dan  kebutuhan  pengguna. Gambar  2  menampilkan  hasil  pengelompokkan affinity diagram untuk myITS Logistics.

## C. Persona
Setelah  menyusun  affinity  diagram,  penulis  lalu menemukan kebutuhan dan permasalahan yang dialami oleh pengguna.  Kemudian,  penulis  menentukan  target  pengguna yang  dikelompokkan  menjadi  4  persona  yang  dibedakan berdasarkan  latar  belakang,  pengalaman,  dan  keinginannya. Gambar  3  menampilkan masing-masing  persona  yang  telah dibuat.

## D. Daftar Kebutuhan Pengguna
Selanjutnya  penulis  menentukan  kebutuhan  pengguna berdasarkan contextual inquiry dan hasil analisis yang telah dilakukan.  Tabel  3  menampilkan  contoh  kebutuhan pengguna.

## E. Perancangan Arsitektur Antarmuka Pengguna
Setelah  penulis  mengetahui  dan  menentukan  kebutuhan pengguna,  penulis  membuat sitemap yang  menggambarkan alur  dari  suatu  aplikasi  dan  membantu  penulis  untuk mengetahui  hubungan  antar  halaman  atau  fitur  yang dibutuhkan  pada  antarmuka  aplikasi  web  myITS  Logistics. Gambar 4 merupakan contoh sitemap yang telah dibuat.

## F. Metode Evaluasi Sumatif
Penulis  melakukan  evaluasi  sumatif  dan  mendapatkan beberapa metriks penilaian untuk setiap tugas yang dilakukan uji  coba,  diantaranya  adalah  informasi  mengenai  durasi penyelesaian  tugas,  jumlah  salah  klik,  status  penyelesaian tugas dan nilai Single Ease Question (SEQ). Dan penulis juga mendapatkan  hasil  penilaian  ketergunaan  dari  pertanyaan- pertanyaan System  Usability  Scale (SUS)  yang  diberikan kepada partisipan yang merupakan target pengguna.
Single  Ease  Question (SEQ)  berisi  pertanyaan  yang diajukan kepada partisipan setiap kali partisipan menyelesaikan  satu  tugas usability, dimana  partisipan melakukan penilaian seberapa mudah atau sulit tugas tersebut dalam skala 1 (sangat sulit) sampai 7 (sangat mudah). System Usability  Score (SUS)  berisi  10  buah  pertanyaan  dengan skala  1  (sangat  tidak  setuju)  hingga  5  (sangat  setuju)  yang dilakukan  setelah  partisipan  menyelesaikan usability  test yang telah diberikan.

## G. Metode Evaluasi Formatif
Pada  siklus  pertama  dan  kedua,  penulis  melaksanakan usability  testing  yang  merupakan  uji  coba  antarmuka pengguna dengan menggunakan daftar tugas untuk mencapai tujuan  tertentu.  Tabel  4  merupakan  contoh  daftar  tugas usability testing myITS Logistics.

## IV. IMPLEMENTASI SISTEM

## A. Desain Prototipe Siklus Pertama
Pada  sub  bab  ini,  penulis  akan  menampilkan  desain antarmuka  pengguna  aplikasi  web  myITS  Logistics  dalam bentuk prototipe kejituan menengah yang dibuat menggunakan aplikasi web Figma dan diuji ketergunaannya dalam usability testing siklus pertama. Gambar 5 merupakan contoh  prototipe  kejituan  menengah  siklus  pertama  untuk halaman beranda yang merupakan landing page.

## B. Desain Prototipe Siklus Kedua
Pada  sub  bab  ini,  penulis  akan  menampilkan  desain antarmuka  pengguna  aplikasi  web  myITS  Logistics  siklus kedua  sebagai  hasil  dari usability  testing desain  siklus pertama aplikasi web myITS Logistics dan sudah mengikuti template desain  myITS.  Gambar  6  merupakan  contoh prototipe  kejituan  menengah  siklus  kedua  untuk  halaman beranda yang merupakan landing page.

## V. PENGUJIAN DAN EVALUASI

## A. Hasil Evaluasi Sumatif
Evaluasi  sumatif  ini  terdiri  atas  evaluasi  sumatif  iterasi pertama  dan  kedua.  Evaluasi  sumatif  iterasi  pertama dilakukan  terhadap  prototipe  desain  siklus  pertama  aplikasi web  myITS  Logistics  secara  daring  menggunakan  aplikasi Maze yang diintegrasikan dengan prototipe Figma dan juga menggunakan media Zoom untuk memfasilitasi komunikasi antara  penguji  (penulis)  dengan  partisipan.  Adapun  untuk evaluasi  sumatif  iterasi  kedua  dilakukan  terhadap  prototipe desain siklus pertama aplikasi web myITS Logistics dengan menggunakan  aplikasi  Maze  yang  diintegrasikan  dengan Figma.
Pada  pengujian  iterasi  pertama  dan  iterasi  kedua  yang dilakukan  terhadap  aplikasi  web  myITS  Logistics  ini,  telah didapatkan  hasil  analisis  untuk  beberapa  variabel,  yaitu waktu  penyelesaian,  salah  klik,  status  keberhasilan,  catatan untuk  setiap  daftar  tugas  diujikan, System  Usability  Scale (SUS), dan Single Ease Question (SEQ).

## 1) Single Ease Question (SEQ)
Pada  evaluasi  pertama  ini  penulis  meminta  partisipan untuk  melakukan  pengisian  penilaian Single  Ease  Question (SEQ)  yang  juga  menggunakan  aplikasi  web  Maze  dengan tujuan untuk mengukur tingkat kemudahan dalam melakukan skenario  tugas  yang  diberikan.  Dari  hasil  evaluasi  pertama, penulis  mendapatkan  rentang  nilai  SEQ  5,3-7  dengan  rata- rata nilai SEQ berada pada angka 6,5. Dan dari hasil evaluasi kedua, penulis mendapatkan rentang nilai SEQ 2,3-7 dengan rata-rata nilai SEQ berada pada angka 6,3.

## 2) System Usability Scale (SUS)
Penulis juga memberikan kuisioner System Usability Scale (SUS)  yang  bertujuan  untuk  mengukur  tingkat  ketergunaan terhadap aplikasi web myITS Logistics. Tabel 5 dan Tabel 6 merupakan  tabel  penilaian  SUS  terhadap  desain  siklus pertama myITS Logistics.

## B. Hasil Evaluasi Formatif
Pada  sub  bab  ini  penulis  menjabarkan  hasil  evaluasi formatif siklus pertama yang didapatkan setelah  melakukan usability  testing yang  berupa  catatan  dan  masukan  yang
terdapat  pada  hasil  evaluasi  sumatif  sebelumnya.  Dengan permasalahan yang didapatkan maka penulis membuat solusi dari  pengujian  evaluasi  siklus  pertama.  Tabel  7  merupakan hasil evaluasi formatif siklus pertama.
Pada evaluasi siklus kedua, tidak didapatkan catatan serta permasalahan yang dialami oleh partisipan.

## C. Evaluasi Heuristik
Penulis  melakukan  metode  evaluasi  heuristik  untuk menemukan  masalah  ketergunaan  pada  desain  antarmuka pengguna myITS Logistics siklus kedua yang sudah di buat berdasarkan  hasil  evaluasi  siklus  pertama.  Metode  evaluasi ini  membutuhkan  bantuan  orang  yang  ahli  dalam  bidang desain pengalaman pengguna. Dimana para ahli akan diminta untuk  melakukan  evaluasi  terhadap  desain  antarmuka penggguna aplikasi web myITS Logistics yang sudah dibuat dan menjabarkannya dalam bentuk 10 poin heuristik. Tabel 8 merupakan contoh  hasil evaluasi  heuristik dari  5  orang ahli terhadap desain antarmuka pengguna.

## VI. KESIMPULAN DAN SARAN
Dari  seluruh  kegiatan  yang  telah  dilakukan  oleh  penulis, dapat  ditarik  poin  kesimpulan  sebagai  berikut:  (1) Perancangan  desain  antarmuka  dan  pengalaman  pengguna aplikasi  web  myITS  Logistik  menggunakan  metode user- centered  design yang  terdiri  dari  beberapa  tahapan  yaitu contextual inquiry, analisis kontekstual, wawancara pengguna  dengan  13  responden  yang  mewakili role dari aplikasi web myITS Logistics, usability testing, dan evaluasi heuristik;  (2)  Implementasi  antarmuka  pengguna  aplikasi web  myITS  Logistics  dibuat  berdasarkan  templat  desain
Dashforge yang  telah  digunakan  pada  seluruh  aplikasi myITS.  Bahasa  pemrograman  yang  digunakan  pada  tahap implementasi  ini  adalah  HTML,  CSS,  dan  Javascript  dan menggunakan framework Laravel  Blade;  (3)  Evaluasi  yang digunakan ada 2 metode, yaitu usability testing dan evaluasi heuristik. Dimana setelah dilakukan usability testing penulis mendapatkan  hasil  evaluasi  sumatif  berupa  nilai  SEQ  yang rata-rata  nilainya  adalah  6,5  pada  evaluasi  pertama  dan  6,3 pada evaluasi  kedua. Lalu, nilai  SUS pertama mendapatkan nilai  85,58  dan  SUS  kedua  mendapatkan  nilai  81,07.  Rata- rata nilai SEQ dan SUS mengalami sedikit penurunan karena beberapa  partisipan  masih  belum  terbiasa  dengan  desain prototipe  siklus  kedua.  Dan  untuk  hasil  evaluasi  formatif pertama  menghasilkan  4  poin  perbaikan  pada  desain antarmuka pengguna aplikasi web myITS Logistics, dan hasil evaluasi formatif kedua tidak menghasilkan poin perbaikan. Walaupun mengalami sedikit penurunan, rata-rata nilai SEQ dan nilai SUS menandakan bahwa desain aplikasi yang telah dibuat mudah dipahami dan digunakan oleh pengguna karena memiliki  tingkat  kemudahan  dan  tingkat  ketergunaan  yang cukup tinggi. Pada hasil evaluasi heuristik, terdapat beberapa revisi  antarmuka untuk membuat  desain  aplikasi  yang lebih baik.
Saran  yang  di  dapat  dari  pengujian  dan  evaluasi  adalah  , sebaiknya artisipan untuk usability testing dapat dibuat lebih banyak  dengan  maksimal  5  partisipan  pada  masing-masing role agar hasil yang didapatkan bisa lebih baik.

## DAFTAR PUSTAKA
[1]  S. S. Gaikwad and P. Adkar, “A review paper on bootstrap framework,” IRE Journals , vol. 2, no. 10, pp. 349–351, 2019.