Herdin Yohnes Madawara 1 , Penidas Fiodinggo Tanaem 2 , dan Dwi Hosanna Bangkalang 3
123 Universitas Kristen Satya Wacana, Kota Salatiga - Jawa Tengah
1 682018118@student.uksw.edu, 2 penidas.fiodinggo@uksw.edu,
3 dwihosanna.bangkalang@uksw.edu

## ABSTRAK
Kartu  Tanda Mahasiswa (KTM) merupakan identitas bagi mahasiswa yang telah dinyatakan aktif pada universitas serta setiap mahasiswa yang telah terdaftar pada perguruan tinggi harus memiliki nomor  induk.  Identitas  yang  terdaftar  antara  lain    nama  lengkap,  Nomor  Induk  Mahasiswa  (NIM), program studi, dan nama universitas. Melalui kondisi yang ditemui mengenai Kartu Tanda Mahasiswa (KTM) dirasa belum optimal, antara lain permasalahan dirangkum sebagai berikut 1) mengenai absensi yang dimana masih menggunakan kertas 2) layanan parkiran kampus yang dimana masih menggunakan kartu parkir 3) perlu adanya terobosan baru mengenai Kartu Tanda Mahasiswa (KTM) yang terintegrasi pada  fitur  parkir  dan  absensi.  Melalui  ulasan  sebelumnya  maka  penulis  melakukan  penelitian  yang berjudul  Perancangan  UI/UX  Aplikasi  KTM  Multifungsi  Menggunakan  Metode Design  Thinking dengan tujuan ialah merancang design aplikasi dan prototype sebagai penentuan proses design yang telah  dibuat  serta  melalui  tahapan prototype penulis  dapat  mengetahui  informasi feedback dari pengguna  (mahasiswa)  Universitas  Kristen  Satya  Wacana  (UKSW).  Metode  yang  digunakan  dari penilitian ini adalah design thinking. Design thinking memiliki 5 tahapan, antara lain empathize, define, ideate,  prototype, dan testing sehingga  awal  dari  penelitian  ini  penulis  mencari  permasalahan  dari beberapa  mahasiswa,  selanjutnya  yaitu  penentuan  topik  permasalahan  yang  akan  diangkat  sehingga menjadi solusi guna merancang sebuah perancangan design interface serta diakhir perancangan adalah uji  coba  sistem  sebagai  tahapan  akhir  dari  metode design  thinking. Kesimpulan  dari  penelitian  ini penulis  menggunakan System  Usability  Scale (SUS)  untuk  mengetahui  hasil  akhir  rata-rata  dari Perancangan UI/UX Aplikasi Multifungsi Menggunakan Metode Design Thinking yaitu 75,75 dengan demikian  pengujian prototype berhasil  atau  terbilang  baik  “B”.  Mengacu  pada  penelitian  yang  telah dilaksanakan maka perlu adanya penelitian lanjutan yang berfokus pada penerapan design aplikasi.
Kata kunci : Perancangan, UI/UX,  Kartu Tanda Mahasiswa (KTM), Design Thinking

## ABSTRACT
Student Identity Card (KTM) is an identity for students who have been declared active at the university and every student who has been registered at a university must have a registration number. The registered identities include full name, Student Identification Number (NIM), study program, and university  name.  Through  the  conditions  encountered  regarding  the  Student  Identity  Card  (KTM)  it was deemed not optimal, including the problems summarized as follows 1) regarding attendance which still  uses  paper  2)  campus  parking  services  which  still  use  parking  cards  3)  the  need  for  a  new breakthrough  regarding  the  Identity  Card  Students  (KTM)  integrated  in  parking  and  attendance features.  Through  the  previous  review,  the  author  conducted  a  study  entitled  UI/UX  Design  of Multifunctional KTM  Applications Using the Design Thinking with the aim of designing prototypes application  designs  and as a  determination  of  the design stage prototype the  author  can  find  out feedback from users (students) University Satya Wacana Christian (SWCU). The method used in this research is design thinking. Design thinking has 5 stages, including empathize, define, ideate, prototype, and testing so that at the beginning of this research the author looks for problems from several students, then determines the topic of the problem that will be raised so that it becomes a solution to designing

## PERANCANGAN UI/UX APLIKASI KTM MULTIFUNGSI MENGGUNAKAN METODE DESIGN THINKING
an interface design design and at the end of the designis a system test as the final stage of the design thinking method. The conclusion of this study is that the author uses the System Usability Scale (SUS) to determine the average final result of the UI/UX Design of Multifunctional Applications Using the Design  Thinking which  is  75.75,  thus  the prototype successful  or  fairly  good  "B".  Referring  to  the research that has been carried out, there is a need for further research that focuses on the application of application design .
Keywords : Design, UI/UX, Student Identity Card (KTM), Design Thinking

