## Journal of Information System Research (JOSH)
Volume 5, No. 2, Januari 2024, pp 676−685 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i2.4654

## Perancangan UI/UX Pada Sistem Perpustakaan dengan Pendekatan Design Thinking
Muhammad Ifsyaus Salam, Agus Setiawan, Pristi Sukmasetya *
Fakultas Teknik, Program Studi Teknik Informatika, Universitas Muhammadiyah Magelang, Magelang Jl. Mayjen Bambang Soegeng, Glagak, Sumberrejo, Kec. Mertoyudan, Kabupaten Magelang, Jawa Tengah, Indonesia Email: 1 ifsya.uus@gmail.com, 2, setiawan@unimma.ac.id, 3,* pristi.sukmasetya@ummgl.ac.id Email Penulis Korespondensi: pristi.sukmasetya@ummgl.ac.id Submitted: 05/12/2023; Accepted: 29/01/2024; Published: 31/01/2024
Abstrak −Perpustakaan berperan sebagai pusat literasi  bagi siswa, di  mana diharapkan perpustakaan  memiliki fasilitas dan infrastruktur  yang  memadai untuk para pengunjung. Di era digital seperti sekarang pengelolaan  dan pencatatan sudah tidak zamannya menggunakan buku tulis sebagai pencatatan, menyebabkan adanya ketidak sesuaian dalam pencatatan buku atau hal yang lainnya. Sistem Perpustakaan berbasis web di MTs Negeri 3 Magelang, awalnya diciptakan untuk membantu pustakawan dalam  mengatasi  kendala  dan  masalah  yang  muncul  akibat  pencatatan  manual.  Meskipun  demikian,  fitur-fitur  pada  sistem tersebut belum sepenuhnya memenuhi kebutuhan pengguna dengan optimal. Oleh karena itu, diperlukan evaluasi mendalam untuk  mengidentifikasi  kebutuhan  pengguna  terkait  pencatatan.  Sebagai  respons,  dilakukan  redesain  menggunakan  metode design thinking agar Sistem Perpustakaan MTs Negeri 3 Magelang dapat memenuhi kebutuhan pengguna secara lebih baik. Hasil dari uji coba usability dengan metode Single Ease Question (SEQ), dengan rata-rata antara 6,5 hingga 7, menunjukkan bahwa  prototype  Sistem  Perpustakaan  MTs  Negeri  3  Magelang  telah  mencapai  tingkat  efektivitas,  efisiensi,  dan  kepuasan pengguna yang baik.
Kata Kunci: Perpustakaan; User Interface; User Experience; Design Thinking
Abstract −The library serves as a literacy center for students, where it is expected to have adequate facilities and infrastructure for  visitors.  In  the  current  digital  era,  the  management  and  recording  no  longer  rely  on  handwritten  books,  leading  to discrepancies in bookkeeping and other records. The web-based library system at MTs Negeri 3 Magelang was initially created to assist librarians in addressing challenges and issues arising from manual recording. However, the features of the system have not  fully  optimized  user  needs.  Therefore,  a  thorough  evaluation  is  needed  to  identify  user  needs  related  to  recording.  In response, a redesign was carried out using the design thinking method to better meet the needs of users for the Library System at MTs Negeri 3 Magelang. The results of usability testing using the Single Ease Question (SEQ) method, with an average ranging from 6.5 to 7, indicate that the prototype of the Library System at MTs Negeri 3 Magelang has achieved a good level of effectiveness, efficiency, and user satisfaction.
Keywords : Library; User Interface; User Experience; Design Thinking

## 1. PENDAHULUAN
Perpustakaan  berperan  penting  sebagai  pusat  literasi  bagi  siswa.  Sebagai  pusat  literasi,  perpustakaan  harus memiliki  sarana  dan  prasarana  yang  memadai  bagi  pengunjungnya.  Dalam  konteks  ini,  "memadai"  berarti perpustakaan  harus  dilengkapi  dengan  fasilitas  yang  dapat  menyediakan  informasi  yang  akurat  bagi  siswa  dan menciptakan kenyamanan bagi semua pengunjung perpustakaan. Sejak ditemukannya mesin cetak untuk mencetak berbagai  jenis  materi  pembelajaran,  media  cetak  tetap  menjadi  unsur  kunci  dalam  mendukung  proses  belajar mengajar. Buku, diktat, jurnal, modul, dan sumber belajar cetak lainnya tetap menjadi andalan dalam memfasilitasi proses pembelajaran di MTs Negeri 3 Magelang. Sistem perpustakaan pada MTs Negeri 3 Magelang yang sudah berjalan  adalah  menggunakan  sistem  manual,  dengan  menuliskan  buku  yang  dipinjam  dan  buku  yang  di kembalikan.  Terkadang  dengan  sistem  seperti  itu  anggota  yang  meminjam  akan  sulit  terdeteksi  jika  tidak mengembalikan buku ke perpustakaan, dan untuk rekap masih kesulitan karena masih menghitung secara manual. Tidak  menutup  kemungkinan  juga  buku  sirkulasi  keluar  masuk  akan  hilang  dan  datanya  akan  hilang.  Dengan begitu apabila sirkulasi buku tidak dapat dikelola dengan baik, maka lama kelamaan buku akan terus  berkurang. Salah satu upaya yang dapat dilakukan adalah pembentukan sistem informasi perpustakaan. Oleh karena itu, agar pencatatan sirkulasi  buku keluar  masuk terstruktur dengan  baik,  maka  peneliti  akan  membuat pendigitalisasian sistem  perpustakaan  dengan  membuat  desain  antar  muka  yang  mudah  digunakan  untuk  staf  perpustakaan  MTs Negeri 3 Magelang. Metode yang digunakan yakni dengan pendekatan Design Thinking.
Sistem  Perpustakaan  adalah  elemen  penting  dalam  mengelola  dan  memfasilitasi  kebutuhan  informasi  di institusi  pendidikan.  MTs  Negeri  3  Magelang  sebagai  lembaga  pendidikan  menengah  pertama  memiliki perpustakaan  yang  mendukung  proses  pembelajaran  siswa.  Namun,  dalam  era  digital  yang  terus  berkembang, diperlukan  pembaruan  dan  peningkatan  pada  Sistem  Perpustakaan  agar  dapat  mengakomodasi  perkembangan teknologi informasi dan memenuhi harapan pengguna, baik siswa maupun staf perpustakaan. Oleh karena itu, agar lebih rapi dan tertata.
Antar  Muka  Pengguna  (User  Interface)  adalah  tampilan  utama  yang  muncul  saat  sistem  berjalan, memungkinkan  pengguna  berinteraksi  melalui  perintah  dalam  aplikasi.  Yulianti  Siti  Jamilah,  dalam  jurnalnya, menjelaskan bahwa User Interface (UI) adalah disiplin ilmu yang memperhatikan desain grafis pada antarmuka situs web atau aplikasi [1]. UI menekankan estetika tampilan situs web atau aplikasi dan berfokus pada interaksi

