## Perancangan UI/UX  Aplikasi Kos Klaten  di Kawasan Universitas Widya Dharma Klaten menggunakan Figma

## UI/UX Design for the Klaten Boarding House Application in the Widya Dharma University Klaten Area using Figma
Lija Santia Mahulae*
Program Studi Sistem Informasi, Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Jalan Diponegoro No.56-60, Salatiga, Kec.Sidorejo, Kota Salatiga, Jawa Tengah 50711, Indonesia *e-mail: 682019148@student.uksw.ed u
( received : 8 Mei 2023, revised : 10 Mei 2023, accepted : 12 Mei 2023)

## Abstrak
Mencari  kos  sudah  menjadi  suatu  hal  yang  sering  dipermasalahkan  oleh  kalangan  mahasiswa terkhusus  mahasiswa  baru  yang  datang  dari  luar  daerah  sekitar  Universitas.  Ketersediaan  informasi yang sangat terbatas dapat menyebabkan masyarakat kesulitan saat melakukan pencarian kos. Tujuan penelitian ini menghasilkan desain UI/UX prototype aplikasi Kos Klaten dimana akan menampilkan informasi  relevan  dan  akurat  mengenai  lokasi  rumah  kos,  informasi  fasilitas  kos,  biaya  serta  dapat melakukan  pemesanan  rumah  kos  tersebut.  Daerah  yang  akan  dijadikan  sebagai  tempat  penelitian adalah  rumah  kos  sekitar  Universitas  Widya  Dharma  Klaten.  Dalam  perancangan  desain  UI/UX prototype  aplikasi  Kos  Klaten  ini  dibuat  semenarik  mungkin  dengan  penggunaan  software  editing Figma.  Teknik  pengumpulan  data  yang  dilakukan  penulis  adalah  wawancara,  observasi  dan  studi pustaka. Dengan sistem ini diharapkan  memudahkan pencarian kos sesuai keinginan serta membantu pemilik kos untuk untuk mempromosikan rumah kos secara online.
Kata kunci: UI/UX, Prototype,Aplikasi, FIGMA.

## Abstract
Looking  for  boarding  houses  has  become  something  that  is  often  questioned  by  students,  especially new students who come from outside the area around the University. The very limited availability of information  can  cause  difficulties  for  the  community  when  searching  for  boarding  houses.  The purpose  of  this  study  was  to  produce  a  UI/UX  design  prototype  for  the  Klaten  Boarding  House application which will display relevant and accurate information about the location of the boarding house, information on boarding facilities, costs and can place an order for the boarding house. The area  that  will  be  used  as  a  research  location  is  a  boarding  house  around  Widya  Dharma  Klaten University.  In  designing  the  UI/UX  design,  the  Klaten  Kos  application  prototype  was  made  as attractive as possible by using Figma editing software. Data collection techniques carried out by the author are interviews, observation, and literature study. With this system, it is hoped that it will make it  easier  to  find  boarding  houses  according  to  your  wishes  and  help  boarding  owners  to  promote boarding houses online.
Keywords: UI/UX, Prototype, Application, Figma.