## 1. PENDAHULUAN
Kartu  Tanda  Mahasiswa  (KTM) adalah suatu tanda pengenal bagi mahasiswa  yang  telah  terdaftar  pada perguruan  tinggi.  Identitas  yang  terdapat pada  kartu  tersebut  yaitu  nama  lengkap, Nomor Induk Mahasiswa (NIM), Program Studi, dan nama Universitas serta memiliki tujuan yaitu sebagai penanda resmi seorang mahasiswa aktif. Kegunaan KTM mendukung aktifitas kampus seperti peminjaman  buku,  peminjaman  ruang kelas,  membuka  pintu  kelas,  dan  aktifitas lainnya guna mendukung layanan kampus. Melihat  kondisi  yang  terjadi  di  kalangan kampus,  penggunaan  KTM  dirasa  belum optimal  karena  belum  terintegrasi  dengan beberapa  pelayanan  dikampus  seperti: proses absensi dan sistem parkir. Permasalahan yang dialami oleh mahasiswa  mengenai  absensi  yaitu  ketika online mahasiswa  kebingungan  karena absensi  dilakukan  pada  menu  Siasat  dan Flearn  kemudian  ketika offline absensi mahasiswa  masih  manual  menggunakan kertas.  Permasalahan  lain  pada  proses pelayanan kampus terdapat pada, pelayanan parkir kampus dimana prosesnya masih menggunakan kartu parkir dan pada saat keluar area parkir kampus mahasiswa menunjukan Surat Tanda
Nomor
Kendaraan (STNK).
Oleh  sebab  itu  dari  permasalahan  di  atas maka penulis merangkum beberapa permasalahan  utama  yang  menjadi  titik fokus  dari  penelitian  ini,  antara  lain  1) perlunya  terobosan  baru  terkait  Kartu Tanda Mahasiswa (KTM) yang diintegrasikan pada fitur parkir saat masuk keluarnya  kendaraan  dan  presensi.  2)
perlunya pengembangan mengenai parkiran  kampus  guna  meminimalisir antrian  panjang  saat  pemeriksaan  Surat Tanda  Nomor  Kendaraan  (STNK),  Surat Ijin  Mengemudi  (SIM),  dan  Kartu  Parkir. 3) perlunya pengembangan terkait presensi agar  yang  dimana  dulunya  saat  proses absensi  masih  menggunakan  tulis  tangan menjadi optimal.
Pada  penelitian  berjudul  Integrasi E-KTM (Kartu Tanda Mahasiswa Elektronik) Dengan PDDIKTI Menggunakan QR- Code Berbasis Android dan dilakukan pada kampus Universitas Al- Asyariah, melalui penelitian ini mempunyai  tujuan  dalam  melakukan perancangan sistem integrasi pada E-KTM (Kartu  Tanda  Mahasiswa  Elektronik) sehingga  diharapkan  mampu  memberikan kemudahan  mahasiswa  dalam  mengakses informasi  mengenai  bukti  diri  individu riwayat  status  kuliah,  serta  riwayat  riset. Pendekatan  yang  dilaksanakan  dalam mencari informasi dari penelitian ini yaitu menggunakan  metode  kuantitatif  serta sistem  Basis Patch guna  menentukan ukuran kompleksitas logika. Aplikasi yang dirancang  memiliki  fitur  yakni  tampilan login admin sistem tampilan admin sistem memiliki enam fitur antara lain dashboard, design kartu,  edit  data,  cek  kartu, pengaturan,  tentang  dan  keluar.  Metode penelitian berawal dari investigasi masalah, menentukan  suatu  sistem  menjadikan  alat sebagai riset menulis studi dan assortment information sehingga  dari  proses  tersebut menghasilkan sebuah kerangka sistem yang dimana  bahwa  QR- Code akan  dicetak menjadi  Id- Card yang  diperoleh  dari smartphone atau PC. Output dari penelitian yang  dilaksanakan  adalah  berupa  aplikasi
yang  diintegrasikan  dengan  Kartu  Tanda Mahasiswa serta bisa diakses melalui web serta  digunakan  untuk  bekerja  dengan perakitan kartu karakter siswa[2].
Penelitian  berjudul  Analisis  dan Pengembangan Modul Presensi Mahasiswa  Berbasis  RFID  pada  Aplikasi UMB  Mobile  dengan  studi  kasus  di
Universitas  Mercu  Buana.  Permasalahan yang  dianalisis  adalah  kurangnya  sarana yang membantu dalam melakukan presensi,  selain  itu  juga  yang  menjadi masalah  utama  terdapat  pada  dosen  dan mahasiswa yaitu sering terjadi keterlambatan  waktu  saat  melakukan presensi sehingga dari permasalah tersebut maka  dilakukan  penelitian  ini  agar meminimalisir  keterlambatan  waktu  saat mencatat  kehadiran  kegiatan  perkuliahan mahasiswa.  Metode  yang  dilaksanakan yakni  analisa  SWOT,  lalu  dilakukannya perancangan  sistem  menggunakan  UML, serta pengembangan aplikasi menggunakan  metode waterfall dan testing  atau  pengujiannya  menggunakan blackbox. Sistem  kerja  dari  presensi adalah  mahasiswa  harus  terlebih  dahulu memilih  salah  satu  mata  kuliah  yang diikuti, lalu  pada  tampilan Tapping  Card mahasiswa melakukan men- tapping KTM (Kartu  Tanda  Mahasiswa)  pada  RFID Reader yang telah disediakan pada setiap kelas. Output dari penelitian ini agar dapat mengetahui serta mengembangkan sebuah modul  dari  presensi  berbasis  RFID  pada aplikasi  UMB mobile sehingga  dari penelitian yang dilaksanakan agar aktifitas perkuliahan terkhusus pada media presensi menjadi lebih efektif dan efisien, dimana mahasiswa bisa melakukan presensi  sendiri  tanpa  harus  menunggu dosen  sehingga  keterlambatan  waktu menjadikan pembelajaran untuk kedepannya[3].
Berdasarkan dari kedua jurnal yang telah dijelaskan  di  atas  bahwa  mempunyai perbedaan  dari  setiap  penulisan  terutama metode yang digunakan serta output pada setiap penulisan. Penulis mengungkapkan jurnal yang relevansi dengan penelitian ini
terdapat  pada  jurnal  pertama  yang  telah dijelaskan  sebelumnya , dimana  tahapan pelaksanaannya ialah melakukan investigasi permasalahan yang ada, selanjutnya menentukan sistem yang akan dirancang serta menjawab kebutuhan dari pengguna  sehingga  dari  proses  tersebut menghasilkan  sebuah  kerangka  sebuah sistem  untuk  dilakukannya  perancangan atau  pengembangan , selain  itu  juga penulis  pada  jurnal  pertama  harus menentukan  sebuah  kebutuhan  guna memecahkan  masalah,  dan  yang  terakhir adalah testing atau uji coba sistem, dimana tahapan  ini  menentukan  hasil  dari perancangan  sistem  yang  telah  dibuat. Namun  yang  membedakan  dari  kedua jurnal  yang  telah  dikaji  antara  lain  pada studi  kasus,  konsep  perancangan,  hingga hasil dari penelitian yang telah diselenggarakan pada setiap penulis.
Melalui  uraian  di  atas,  dibutuhkan  solusi terhadap beberapa permasalahan yang ada pada pelayanan di kampus yaitu  Aplikasi KTM Multifungsi. Aplikasi KTM
Multifungsi  mampu  memudahkan  sistem dan proses bisnis yang dirancang maupun yang sudah dijalankan, sehingga berdampak pada Kartu Tanda Mahasiswa (KTM)  Mahasiswa  Selain  sebagai  alat identitas, Kartu Tanda Mahasiswa (KTM) telah  dikembangkan  berbasis  elektronik oleh sebab itu dari penelitian ini mencoba merancang  sebuah  sistem  yang  memiliki design  user  interface (UI)  yang  lebih mudah, efektif, efisien, dan meningkatkan kepuasan bagi pengguna yang bersangkutan[1],  sehingga  penulisan  ini mampu memunculkan ide design interface aplikasi  “KTM  Multifungsi”  demi memperkenalkan Kartu Tanda Mahasiswa (KTM)  sebagai  tanda  pengenal  yang mempunyai banyak manfaat dimana Kartu Tanda  Mahasiswa  (KTM)  ini  akan beroperasi  demi  memudahkan  dalam penggunaan, serta penulisan ini bertujuan sebagai wadah dalam perancangan aplikasi  menjadi  lebih  optimal,  Kartu Tanda  Mahasiswa  (KTM)  menjadi  fokus utama  dalam  perancangan design  user
interface (UI)  aplikasi mobile ,  selain  itu sebagai penulis maupun pembaca mendapat  pengalaman  dan  pengetahuan terkait  perancangan user  interface (UI) dengan  menggunakan  metode design thinking .
Berdasarkan latar belakang tersebut  dengan  tujuan  dari  penelitian  ini adalah perancangan UI/UX aplikasi KTM Multifungsi menggunakan metode design thinking . Kartu Tanda Mahasiswa (KTM) tidak  hanya  sebagai  tanda  pengenal  atau identitas  mahasiswa  melainkan  menjadi suatu  teknologi  yang  diimplementasikan pada aplikasi mobile serta memiliki fungsi dalam membantu aktivitas dan administrasi  perkuliahan.  Perancangan user  interface (UI)  dengan  pendekatan design  thinking agar  peneliti  berpikir secara  kreatif  serta  memberikan  solusi dalam  perancangan user  interface (UI) selayaknya  seorang  desainer.  Peneliti mengharapkan  agar  perancangan  UI  dari aplikasi  “KTM  Multi  Fungsi”  dapat memecahkan masalah yang di dapat pada kampus Universitas Kristen Satya Wacana (UKSW).