## Journal of Information System Research (JOSH)
Volume 5, No. 2, Januari 2024, pp 676−685 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i2.4654
langsung dengan pengguna. Lebih dari sekadar aspek visual seperti warna dan bentuk, UI mencakup penyediaan alat yang sesuai untuk membantu pengguna mencapai tujuan mereka [2]. Selain tombol, menu, dan formulir, UI juga  melibatkan  elemen  lain  yang  diperlukan  untuk  pengalaman  pengguna  [3].  Pengalaman Pengguna  (User Experience) merupakan tanggapan dan pandangan seseorang terhadap penggunaan produk, sistem, atau layanan. Ferry Fernando, dalam jurnalnya, mendefinisikan Pengalaman Pengguna (UX) sebagai evaluasi terhadap tingkat kepuasan  dan  kenyamanan  yang  dirasakan  seseorang  terhadap  suatu  produk,  sistem,  atau  layanan [4] .  Sebuah prinsip  dalam  pengembangan  UX  adalah  memberikan  kekuasaan  kepada  pengguna  untuk  menentukan  tingkat kepuasan  mereka  sendiri,  yang  dikenal  sebagai  prinsip  "costumer  rule" [5].  Menurut  S.  Rasio  Henim  dan  R. Perdana  Sari,  user  experience  merujuk  pada  cara  pengguna  berinteraksi  dengan  perangkat  lunak  [6].  Perilaku positif pengguna terjadi ketika perangkat lunak memberikan pengalaman yang memenuhi tujuan pengguna, yaitu menyelesaikan pekerjaan  mereka.  User experience dibagi  menjadi  beberapa aspek, termasuk kegunaan, kinerja pengguna, dan memandangnya sebagai elemen utama dalam persepsi dan tanggapan pengguna yang dapat diukur secara subjektif maupun objektif [7].
Design Thinking merupakan suatu pendekatan creative problem solving yang memusatkan perhatian pada empati terhadap pengguna. Metode ini melibatkan langkah-langkah yang cukup sederhana, dimulai dari observasi dan  perhatian  terhadap  keinginan  pengguna.  Hasil  dari  pengamatan  tersebut  kemudian  digunakan  untuk mengembangkan  produk  baru  atau  meningkatkan  produk  yang  sudah  ada.  [8].  Penelitian  ini  memanfaatkan metodologi  penelitian  Design  Thinking,  yang  merupakan  pendekatan  berpikir  kreatif  dan  praktis  untuk memecahkan  masalah  atau  tugas.  Oleh  karena  itu,  untuk  mengembangkan  UI  dan  UX  yang  relevan  dengan tantangan  yang dihadapi oleh pengguna, diperlukan pendekatan  Design Thinking. Pendekatan  ini telah terbukti efektif  dalam  mengatasi  masalah  pengguna  berdasarkan  hasil  penelitian  sebelumnya.  Seperti  penelitian  yang pertama berjudul Perancangan Desain Tampilan Website Perpustakaan Cinta Baca Cirebon Menggunakan Metode Design  Thinking.  Penelitian  ini  bertujuan  untuk  mempermudah  pengguna  dan  pengurus  perpustakaan  untuk mengelola perpustakaan cinta baca ini dengan baik dan salah satu upaya untuk mengatasi masalah informasi dalam perpustakaan belum termanfaatkan secara  maksimal  adalah  memanfaatkan teknologi  informasi  berbasis digital. Dalam  melakukan  penelitian  perancangan  User  Interface  dilakukan  testing  pada  sistem  yang  telah  dibuat menggunakan metode testing ke pengguna secara langsung [9]. Penelitian selanjutnya yang dilakukan oleh Titan Parama Yoga, Budiman, Jilan Hafizh Ferdiansyah Efendi Putra. Penelitian yang berjudul Perancangan Prototype User  Interface  Dan  Pengujian  User  Experience  Aplikasi  Rental  Mobil  Berbasis  Menggunakan  Metode  Design Thinking (Studi Kasus: Pt Trans Berjaya Khatulistiwa). Alasan peneliti melakukan penelitian ini adalah Tiketux sedang melakukan pengembangan sebuah aplikasi web mengenai rental mobil. Dalam penelitian kali ini dilakukan testing dengan metode SUS dengan hasil rancangan design UI/UX yang tepat sasaran [10].
Penelitian ketiga yang berjudul Analisis Dan Perancangan User Interface Pada Aplikasi Symbah Berbasis Mobile Menggunakan Metodelogi Design Thinking. Penelitian kali ini bertujuan untuk memaksimalkan mengenai bank  sampah  dan  memudahkan  pengguna  untuk  mengelola  bank  sampah.  Dalam  penelitian  kali  ini  dilakukan testing langsung dengan pengguna [11]. Penelitian keempat yang berjudul Pengembangan UI/UX Pada Aplikasi M-Voting  Menggunakan  Metode  Design  Thinking.  Pada  penelitian  kali  ini  bertujuan  menghasilkan  desain prototipe yang teruji sesuai dengan kebutuhan, dengan melakukan testing langsung kepada pengguna  [12]. Dari beberapa  penjabaran  penelitian  terdahulu  terbukti  pendekatan  Design  Thinking  mampu  membantu  mengatasi permasalahan  pengguna.  Sehingga,  penulis  memutuskan  untuk  menerapkan  metode  Design  Thinking  dalam penelitian untuk merancang antarmuka Sistem Perpustakaan MTs Negeri 3 Magelang. Penulis juga menguji hasil desain dengan melakukan usability testing menggunakan metode Single Ease Question (SEQ) untuk mengevaluasi tingkat kemudahan dan efektivitas sistem web yang akan dikembangkan.

