Abstrak—Institut Teknologi Sepuluh Nopember (ITS) memiliki banyak sekali layanan baik untuk sivitas akademik ITS maupun untuk  kalangan  umum.  Layanan-layanan  tersebut  seperti diantaranya  adalah  Asrama  Mahasiswa,  Laboratorium,  ITS Training  Center,  UPT  Bahasa  dan  Budaya,  Medical  Center, Fasilitas  Olahraga,  Perpustakaan,  dan  ITS  Press.  Sayangnya, seluruh  layanan  tersebut  belum  terintegrasi  satu  sama  lain dalam satu platform yang dapat diakses secara efektif oleh baik sivitas  akademik  ITS  maupun  kalahan  umum.  Hal  ini menyebabkan  adanya  kesulitan  bagi  baik  civitas  akademika ITS  maupun  masyarakat  umum  untuk  memesan  atau menggunakan layanan karena tidak semua layanan terintegrasi satu  sama  lain.  Melihat  kebutuhan  di  atas,  dibuatlah  aplikasi web  myITS  Marketplace  dengan  fungsi  sebagai  platform terintegrasi untuk mengintegrasikan seluruh layanan yang ada di  ITS.  Namun,  pada  Pada  tugas  Tugas  Akhir  ini pengembangan aplikasi myITS Marketplace berfokus pada dua layanan  ITS,  yaitu  asrama  mahasiswa  dan  laboratorium  ITS. Aplikasi  sub  yang  akan  mewadahi  dua  kebutuhan  tersebut adalah myITS Dorm untuk asrama mahasiswa ITS, dan myITS Pro Lab untuk laboratorium-laboratorium ITS. Baik pengguna myITS  Dorm  maupun  pengguna  myITS  Pro  Lab  mempunyai latar belakang dan kebiasaan yang sangat bervariasi. Variasi ini sering  mengakibatkan  terjadinya  permasalahan  terhadap pengalaman  pengguna.  Oleh  karena  itu,  metode  untuk mencegahnya  pun  diperlukan.  Metode  yang  penulis  gunakan dalam  pengembangan  desain  antarmuka  aplikasi  website myITS Dorm dan myITS Pro Lab adalah Design Thinking yang berfokus  pada  pada  pengguna.  Metode  tersebut  diharapkan dapat  mengidentifikasi  dan  lebih  memahami  pengguna  dalam penggunaan  aplikasi,  menemukan  masalah  yang  dihadapi pengguna,  serta  dapat  mengeksplorasi  ide-ide  baru  dalam kreasi  fitur  aplikasi  yang  tepat  dan  sesuai  dengan  kebutuhan pengguna.
Kata Kunci—myITS Marketplace, myITS Dorm, myITS Pro Lab, Desain Pengalaman Pengguna, Design Thinking, Usability.

## I. PENDAHULUAN
NSTITUT Teknologi Sepuluh Nopember memiliki banyak sekali layanan untuk sivitas akademik ITS maupun untuk kalangan  umum.  Layanan-layanan  tersebut  seperti  Asrama Mahasiswa, Laboratorium, ITS Training Center, UPT Bahasa dan Budaya, Medical Center, Fasilitas Olahraga, Perpustakaan,  dan  ITS  Press.  Sayangnya,  seluruh  layanan tersebut belum terintegrasi satu sama lain dalam satu platform yang dapat diakses secara efektif oleh sivitas akademik ITS maupun  kalahan  umum.  Hal  ini  menyebabkan  adanya kesulitan  bagi  civitas  akademika  ITS  maupun  masyarakat umum  untuk  memesan  atau  menggunakan  layanan  karena tidak semua layanan terintegrasi satu sama lain.
Melihat kebutuhan di atas, dibuatlah aplikasi web myITS Marketplace  ini  yang  berfungsi  sebagai  platform  untuk mengintegrasikan  seluruh  layanan  yang  ada  di  Institut
Teknologi  Sepuluh  Nopember.  Selain  itu,  akan  membantu pihak  ITS  dalam  promosi  layanan  ITS  di  luar  sivitas akademika ITS. Dengan banyaknya layanan yang ditawarkan,  menjadikan  myITS  Marketplace  tidak  hanya menyasar  pengguna  sivitas  akademik,  namun  juga masyarakat umum. Ini menjadi peluang besar bagi pihak ITS untuk  membuka  layanan  dan  produknya  agar  dapat digunakan dan diakses oleh berbagai pihak.
Namun,  pada  Tugas  Akhir  ini  akan  berfokus  pada  dua layanan ITS, yaitu asrama mahasiswa dan laboratorium ITS. Layanan asrama mahasiswa ITS akan berfokus pada dua hal yaitu  kemudahan  dalam  pemesanan  kamar  asrama  secara daring  bagi  mahasiswa  ITS  dan  yang  kedua  adalah mengorganisasikan kembali administrasi asrama mahasiswa ITS. Dua kebutuhan tersebut akan diwadahi oleh sub aplikasi web  myITS  Dorm  beserta  halaman  administrasinya.  Lalu layanan  yang  kedua  adalah  layanan  laboratorium  yang berfungsi sebagai wadah bagi seluruh laboratorium yang ada di  ITS  untuk  memasarkan  pelayanan  dan  produk  masing- masing laboratorium. Selain itu, juga dapat berfungsi sebagai penyedia kebutuhan pengujian, pengembangan, dan pelatihan produk  bagi  sivitas  akademika  ITS  ataupun  masyarakat umum. Kebutuhan laboratorium tersebut akan diwadahi oleh sub aplikasi web myITS Pro Lab.
Dari sisi pengguna, myITS Dorm memiliki pengguna yaitu mahasiswa  aktif  Institut  Teknologi  Sepuluh  Nopember  dan staff asrama yang memiliki berbagai macam latar belakang. Begitu juga dengan myITS Pro Lab juga memiliki pengguna dengan latar belakang yang beraneka raga. Banyaknya variasi latar  belakang  pengguna  akan  sering  menyebabkan  adanya permasalahan terhadap pengalaman pengguna. Salah satunya adalah  pengguna kesulitan  dalam  mencapai  tujuannya  yang akan berdampak lebih luas seperti adanya perbedaan persepsi pengguna  yang  memiliki  latar  belakang  dan  kebiasaan berbeda-beda.
Dengan  adanya  permasalahan  di  atas  yang  dapat  terjadi pada  pengalaman  pengguna  dalam  menggunakan  aplikasi website  myITS  Dorm  maupun  myITS  Pro  Lab,  maka diperlukan  adanya  metode  untuk  mencegah  permasalahan tersebut. Metode yang akan digunakan dalam pengembangan desain antarmuka aplikasi website myITS Dorm dan myITS Pro Lab ini adalah metode Design Thinking. Metode ini akan berfokus  kepada  pengguna,  sesuai  dengan  kebutuhan  dan kebiasaan  interaksi  pengguna  dalam  menggunakan  aplikasi secara natural dan efisien.
Hasil dari Tugas Akhir ini diharapkan dapat menghasilkan aplikasi  web  myITS  Dorm  dan  myITS  Pro  Lab  yang mengedepankan  kebutuhan  dan  pengalaman  pengguna, sehingga  dapat  memudahkan  pengguna  untuk  mencapai tujuan  utamanya.  Desain  antarmuka  yang  dapat  dipahami