## 2. METODE PENELITIAN
Penulis menggunakan metode design  thinking, metode  ini  merupakan pendekatan  dengan  memberikan  ide maupun  solusi  dalam  menangani  sebuah masalah. Design  Thinking lebih  efektif dan efisien pada saat melakukan reframing kendala  dengan  cara  berpusat pada  objek  manusia,  serta  melakukan brainstorming dan  mengadopsi  dengan cara pendekatan langsung dalam perancangan prototype dan testing. Menurut  Kelley  dan  Brown[10], Design  Thinking merupakan  metode inovasi  yang  fokus  objeknya  adalah manusia  dalam  menggunakan  alat  desain guna  mengintegrasikan  kebutuhan  orang- orang  pada  umumnya,    kemungkinan teknis,  serta  salah  satu  prosedur  demi keberhasilan  sebuah  proyek  atau  bisnis. Design  think mampu  memberikan  solusi terhadap  permasalahan  yang  dihadapi.
Tim  desainer  menjadikan  sebuah  proyek yang  akan  direncanakan  dengan  suasana kolaborasi, sehingga terciptanya terobosan serta  hasil  perancangan  yang  kompleks guna menyelesaikan permasalah yang ada. Dalam perancangan sebuah proyek dengan  demikian  bila  tim  desainer bersama-sama  menyatukan  pemangku pada  sebuah  kepentingan  perusahaan maka  komitmen  yang  ingin  dicapai menjadikan  ide-ide  serta  inovasi  dalam menjawab suatu solusi. Akan tetapi bahwa design  thinking bukan  merupakan  satu- satunya  metode  yang  berhasil  dalam menghasilkan  kolaborasi  dan  mampu menyelesaikan semua permasalahan.
Metode  ini  melibatkan  eksperimen yang  sedang  berjalan,  seperti  membuat sketsa, prototype, testing, dan mengevaluasi kerangka dan ide purwarupa. Tahapan  dari design  thinking terdapat  5 konsep,  antara  lain empathize,  define, ideate, prototype, dan test :
Gambar 1. Tahapan Perancangan
1)
Empathize (Empati) . Berawal  saat user melakukan research cara berinteraksi dengan  lingkungan,  serta  mendapatkan pemahaman  mengenai  masalah  yang didapat untuk diselesaikan. Dengan begitu diperlukannya  keterlibatan  dalam  mencari informasi  tentang  konsep  yang  menjadi acuan  melalui  pengamatan,  keterlibatan, dan  empati  dengan  orang-orang  guna mengetahui  pengalaman  serta  motivasi sehingga informasi yang diperoleh menjadi pemahaman  pribadi  mengenai  masalah yang  ada.  Selain  itu  tahapan  ini  sangat penting  dalam  melakukan  perancangan design dengan  berpusat  pada  objek manusia  serta  menjadikan  empati  sebagai proses  untuk  mendapatkan  pengetahuan tentang  pengguna  dan  juga  kebutuhan mereka.
2) Define (Penentuan)  tahapan  kedua setelah empathize adalah  menentukan sebuah  topik  permasalahan  yang  berfokus pada user dan  berdasarkan insight serta kebutuhan user dalam melakukan perancangan. Define juga  merupakan identifikasi dalam mengumpulkan informasi  selama  tahap empati,  serta  pada intinya akan dilakukan analisis dan sintesis guna menentukan inti permasalahan. Tahap define menentukan  ide-ide  yang  telah diidentifikasi  guna  membantu  desainer dalam  melakukan  perancangan design seperti  fungsi,  fitur,  icon,  dan  elemen lainnya  yang  akan  memungkinkan  untuk menyelesaikan  masalah  dengan  tingkat kesulitan minimal.
3) Ideate (Ide/Inovasi)  tahapan  ketiga dari design  thinking merupakan  proses untuk  menghasilkan  ide  yang  kreatif  pada perancangan  sebuah design, serta    dapat menyelesaikan  topik  permasalahan  pada tahap proses pertama  “ Empathize” sehingga tahap ini menghasilkan pendapat, saran, ide, masukan untuk diimplementasikan pada perancangan design.
4)
Prototype (Purwarupa) materi keempat dari metode design thinking ialah prototype atau yang biasa disebut
purwarupa dalam Bahasa Indonesia adalah konsep  awal  atau  standar  ukuran  dari sebuah model.
Prototype adalah perancangan  atau  pengembangan  sebuah software dengan  tujuan  sebagai  proses penentuan  dari design yang  telah  dibuat, sehingga  dalam  pengoperasian  aplikasi web  atau mobile terlihat  mudah  untuk dipahami.  Berbagai  macam tools dari prototype seperti  Javascript  Framework, tapi untuk penelitian ini penulis menggunakan tools Figma dalam melaksanakan perancangan jangka pendek. Hasil dari prototype dalam pengujian dapat dilakukan dalam tim maupun perorangan.
5)
Test (testing/uji coba) tahap terakhir yaitu  pengujian  dari prototype, dimana penulis akan mengujikan kepada
mahasiswa  yang  dipilih  secara  acak berjumlah  6  orang.  Pengujian prototype
dengan tujuan agar mendapat feedback dari pengguna  atau  biasa  disebut  juga  umpan balik, dengan demikian dari hasil pengujian guna  menjawab  dalam  penempatan  fitur, struktur  warna,  dan  alur  tampilan desain aplikasi.  Selain  itu  melalui  pengujian prototipe dapat  mengevaluasi  rancangan desain serta solusi dengan menginformasikan konsep dari user interface.