## 2. METODOLOGI PENELITIAN

## 2.1 Tahapan Penelitian
Dalam pelaksanaan penelitian ini, peneliti menerapkan metode Design Thinking untuk menyelesaikan tantangan terkait  perancangan  Sistem  Perpustakaan  MTs  Negeri  3  Magelang.  Metode  Design  Thinking  ini  mempunyai  5 tahap, yaitu Empathize, Define, Ideate, Prototype, Testing. Tetapi tidak hanya 5 tahap dari Design Thinking, akan tetapi peneliti akan mengkombinasikan beberapa tahap, diantaranya:
a. Tahap Pendahuluan
Untuk  mendukung  penelitian  ini,  peneliti  mengumpulkan  informasi  terkait  dengan  metode  yang  akan digunakan.  Sumber  informasi  terdiri  dari  studi  literatur  dan  observasi.  Pengumpulan  informasi  dari  studi literatur dilakukan  melalui pencarian referensi  buku dan  jurnal untuk mendapatkan perspektif  beberapa ahli [13].  Studi  literatur  ini  mencakup  pembahasan  tentang  metode  Design  Thinking.  Selain  itu,  peneliti  juga mengumpulkan  data  dan  informasi  melalui  observasi  langsung  ke  lokasi  Perpustakaan  MTs  Negeri  3 Magelang. Melalui observasi, peneliti dapat memahami dengan lebih baik permasalahan yang dihadapi oleh Perpustakaan MTs Negeri 3 Magelang. Informasi  yang diperoleh dari kedua sumber ini akan menjadi dasar untuk implementasi penelitian, dan dapat dipastikan memiliki validitas data.
b. Tahap Design Thinking

## Journal of Information System Research (JOSH)

## 1. Tahap Empathize
Langkah  ini  merupakan  fase  pendahuluan  dalam  proses  perancangan  UI/UX  pada  Sistem  Perpustakaan MTs Negeri 3  Magelang. Tahap  Empathize  ini  bertujuan untuk  mengumpulkan data  yang akan  menjadi landasan  penelitian.  Kualitas  pengumpulan  data  pada  tahap  ini  akan  berpengaruh  pada  kesuksesan keseluruhan penelitian [14]. Tahap empathize ini peneliti melakukan wawancara yang mencakup beberapa pertanyaan kepada staf perpustakaan untuk mendapatkan gambaran dan wawasan tentang pengaruh UI/UX terhadap penggunaan pada Sistem Perpustakaan MTs Negeri 3 Magelang.
2. Tahap Define
Berdasarkan  proses  define  didapatkan  inti  dari  permasalahan  utama  yang  dapat  disimpulkan  dari  proses empathize  adalah  calon  user  (pengguna)  sebagian  besar  masih  belum  mengetahui  dan  belum  pernah menggunakan  aplikasi  Sistem  Perpustakaan.  Sehingga  didapatkan  sebuah  solusi  untuk  permasalahan tersebut  adalah  membuat  sebuah  media  online  alternatif  dalam  bentuk  aplikasi  website  yang  dirancang khusus  sesuai  target  calon  pengguna  yang  dapat  memfasilitasi  kebutuhan  dari  permasalahan  calon pengguna yang memanfaatkan konsep UI/UX sebagai alternatif pendekatan aplikasi agar lebih user friendly dan  benar-benar  dimanfaatkan  juga  dibutukan  oleh  calon  user  (pengguna)  yang  mengunakan  aplikasi. Berdasarkan  data  yang  didapat,  target  calon  pengguna  yang  ditentukan  adalah  staf  perpustakaan  MTs Negeri 3 Magelang yang terbiasa dalam menggunakan aplikasi webiste [15].
3. Tahap Ideate
Selanjutnya ada proses ideate, proses ini diambil dari proses empathize dan juga proses define sebelumnya. Sumber dari proses ini adalah tabel daftar kebutuhan pengguna yang telah dikumpulkan dan yang paling memungkinkan untuk dibuatkan prototype. Jadi di tahap ini lebih ke penyelesain masalah yang sudah ada [10].
4. Tahap Prototype
Pada proses tahap ideate yang dilalui sebelumnya, didapatkan hasil mengenai kerangka alur aplikasi. Dalam proses prototype dilakukan pembuatan rancangan tampilan aplikasi berbentuk low fidelity prototype. low fidelity prototype adalah tahap perancangan desain awal (sketsa awal) [14].
5. Tahap Testing
Hasil  prototype  yang  sudah  dirancang  diujikan  menggunakan  usability  testing,  yaitu  dengan  meminta partisipan  untuk  menguji  coba  prototype  secara  daring.  Lalu  partisipan  menyalurkan  kepuasan  mereka terkait prototype aplikasi menggunakan metode Single Ease Question (SEQ). Single Ease Question (SEQ) merupakan  salah  satu  metode  pengujian  yang  digunakan  untuk  mengukur  kemudahan  yang  dirasakan pengguna setelah menyelesaikan task yang diberikan. SEQ terdiri dari satu pertanyaan dengan skala likert 1 sampai 7 dari pilihan yaitu: sangat sulit, sulit, tidak mudah, cukup, tidak sulit, mudah, dan sangat mudah [16].  Berdasarkan  hasil  pengujian,  dilakukan  perhitungan  usability  untuk  mendapatkan  nilai  efektivitas, efisiensi, dan kepuasan pengguna terhadap aplikasi.
c. Tahap Penutupan
Pada  fase  akhir  penelitian,  penulis  dapat  menyusun  kesimpulan  dengan  melakukan  evaluasi  menyeluruh terhadap sistem yang telah dikembangkan. Selain itu, penelitian ini juga memberikan ruang untuk memberikan saran agar sistem web yang dibuat dapat terus berkembang di masa mendatang. Gambar 1 merupakan tahapan penelitian  yang  diterapkan  dalam  perancangan  sistem  perpustakaan  MTs  Negeri  3  Magelang,  yang  dimulai dari pendahuluan kemudian masuk ke tahap empathize, define, ideate, prototype, dan test kemudian lanjut ke tahap penutupan.