## 1 Pendahuluan
Seiring berjalannya waktu, Teknologi yang semakin berkembang sangat berperan penting dalam kehidupan manusia diberbagai kegiatan apapun. Dunia informasi saat ini seakan tidak dapat terlepas dari  teknologi.  Dengan  penggunaan  teknologi  oleh masyarakat  menjadikan  dunia teknologi  semakin lama  semakin  berkembang  dan  canggih.  Komunikasi yang  dulunya  membutuhkan  waktu  yang  lama dalam  penyampaiannya,  kini  dengan  adanya  teknologi  semuanya  menjadi  sangat  cepat  dan  seakan tanpa ada jarak. Teknologi dan komunikasi semua  proses kerjanya akan diubah baik dari segi bentuk
e-ISSN:2540-9719
fisik dan statis menjadi digital,mobile,virtual ataupun personal sehingga kecepatan kinerja dari semua kegiatan masyarakat meningkat dengan cepat dan tepat. Saat ini internet sudah menjadi sarana yang penting  dan  efektif  di  seluruh  dunia  yang  digunakan  dalam  berbagai  bidang  sesuai  protokol  standar dalam komunikasi. Aplikasi sekarang banyak dirancang dengan manfaat berbagai bidang, baik  dalam berbisnis  maupun  bidang  kemasyarakatan  sudah  banyak  diimplementasikan  dan  terbukti  memberi manfaat untuk masyarakat [1]. World Wide Web atau yang disingkat dengan WWW merupakan suatu penggabungan dari semua situs yang diakses oleh masyarakat di internet sebagai wadah penyimpanan, penerima, memformat dan menampilkan informasi [2].
Aplikasi sudah tidak asing lagi kita dengar apalagi sejak adanya COVID 2019, dimana beberapa kegiatan  masyarakat    terkhusus  dalam  dunia  Pendidikan  dilaksanakan  melalui  alat  komunikasi teknologi.  Aplikasi  Kos  Klaten  yang  akan  dirancang    ini  merupakan  sebuah  hunian  atau  tempat penyediaan  jasa  penginapan  untuk  sementara  waktu  dengan  basis  online  yang  terdiri  dari  beberapa kamar  dan  setiap  kamar  memiliki  fasilitas  yang  sudah  disediakan  sehingga  harga  penyewaan  kamar berbeda-beda  sesuai  kualitas  kamar  dan  lama  waktu  penyewaan  yang  dilakukan  customer tersebut.Dalam  pembuatan  rancangan  desain  UI/UX  aplikasi  Kos  Klaten  ini  menggunakan  aplikasi desain yang disebut dengan Figma.
Universitas Widya Dharma adalah salah satu kampus yang berlokasi di Jl.Ki. Hajar Dewantoro, Klaten  Utara.  Hal  yang  sering  dialami  para  mahasiswa  baru  dan  merantau  sangat  sulit  mencari  kos yang  cocok  karena  perlu  survei  ke  setiap  tempat  yang  belum  tentu  sesuai  baik  dari  segi  harga  dan fasilitas.  Dengan  sulitnya  mencari  kos  terdekat  ke  kampus  akan  semakin  menambah  permasalahan seperti : menambah biaya ongkos, menguras waktu dalam perjalanan, mempersulit mengikuti kegiatan dalam kampus dan masih banyak lagi.
Tujuan  Penelitian  ini  adalah  untuk  membantu  mahasiswa  atau  orang  tua  mahasiswa  dalam pencarian informasi mengenai kos di sekitar wilayah Universitas Widya Dharma Klaten tanpa harus survei  secara  langsung,  memudahkan  pemilik  kos  disekitar  kampus  dalam  mempromosikan  fasilitas dan harga kos melalui online/web.