## Desain dan Evaluasi Antarmuka Pengguna Aplikasi Web Responsif myITS Marketplace Berdasarkan Design Thinking
Rana Wijdan Naim, Hadziq Fabroyir, dan Rizky Januar Akbar Departemen Teknik Informatika, Institut Teknologi Sepuluh Nopember (ITS)
e-mail : hadziq@if.its.ac.id
I
oleh seluruh lapisan pengguna akan menjadi prioritas utama dalam pengembangan antarmuka aplikasi ini, agar pengguna dapat melakukan transaksi dengan mudah dan efisien.

## II. TINJAUAN PUSTAKA

## A. Desain Pengalaman Pengguna
Desain  pengalaman  pengguna  adalah  suatu  proses  yang digunakan  oleh  tim  desain  untuk  membuat  produk  yang memberikan  pengalaman  bermakna  dan  relevan  bagi pengguna. Tujuan dari desain pengalaman pengguna adalah untuk  menciptakan  pengalaman  yang  mudah,  efisien, relevan, dan menyenangkan bagi pengguna.

## B. Standford Design Thinking
Menurut  Hasso  Plattner  Institute  of  Design  Stanford University,  Design  Thinking  memiliki  lima  fase  yang berbeda setiap iterasinya. Fase yang pertama adalah empathy , yaitu melakukan research mengenali lebih dalam pengguna tentang  masalah  yang  dihadapi  ketika  menggunakan  suatu produk.  Fase  kedua  adalah define ,  yaitu  menyebutkan kebutuhan dan masalah pengguna dengan cara mengumpulkan  seluruh  informasi  dari  fase empathy . Kemudian melakukan analisa hasil observasi dan menyintesisnya  untuk  menentukan  masalah  inti  dari pengguna. Fase ketiga adalah ideate , yaitu menciptakan ide dari hasil fase-fase sebelumnya untuk mengidentifikasi solusi inovatif  dalam  menyelesaikan  masalah  yang  telah diidentifikasi.  Fase  keempat  adalah  prototipe,  yaitu  mulai membuat solusi. Fase ini merupakan fase percobaan dengan tujuan  mengidentifikasi  solusi  terbaik  untuk  setiap  masalah yang ditemukan. Fase terakhir adalah test , yaitu melakukan pengujian  atau  evaluasi.  Tim  desain  akan  sering menggunakan hasil evaluasi untuk mengidentifikasi kembali satu  atau  lebih  permasalahan  yang  timbul  dari  hasil pengujian.  Tim  desain  dapat  melakukan  iterasi,  perubahan, dan penyempurnaan untuk menemukan atau mengesampingkan solusi alternatif jika diperlukan.

## C. Usability
Usability  adalah  ukuran  seberapa  baik  pengguna  tertentu dalam  konteks  tertentu  dapat  menggunakan  produk  atau desain untuk mencapai tujuan yang ditentukan secara efektif, efisien, dan memuaskan.

## D. Usability Testing
Usability testing adalah metode UX research yang populer. Dalam  sesi  usability  testing,  researcher  yang  biasa  disebut dengan  fasilitator  akan  bertanya  kepada  pengguna  yang mengikuti  pengujian  (responden)  untuk  mengerjakan  suatu tugas  [1].  Pengguna  yang  akan  melakukan  pengujian  ini masing-masing  aplikasi  adalah  sejumlah  5  orang.  Setelah lebih dari 5 orang, jumlah masalah yang muncul tidak akan signifikan  lagi.  Tidak  berbeda  jauh  antara  melakukan pengujian dengan 10 dengan 100 orang. Lima orang dinilai jumlah yang optimal [2].