## Journal of Information System Research (JOSH)
Volume 5, No. 2, Januari 2024, pp 676−685 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i2.4654

## 3. HASIL DAN PEMBAHASAN

## 3.1 Implementasi Design Thinking

## 3.1.1 Empathize
Langkah  awal  dalam  penelitian  ini  adalah  tahap  Empathize.  Tujuan  dari  tahap  ini  adalah  untuk  memahami perasaan dan pengalaman pengguna terkait penggunaan Sistem Perpustakaan MTs Negeri 3 Magelang [8]. Tahap Emphatize adalah proses yang bertujuan untuk memahami lebih dalam mengenai tantangan yang dihadapi oleh pengguna dalam berinteraksi dengan suatu produk. Dengan pemahaman mendalam terhadap permasalahan yang dihadapi  pengguna,  dapat  dirancang  solusi  agar  pengguna  dapat  menggunakan  produk  tersebut  dengan  lebih nyaman.  Untuk  memahami  permasalahan  yang  dihadapi  oleh  pengguna,  metode  yang  digunakan  melibatkan wawancara  langsung  kepada  calon  pengguna.  Pada  tahap  Emphatize  ini,  2  responden  yang  merupakan  staf Perpustakaan MTs Negeri 3 Magelang menjadi fokus penelitian. Berdasarkan hasil wawancara, dapat disimpulkan bahwa staf Perpustakaan MTs Negeri 3 Magelang menganggap sistem pencatatan buku keluar masuk saat ini tidak efektif dan efisien. Sistem yang masih menggunakan buku menyebabkan pencatatan kurang terstruktur dan terlihat tidak  tertata  dengan  baik.  Selain  itu,  staf  juga  kesulitan  saat  melakukan  rekapan  bulanan  karena  catatan  yang tertulis  dalam  buku  sering  tidak  lengkap  atau  hilang.  Oleh  karena  itu,  diperlukan  sistem  berbasis  web  untuk mengatasi permasalahan yang terkait.

## 3.1.2 Define
Tahap kedua melibatkan penggolongan dan penganalisisan informasi yang diperoleh melalui analisis dari tahap Empathize. Hal ini dilakukan untuk memungkinkan penulis mengidentifikasi masalah utama yang dijelaskan oleh narasumber. Dengan kata lain, tahap Define membantu dalam merumuskan sudut pandang atau poin pandang dari uraian  masalah  yang  dihadapi  oleh  pengguna  terkait  Sistem  Perpustakaan  di  MTs  Negeri  3  Magelang.  [17]. Kebutuhan pengguna inilah yang nantinya dapat memudahkan dalam mengetahui apa yang dibutuhkan oleh calon pengguna.  Dengan  demikian,  proses  pengembangan  sistem  atau  aplikasi  dapat  dilakukan  dengan  lebih  mudah sesuai dengan keinginan para pengguna. Dapat dilihat pada tabel 1 ini menampilkan daftar kebutuhan pengguna dapat di lihat di bawah ini. Tabel ini merupakan kebutuhan pengguna yang telah didapat setelah peneliti melakukan wawancara terhadap calon pengguna.
Tabel 1 . Kebutuhan Pengguna No Kebutuhan Pengguna 1 Sistem perpustakaan dapat digunakan kapan dan dimana saja
2 Sistem perpustakaan dapat mempermudah pencatatan buku keluar masuk
3 Sistem perpustakaan dapat menpermudah perekapan dalam setiap bulannya
4 Peletakan menu dan fitur yang mudah dijangkau dan user friendly
Permasalahan pengguna dapat diwakilkan dalam bentuk user persona. User Persona merupakan salah satu cara atau teknik Human Computer Interaction (HCI) untuk mengumpulkan data atau informasi tentang pengguna untuk  mengetahui  karakteristik  dari  mereka.  Data  dan  informasi  ini  yang  nantinya  akan  digunakan  untuk mendefinisikan persona yang menjadi fokus pada pengembangan suatu perangkat lunak maupun sistem informasi [18].  Dapat  dilihat  pada  Gambar  2  adalah  User  persona  staf  Perpustakan  MTs  Negeri  3  Magelang.  Zulfatun Nikmah adalah seorang staf perpustakaan MTs Negeri 3 Magelang. Dikerenakannya sistem pencatatan buku yang sudah berjalan itu menggunakan pencatatan manual menggunakan buku, maka solusinya dengan pembuatan sistem informasi  perpustakaan  yang  mudah  digunakan.  Tujuannya  bisa  menggunakan  aplikasi  perpustakaan  dengan praktis, mudah dan dapat diakses, serta user friendly.
Tahap kedua melibatkan penggunaan metode “How Might We” (HMW), yang berfungsi sebagai alat untuk mengubah  masalah  menjadi  pertanyaan  [19].  Informasi  yang  diperoleh  dari  wawancara  tahap  empathize  dapat

## Journal of Information System Research (JOSH)
Volume 5, No. 2, Januari 2024, pp 676−685 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i2.4654
dijadikan dasar dalam merumuskan pertanyaan HMW. Pendekatan ini memungkinkan pengembangan solusi yang responsif terhadap permasalahan yang telah diidentifikasi. Dapat dilihat pada tabel 2 merupakan How Might We sistem perpustakaan MTs Negeri 3 Magelang.
Tabel 2. How Might We No How Might 1 Bagaimana pengguna bisa mencatat keluar masuk buku dengan terstruktur? Merancang  aplikasi  web  yang  user  friendly  untuk pencatatan buku keluar masuk 2 Bagaimana  kita  dapat  memastikan  bahwa  buku ingin dipinjam oleh anggota masih ada?
Dengan  membuat  fitur  stok  buku  yang  masih tersedia di perpustakaan 3 Bagaimana  pengguna  dapat  merekap  buku dengan mudah? Dengan  membuat  menu  laporan  secara  realtime yang dapat langsung diunduh 4 Bagaimana pengguna dapat memproses peminjaman buku dengan lebih mudah dan cepat?
Dengan membuat fitur scan barcode pada aplikasi.