## 3. HASIL DAN PEMBAHASAN Empathize
Pembahasan  pada  tahap  awal perancangan design thinking yaitu empathize. Tahap empathize penulis melakukan analisa kebutuhan dari pengguna  berupa  saran  dan  masukan melalui  wawancara  mengenai  situasi  dan kondisi  dari  permasalahan  pada  aktivitas kampus  yang  menjadikan  acuan  guna mengetahui  kebutuhan  pengguna  untuk dievaluasi  dalam  menyelesaikan  masalah. Pada  dasarnya empathize dari  beberapa mahasiswa  Universitas  Kristen  Satya Wacana  (UKSW)  serta  teman  dekat terhadap penggunaan Kartu Tanda Mahasiswa  (KTM)  pada  pelayanan  di kampus. Hasil dari wawancara dari proses empathize sebagai berikut.

## Tabel 1
Tahap Empathize Hasil Wawancara No Hasil Temuan Riset Sumber 1 Presensi perkuliahan online melalui Siasat, Flearn, dan media pendukung lainnya Wawan cara 2 Presensi perkuliahan offline menggunakan kertas dan tulis tangan Wawan cara 3 Pelayanan Klinik kampus saat melakukan pendataan mahasiswa masih menggunakan tulis tangan atau teks Wawan cara
4 Kartu Tanda Mahasiswa (KTM) saat ini belum bisa digunakan untuk peminjaman buku secara otomatis Wawan cara 5 Masuk keluarnya kendaraan biasa terjadi antrian yang panjang pada area parkir Wawan cara 6 Pendaftaran kegiatan kampus saat ini sering menggunakan google form sehingga belum ada teroboson baru yang dimana dengan KTM mahasiswa sudah bisa melakukan pendaftaran Wawan cara 7 Kartu Tanda Mahasiswa (KTM) saat ini belum bisa digunakan untuk uang elektronik Studi Literatu r[11] 8 Belum adanya Kartu Tanda Mahasiswa (KTM) sebagai alat pendataan jika mahasiswa ingin melakukan bon pada kantin, cafe, dan toko mini market Studi Literatu r[12] 9 Kartu Tanda Mahasiswa (KTM) belum terintegrasi pada toko mini market berupa diskon harga Studi Literatu r[13] Para  tahapan  emphatize  dimana penulis  mencari  sebuah  permasalahan yang akan dikelompokkan dengan
mengidentifikasi calon pengguna (mahasiswa), dengan membuat pertanyaan yang akan dilontarkan langsung pada saat wawancara.
Selanjutnya
adalah pengelompokan  serta  menentukan  salah satu  kategori  pengguna  yang  terdiri  dari persona  pengguna.  Tersebut  dapat  dilihat dalam  Gambar  4, empathy  map dapat dilihat  pada  Tabel  1,  dan pain  points dilihat pada Tabel 2.
Gambar 2. Persona Pengguna (Mahasiswa)
Tabel 2 Empathy Maps dari Pengguna
Says Belum secara detail KTM diintegrasikan pada fitur-fitur tertentu, seperti peminjaman buku, pembayaran uang kuliah, area parkir, presensi, dan informasi diri secara detail. Ingin mengurangi antrian kendaraan keluar masuk area parkir  kampus
Ingin meminimalisir kehilangan karcis kendaraan Ingin menanggapi presensi yang masih menggunakan kertas Suka menggunakan sistem yang telah berjalan karena belum pernah mengalami hal buruk Thinks Apakah ada sistem untuk menunjang permasalahan tersebut?
Apa dengan adanya sistem tersebut, aktivitas kampus menjadi lebih efektif dan efisien? Bagaimana jika saya belum mengerti sistem yang akan dibangun? Apa keuntungan buat saya jika ada sistem ini? Does Mencari platform atau sarana untuk menampung serta
menyuarakan aspirasi mahasiswa Mencari informasi
penggunaan KTM yang terintegrasi menjadi kartu Elektronik Menggunakan sistem yang ada secara bertanggung jawab Feels Khawatir Bingung Tidak sabar

## Define
Selanjutnya  pada  tahapan define merupakan tahapan pengerucut dari proses empathize ,  tahapan define sama  halnya dengan How  Might  We (HMW)  dengan pengertian  adalah  cara  untuk  mengubah suatu  masalah  menjadi  pertanyaan,  dalam arti  masalah  yang  dapat  diselesaikan. Tahapan define juga  mengarahkan  penulis kepada insight dan  menjawab  dari kebutuhan user serta  mengelola  informasi yang  didapat  dari  tahapan empathize. Berikut Pain  Points dari  pengguna  dapat dilihat pada Tabel 3 .
Tabel 3
Pain Points dari Pengguna
N0 Pain Points Pengguna 1 Mahasiswa ingin memiliki KTM yang dapat terintegrasikan dengan fitur parkir dan presensi
2 Mahasiswa ingin adanya terobosan baru untuk menangani presensi yang masih menggunakan tulis tangan.
3 Mahasiswa ingin adanya
pengembangan mengenai presensi online.
4 Mahasiswa tidak ingin antrian panjang saat pemerikasaan STNK,SIM, dan kartu parkir
5 Mahasiswa ragu akan terjadinya kehilangan data pribadi saat menggunakan aplikasi tersebut.
6 Mahasiswa khawatir akan kehilangan kartu parkir
Melalui  tahapan pain  point, maka selanjutnya  adalah how  might  we. Proses how  might  we ditentukan  dari  hasil penyusunan pain point, oleh sebab itu how might  we menentukan  permasalahan  yang paling  tepat  guna  menentukan  sebuah perancangan design .  Hasil how  might  we dapat dilihat pada tabel berikut.
Tabel 4 How Might We
N0 Pain Points Pengguna
1 Bagaimana agar dapat membuat KTM terintegrasi dengan sistem pelayanan parkir?
2 Bagaimana agar dapat membuat KTM terintegrasi dengan sistem absensi?
3 Bagaimana meningkatkan keamanan data pada perancangan ini?
4 Membuat perancangan dimana sistem yang akan dirancang terintegrasi dengan siasat kampus 5 Membuat fitur agar bisa melakukan absensi secara terintegrasi baik online maupun offline 6 Membantu petugas parkir dalam mengelola sistem parkir di kampus