## E. Usability Metrics
Metrik adalah standar pengukuran yang direpresentasikan dalam  satuan  yang  dapat  digunakan  untuk  menggambarkan lebih dari satu atribut. Metrik sangat berguna untuk mengukur usability setelah proses usability testing. Ada 4 metrik utama
untuk  mengukur  usability  yang  akan  kita  gunakan  dalam Tugas  Akhir  ini,  yaitu  tingkat  penyelesaian,  waktu penyelesaian  tugas, Single  Ease  Question , System  Usability Scale.
F. Heuristic Evaluation
Heuristic evaluation merupakan metode rekayasa usability untuk menemukan masalah usability dalam desain antarmuka pengguna,  sehingga  dapat  diperhatikan  sebagai  bagian  dari iterasi  proses  desain.  Heuristic  evaluation  melibatkan sekelompok kecil penilaian yang memeriksa antarmuka yang telah  dirancang  dan  menilai  kesesuaiannya  dengan  prinsip- prinsip usability yang telah diakui [3].

## G. HTML5
HTML5  (Hypertext  Markup  Language)  adalah  Bahasa markup  yang  digunakan  untuk  Menyusun  dan  menyajikan konten di World Wide Web. Ini adalah versi HTML terbaru dan  paling  disempurnakan,  dengan  elemen,  atribut,  dan behavior  yang  baru  serta  memungkinkan  pengembang website dan aplikasi lebih beragam. HTML5 dirancang untuk dapat digunakan oleh semua pengembang web [4].

## H. CSS
CSS (Cascading  Style  Sheets) adalah  bahasa  stylesheet yang digunakan untuk mendeskripsikan penyajian dokumen yang  ditulis  dalam  Bahasa  HTML  atau  XML.  CSS  adalah salah  satu  bahasa  inti  dari  pengembangan  website  dan dilakukan standarisasi di seluruh web browser sesuai dengan spesifikasi W3C [5].

## I. JavaScript
Javascript  (JS)  merupakan  bahasa  pemrograman  yang digunakan  untuk  membuat  dan  mengontrol  konten  situs website dinamis. Yaitu, semua hal yang bergerak, refreshes, atau berubah-ubah saat muncul di layer tanpa harus memuat ulang halaman website secara manual. Dengan javascript kita dapat  membuat  grafik  animasi,  slideshow  gambar, autocomplete  saran  teks,  formulir  yang  interaktif,  dan sebagainya.

## J. Qualitative Research
Qualitative  Research adalah  proses  yang  berfokus  pada pengamatan  secara  langsung  kepada  pengguna.  Metode penelitian yang dilakukan seperti wawancara pengguna, studi lapangan,  usability  testing,  dan  card  sorting.  Hal  ini  sangat membantu  dalam  mengumpulkan  data  kualitatif  melalui pengamatan.  Data  kualitatif  menghasilkan  pemahaman tentang  motivasi,  pemikiran,  dan  sikap  seseorang.  Jenis penelitian ini adalah kunci untuk mengungkap 'mengapa' di balik  tindakan  dan  mengembangkan  pemahaman  yang mendalam tentang suatu topik atau masalah.

## K. Empathy Map
Merupakan hasil dari empathize pada tahap pertama dalam metode  Design  Thinking.  Tujuan  dari  dibuatnya  empathy map adalah untuk memvisualisasikan kebutuhan, sikap, dan perilaku  pengguna.  Hal  ini  akan  membantu  untuk menyelaraskan  pemahaman  mendalam  tentang  target pengguna.  Proses  ini  juga  membantu  dalam  pengambilan keputusan  desain.  Empathy map  biasanya  dibagi  menjadi  4 kuadran  (Says,  Thinks,  Does,  dan  Feels),  dengan pengguna atau persona di tengah [6].

## III. DESAIN TAHAP PERTAMA
Bab  ini  membahas  terkait  riset  kepada  target  pengguna myITS Dorm untuk mengetahui kebutuhan dan masalah yang dihadapi.  Lalu  melakukan  analisa  dari  hasil  riset  tersebut dengan  menentukan  kebutuhan  pengguna,  menentukan masalah inti pengguna, membuat persona, dan menciptakan ide dalam memenuhi kebutuhan dan menyelesaikan masalah yang dihadapi oleh target pengguna myITS Dorm. Setelah itu membuat  desain  antarmuka  dari  ide  yang  telah  dirancang. Dalam metode Design Thinking, tahap ini merupakan tahap empathize , define , ideate , dan prototype.
A. Empathize
Pada  tahap empathize ini  akan  menggunakan  metode wawancara  pengguna  yang  berfokus  dalam  mendapatkan kebutuhan, kebiasaan, dan masalah yang dihadapi oleh target pengguna.  Untuk  itu,  penulis  mengajukan  beberapa pertanyaan seperti contoh yang tertera pada Tabel 1 dan Tabel 2  disesuaikan  dengan  masing-masing  target  pengguna aplikasi myITS Dorm dan myITS Pro Lab.