## 3.1.3 Ideate
Setelah mengidentifikasi kebutuhan pengguna, langkah selanjutnya diimplementasikan dalam tahap Ideate dengan pembuatan user flow dan brainstroming. Dapat dilihat pada gambar 3 ini adalah user flow dari Sistem Perpustakaan MTs Negeri 3 Magelang. Pada user flow atau jalannya pengguna ada beberapa proses diantaranya ada halaman dashboard,  didalam  halaman  dashboard  tersebut  terdapat  jumlah  anggota,  jumlah  buku,  jumlah  peminjaman, jumlah pengembalian dan grafik jumlah pengunjung. Halaman data buku terdapat menu tambah buku, export dan daftar buku yang ada. Selanjutnya ada halaman data anggota yang terdiri dari daftar anggota dan terdapat menu tambah anggota dan export data. Kemudian ada halaman  sirkulasi, pada  halaman  ini terdapat fitur memasukan nomor ID anggota dan menu cari anggota, selanjutnya muncul data anggota yang ada, untuk peminjaman silahkan klik  menu peminjaman, didalam  menu peminjaman terdapat  fitur masukan nomer eksemplar dan ada juga  fitur scan  barcode,  setelah  memasukan  nomor  eksemplar  maka  muncul  data  buku  yang  akan  dipinjam,  jika  ingin menggunakan fitur scan barcode bisa scan barcode yang ada pada buku dan bisa langsung transaksi peminjaman buku. Terdapat juga menu pinjam saat ini di menu tersebut terdapat daftar buku yang sedang dipinjam saat ini. Kemudian ada menu pengembalian, untuk menu pengembalian hampir sama dengan menu peminjaman, setelah kita memasukan nomor eksemplar atau scan  barcode muncul data buku yang ingin dikembalikan lalu klik pada aksi kembalikan dan buku masuk ke halaman sejarah peminjaman, pada menu tersebut terdapat daftar buku yang pernah dipijam. User Flow sistem perpustakaan MTs Negeri 3 Magelang dapat dilihat pada gambar 3 berikut ini.
Gambar 3 . User Flow
Brainstorming didasarkan pada permasalahan di tahap Define. Permasalahan yang ada dikumpulkan, lalu di analisis yang kemudian dapat ditarik kesimpulan solusi paling baik untuk permasalahan sistem perpustakaan ini. Solusi yang dapat ditarik dari permasalahan sistem perpustakaan ini adalah menjadikan sistem perpustakaan konvensional menjadi sistem perpustakaan digital. Maka dibuatlah sistem perpustakaan MTs Negeri 3 Magelang berbasis web. Diharapkan ide dari solusi tersebut dapat mempermudah staf perpustakaan MTs Negeri 3 Magelang. Gambar 4 merupakan ide fitur yang ada di sistem perpustakaan MTs Negeri 3 Magelang.

## Journal of Information System Research (JOSH)
Volume 5, No. 2, Januari 2024, pp 676−685 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i2.4654
Gambar 4. Brainstroming

## 3.1.4 Prototype
Setelah  mengumpulkan  kebutuhan  pengguna,  langkah  berikutnya  diimplementasikan  dalam  tahap  prototyping dengan  membuat  desain  antarmuka  (User  Interface)  untuk  Sistem  Perpustakaan  MTs  Negeri  3  Magelang  yang langsung terkait dengan pengguna. Penulis pertama-tama  membuat desain sederhana  atau kerangka dasar  yang disebut  Low  Fidelity  Prototype.  Tahap  selanjutnya  adalah  pembuatan  rancangan  yang  bertujuan  untuk menguraikan  ide  yang telah diperoleh, dikenal  sebagai produk awal.  Wireframe High-Fidelity  merupakan  versi detail dari kerangka sederhana sebelumnya, di mana elemen tambahan seperti warna, ikon, gambar, dan sebagainya diperkenalkan.  High-Fidelity  Wireframes  menggambarkan  interaksi antar elemen dan  hirarki  visual  pada setiap halaman dengan lebih detail. Wireframe High-Fidelity digunakan secara berurutan untuk menunjukkan bagaimana tugas  tertentu  dan  alur  aplikasi  atau  produk  dapat  diselesaikan  dengan  benar  [20].  Rancangan  ini  telah  dibuat menggunakan aplikasi Figma, sebuah alat desain yang juga berfungsi sebagai prototipe untuk proyek yang sedang dikerjakan. Figma diciptakan untuk mempermudah penggunanya berkolaborasi dalam proyek, baik dalam skala individu maupun tim. Keunggulan Figma terletak pada fleksibilitasnya, memungkinkan akses oleh pengguna dan tim kapan pun diperlukan. [21]. Berikut merupakan wireframe halaman yang terdapat pada Sistem Perpustakaan MTs Negeri 3 Magelang.
1. Halaman Register
Dapat dilihat pada gambar 5, disebelah kiri terdapat gambar halaman login Low Fidelity Prototype, dan sebelah kanan merupakan halaman login High Fidelity Prototype. Halaman register dibuat untuk pengguna yang belum memiliki akun pada sistem perpustakaan MTs Negeri 3 Magelang. Pada halaman  register pengguna diminta untuk memasukkan identitas diri seperti nama, e-mail, NIP/NUPTK dan kata sandi yang akan didaftarkan.
Gambar 5. Wireframe Halaman Register
2. Halaman Login
Dapat dilihat pada gambar 6, disebelah kiri terdapat gambar halaman login Low Fidelity Prototype, dan sebelah kanan merupakan halaman login High Fidelity Prototype. Agar dapat masuk, pengguna perlu memasukan email dan password.