## Identifikasi Solusi (Ideate)
Proses ideate merupakan  tahapan dalam  menentukan  sebuah  ide  sehingga dapat  menyelesaikan  masalah  pada  proses tahapan  sebelumnya.  Dengan  demikian dari  proses ideate penulis  mendapatkan solusi  untuk  menjawab  persoalan  yang terjadi,  seperti  Kartu  Tanda  Mahasiswa (KTM)  yang  terintegrasi  pada  fitur  pada sistem yang dirancang serta masih terbilang belum  secara  maksimal  dipergunakan. Dengan  begitu  penulis  mengelompokkan solusi  guna  membangun  perancangan design  user  interface ,  berikut  proses  dari ideate.
Solution  Idea :  pada  tahapan  ini penulis  merangkum  fitur - fitur  yang  akan dilakukannya  perancangan design aplikasi mobile serta keterangan spesifikasi kebutuhan  dari  pengguna  (mahasiswa) sehingga  menjadikan  tahapan  tersebut menjadi  proses  awal  dari ideate  design thinking .  Fitur  yang  dimaksud  antara  lain login, beranda,  profil,  menambahkan  data absensi  dan  parkir,  notifikasi,  kalender, logout . Selain itu juga solusi mendasar dari sebuah  perancangan  ini  guna  mengakses sebuah  data  yaitu  API Gateway. API
Gateway menjadi  peran  penting  dalam perancangan  ini,  dimana  fungsi  API Gateway merupakan  “pintu  depan”  bagi aplikasi  untuk  mengakses  informasi  data login mahasiswa  (KEY->  NIM)  sehingga pengguna  (mahasiswa)  saat  melakukan login pada  aplikasi  hanya  menggunakan nama dan NIM. Data yang diakses berupa nama,  nim,  tanggal  lahir,  dan  alamat melalui  sistem  SIASAT(Sistem  Informasi Akademik) kampus yang bertindak sebagai routing  request dari  permintaan  ( request ) pengguna  ke service [14] . Tabel  dari solution idea dapat dilihat sebagai berikut .
Tabel 5 Solution Idea Fitur Spesifikasi Kebutuhan Login Mahasiswa dapat masuk melalui akun yang terintegrasi dengan sistem SIASAT Beranda Mahasiswa dapat melihat fitur absensi dan parkir guna melengkapi data diri serta melakukan chech-in dan check-out Profil Mahasiswa dapat mengubah data diri, ubah password, tentang kami, pertanyaan umum, dan keluar dari akun Menambahk an data Absensi Mahasiswa dapat melihat tampilan data pribadi untuk diperlukan saat melakukan presensi Menambahk an data Parkir Mahasiswa dapat melihat tampilan data pribadi, seperti halnya data STNK Notifikasi Mahasiswa dapat melihat pemberitahuan dari design aplikasi Kalender Mahasiswa dapat melihat kalender sebagai alarm bila adanya jadwal untuk melakukan presensi kehadiran kelas Logout Mahasiswa dapat kembali ke halaman Registrasi/Login Use  Case  Diagram : perancangan prototype dari design  user  interface aplikasi mobile KTM Multifungsi diimplementasikan pada \use case diagram guna  mempresentasikan  interaksi actor dengan use case secara terstruktur serta alur dari perancangan. Terlihat pada gambar di bawah  ini  terdapat use  diagram  scan QR Code . Pada Gambar 3 menjelaskan tentang alur Scan QR Code , dimana proses tersebut terlebih  dahulu  memilih  salah  satu  fitur sesuai  dengan  kebutuhan  yang  akan digunakan  (Parkir/Absensi).  Akan  tetapi dari  kedua  fitur  tersebut  mempunyai perbedaan,  yaitu  pada  fitur scan parkir pengguna  harus  melakukan check-out bila pengguna keluar dari area parkir, sebaliknya jika fitur scan absensi pengguna hanya sampai tahap check-in.
Gambar 4. Flowchart Scan QR Code

## Wireframe
Perancangan design awal  guna terciptanya  suatu  produk  yang  baik  maka penggunaan wireframe disebut kunci utama bagi  desainer  untuk  melakukan design. Pada  tahap wireframe juga  merupakan tahapan  dalam  mengurangi  terjadinya kesalahan  saat design, sehingga  kerangka design awal  antarmuka  pengguna  lebih terstruktur.  Dengan  demikian  penulis membuat  sketsa  agar  pada  proses design user  interface menjadi  lebih  kreatif  serta interaktif prototype dan design akhir  dari perancangan yang dilaksanakan.
Pada  Gambar  4,  menjelaskan tentang  tampilan  dari login .  Untuk
melakukan login ada dua opsi yang harus di pilih antara lain menggunakan “NIM” atau “Email Student”, setelah itu klik “ Login ”.
Gambar 4. Tampilan Wireframe Registrasi
Pada  dari  Gambar  5,  berisikan tampilan  dari  fitur  “ Scan QR  Code, Absensi,  Parkir”.  Melihat  pada  gambar sebelah  kanan  adalah  tampilan  halaman beranda  setelah  melakukan Check-in sedangkan  tampilan  halaman  sebelah  kiri ialah  sebelum  melakukan Check-in serta yang  membedakan  adalah  pada  fitur abesnsi hanya melakukan check-in sebaliknya  fitur  parkir  harus  keduanya ialah  proses check-in dan check-out bila keluar dari area parkir.
Gambar 5. Tampilan Wireframe Beranda
Pada Gambar  6, menjelaskan tentang fitur pada Absensi yang letaknya pada halaman “Beranda”. Sebelum mengoperasikan fitur tersebut,  terlebih  dahulu  melengkapi  data diri dengan cara mengklik tulisan berwarna biru  sehingga  sistem  akan  mengarahkan
pada  tampilan  pengisian  data  atau  terlihat di sebelah kanan gambar.
Gambar 6. Tampilan Wireframe Fitur