## B. Define
Dengan hasil wawancara yang telah dilakukan, pada tahap define ini  penulis  melakukan  analisa  hasil  obserasi  dan menyintesisnya.  Metode  yang  dilakukan  menggunakan affinity map dengan tujuan agar kebutuhan dan permasalahan yang  dihadapi  user  akan  terlihat  lebih  jelas  dan  terstruktur karena  akan  dikelompokkan  sesuai  dengan  aspek  masing- masing. Affinity  map ini  memiliki  dua  level,  level  pertama adalah  dikelompokkan  berdasarkan  pengguna/responden,
lalu untuk level kedua dikelompokkan berdasarkan  kategori atau  kesamaan  antar  kebutuhan,  kebiasaan,  ataupun permasalahan.  Contoh  dari  hasil affinity  map yaitu affinity diagram level  satu  pada  Gambar  1  dan  level  dua  pada Gambar 2.
Setelah  melakukan  wawancara  dan  menganalisis  hasil wawancara  serta  menyusun affinity  diagram yang menunjukkan kebutuhan dan permasalahan yang dialami para pengguna,  penulis  dapat  menentukan  target  pengguna  yang memiliki satu persona pada masing-masing aplikasi. Gambar 3 merupakan persona dari myITS Dorm dan myITS Pro Lab.

## C. Menentukan Ide
Ini adalah tahapan untuk menciptakan ide dari hasil tahap- tahap  sebelumnya  untuk  mengidentifikasi  solusi  inovatif dalam  memenuhi  kebutuhan  dan  menyelesaikan  masalah yang telah diidentifikasi di tahap define . Penulis melakukan brainstorming dari  hasil  analisis  riset  pengguna  yang dilakukan pada tahap sebelumnya seperti hasil affinity map dan  persona.  Lalu  hasil  dari brainstorming tersebut  akan disusun  menjadi  daftar  kebutuhan  yang  dibuat  untuk memecahkan  permasalahan  yang  dihadapi  oleh  pengguna. Contoh  dari  daftar  kebutuhan  dari  myITS  Dorm  dan  daftar kebutuhan dari myITS Pro Lab pada Tabel 3 dan Tabel 4.

## D. Ideate
Pada tahap ini, penulis membuat Sitemap yang merupakan pemetaan  halaman-halaman  yang  ada  di  dalam  sebuah website . Sitemap ini  dapat  memudahkan  penulis  dalam menentukan  komponen  dan  fitur  apa  saja  yang  berada  di halaman tersebut. Sitemap myITS Dorm dan myITS Pro Lab dapat dilihat pada Gambar 4 dan Gambar 5.
Gambar 1. Affinity diagram myITS dorm level 1.
Gambar 2. Affinity diagram myITS Dorm level 2.
Tabel 1.
Daftar pertanyaan wawancara pengguna myITS dorm No. Pertanyaan Jawaban 1. Apakah kamu sebelumnya sering melakukan pemesanan penginapan / transportasi? Tolong ceritakan pengalamanmu! Pernah pakai aplikasi tiket.com  untuk  beli  tiket kereta api. Nyari mau naik apa, lalu pilih kereta api. Tapi harus login  dulu,  pilih  jadwal,  pilih data  yang  cocok,  pilih  tempat duduk, dan metode pembayaran. 2. Jika kamu ingin memelakukan pemesanan kamar di asrama,  bagaimana  alur pemesanan  yang  kamu inginkan? apa poin penting dari alur pemesanan tersebut? Mengunjungi  website  asrama, bikin  akun,  lihat  jenis  kamar, lihat  kondisi  kamar,  booking kamar, melakukan pembayaaran  via  transfer  dan ada bukti pembayaran. Tabel 2. Daftar pertanyaan wawancara pengguna myITS pro lab No. Pertanyaan Jawaban 1. Biasanya, alasan kuat apa yang  menyebabkan  anda mau  /  memesan  layanan laboratorium ITS? Terdapat akreditasi lab tersebut. Layanan cepat, bayar cepat,  ambil  laporan  tidak perlu  datang  ke  lab.  Serba efisien. 2. Informasi  apa  saja  yang dibutuhkan untuk memilih pemesanan bagi anda sebelum melakukan pemesanan? Terdapat detail informasi layanan apa saja yang terdapat di laboratorium itu, ada terdapat  harganya  juga.  Tidak ribet dalam melakukan pemesanan.

## E. Komponen Antarmuka Pengguna
Komponen  antarmuka  yang  digunakan  penulis  dalam melakukan  perancangan  antarmuka  aplikasi  myITS  Dorm dan  Pro  Lab  mengacu  pada  template  Dashforge  yang  telah disepakati  penggunaannya  untuk  semua  produk  myITS. Beberapa contoh komponen yang diterapkan adalah sebagai berikut:

## 1) Palet Warna
Palet  warna  merupakan  kumpulan  dari  beberapa  warna yang  disusun  digunakan  dalam  perancangan  antarmuka. Penulis  menentukan  palet  warna  sebelum  melakukan perancangan antarmuka. Warna utama yang digunakan oleh penulis  merupakan  wara  yang  merepresentasikan  karakter dari produk myITS (Gambar 6).

## 2) Tombol
Tujuan  adanya  tombol  dalam  sebuah  antarmuka  adalah untuk memberikan kemudahan bagi pengguna untuk memicu sebuah  peristiwa.  Gambar  7  merupakan  rancangan  tombol yang digunakan pada perancangan antarmuka myITS Dorm dan myITS Pro Lab.