## Journal of Information System Research (JOSH)
3. Halaman Dashboard
Setelah pengguna berhasil masuk ke dalam Sistem Perpustakaan MTs Negeri 3 Magelang, maka akan muncul menu  dashboard.  Dapat  dilihat  pada  Gambar  7,  disebelah  kiri  terdapat  gambar  halaman  login  Low  Fidelity Prototype,  dan  sebelah  kanan  merupakan  halaman  login  High  Fidelity  Prototype.  Pada  halaman  dashboard yang baru tersebut, terdapat data jumlah anggota, jumlah buku, jumlah peminjaman, dan jumlah pengembalian, lalu terdapat grafik pengunjung perpustakaan.
Gambar 7. Wireframe Halaman Dashboard
4. Halaman Data Buku
Menu  yang  selanjutnya  pada  Sistem  Perpustakaan  MTs  Negeri  3  Magelang  adalah  menu  data  buku.  Dapat dilihat  pada  Gambar  8,  disebelah  kiri  terdapat  gambar  halaman  login  Low  Fidelity  Prototype,  dan  sebelah kanan  merupakan  halaman  login  High  Fidelity  Prototype.  Pada  halaman  data  buku,  terdapat  menu  tambah buku, export, pencarian dan daftar buku yang ada pada perpustakaan.
Gambar 8. Wireframe Halaman Data Buku
5. Halaman Data Anggota
Keanggotaan adalah menu selanjutnya pada Sistem Perpustakaan MTs Negeri 3 Magelang. Berikut merupakan tampilan halaman keanggotaan dapat dilihat pada gambar 9, disebelah kiri terdapat gambar halaman login Low Fidelity Prototype, dan sebelah kanan merupakan halaman  login High Fidelity Prototype. Pada halaman data anggota, terdapat menu tambah anggota, export, pencarian dan daftar anggota yang ada pada perpustakaan.
Gambar 9. Wireframe Halaman Data Anggota
6. Halaman Sirkulasi
Sistem Perpustakaan MTs Negeri 3 Magelang mempunyai menu sirkulasi. Fungsi menu sirkulasi pada halaman tersebut adalah sebagai tempat peminjaman dan pengembalian buku di perpustakaan MTs Negeri 3 Magelang. Dapat  dilihat  pada  Gambar  10,  disebelah  kiri  terdapat  gambar  halaman  login  Low  Fidelity  Prototype,  dan sebelah  kanan  merupakan  halaman  login  High  Fidelity  Prototype.  Terdapat  beberapa  menu  peminjaman, pinjam saat ini, pengembalian, dan sejarah peminjaman.

## Journal of Information System Research (JOSH)
Volume 5, No. 2, Januari 2024, pp 676−685 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i2.4654
Gambar 10. Wireframe Halaman Sirkulasi
7. Halaman Laporan
Sistem Perpustakaan MTs Negeri 3 Magelang mempunyai menu Laporan. Fungsi menu laporan pada halaman tersebut adalah sebagai tempat rekap peminjaman buku di perpustakaan MTs Negeri 3 Magelang. Dapat dilihat pada  Gambar  11,  disebelah  kiri  terdapat  gambar  halaman  login  Low  Fidelity  Prototype,  dan  sebelah  kanan merupakan  halaman  login  High  Fidelity  Prototype.  Pada  halaman  laporan,  terdapat  menu  export,  pencarian dan daftar laporan.

## Gambar 11. Wireframe Halaman Laporan

## 3.1.5 Testing
Fase  akhir  dalam  metode  design  thinking  adalah  melakukan  uji  coba  kepada  calon  pengguna.  Dalam  tahap pengujian ini, penulis memanfaatkan  metode usability testing dengan menerapkan Single Ease Question (SEQ). Usability testing  adalah suatu indikator kualitas  yang  menggambarkan atau menilai  seberapa  mudah antarmuka (interface)  dapat  digunakan  oleh  pengguna  [13].  Selain  itu,  tahap  pengujian  ini  juga  memiliki  tujuan  untuk memperoleh umpan balik dari responden guna  melaksanakan perbaikan pada desain  yang telah berhasil dibuat. Pada tahap usability testing, peneliti melibatkan 2 responden untuk menjalankan  prototype sesuai dengan enam skenario  yang  telah  ditetapkan  sebelumnya.  Metode  Single  Ease  Question  (SEQ)  digunakan  dalam  pengujian usability,  yang  mengukur  tingkat  kesulitan  yang  dihadapi  pengguna  dalam  menyelesaikan  skenario  yang  telah diberikan. Hasil pengujian dan nilai SEQ kemudian ditampilkan dalam Tabel 3, pada tabel Pengujian Single Ease Question  (SEQ)  dilakukan  setelah  pengguna  menyelesaikan  skenario  dengan  memberikan  penilaian  pada  skala Likert dari 1 hingga 7.
Tabel 3 . Tabel Hasil Test dan Nilai SEQ No Skenario Pertanyaan Responden Hasil SEQ Rata - Rata 1 Pengguna masuk ke dalam aplikasi Seberapa Mudah untuk Login ke dalam aplikasi YW 7 7 VD 7 2 Pengguna masuk ke dalam menu data buku Seberapa Mudah untuk masuk ke menu data buku YW 7 7 VD 7 3 Pengguna masuk ke dalam menu data anggota Seberapa Mudah untuk masuk ke menu data anggota YW 7 7 VD 7 4 Pengguna masuk ke dalam menu sirkulasi dan melakukan transaksi peminjaman ID Anggota Seberapa Mudah untuk melakukan transaksi peminjaman dengan memasukan ID Anggota YW 7 7 VD 7 5 Pengguna masuk ke dalam menu sirkulasi dan melakukan transaksi peminjaman dengan scan barcode Seberapa Mudah untuk melakukan transaksi peminjaman dengan memasukan Scan Barcode YW 6 6,5 VD 7 6 Pengguna masuk ke dalam menu laporan dan melakukan export data Seberapa Mudah untuk masuk ke dalam menu laporan dan melakukan export data YW 7 6,5 VD 6