## Absensi
Pada Gambar 7, berisikan tentang mengisi data diri guna untuk mengoperasikan fitur “Parkir”,  selain  dari  itu  sistem  akan mengarahkan  untuk  mengunggah  STNK Kendaraan.  Pada  gambar  di  atas  akan terlihat  sebelum  dan  sesudah  unggah STNK Kendaraan.
Gambar 7. Tampilan Wireframe Fitur Parkir
Berdasarkan Gambar 8, menjelaskan alur Scan QR Code . Pada tampilan halaman “Beranda”  memiliki  fitur  “ Scan ”,  setelah mengklik  fiur  tersebut  akan  menampilkan seperti gambar di atas, setelah itu konfirmasi untuk  mengaktifkan  kamera  sehingga  akan menampilkan  “Pilihan  Opsi  (Absensi  dan Parkir)” lalu centang sesuai keperluan scan.

## Gambar 8. Tampilan Wireframe Scan
Pada  Gambar  9,  berisikan  Nama dan  NIM  serta  Foto  Profil,  lalu  ke  bagian bawah ada QR Code guna menyimpan Data Diri, selanjutnya di tampilan halaman profil memiliki  fitur  “Pertanyaan  Umum, Tentang  Aplikasi,  Akun  &  Keamanan, Pengaturan”  dan  yang  terakhir  ialah  fitur Log-Out atau keluar akun.
Gambar 9. Tampilan Wireframe Profil

## Prototype
Tahapan selanjutnya adalah prototype yang dimana proses sebelumnya mencari  solusi  serta  kebutuhan  dari pengguna,  dalam  hal  ini  pengguna  dari perancangan  UI/UX  adalah  mahasiswa
Universitas Kristen Satya Wacana (UKSW).  Melalui  perancangan prototype agar memudahkan pengguna dalam mengoperasikan design  interface yang dapat  dievaluasi  pada  tahapan  uji  coba. Proses prototype juga merupakan interaksi pengguna  terhadap  sistem  yang  dirancang sehingga bertujuan agar mengetahui informasi respon mengenai design aplikasi. Dijelaskan  bahwa  pada  Gambar  10
merupakan alur proses login pada aplikasi, selanjutnya pada Gambar 11 dan 12 adalah tahapan  dimana  pengguna  menambahkan data,  berikutnya  pada  Gambar  13  dan  14 yaitu  proses check-in dan check-out ,  dan yang  terakhir  pada  gambar  15  yaitu tampilan  profil  serta  proses  pengguna melakukan log-out.
Register – Beranda
Gambar 10. Prototype Registrasi – Beranda
Menambahkan Data Absensi
Gambar 11. Data Absensi
Menambahkan Data Parkir Gambar 12. Data Parkir
Check-in
Gambar 13. Proses Check-in