## 3) Label
Label  biasanya  digunakan  sebagai  status  atau  informasi yang perlu diperhatikan oleh pengguna pada komponen yang ditandai oleh label tersebut. Gambar 8 merupakan rancangan label  yang  digunakan  pada  perancangan  antarmuka  myITS Dorm dan myITS Pro Lab.

## 4) Bidang Teks
Bidang teks merupakan komponen yang digunakan untuk memasukkan suatu input data. Ada beberapa macam bidang teks, ada inactive , text-field , text-area , dan dropdown . Pada Gambar  9  merupakan  salah  satu  contoh  komponen  bidang teks yang digunakan pada myITS Dorm dan myITS Pro Lab. Desain Antarmuka Pengguna dalam Bentuk Sketsa
Pada  subbab  ini  akan  menjelaskan  tentang  proses pembuatan desain antarmuka pada tahap sketsa (low fidelity design) . Tujuan dari tahap desain ini adalah untuk melakukan penataan berbagai komponen dengan sebaik mungkin sesuai kebutuhan pengguna serta dapat memudahkan penulis dalam perubahan desain saat terjadi perubahan ide desain sebelum menuju  tahap  desain  selanjutnya  yaitu high  fidelity  design (mockup) . Gambar 10 merupakan sketsa halaman detail jenis kamar dari aplikasi myITS Dorm.
Tabel 3.

## Daftar kebutuhan pengguna myITS dorm
No. Kebutuhan Tujuan atau Fungsi 1. Melihat  jenis kamar. Melihat jenis kamar yang aktif atau dapat dipesan. 2. Menerapkan filter pada daftar jenis kamar. Menerapkan filter jenis kamar mandi, isi kamar,  jenis  penghuni,  dan  AC  pada daftar jenis kamar. Tabel 4. Daftar kebutuhan pengguna myITS Pro Lab No. Kebutuhan Tujuan atau Fungsi 1. Menambah blok. Dapat  menambahkan  blok  yang  berisi nama blok, jenis penghuni, jumlah lantai, total  kasur,  jenis  kamar,  dan  deskripsi blok. 2. Mengubah status blok. Dapat  mengaktifkan  dan  menonaktifkan blok yang ingin ditawarkan. Tabel 5. Contoh tabel tugas myITS dorm No Tugas 1 Masuk dengan myITS SSO 2 Melihat Jenis Kamar 3 Melakukan Pemesanan Tabel 6.
Contoh tabel tugas admin myITS Dorm
No Tugas 1 Menambah blok
2
Mengubah informasi blok
3 Mengubah status blok
Gambar 3. Persona myITS dorm dan myITS pro lab.
Gambar 4. Sitemap myITS dorm.
Gambar 5. Sitemap myITS pro lab.
Gambar 6. Palet warna myITS dorm dan myITS pro lab.

## F. Desain Antarm uka Pengguna dalam Bentuk Mockup
Pada  subbab  ini  akan  menjelaskan  tentang  proses pembuatan  desain  antarmuka  pada  tahap mockup (high fidelity  design) . Mockup ini  nantinya  juga  akan  digunakan untuk testing sebelum dilanjutkan ke proses desain tahap dua dan  pengembangan.  Gambar  11  merupakan  contoh mockup dari myITS Dorm.

## IV. EVALUASI TAHAP PERTAMA
Bab  ini  menjelaskan  mengenai  evaluasi  yang  dilakukan untuk  mendapatkan  rancangan  antarmuka  yang  sesuai kebutuhan  dan  memudahkan  pengguna.  Metode  yang dilakukan  dalam  evaluasi  tahap  satu  ini  adalah  metode usability  testing .  Evaluasi  pada  tahap  satu  ini  dilakukan secara daring menggunakan aplikasi Maze yang diintegrasikan dengan prototipe Figma dan juga
menggunakan media Zoom memfasilitasi komunikasi antara penguji (penulis) dengan responden.

## A. Daftar Tugas Evaluasi Tahap Satu
Daftar tugas ini digunakan sebagai panduan bagi pengguna atau  responden  dalam  melakukan usability  testing .  Dalam usability  testing ini  akan  dipandu  oleh  penulis  sebagai moderator.  Contoh  tugas usability  testing tahap  pertama aplikasi myITS Dorm dan admin myITS Dorm pada Tabel 5 dan Tabel 6.