## Journal of Information System Research (JOSH)
Volume 5, No. 2, Januari 2024, pp 676−685 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i2.4654
Pengujian Single Ease Question (SEQ) adalah metode evaluasi kegunaan suatu sistem dengan menerapkan kuesioner  pasca-skenario  atau  tugas  untuk  menilai  tingkat  kemudahan  yang  dirasakan  oleh  pengguna  setelah menyelesaikan semua skenario atau tugas yang diberikan. Evaluasi ini dilakukan dengan menggunakan skala likert yang  berkisar  antara  1  hingga  7  poin.  [22].  Penggunaan  metode  Single  Ease  Question  (SEQ)  didasarkan  pada kemampuannya menyediakan respons cepat dari responden terkait dengan kendala yang mungkin dihadapi dalam menyelesaikan  tugas.  Selain  itu,  kelebihan  lainnya  adalah  responden  cenderung  memberikan  penilaian  dengan lebih  mudah  karena  proses  penilaian  dilakukan  setelah  menyelesaikan  tugas  yang  diberikan  [23].  Single  Ease Question  (SEQ)  adalah  metode  pengujian  yang  diterapkan  setelah  pengguna  mencoba  prototype  dan menyelesaikan setiap tugas [24].
Nilai hasil dari Single Ease Question (SEQ) dapat dibagi menjadi dua kategori, yaitu nilai yang dianggap kurang atau buruk, berkisar antara 1-4, dan nilai yang dianggap baik atau berhasil, berkisar antara 5-7. Rentang nilai  ini  dijadikan  sebagai  standar  untuk  menilai  tingkat  kemudahan  suatu  produk.  Gambar  12  menampilkan persentase dari nilai Single Ease Question dengan menggunakan skala likert sebagai alat ukur tingkat keberhasilan dalam tahap pengujian. [14].
Gambar 12. Skala Likert Single Ease Question [25]
Berdasarkan hasil pengujian, nilai SEQ dalam Tabel 3 menunjukkan rata-rata nilai antara 6.5 hingga 7. Hal ini mengindikasikan bahwa perancangan ulang  User Interface dan User Experience yang telah dilakukan dinilai baik dan mampu mengatasi masalah pengguna. Meskipun nilai yang diperoleh sudah memuaskan, terdapat satu nilai  terendah  pada  saat  pengguna  menjalankan  skenario  keenam.  Penurunan  nilai  pada  skenario  keenam disebabkan  oleh  ketidakbiasaan  pengguna  dalam  melakukan  transaksi  peminjaman  dengan  menggunakan pemindaian  kode  batang  (barcode  scan).  Oleh  karena  itu,  diperlukan  penyesuaian  lebih  lanjut  untuk  mengatasi kebingungan yang dialami pengguna.

## 4. KESIMPULAN
Dari hasil penelitian mengenai perancangan User Interface dan User Experience pada Sistem Perpustakaan MTs Negeri 3 Magelang dengan menggunakan metode Design Thinking terbukti mampu mengatasi permasalahan yang dihadapi oleh pengguna. Sistem Perpustakaan baru ini telah memberikan kemudahan bagi pengguna dalam proses pencatatan. Sebelumnya, staf perpustakaan mencatat keluar masuk buku menggunakan catatan manual, sehingga kurang  praktis  dan  efisien.  Dengan  adanya  Sistem  Perpustakaan  ini,  pengguna  dapat  dengan  mudah  mencatat informasi  buku,  anggota,  peminjaman,  dan  laporan.  Hasil  dari  tahap  pengujian  dengan  menggunakan  metode Single Ease Question (SEQ) menunjukkan nilai rata-rata pada pengujian kepada dua pengguna sistem informasi ini  dengan  enam  skenario  pengetesan,  berkisar  antara  6.5  hingga  7.  Dalam  skala  Likert,  nilai  SEQ  ini  dapat dianggap sebagai nilai yang baik, menunjukkan bahwa perancangan yang telah dilakukan sudah efektif. Hal ini membuktikan bahwa perancangan Sistem Perpustakaan MTs Negeri 3 Magelang dengan metode Design Thinking menunjukkan bahwa desain yang telah dibuat layak untuk diimplementasikan sebagai sistem aplikasi web yang dapat dikembangkan di masa mendatang.

## UCAPAN TERIMAKASIH
Ucapan terimakasih tak lupa peneliti ucapkan kepada seluruh pihak yang berkontribusi dalam Menyusun penelitian yang berjudul Perancangan UI/UX Pada Sistem Perpustakaan MTs Negeri 3 Magelang Dengan Pendekatan Design Thinking. Pertama ucapan terimakasih kepada Kepala MTs Negeri 3 Magelang yang telah berkenan mengizinkan dilakukannya observasi di Perpustakaan MTs Negeri 3 Magelang untuk penelitian ini. Kedua terimakasih kepada kedua orang tua saya dan keluarga yang telah memberikan semangat dan do’a. Dan terakhir, ucapan terimakasih kepada  dosen  pembimbing,  Bapak  Agus  Setiawan,  M.Eng.  dan  Ibu  Pristi  Sukmasetya,  S.Komp., M.Kom  yang telah membimbing, mengarahkan dan memberi saran sehingga penelitian ini dapat terlaksana dengan lancar dan selesai.

## REFERENCES
[1] Y. S. Jamilah and A. C. Padmasari, “Perancangan User Interface Dan User Experience Aplikasi Say.Co”, [Online]. Available: https://ojs.unm.ac.id/tanra/