## 2 Tinjauan Literatur
Rancangan aplikasi-aplikasi yang diciptakan memiliki manfaat dan keunggulan masing-masing. Contoh  yang  sering  kita  jumpai  dalam  kegiatan  kita  sehari-hari  seperti  sistem  antrian,  belanja, presensi,  pendidikan  online  dan  lain  sebagainya.  Penelitian  ini  menjadi  salah  satu  rancangan  sistem yang dibutuhkan oleh masyarakat yaitu pemesanan kos-kosan secara online. Dengan adanya sistem ini akan menghasilkan dampak yang efektif dan efisien bagi user (pengguna) dibandingkan dengan cara manual (mencari kos-kosan ke lokasi langsung).
Sebuah  penelitian  lain  yang  dilakukan  pada  Program  Studi  Teknologi  Informatika  STMIK Tasikmalaya  membangun  desain  UI/UX  dengan  menggunakan  aplikasi  FIGMA.  Dari  penelitian  ini menghasilkan  usulan  kepada  mahasiswa  STMIK  Tasikmalaya  terkhusus  program  studi  Teknologi Informatika  menggunakan  aplikasi  FIGMA  untuk  pembuatan  UI/UX  yang  interaktif  .  Tindakan kegiatan PkM ini akan membantu mahasiswa mengenal dan memahami penggunaan aplikasi FIGMA [3].
Penelitian  selanjutnya  dilaksanakan  pada  Kota  Semarang.Pemerintah  mencoba  untuk mempromosikan cagar budaya Kota Semarang supaya dikenal lebih luas dengan membangun/merancang  prototype  Aplikasi  Semarang  Virtual  Tourism.  Alat    yang  digunakan  untuk perancangan  prototype  aplikasinya  adalah  aplikasi  desain  FIGMA.Sedangkan  untuk  pengukuran aplikasi  menggunakan  metode  blackbox  testing  dengan  teknik  equivalence  partitioning.Hal  yang dihasilkan    dari  penelitian  ini    adalah  sebuah  prototype  aplikasi  Semarang  Virtual  Tourism  dengan UI/UX yang minimalis,modern dan elegan [4].
Penelitian juga telah dilakukan di Universitas Mahakarya Asia (UNMAHA) dengan merancang UI/UX  aplikasi  terkait  manajemen  penelitian  dan  pengabdian  kepada  masyarakat  dengan menggunakan  aplikasi  desain  yaitu  FIGMA.  Metode  dalam  perancangan  aplikasi  yang  digunakan peneliti  yaitu  menggunakan  metode  prototype.  Hal  yang  didapatkan  dari  penelitian  ini  yaitu  sebuah desain  user  interface  (UI)  dan  user  experience  (UX)  prototype  menggunakan  FIGMA.  Aplikasi Penelitian  dan  Pengabdian  Kepada  Masyarakat  yang  dapat  membantu  Universitas  Mahakarya  Asia
terkhusus dosen untuk meningkatkan kualitas layanan, meningkatkan daya saing   dan  kualitas  SDM semakin meningkat [5].
Berdasarkan  penelitian  terdahulu  yang  dilaksanakan di  kota  Purwokerto  Provinsi Jawa Tengah, peneliti  membuat  rancangan  aplikasi  mobile  untuk  pencarian  tempat  Indekos  berbasis  web.  Metode yang  digunakan  dalam  pengujian  produk  ini  yaitu  dengan  cara  metode  reliability  and  durability, conformance, serviceability, appearance, dan perceived quality. Dalam aplikasi tersebut dapat melihat informasi  kamar,  fasilitas,harga,luas,dan  alamat  kos  yang  akan  disewa.  Hasil  penelitian  ini,Sistem informasi Indekos di Purwokerto memiliki kualitas yang baik dan layak untuk digunakan masyarakat umum  dan  web  ini  akan  sangat  membantu  secara  efisien  pemilik  kos  dan  pencari  kos  untuk memperoleh informasi maupun memesan kost sesuai keinginan penyewa kost nanti [6].
Dari  beberapa  penelitian  yang  sudah  dilakukan  sebelumnya  memiliki  hubungan  dengan penelitian ini.  Maka  hasil  literatur  yang  dilakukan  dapat  membantu  penulis  dalam  membuat  ide  dan gagasan  baru  pada    sistem  informasi  kost  klaten  berbasis  Aplikasi    di  kawasan  Universitas  Widya Dharma  Klaten.  Untuk  membuat  desain  UI/UX  aplikasi  ini  akan  dirancang  dengan  menggunakan aplikasi  FIGMA.Dengan  adanya  sistem  ini  diharapkan  pemilik  kos  dapat  menjalankan  pemasaran kosnya berjalan semakin meningkat dan pelayanan baru ini akan membantu para pelanggan (penyewa kost).

## 3 Metode Penelitian
Lokasi penelitian ini dilakukan pada kos-kosan yang ada di sekitar Kawasan Universitas Widya Dharma yaitu  Kec.Klaten Utara, Kab.Klaten, Jawa Tengah 57438.

## Alat dan Bahan
Ada beberapa alat dan bahan sebagai pendukung dalam pengerjaan penelitian ini. Alat utamanya adalah  berupa  set  komputer  ataupun  laptop,  kemudian  dibutuhkan  beberapa  perangkat  lunak  untuk pembuatan  desain  aplikasi serta  pengerjaan  hasil  penelitian.  Berikut  spesifikasi  alat  dan  bahan  yang dibutuhkan:
Tabel 1. Alat dan Bahan Hardware Deskripsi Komputer/Laptop Sebagai alat bantu dalam perancangan sistem yang akan dibuat dan juga digunakan untuk penyelesaian tugas akhir. Software Deskripsi Creately Aplikasi FIGMA Microsoft Word Mendeley Desktop Grammarly Pembuatan desain Use Case dan Activity Diagram. Aplikasi  editor  yang  digunakan  untuk  membuat  User  Interface aplikasi atau website. Aplikasi yang digunakan  peneliti untuk penulisan dokumen (Tugas Akhir). Alat bantu mempermudah pembuatan daftar pustaka. Alat  bantu  dalam  menerjemahkan  tulisan  bahasa  indonesia  pada bahasa inggris yang baik dan benar.