## B. Hasil Evaluasi Tahap Pertama myITS Dorm
Hasil evaluasi dari usability testing ini dengan menghitung usability  metric seperti  waktu  penyelesaian,  salah  klik, tingkat  penyelesaian,  SEQ,  dan SUS  (Tabel  7).  Untuk aplikasi  myITS  Dorm,  secara  umum  pengguna  berhasil menyelesaikan tugas dengan baik. Dari total 30 tugas, hanya ada 5 yang berhasil dengan catatan, dan hanya 1 tugas yang gagal  dikerjakan.  Lalu,  rata-rata  tingkat  penyelesaian  tugas oleh  para  responden  berada  diangka  88.3%.  Ini  dapat disimpulkan myITS Dorm sudah cukup baik walaupun perlu ada  perbaikan  desain  antarmuka  dan  terdapat  masukan responden  mengenai  fitur  myITS  Dorm.  Sedangkan  untuk aplikasi  admin  myITS  Dorm,  secara  umum  pengguna berhasil  menyelesaikan  tugas  dengan  baik.  Dari  total  75 tugas, hanya ada 7 yang berhasil dengan catatan, dan hanya
Gambar 7. Tombol myITS dorm dan myITS pro lab.
Gambar 8. Label myITS dorm dan myITS pro lab.
Gambar 9. Bidang teks myITS dorm dan myITS pro lab.
Gambar 10. Sketsa detail jenis kamar myITS dorm.
Gambar 11. Mockup halaman jenis kamar myITS dorm.
ada  5  tugas  yang  gagal  dikerjakan.  Lalu,  rata-rata  tingkat penyelesaian  tugas  oleh  para  responden  berada  diangka 81.67%.  Ini  dapat  dis  impulkan  desain  antarmuka  admin myITS Dorm sudah cukup baik walaupun perlu ada beberapa perbaikan desain.
C. Penilaian SEQ dari Evaluasi Tahap Pertama
Penilaian Single  Ease  Question merupakan  kuisioner setelah melakukan tugas untuk mengukur persepsi pengguna tentang usability tugas  yang  terakhir  dikerjakan.  Pada aplikasi  myITS  Dorm  secara  umum  sudah  cukup  mudah digunakan oleh pengguna karena berada diangka 4.6-7 (Tabel 7). Hanya ada satu tugas yang berada diangka 4.6 yang berarti masih  perlu  perbaikan.  Sedangkan  pada  aplikasi  admin myITS  Drom  secara  umum  sudah  cukup  mudah  digunakan oleh pengguna karena berada diangka 4.4-7. Hanya ada satu
tugas yang berada diangka 4.4 yang berarti masih perlu ada
beberapa perbaikan.
D. Penilaian SUS dari Evaluasi Tahap Pertama
Penilaian System  Usability  Scale merupakan  kuisioner setelah melakukan tugas untuk mengukur persepsi pengguna tentang usability tugas  yang  telah  dikerjakan.  Dapat  dilihat dari Tabel 8 bahwa nilai SUS dari evaluasi tahap satu myITS Dorm  adalah  84.  Dengan  ini  dapat  disimpulkan  bahwa aplikasi  myITS  Dorm  sudah  baik  dalam  kemudahan  dan memenuhi  kebutuhan  pengguna  karena  sudah  diatas  nilai minimal  yaitu  68.  Sedangkan  pada  aplikasi  admin  myITS Dorm memiliki rata-rata nilai SUS adalah 77.5. Dengan ini dapat  disimpulkan  bahwa  desain  antarmuka  admin  myITS Dorm  sudah  baik  dalam  memenuhi  kemudahan  dan
Tabel 7. Contoh penilaian SEQ pada myITS dorm
N o Nama Responde n Penilaian SEQ Tug as 1 Tug as 2 Tugas 3 Tuga s 4 Tuga s 5 Tuga s 6 1  Responde n 1 7 6 3 7 7 7 2  Responde n 2 6 7 6 7 7 7 3  Responde n 11 7 7 6 7 7 7 4  Responde n 4 7 6 2 6 7 7 5  Responde n 5 7 7 6 7 7 7 Rata-rata 6.8 6.6 4.6 6  7 7 Tabel 8. Contoh penilaian SUS pada myITS dorm N o Resp onde n Penilaian SUS Q 1 Q 2 Q 3 Q 4 Q 5 Q 6 Q 7 Q 8 Q 9 Q 1 0 Nil ai SU S 1 Resp onde n 1 4 2 5 1 4 2 4 1 4 2 82. 5 2 Resp onde n 2 5 1 4 1 4 1 5 1 4 2 90 3 Resp onde n 3 5 2 5 1 5 2 5 1 5 2 92. 5 4 Resp onde n 4 4 4 4 2 2 2 4 2 4 2 65 5 Resp onde n 5 4 1 5 1 5 1 5 1 5 4 90 Rata-Rata 84 Tabel 9. Contoh tabel permasalahan dan solusi desain myITS dorm No Permasalahan myITS Dorm Solusi 1 Tombol masuk kurang terlihat atau terlalu kecil Tombol “Masuk” yang berada  di  navigation  bar diperbesar ukurannya. 2 Pengguna ingin mengetahui narahubung  asrama  dan informasi layanan asrama Menambahkan narahubung asrama dan informasi layanan asrama di halaman utama. 3 Margin navbar terlalu lebar, sehingga terlalu ketengah Mengubah  margin  navbar menjadi lebih kecil agar tidak terlalu ketengah
Gambar 12. Contoh empathy map dari myITS dorm.
Gambar 13. Contoh perubahan desain pada halaman jenis kamar myITS dorm.
kebutuhan  pengguna  karena  sudah  berada  diatas  nilai
minimal, yaitu 68.

## V. DESAIN TAHAP KEDUA
Bab  ini  menjelaskan  mengenai  analisa  dan  perubahan desain dari hasil evaluasi tahap pertama untuk myITS Dorm dan admin myITS Dorm. Ini merupakan step define, ideate, dan prototype pada  Design  Thinking  dengan  menyusun empathy  map ,  menentukan  ide  dengan  melakukan brainstorming solusi  desain,  dan  membuat  desain  mockup dari solusi desain yang telah dirancang (Tabel 9).
A. Empathy Map
Peta  empati (empathy  map) ini  dihasilkan  dari  proses evaluasi  tahap  pertama  sekaligus  melakukan  observasi dengan  pendekatan  metode empathize .  Gambar  12 merupakan  hasil  pembuatan empathy  map untuk  lima pengguna  myITS  Dorm.  Gambar  12  adalah  contoh  dari empathy map yang disusun untuk aplikasi myITS Dorm.