## Check-out
Gambar 14. Proses Check-out
Profil - Logout
Gambar 15. Proses Logout
Pengujian Prototype Usability Menggunakan System Usability Scale (Testing)
System  Usability (SUS)  adalah pengujian  dengan  tahapan  kuesioner  yang digunakan guna mengukur usability system komputer menurut sudut pandang subyektif pengguna.  SUS  dikembangkan  oleh  John Brooke  sejak  tahun  1986[15].  Pada  tahap pengujian prototype aplikasi  KTM  Multi Fungsi,  peneliti  menggunakan  pengujian System Usability Scale (SUS) sebagai alat tolak  ukur  dari  perancangan design yang telah dilaksanakan. System Usability Scale (SUS)  merupakan  salah  satu  pengujian menggunakan  kuesioner  untuk  mengukur persepsi kegunaan. System Usability Scale (SUS) mempunyai 10 pertanyaan dengan 5 skala  ( strongly  disagree  –  strongly agree )[16].  Responden  akan  menjawab sesuai  pertanyaan  yang  telah  tercantum dalam kuesioner setelah responden mencoba Usability testing,  sehingga  hasil dari pengujian dapat diketahui kebergunaan produk  atau  fitur  yang  telah  dirancang.
Fitur-fitur yang akan dicoba oleh responden antara lain, fitur register/login ke beranda, fitur check-in dan check-out, serta fitur absensi dan parkir.
Gambar 16. Question Usability Testing
Pada  proses  pengujian prototype dari design aplikasi mobile KTM Multi Fungsi, penulis  melakukannya  secara  langsung  ke kampus Universitas Kristen Satya Wacana (UKSW)  serta  dalam  pengujian prototype penulis  juga  memberikan  penjelasan mengenai topik dan keperluan dari uji coba prototype. Dalam  hal  ini  agar  pengguna dapat  memahami  konsep  dasar  dari prototype yang telah dirancang, lalu setelah melakukan  pengujian  penulis  memberikan kuesioner  guna  mengetahui feedback dari setiap  pengguna  yang  telah  melaksanakan pengujian. Berikut dokumentasi pengujiannya.
Gambar 17. Dokumentasi Pelaksanaan Pengujian
Dari  hasil  kuesioner  yang  didapat  dari responden  yang  berjumlah  10  responden sehingga dalam perhitungan System
Usability
Scale (SUS) penulis
menggunakan Microsoft Excel. Pada setiap
pertanyaan  bernomor  ganjil,  dikurangi  1 dari skor (X-1) sedangkan pertanyaan yang bernomor genap, dikurangi nilainya dari 5 (5-X).  Rumusnya  dapat  dilihat  pada gambar di bawah ini.
Gambar 18. Rumus Mencari Nilai Raw
System Usability Scale (SUS)
Selanjutnya  bila  telah  mendapatkan  hasil dari  nilai Raw System  Usability  Scale (SUS),  maka  akan  dilakukan  perhitungan nilai  akhir  dari Raw SUS score yang sebelumnya  telah  dihitung  dengan  cara mengalikan  2,5  pada  hasil  nilai Raw SUS score. Berikut hasil dari perhitungan akhir, dapat dilihat dari tabel di bawah ini.
Tabel 6
Hasil Akhir System Usability Scale (SUS)
N o Alamat Email Nama Lengkap NIM Progra m Studi Umur
Kuesioner SUS Total
Nilai SUS
Q
1 Q 2 Q 3 Q 4 Q 5 Q 6 Q 7 Q 8 Q 9 Q 10 1 562020009@stude nt.uksw.edu Sandi Prasetyo Putra Ariyanto 56202000 9 D3 Teknik Informa tika
Di bawah 20 Tahun 4 1 5 2 5 1 5 1 4 2 36 90 2 72018349@studen t.uksw.edu Soni Sampari Raweyai 67201834 9 TI 21 - 25 Tahun 5 2 5 2 5 4 5 1 4 5 30 75 3 682018159@stude nt.uksw.edu Brian Efata Tuflasa 68201815 9 S1 SISTEM INFOR
MASI 21 - 25 Tahun 5 1 5 2 4 2 5 1 5 3 35 87,5 4 geraldkoroh@gm ail.com Gerald Given Cevy Koroh 68201813 2 S1 Sistem Informa si
21 - 25 Tahun 5 1 5 3 4 2 4 1 4 2 33 82,5
5 232020093@stude nt.uksw.edu Joshua Tunggul Handoko Simanjuntak 23202009 3 Akuntas i 21 - 25
Tahun 5 3 4 3 5 5 5 4 5 3 26 65 6 462018036 Kristianus Doni Putra Marandof 46201803 6 Ilmu Kepera watan 21 - 25 Tahun 4 4 4 4 4 4 4 4 4 4 20 50 7 682018196@stude nt.uksw.edu Marcho Tumbade 68201819 6 S1 Sistem Informa si 21 - 25
Tahun 5 1 5 1 5 1 5 1 5 1 40 100 8 702019710@stude nt.uksw.edu Otoi Narek 70201971 0 S1 PTIK 21 - 25 Tahun 4 1 5 2 5 1 4 1 4 2 35 87,5
9 672018292@stude nt.uksw.edu Yunus yustus Runggiary 67201829 2 Teknik Informa si 21 - 25 Tahun 5 3 4 3 4 3 3 2 3 4 24 60 1
0 672018107@stude nt.uksw.edu Trivandi marcelino allouw 67201810 7 Teknik informat ika 21 - 25 Tahun 4 3 4 3 4 3 4 3 4 4 24 60
Skor Rata-rata (Hasil Akhir SUS)
75,75
Berikut hasil akhir akhir dari
perhitungan  nilai  akhir System  Usability Scale (SUS), yang dimana perhitungan rata- rata  dari  nilai  akhir  SUS.  Nilai  rata-rata didapatkan melalui penjumlahan nilai akhir SUS  lalu  dibagi  dari  jumlah  responden, sehingga  mendapatkan  hasil  nilai  rata-rata 75,75.  Dengan  demikian  maka  nilai  dari pengujian SUS termasuk dalam kategori B atau  terbilang  baik.  Berikut  gambar  skala SUS di bawah ini.
Gambar 23. Skala Sytem Usability Scale (SUS)
Pada  proses  pengujian prototype dari design user interface aplikasi mobile KTM Multifungsi masih terdapat feedback berupa saran  dan  masukan  dari  pengguna  untuk dievaluasi.  Komponennya  antara  lain  pada fitur beranda, penambahan fitur peminjaman  buku,  fitur  infor  seputar fakultas,  fitur  scan  (Absensi  dan  Parkir), penyimpanan data, dan yang terakhir adalah fitur  kalender.  Berikut  tabel feedback dari pengguna.
Tabel 7 Feedback Pengguna Fitur/Kompone n
Saran dan Masukan
Kesimpula n Fitur Beranda Halaman tambahkan fitur yang menarik seperti laporan administrasi/pembayaran uang kuliah, lalu menyarankan tentang info seputar kampus (beasiswa, tentang perkuliahan, aktifitas kampus seperti yang sekarang ini seperti vaksinasi) Evaluasi Fitur Peminjaman Buku Menyarankan agar fitur peminjaman buku dioperasikan serta mengetahui posisi letak buku pada perpustakaan Evaluasi
Fitur Info Seputar Fakultas Menyarankan untuk menambahkan info tentang penjelasan dasar fakultas, dimana saat mahasiswa baru ingin mengetahui pengajaran dan kurikulum pada fakultas yang ingin dipilih. Evaluasi Fitur Scan (Absensi &
Parkir) Fitur telah berjalan sesuai perencanaan Diterima Fitur Penyimpanan Data Fitur telah diterapkan sesuai saran dan masukan yaitu mengupload foto STNK guna mengoperasikan parkir kendaraan Diterima Fitur Kalender Fitur telah diterapkan sesuai saran dan masukan guna saat melakukan absen memberi notifikasi atau alarm Diterima