## Metode Pengumpulan Data
Metode penelitian yang dijalankan dalam penelitian ini dilakukan dengan metode kualitatif, yaitu pengumpulan  data    melalui  wawancara,  melakukan  pengamatan  langsung  (observasi)  untuk mengetahui sistem penyewaan  kos dan tipe kos, serta sarana dan prasarana yang tersedia dalam kos [7].  Wawancara  dilakukan  kepada  pemilik  rumah  kos  tersebut  untuk  mengetahui  kendala  yang dialami selama proses berjalannya penyewaan kos. Penulis juga melakukan pencarian informasi dari berbagai  sumber  studi  pustaka  sebagai  pendukung  penelitian  seperti  buku-buku  dan  artikel,  serta jurnal dari internet sebagai bahan referensi [8].

## Metode Pengembangan Sistem
Dalam  perancangan  Aplikasi  Kost  Klaten  ini,peneliti  menggunakan  metode  prototype.Metode prototype  ini  dilakukan  mendesain  UI/UX  sesuai  kebutuhan    user  sehingga  dapat  terbayang kesesuaian  model  aplikasi  yang  dibangun.  Kegunaan  pembuatan  Model  Prototype  ini  adalah  untuk memberikan gambaran atau menjadi acuan dalam pembuatan aplikasi yang akan dibuat dimasa depan dengan  terciptanya  fungsi  eksplorasi  dan  demonstrasi  [9].  Sebelum  membangun  aplikasi  tersebut peneliti  melakukan  pengumpulan  dan  menganalisis  data  yang  dibutuhkan  oleh  user  untuk  aplikasi yang akan dirancang.

## Gambar 1.  Tahap-tahap dalam Pembuatan Prototype Kos Klaten
Gambar  1  di  atas  merupakan  tahapan-tahapan  dalam  pembuatan  prototype  aplikasi  kos  klaten. Tahap  pertama  metode  prototype  ini  adalah  communication  (komunikasi).  Dalam  tahap  ini  yang dilakukan  adalah  menganalisis  tentang  apa  saja  kebutuhan-kebutuhan  pengguna.  Tahap  yang  kedua adalah  Quick  plan  yaitu  merencanakan  kebutuhan  dalam  pembuatan  desain  kos.  Kebutuhan  dalam pembuatan desain ini  adalah berupa software dan hardware. Kemudian Tahap yang ketiga Modelling Quick Design yaitu tahap pembuatan atau perancangan design yang dapat terlihat oleh pengguna nanti Model gambaran dapat meliputi Use Case Diagram, Activity Diagram dan UI. Untuk tahap keempat adalah  pembuatan  desain  Prototype  menggunakan  aplikasi  desain.  Kemudian  peneliti  melakukan pemeriksaan  terhadap  fitur  dan  fungsi    yang  sudah  diterapkan  dalam  pembuatan  prototype.  Tahap terakhir  yaitu  Deployment  Delivery  &  Feedback  ,dimana  dilaksanakan  kegiatan  evaluasi  terhadap hasil prototype yang telah dibuat. Setelah dilakukan penilaian hasil prototype tersebut, maka peneliti melakukan  tindakan  perbaikan  dan  mempelajari  hal  yang  dibutuhkan  sehingga  hasil  akhir  sesuai dengan keinginan pengguna [10].

## 4 Hasil dan Pembahasan
Berdasarkan penelitian dan pengumpulan data yang dilakukan penulis terkait sistem penyewaan kos  -  kosan  di  Klaten  yang  masih  sangat  sederhana  mendapatkan  hasil  untuk  merancang  UI/UX sebuah  aplikasi  sewa  kos  serta  desain  prototypenya  dengan  menggunakan  aplikasi  desain  yaitu FIGMA.
a. Analisis Sistem Berjalan
Menganalisis  sistem  yang  sedang  berjalan  merupakan  suatu  proses  atau  langkah-langkah  yang memperlihatkan gambaran sistem untuk pemesanan kos-kosan di sekitar kawasan Universitas Widya Dharma  Klaten  yang  sedang  dijalankan  saat  ini,  mengidentifikasi  permasalahan  yang  sedang  terjadi dan  menganalisis  kebutuhan-kebutuhan  sistem  tersebut,sehingga  dapat  memberikan  solusi  dengan melaksanakan perancangan sistem yang baru.
Analisis kebutuhan (Komunikasi) Modelling Quick Desain Desain Prototype Deployment Delivery & Feedback Quick Plan
e-ISSN:2540-9719
Saat ini sistem yang berjalan dalam proses pemesanan kos-kosan di sekitar Universitas tersebut adalah  dengan  cara  pelanggan  (orang  yang  akan  bertempat  tinggal  untuk  sementara  di  kos)  mencari info  terlebih  dahulu  tempat  kos  melalui  teman,saudara,  atau  senior  universitas  tersebut,  kemudian survei langsung ke lokasi melihat fasilitas yang disediakan. Apabila kedua belah pihak sudah setuju dan harga sesuai yang diharapkan maka  terakhir  adalah  melakukan  pembayaran  kepada  pemilik  kos dan  tempat  dapat  digunakan  oleh  pelanggan.  Untuk  pembayaran  selanjutnya  apabila  ingin melanjutkan  penyewaan  kos  tersebut,  proses  transaksi  pembayaran  juga  dilakukan  masih  secara manual (mengunjungi secara langsung atau menghubungi pemilik kos).