## B. Menentukan Ide
Pada  tahap  menentukan  ide  ini  merupakan  tahap ideate pada  metode  Design  Thinking.  Ini  adalah  tahapan  untuk menciptakan ide untuk mendapatkan solusi desain dari hasil empathy map dan evaluasi tahap pertama. Banyak cara yang dapat dilakukan dalam menciptakan ide, salah satu contohnya adalah dengan melakukan brainstorming dan menyusun ide solusi desain berupa perubahan desain ataupun adanya fitur baru.

## C. Perancangan Antarmuka Solusi Desain
Pada tahap perancangan antarmuka ini merupakann tahap prototype dalam  metode  Design  Thinking.  Setelah mendapatkan solusi desain dari permasalahan yang dihadapi
pengguna  dari  evaluasi  tahap  pertama  dan empathy  map , maka  akan  dilakukan  perancangan  antarmuka  berupa highfidelity prototype .  Disini  akan  dibandingkan  desain sebelumnya dengan perubahan desain hasil ide solusi desain yang  telah  dijabarkan  sebelumnya.  Gambar  13  merupakan contoh perbandingan desain halaman  utama myITS Dorm.

## VI. IMPLEMENTASI
Bab  ini  menjelaskan  mengenai  implementasi  antarmuka myITS Dorm dan admin myITS Dorm yang berbasis website dari prototipe yang telah dibuat. Implementasi ini dirancang dengan  pedoman  templat  antarmuka  dari  Dashforge menggunakan  HTML,  CSS,  dan  JavaScript.  Proses implementasi rancangan antarmuka myITS Dorm dan admin myITS  Dorm  ini  dilakukan  penulis  berdasarkan  analisis kebutuhan  serta  hasil  evaluasi  tahap  pertama  yang  telah dilakukan  sebelumnya.  Gambar  14  merupakan  contoh  dari implementasi halaman detail jenis kamar myITS Dorm.
Di  bawah  ini  juga  akan  ditunjukkan  cuplikan  kode  salah satu  komponen  yang  diterapkan  di  aplikasi  myITS  Dorm pada metode pembayaran yaitu komponen label.

## VII. EVALUASI TAHAP KEDUA
Evaluasi  tahap  dua  ini  dilakukan  karena  adanya penambahan  fitur  dari  rancangan  antarmuka  tahap  dua. Metode yang dilakukan evaluasi tahap dua ini menggunakan metode usability testing dengan penambahan beberapa daftar tugas  dari  evaluasi  tahap  satu.  Desain  antarmuka  yang dilakukan  evaluasi  tahap  dua  adalah  hasil  implementasi sistem yang berupa web front-end .  Selain usability testing , penulis  juga  melakukan  evaluasi  lainnya  menggunakan metode Heuristic Evaluation yang memiliki 10 prinsip utama.

## A. Usability Testing Tahap Kedua
Usability  testing  tahap  kedua  ini  juga  perlu  dilakukan penyusunan  daftar  tugas  yang  digunakan  sebagai  panduan bagi  pengguna  atau  responden  dalam  melakukan usability testing yang kedua. Pada tugas kali ini ada penambahan tugas dikarenakan  hasil  desain  tahap  kedua.  Tabel  10  merupakan
<span class="badge badge-pill badge-primary" style="font-size: 14px; float:right; align- items:middle;">Mahasiswa Non Bidikmisi</span>
Gambar  14.  Contoh  implementasi  halaman detail  jenis kamar  myITS dorm.
Tabel 10. Contoh instruksi usability evaluation No. Tugas 1. Masuk dengan myITS SSO
2. Melihat informasi laundry
3. Mencari Jenis Kamar 4. Menelusuri daftar jenis kamar dengan filter 5. Melakukan pemesanan 6. Melihat notifikasi baru 7. Melihat detail pesanan 8.
Keluar dari sekolah
Tabel 11. Contoh hasil heuristic evaluation No. Prinsip Heuristik Hasil 1. Visibilitas status sistem Terpenuhi 2. Keselarasan antara sistem dengan dunia nyata Terpenuhi 3. Kebebasan dan kontrol pengguna Terpenuhi 4. Standar dan konsistensi Terpenuhi 5. Pencegahan eror Terpenuhi 6. Mengenal daripada mengingat Terpenuhi 7. Fleksibilitas dan efisiensi penggunaan Terpenuhi 8. Estetika  dan  rancangan  yang minimalis Terpenuhi 9. Membantu pengguna mengenali,  menganalisa,  dan menangani eror Terpenuhi 10. Bantuan dan dokumentasi Terpenuhi
contoh  tugas usability  testing tahap  kedua  aplikasi  myITS Dorm.

## B. Hasil Evaluasi Tahap Kedua
Secara keseluruhan responden dapat menyelesaikan tugas dengan  baik.  Dari  total  40  tugas  hanya  ada  2  tugas  yang berhasil  dengan  catatan,  sedangkan  rata-rata  tingkat penyelesaian  responden  pada  setiap  tugasnya  mencapai 97.5%.  Hal  ini  menunjukkan  bahwa  secara  umum  aplikasi myITS  Dorm  ini  sudah  sangat  baik  dalam  memenuhi kemudahan dan kebutuhan pengguna.