## Journal of Information System Research (JOSH)
[2] I. Rochmawati, “Analisis User Interface Situs Web Iwearup.Com,” VISUALITA, vol. 7, no. 2, pp. 31–44, Feb. 2019, doi: 10.33375/vslt.v7i2.1459.
[3] B.  Gilang  Ananta  and  I.  Vitra  Paputungan,  “Perancangan  User  Interface  dan  User  Experience  Aplikasi  Mobile Pemesanan Tukang Kangtukang Dengan Metodologi Human-Centered Design.”
[4] F.  Fernando,  “Perancangan  User  Interface  (UI)  &  User  Experience  (UX)  Aplikasi  Pencari  Indekost  Di  Kota Padangpanjang”, [Online]. Available: https://ojs.unm.ac.id/tanra/
[5] M. B. Wiryawan, “User Experience (UX) Sebagai Bagian Dari Pemikiran Desain Dalam Pendidikan Tinggi  Desain Komunikasi Visual.”
[6] S.  Rasio  Henim  and  R.  Perdana  Sari,  “Jurnal  Politeknik  Caltex  Riau  Evaluasi  User  Experience  Sistem  Informasi Akademik  Mahasiswa  pada  Perguruan  Tinggi  Menggunakan  User  Experience  Questionnaire,”  2020.  [Online]. Available: https://jurnal.pcr.ac.id/index.php/jkt/
[7] M.  Agus  Muhyidin,  M.  A.  Sulhan,  and  A.  Sevtiana,  “Perancangan  UI/UX  Aplikasi  My  Cic  Layanan  Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma,” 2020. [Online]. Available: https://my.cic.ac.id/.
[8] F. Candra Wardana and I. Gusti Lanang Putra Eka Prismana, “Perancangan Ulang UI & UX Menggunakan Metode Design Thinking Pada Aplikasi Siakadu Mahasiswa Berbasis Mobile,” JEISBI, vol. 03, p. 2022.
[9] R. Nurkhoerunisa, A. S. Mutohari, M. Ds, Y. Awalaturrohmah, and M. Pd, “Perancangan Desain Tampilan Website Perpustakaan Cinta Baca Cirebon Menggunakan Metode Design Thinking,” 2023.
[10]  T. Parama Yoga and J. Hafizh Ferdiansyah Efendi Putra, “Perancangan Prototype User Interface Dan Pengujian User Experience Aplikasi Rental Mobil Berbasis Menggunakan Metode Design Thinking ( Studi Kasus : Pt Trans Berjaya Khatulistiwa).” 2023, [Online]. Available: https://journal.fkom.uniku.ac.id/ilkom48TerakreditasiSINTA5
[11]  S. Sarahazna Ulfa, P. F.  Alam, and M.  D.  Akbar, “Analisis Dan Perancangan  User  Interface Pada Aplikasi Symbah Berbasis Mobile Menggunakan Metodelogi Design Thinking.” 2023
[12]  E. Susanti, E. Fatkhiyah, and E. Efendi, “Pengembangan UI/UX Pada Aplikasi M-Voting Menggunakan Metode Design Thinking”.
[13]  V.  K.  Reynaldi  and  N.  Setiyawati,  “Perancangan  UI/UX  Fitur  Mentor  On  Demand  Menggunakan  Metode  Design Thinking Pada Platform Pendidikan Teknologi.” 2022
[14]  Y. Febriyanto, P. Sukmasetya, and M. Maimunah, “Implementasi Design Thinking dalam Perancangan UI/UX Rumah Sampah Digital Banjarejo,” Journal of Information System Research (JOSH), vol. 4, no. 3, pp. 936–947, Apr. 2023, doi: 10.47065/josh.v4i3.3135.
[15]  M.  Ridwan  Sulistyono,  A.  Setiawan,  J.  Mayjen  Bambang  Soegeng,  K.  Mertoyudan,  K.  Magelang,  and  J.  Tengah, “Penerapan Metode Design Thinking untuk Perancangan UI/UX Sistem E-Marketplace Berbasis Website,” Journal of Information System Research, vol. 4, no. 4, pp. 1364–1376, 2023, doi: 10.47065/josh.v4i4.3534.
[16]  F.  I.  Romadhanti  and  I.  Aknuranda,  “Evaluasi  dan  Perbaikan  Desain  Antarmuka  Pengguna  Sistem  Informasi Musyawarah Masjid menggunakan Goal-Directed Design (GDD) (Studi Kasus : Masjid Ibnu Sina Jl.Veteran Malang),” 2020. [Online]. Available: http://j-ptiik.ub.ac.id
[17]  S. Nurrohmah and R. Andrian, “Mendesain Ulang Tampilan UI Website Desa Sukamukti Menggunakan Metode Design Thinking Redesigned UI Appearance Of Sukamukti Village Website Using Design Thinking Method,” Jurnal Teknologi dan Informasi, 2023, doi: 10.34010/jati.v13i1.
[18]  F. Febrianto and W. Andhika, “Penggunaan Metode User Persona dalam Upaya Penambahan Kebutuhan Fitur Learning Management System,” Jurnal Syntax Admiration, vol. 2, no. 7, pp. 1245–1256, Jul. 2021, doi: 10.46799/jsa.v2i7.274.
[19]  R.  Fahrudin  and  R.  Ilyasa,  “Perancangan  Aplikasi  ‘NUGAS’  Menggunakan  Metode  Design  Thinking  Dan  Agile Development,” 2021.
[20]  H.  Hawari,  A.  Musnansyah,  F.  Mufied,  and  A.  Anshary,  “Perancangan  Ulang  UI/UX  Website  Pengolahan  Sampah Menggunakan Metode Design Thinking (Startup XYZ)” 2023, Vol 10, No 1
[21]  R. Pramudita, R. W. Arifin, A. Nurul Alfian, and N. Safitri, “Penggunaan Aplikasi Figma Dalam Membangun UI/UX Yang Interaktif Pada Program Studi Teknik Informatika STMIK Tasikmalaya,” Shilka Dina Anwariya, vol. 3, no. 1, 2021, [Online]. Available: www.youtube.com,
[22]  M. Afwan, R. Septiana, R. Septiana, and P. Aplikasi Pemantauan Rumah Kaca Pintar Berbasis, “Perancangan Aplikasi Pemantauan  Rumah  Kaca  Pintar  Berbasis  Android,”  Jurnal  Teknik  Komputer,  vol.  1,  no.  1,  pp.  21–29,  2022,  doi: 10.14710/jtk.v1i1.34573.
[23]  D. Hasnan Hariri, H. Hannie, I. Purnamasari, and U. Singaperbangsa Karawang Abstract, “Analisis User Experience pada  Website  Waste4change  Menggunakan  Metode  Single  Ease  Question,”  Jurnal  Ilmiah  Wahana  Pendidikan,  vol. 2022, no. 13, pp. 95–108, doi: 10.5281/zenodo.6961319.
[24]  B.  K. Dewi, M.  Defriani, and M. A. Sunandar, “Design Of Health Service Mobile Application  Interface Using User Centered Design Method,” Sinkron, vol. 8, no. 1, pp. 231–240, Jan. 2023, doi: 10.33395/sinkron.v8i1.11931.
[25]  Budhi  Luhoer,  “Pengukuran  Usability  dengan  SEQ,”  2023,    https://budhiluhoer3.medium.com/pengukuran- kemudahan-dan-sikap-user-dalam-menyelesaikan-tugas-dengan-seq-5676333c221b.