## b. Evaluasi Sistem Yang Sedang Berjalan
Dari  hasil  analisis  sistem  penyewaan  yang  sedang  berjalan,  maka  tindakan  selanjutnya  adalah mengevaluasi sistem tersebut serta analisis fitur apa saja yang dibutuhkan untuk produk aplikasi yang akan  dirancang.  Dari  hasil  evaluasi  system,  ada  fitur-fitur  yang  dibutuhkan  dan  akan  dirancang menjadi sebuah desain tampilan aplikasi Kos Klaten yaitu: Mengelola Data Pemilik Kos, Mengelola Data Pelanggan, Mengelola Fitur Kos., Mengelola Data Transaksi [11].

## c. Perancangan Sistem yang Diusulkan
Tahap perancangan sistem yang diusulkan ini merupakan tahap pengembangan rancangan sistem yang akan dibuat sehingga membantu pemecahan masalah tentang proses  - proses penyewaan kos di Klaten.
1). Use Case Diagram

## Gambar 2. Use Case Diagram
Gambar 2 di atas merupakan use case untuk menjelaskan proses pemesanan kos di aplikasi yang akan dirancang. Pemilik melakukan Registrasi/Login akun dan mendaftarkan informasi tentang rumah kos. Customer (pelanggan) diawali registrasi dan login, kemudian  dapat melakukan pencarian rumah kos  dan  menyewa  rumah  kos  tersebut.  Server  dapat  melakukan  pengecekan  penyewa  rumah  kos  di sistem.  Kemudian  pemilik  kos  dapat  melakukan  approve  (menyetujui)  transaksi  penyewaan  kamar kos yang telah divalidasi [12].
http://sistemasi.ftik.unisi.ac.id

## 2). Activity Diagram

## Gambar 3. Activity Diagram
Gambar  3  merupakan  Activity  yang  menjelaskan  alur  pencarian  dan  penyewaan  Kos  Klaten. Customer  terlebih  dahulu  melakukan  login  dan  melakukan  pencarian  kamar  Kos  sesuai  yang diinginkan.  Apabila  sudah  menemukan  yang  sesuai,maka  pelanggan  melakukan  proses  penyewaan (pemesanan)  dan  memberikan  bukti  transfer  biaya  sewa  kos  tersebut.  Tindakan  selanjutnya  server melakukan  validasi  terhadap  transaksi  pembayaran  yang  dilakukan  pelanggan.  Pembayaran    yang telah  divalidasi  dapat  dilakukan  menyetujui  (approve)  oleh    pemilik  rumah  kost.  Pembayaran  yang telah  divalidasi,  pemilik  kost  dapat  mempersilahkan  customer  untuk  menempati  kamar  kos  tersebut [13].

## d. Implementasi dan Pengujian Sistem
Tahap  implementasi  sistem  ini  bertujuan  untuk  menjelaskan  kepada  pengguna    terkait  rencana sistem  yang  sudah  dibuat  [14].  Pengguna  dapat  memberikan  saran  atau  masukan  kepada  pembuat sistem  untuk  melakukan  perbaikan  sehingga  menghasilkan  sistem  yang  lebih  baik  dan  memenuhi sesuai kebutuhan pengguna yaitu pemilik kos dan pelanggan (pencari kos).
e. Hasil Desain Antarmuka
Untuk  memulai  proses  desain  tampilan  aplikasi  Kost  Klaten  ini,  penulis  menggunakan  website editing  Figma    yang  dapat  ditelusuri  di  figma.com  [15].  Persiapan  yang  dilakukan  terlebih  dahulu sebelum  melakukan  desain  di  website  Figma  yaitu  menentukan  dokumen  yang  akan  dimasukkan, membuat sebuah gambar ilustrasi yang akan didesain nanti, memilih background, membuat logo, text hingga tombol dalam aplikasi. Berikut adalah hasil proses desain kos klaten:

## Gambar 4. Tampilan awal splash screen, login  dan halaman register
Gambar  4  berisi  tentang  splash  screen (halaman  pertama  aplikasi  sebelum  masuk  login  atau register  akun  baru).  Bagian  Login  berisi  form  yang  akan  diisi  untuk  masuk  ke  system,  Sedangkan register memiliki tampilan form data yang harus didaftarkan sehingga dapat login selanjutnya.

## Gambar 5. Tampilan home dan pencarian kos yang dapat difilter
Pada  Gambar  5  di  atas  menampilkan  halaman  pelanggan  kos  yang  mana  terdapat  pencarian kos dan menu lainnya. Pada pencarian kos dapat difilter bagian tipe kos, harga kos, dan fasilitas yang tersedia pada kos sehingga memudahkan pelanggan mencari kos.

## Gambar 6.Tampilan untuk melihat info, chat dan tahap pembayaran kos
Dari  Gambar  6  terdapat  beberapa  screen,  yaitu  pertama  tampilan  info  kos  yang  apabila  kita membuka  salah  satu  kos,  maka  tampilannya  berisi  tentang  detail  kos,  fasilitas,  aturan  kos  dan pemesanan  kos,apabila  kita  membuka  salah  satu  kos  yang  ingin  .  Yang  kedua  tampilan  screen chat,dimana  kita  bisa  menanyakan  langsung  pemilik  kos  terkait  kos  tersebut.  Yang  ketiga  estimasi pembayaran,dimana  kita  bisa  memilih  pembayaran  perbulan,  3  bulan,  6  bulan  atau  1  tahun.  Screen keempat menampilkan beberapa pilihan cara pembayaran (LinkAja, OVO, Dana, dan Transfer Bank). Kemudian  pada  screen  selanjutnya  menampilkan  total  pembayaran,  nomor  rekening  Bank  dan  tata cara pembayaran.

## Gambar 7. Tampilan menu pelanggan yaitu info sewa dan bagian setting
Gambar  7  di  atas  menjelaskan  terkait  menu  pelanggan  yang  berisi  tentang  info  kos  yang disewa dan setting aplikasi kos.

## Gambar 8. Bagian notifikasi Pelanggan
Pada  Gambar  8  terdapat  screen  yang  menampilkan  beberapa  notifikasi  yang  masuk,  screen kedua  berisi  tentang  isi  dari  salah  satu  notifikasi  tersebut,  dan  yang  ketiga  tampilan  PDF  hasil transaksi pembayaran kos yang dapat di save.
Volume 12, Nomor 2, Mei 2023: 600-613

## Gambar 9. Tampilan chat pelanggan
Gambar  9  di  atas  berisi  tentang  tampilan  beberapa  chat  pelanggan.  Screen  yang  kedua menampilkan  salah  satu  isi  dari  chat,  sedangkan  yang  ketiga  isi  dari  titik  tiga  yang  terdapat  diatas menampilkan beberapa pilihan yaitu: mematikan notifikasi, blokir pengguna, dan laporkan pengguna.

## Gambar 10. Tampilan daftar suka, akun dan edit akun
Perancangan desain pada Gambar 10 di atas berisi tentang screen list likes pelanggan, screen akun  pelanggan  dan  screen  edit  profil  pelanggan  (  nama,  username,  tanggal  lahir,  jenis  kelamin, nomor handphone, email, kota asal, status dan profesi).
Gambar 11. Bagian home pemilik kos dan alur pendaftaran kos
e-ISSN:2540-9719
Gambar  11  merupakan  tampilan  dari  aplikasi  pemilik  kos.  Screen  pertama  menampilkan gambaran  home  pemilik  kos,  Screen  yang  kedua,ketiga  keempat  dan  kelima  berisi  tentang  form pendaftaran kos baru ( nama kos, jumlah kamar ,aturan dalam kos, deskripsi, dan nomor handphone pemilik kos).

## Gambar 12. Pendaftaran  alamat kos
Perancangan  desain  pada  Gambar  12  masih  lanjutan  pendaftaraan  kos  baru  yaitu  berisi tentang alamat kos. Beberapa data yang akan diisi memiliki list data yang dapat dipilih sehingga dapat diisi tanpa harus diketik.