## C. Penilaian SEQ dari Evaluasi Tahap Kedua
Dari  hasil  penilaian  SEQ,  myITS  Dorm  memilki  tingkat kemudahan  berada  diangka  5.8-7  yang  secara  umum  sudah baik.  Hanya  ada  satu  tugas  yang  berada  diangka  5.8  yang berarti  masih  ada  beberapa  catatan  yang  harus  sedikit diperbaiki  lagi,  walaupun  menurut  pengguna  secara keseluruhan pada tugas ini sudah cukup mudah.

## D. Penilaian SEQ dari Evaluasi Tahap Kedua
Dapat  kita  lihat  bahwa  rata-rata  nilai  SUS  myITS  Dorm pada evaluasi tahap dua ini berada diangka 87, yang berarti myITS  Dorm  sudah  dianggap  sangat  baik  atau  mudah digunakan (usability) karena sudah diatas nilai minimal yaitu 68.

## E. Heuristic Evaluation
Tujuan  dari  Heuristic  Evaluation  ini  adalah  menemukan masalah usability dari  desain  antarmuka  myITS  Dorm  dan admin  myITS  Dorm.  Untuk  menemukan  kesesuaian  sistem dengan prinsip heuristik, dilakukan analisa evaluasi heuristik dari setiap 10 prinsipnya. Tabel 11 merupakan contoh hasil evaluasi  desain  menggunakan  Heuristic  Evaluation  dari myITS Dorm.

## VIII. KESIMPULAN
Berikut  adalah  beberapa  poin  kesimpulan  yang  dapat diambil:  (1)  Implementasi  Design  pada  perancangan antarmuka  pengguna  aplikasi  myITS  Marketplace  dengan studi  kasus  myITS  Dorm  dan  myITS  Pro  Lab  dilakukan dengan  beberapa  tahap.  Tahapannya  seperti  melakukan empathize,  define,  ideate, prototipe,  dan  evaluasi.  Pada myITS  Dorm  dilakukan  iterasi  kemballi  ke  tahap define
hingga  evaluasi  yang  kedua  kalinya.  (2)  Implementasi antarmuka  dibuat  berdasarkan  aturan  desain  aturan  desain dari  templat  Dashforge  yang  telah  digunakan  oleh  seluruh aplikasi  myITS.  Bahasa  pemrograma  yang  digunakan  pada tahap implementasi ini adalah HTML, CSS, dan Javascript. Hasil dari implementasi ini adalah berupa website yang dapat diakses  oleh  pengguna  melalui  perangkat  computer.  (3) Evaluasi  dilaksanakan  dengan  dua  metode,  yaitu usability testing yang  dilakukan  sebanyak  dua  kali,  kemudian  yang kedua  adalah herustic  evaluation yang  membandingkan sistem  dengan  10  prinsip  heuristik.  Pada  kegiatan usability testing dilakukan  sebanyak  dua  kali  untuk  aplikasi  web myITS Dorm dan satu kali untuk aplikasi web admin myITS Dorm. Evaluasi menggunakan usability testing yang pertama, kedua  aplikasi  memiliki  tingkat  kemudahan  yang  sama baiknya. Untuk aplikasi web myITS Dorm memiliki tingkat kemudahan dari SEQ berada diangka 4.6-7, sedangkan dari SUS  mempunyai  nilai  sebesar  84.  Lalu  untuk  aplikasi  web admin  myITS  Dorm  mempunyai  nilai  tingkat  kemudahan dari  SEQ  berada  diangka  4.8-7,  sedangkan  dari  SUS mempunyai  nilai  sebesar  77.5.  Sementara  itu  pada  evaluasi tahap  kedua,  aplikasi  web  myITS  Dorm  memiliki  tingkat kemudahan dari SEQ berada diangka 5.8-7, sedangkan dari SUS  mempunyai  nilai  sebesar  87.  Evaluasi  heuristik  juga telah dilakukan dengan membandingkan 10 prinsip heuristik dengan aplikasi web myITS Dorm dan admin myITS Dorm yang  memiliki  kesimpulan  kedua  aplikasi  sudah  memenuhi 10 prinsip heuristik.

## DAFTAR PUSTAKA
[1]  K.  Moran,  “Usability  Testing  101,” Nielsen  Norman  Group ,  2019. https://www.nngroup.com/articles/usability-testing-101/.
[2]  J.  Nielsen,  “Why  You  Only  Need  to  Test  with  5  Users,” Nielsen Norman  Group ,  2000.  https://www.nngroup.com/articles/why-you- only-need-to-test-with-5-users/.
[3]  J. Nielsen, “How to Conduct a Heuristic Evaluation,” Nielsen Norman Group ,  1994.  https://www.nngroup.com/articles/how-to-conduct-a- heuristic-evaluation/.
[4]  M. Contributors, “HTML5,” MDN Web Docs , 2021. https://developer.mozilla.org/en US/docs/Web/Guide/HTML/HTML5.
[5]  M.  Contributors,  “CSS:  Cascading  Style  Sheets,” MDN  Web  Docs , 2021. https://developer.mozilla.org/en-US/docs/Web/CSS.
[6]  S. Gibbons, “Empathy Mapping: The First Step in Design Thinking,”
Nielsen Norman Group , 2018. https://www.nngroup.com/articles/empathy-mapping/.