## 4. KESIMPULAN
Berdasarkan  penelitian  yang  telah dilakukan  dari  perancangan design user interface aplikasi mobile KTM  Multi  Fungsi, penulis  menyimpulkan  bahwa  hasil  dari prototype aplikasi mobile KTM  Multi  Fungsi dengan  metode design  thinking menjadi perancangan yang bergerak di bidang teknologi terkhususnya  pada  rancangan user  interface (UI)  dan prototype ,  seperti  fungsi  fitur  parkir dan absensi, check-in, check-out, fitur beranda, kalender,  notifikasi,  profil,  dan logout .  Penulis melakukan perancangan prototype pada penelitian  ini  dengan  pendekatan design thinking dapat memudahkan pengguna memberikan feedback berupa kritik, saran, dan masukan  agar  menghasilkan design  user interface (UI) dan prototype yang optimal serta mengatasi permasalahan mengenai Kartu Tanda Mahasiswa  (KTM)  tidak  hanya  sebagai  kartu tanda  pengenal  mahasiswa  akan  tetapi  dapat digunakan  dalam  beberapa  proses  administrasi lainnya.
Pada tahap pengujian penulis menggunakan System  Usability  Scale (SUS) dengan  terjun  langsung  ke  lapangan  guna menguji perancangan prototype kepada mahasiswa  secara random berjumlah  10 responden , dimana  pada  uji usability dengan menggunakan  SUS  dapat  disimpulkan  bahwa dari perhitungan hasil akhir rata-rata nilai SUS yaitu  75,75 , dengan  demikian  pengujian
prototype berhasil  namun  masih  terdapat evaluasi dari pengguna terkait fitur pada design user  interface .  Dari  hasil  pengujian  yang dilakukan penulis menyimpulkan secara keseluruhan  bahwa  perancangan design  user interface aplikasi mobile KTM  Multifungsi dapat dipahami secara seksama dari hasil  yang didapat  serta  terbilang  baik  atau  “B”  sesuai perhitungan  hasil  rata-rata,  akan  tetapi  masih terdapat  pengguna  yang  kebingungan  dalam mengoperasi prototype sehingga  pengguna harus belajar lebih lanjut lagi tentang tools pada Figma  dan tools  prototype lainnya.  Melalui penelitian  ini,  menjadikan  pengalaman  dalam bidang design dan prototype ,  tidak  hanya  itu penulis  mampu  memberikan  pemahaman mengenai prototype sehingga  pengguna  juga mendapatkan  wawasan  serta ilmu  dasar design dan prototype.
Mengacu pada kesimpulan di atas, maka perlu  dilakukan  penelitian  lanjut  yang  lebih berfokus pada pengembangan :
1. Implementasi pada web dan desktop.
2. Penelitian  lanjut  berfokus  pada  pengembangan fitur-fitur sesuai kebutuhan dan permasalahan.
3. Melakukan  analisis  berbasis  kualitatif  dan kuantitatif  guna  mengetahui  kekurangan  dan permasalahan dari aplikasi ini.
4. Tracking  chip guna  mendeteksi  kartu  melalui mobile  app, penerapan  sistem  tersebut  bila pengguna kehilangan kartu.

## DAFTAR PUSTAKA
[1] M. D. Ariawan, A. Triayudi, and I. D.

## Sholihati, “Perancangan User Interface
Design dan User Experience Mobile Responsive Pada Website Perusahaan,”
J. Media Inform. Budidarma , vol. 4, no.
1, p. 161, 2020, doi:
10.30865/mib.v4i1.1896.
[2] P. Pualinggi, M. Sarjan, and A. Kahpi, “Integrasi E-Ktm ( Kartu Tanda
Mahasiswa Elektronik ) Dengan Pddikti Menggunakan Qr-Code Berbasis Android,” J. Peqguruang Conf. Ser. , vol.
3, no. 1, p. 396, 2021, doi:
10.35329/jp.v3i1.2109.
[3] I. Ranggadara, W. Pratama, and D. B. Rahmawati, “Analisa dan Pengembangan Modul Berbasis RFID pada Aplikasi UMB Mobile,” J. Ilm. FIFO , vol. 11, no. 2, p. 119, 2019, doi: 10.22441/fifo.2019.v11i2.002.
[4] S. Mulyatun, A. Faisal Choirul I, A.
Rizki S, M. Andhara C, and I. Rafika N, “Efesiensi Penerapan Sistem Pendukung pada Lahan Parkir dengan Memanfaatkan RFID (Radio Frequency Identification) pada Kartu Tanda Mahasiswa,” Intechno J. , vol. 1, no. 2,
2019.
[5] R. Ramadan, A.-Z. H. Muslimah, and R. I. Rokhmawati, “Perancangan User
Interface Aplikasi EzyPay menggunakan Metode Design Sprint (Studi Kasus PT. Arta Elektronik Indonesia),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. Univ. Brawijaya , vol. 3, no. 9, pp. 8831– 8840, 2019.
[6] M. A. Muhyidin, M. A. Sulhan, and A. Sevtiana, “Perancangan Ui/Ux Aplikasi
My Cic Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma,” J. Digit , vol. 10, no. 2, p. 208, 2020, doi: 10.51920/jd.v10i2.171.
[7] Rully Pramudita, Rita Wahyuni Arifin, Ari Nurul Alfian, Nadya Safitri, and
Shilka Dina Anwariya, “Penggunaan
Aplikasi Figma Dalam Membangun Ui/Ux Yang Interaktif Pada Program Studi Teknik Informatika Stmik Tasikmalaya,” J. Buana Pengabdi. , vol.
3, no. 1, pp. 149–154, 2021, doi:
10.36805/jurnalbuanapengabdian.v3i1.1 542.
[8] H. Asnal, Junadhi, M. Jamaris,
Mardainis, and Y. Irawan, “Workshop UI/UX Design dan Prototyping Dengan Figma di SMK Taruna Masmur Pekanbaru,” J-PEMAS STMIK Amik Riau , vol. 3(1), no. 2722 – 5143, pp. 17– 23, 2022.
[9] R. Puspita, “Pengembangan Prototipe

## Aplikasi Community Aggregator
Beskem dengan Pendekatan UCD Menggunakan Balsamiq Mockup dan Figma,” Univ. Islam Negeri Syarif Hidayatullah , p. 189, 2020.
[10]  M. L. Lazuardi and I. Sukoco, “Design Thinking David Kelley & Tim Brown: Otak Dibalik Penciptaan Aplikasi
Gojek,” Organum J. Saintifik Manaj. dan Akunt. , vol. 2, no. 1, pp. 1–11, 2019,
doi: 10.35138/organum.v2i1.51.
[11]  T. Akhir, “Mahasiswa Berbasis Kartu Tanda Mahasiswa Elektronik ( E-Ktm )
Menggunakan Radio Frequency
Identification ( Rfid ),” 2018.
[12]  P. K. N. Stan, “Analisis kebutuhan ktm
yang terintegrasi berbagai fitur di kampus pkn stan,” vol. 3, no. 17, 2016.
[13]  Admin anakUI.com, “Saatnya Kamu
Nikmati Kesaktian Kartu Mahasiswa yang Satu Ini!,” anakui.com , 2016. https://www.anakui.com/saatnya-kamu- nikmati-kesaktian-kartu-mahasiswa- yang-satu-ini/
[14]  M. N. Js, “SURAT UNIT KEGIATAN MAHASISWA INFORMATIKA DAN KOMPUTER,” no. September, pp. 71–
80, 2019.
[15]  J. Brooke, “SUS : A Retrospective,” no. January 2013, 2020.
[16]  T. Yuliyana, I. K. R. Arthana, and K. Agustini, “Usability Testing pada Aplikasi POTWIS,” JST (Jurnal Sains dan Teknol. , vol. 8, no. 1, pp. 12–22, 2019, doi: 10.23887/jstundiksha.v8i1.12081.