## Gambar 13. Tampilan pengisian foto, fasilitas, ukuran, dan harga kos
Gambar  13  di  atas  menampilkan  beberapa  lanjutan  pendaftaran  kos  baru.  Screen  pertama memasukkan  foto,  screen  kedua  memilih  fasilitas  sesuai  yang  ada  pada  kos,  screen  ketiga  memilih ukuran kamar,jumlah kamar yang kosong, kamar yang berpenghuni, dan nomor kamar. Screen yang keempat berisi detail harga kos dan screen kelima menampilkan bahwa pendaftaran kos baru berhasil.
Gambar 14. Tampilan menu pemilik kos  yaitu info dan setting.
Tiga desain pada Gambar 14 berisi tentang menu pemilik kos dengan dua pilihan yaitu: info kos dan setting. Screen kedua menampilkan kos yang disewa dan sudah terbayar. Sedangkan screen yaitu setting (pengaturan)   bahasa, tampilan, dan log out akun.

## Gambar 15. Bagian notifikasi
Gambar  15  di  atas  menampilkan  beberapa  notifikasi  yang  ada  pada  pemilik  kos  dan  isi  dari notifikasi  tersebut.  Dalam  notifikasi  akan  terliat  siapa  pengirim,isi  dan  tanggal  masuk  notifikasi tersebut.
Perancangan  desain  pada  Gambar  16  berisi  tentang  tampilan  chat  pemilik  kos  .  Screen  yang kedua  menampilkan  salah  satu  isi  dari  chat,  sedangkan  yang  ketiga  isi  dari  titik  tiga  yang  terdapat diatas  menampilkan  beberapa  pilihan  yaitu:  mematikan  notifikasi,  blokir  pengguna,  dan  laporkan pengguna.

## Gambar 17. Tampilan akun pemilik kos, ubah akun dan kata sandi, metode pembayaran, dan nonaktifkan atau hapus akun
Gambar  17  di  atas  berisi  terkait  dengan  akun  pemilik  kos.  Screen  pertama  menampilkan  dari navigation bar akun, screen kedua merupakan tampilan edit akun pemilik ( nama, username, tanggal lahir,  jenis  kelamin,  nomor  handphone,  email,  kota  asal,  status  dan  profesi).  Screen  ketiga  akan muncul  apabila  ingin  mengubah  kata  sandi,  maka  akan  tampil  pengisian  6  digit  kode  yang  dikirim pada  yang  bersangkutan.  Screen  keempat  merupakan  pengisian  kata  sandi  baru.  Screen  kelima menampilkan pengisian form metode pembayaran (nama bank, lokasi kantor cabang,nomor rekening, nama  pemilik  rekening),  sedangkan  screen  keenam  berisi  tentang  pilihan  menonaktifkan  atau  hapus akun.
Volume 12, Nomor 2, Mei 2023: 600-613

## Gambar 18. Prototype Aplikasi Kos Klaten
Gambar  18  merupakan  hasil  desain  prototype  aplikasi  kos  klaten.  Pembuatan  prototyping  ini dilaksanakan  pada  desain  prototype  yang  ada  pada  aplikasi  Figma.  Proses  prototype  ini  dilakukan dengan  menghubungkan  seluruh  tombol-tombol  dan  menu-menu  yang  ada  pada  desain  aplikasi  kos sehingga terbentuk alur kerja setiap slide-slide aplikasi tersebut. Setelah penulis melakukan pengujian terhadap  prototype  aplikasi  kos  ini,  semua  fitur  tombol  dan  menu  dapat  berjalan  sesuai  yang diharapkan.

## 5 Kesimpulan
Dari hasil penelitian ini dapat disimpulkan bahwa dengan adanya perancangan User Interface dan User  Experience  dapat  menggambarkan  aplikasi  yang  akan  dirancang  sehingga  membantu  dan mempercepat pembuatan sebuah aplikasi sesuai kebutuhan user. Menggunakan aplikasi Figma dalam pembuatan  desain  UI/UX  menghasilkan  tampilan  modern,menarik  dan  elegan.  Penelitian  ini menghasilkan  UI/UX  prototype  aplikasi  kos  klaten  yang  akan  memudahkan  developer  dalam membangun produknya (aplikasi kos) sebelum tahap pelaksanaan coding dan publish produk tersebut ke user (pemakai). Dengan adanya aplikasi kos klaten ini akan sangat membantu pemilik kos untu’k mempromosikan  kos  tersebut  dengan  mudah.  User  juga  akan  mudah  mencari  kos  sesuai  keinginan dan memudahkan dalam pembayaran uang kos.

## Referensi
[1] W.  Wahyudiyono,  “Implikasi  Pengggunaan  Internet  terhadap  Partisipasi  Sosial  di  Jawa Timur,”  J.  Komunika    J.  Komunikasi,  Media  dan  Inform . ,  vol.  8,  no.  2,  p.  63,  2019,  doi: 10.31504/komunika.v8i2.2487.
[2] A. Yani, B. Saputra, and R. T. Jurnal, “Rancang Bangun Sistem Informasi Evaluasi Siswa Dan Kehadiran  Guru  Berbasis  Web,”  Petir,  vol.  11,  no.  2,  pp.  107–124,  2018,  doi: 10.33322/petir.v11i2.344.
[3] R. Pramudita, R. W. Arifin, A. N. Alfian, N. Safitri, and S. Dina, “Penggunaan Aplikasi Figma dalam  Membangun  UI  /  UX  yang  Interaktif  pada  Program  Studi  Teknik,”  vol.  3,  no.  1,  pp. 149–154, 2021.
[4] M. Naufal, M.  A.- Faruq, M. H. Aufan, U. Islam, and N. Walisongo, “Perancangan UI / UX Semarang Virtual Tourism,” vol. 4, no. 1, pp. 43–52, 2022.
[5] J. Hal et al. , “JSIM : Jurnal Sistem Informasi Mahakarya,” vol. 05, no. 1, 2022.
[6] H.  Gunawan  and  A.  K.  H.  Saputro,  “Pemanfataan  Aplikasi  Mobile  Untuk  Mempercepat Pencarian  Tempat  Indekos  Berbasis  Android,”  J.  Muara  Sains,  Teknol.  Kedokt.  dan  Ilmu Kesehat . , vol. 1, no. 2, pp. 85–96, 2018, doi: 10.24912/jmstkik.v1i2.1454.
[7] M. R. Fadli, “Memahami desain metode penelitian kualitatif,” Humanika, vol. 21, no. 1, pp. 33–54, 2021, doi: 10.21831/hum.v21i1.38075.
[8] D. Pramana, N. M. Rai Masita Dewi, and O. K. Putra, “Evaluasi Tata Kelola TI Office 365 pada ITB STIKOM Bali menggunakan Framework COBIT 5,”  J. Sist. Dan Inform . ,  vol.  16, pp. 104–112, 2022.
[9] W. Winarti, M. Ihsan, and N. Wulandari, “Perancangan Sistem Informasi Penjualan Berbasis Web  pada  Toko  Campus  Mart  Unimuda  Sorong  dengan  PHP  Dan  MySql,”  J.  PETISI (Pendidikan Teknol. Informasi ) , vol. 1, no. 1, pp. 44–56, 2020, doi: 10.36232/jurnalpetisi.v1i1.390.
[10] N. H. Maulida and U. P. Raya, “Studi Literatur Penerapan Metode Prototype dan Waterfall,” no. April, 2022.
[11] S.  Siswidiyanto,  A.  Munif,  D.  Wijayanti,  and  E.  Haryadi,  “Sistem  Informasi  Penyewaan Rumah  Kontrakan  Berbasis  Web  Dengan  Menggunakan  Metode  Prototype,”  J.  Interkom  J. Publ.  Ilm.  Bid.  Teknol.  Inf.  dan  Komun . ,  vol.  15,  no.  1,  pp.  18–25,  2020,  doi: 10.35969/interkom.v15i1.64.
[12] D.  Menggunakan  and  F.  Codeigniter,  “Sistem  Informasi  Manajemen  Berbasis  Website  Pada Unl Studio Dengan Menggunakan Framework Codeigniter,” J. Ilm. M-Progress, vol. 11, no. 1, pp. 13–21, 2021, doi: 10.35968/m-pu.v11i1.598.
[13] W. E. B. Di and P. T. Areon, “Perancangan Sistem Informasi Laporan Kegiatan Berbasis Web di PT. Areon Bandung,” vol. 2, no. 12, pp. 2203–2213, 2021.
[14] P.  Pada,  P.  T.  Xyz,  P.  Pada,  and  P.  T.  Xyz,  “Implementasi  dan  Pengujian  Aplikasi  Sistem Tindak Lanjut,” no. October, 2020.
[15] H.  Asnal, M. Jamaris,  and  Y.  Irawan,  “Workshop  UI  /  UX  Design  dan  Prototyping  Dengan Figma di SMK Taruna Masmur Pekanbaru,” vol. 3, no. February, 2022.