Jurnal Informatika Terpadu
https://journal.nurulfikri.ac.id/index.php/JIT ISSN ONLINE : 2460-8998

## PEMBUATAN DESAIN UI/UX DENGAN METODE PROTOTYPING PADA APLIKASI LAYANAN PENGADILAN NEGERI BALE BANDUNG MENGGUNAKAN FIGMA
Mamok Andri Sanubekti 1 , Giovanny Lea Dajoreyta 2 , Novita Anggraini 3
1,2 Manajemen Informatika, Universitas Teknologi Digital
3 Teknik Informatika, Universitas Teknologi Digital Bandung, Jawa Barat, Indonesia 40000 mamokandri@digitechuniversity.ac.id , giovanny20360013@digitechuniversity.ac.id , novitaanggraini@digitechuniversity.ac.id

## Abstract
Prototyping carried out by a UI/UX Designer is a critical element in application development. This process allows more careful planning of the application's appearance by considering user needs, making the programmer's work easier. This research case study focuses on the Bale Bandung District Court, which wants to develop an application based on improvements to the Era- Terang application. The Era-Terang application, which is designed to make it easier for the public to submit applications for certificates, still has several shortcomings. Therefore, the application developed aims to eliminate the need to physically visit the court for file delivery or registration. In this research, the prototyping method was applied using the Figma design tool. The process includes initial data collection, problem identification, creation of a usage flow, framework, sketches, and final interface  design.  The  results  of  this  research  show  that  the  Bale  Bandung  District  Court  Service  application,  which  was developed using the prototyping method, succeeded in improving the quality of the user experience. This is proven through application testing, where users state that the application is easy to use and understand. Based on this user feedback, it can be concluded that the application has succeeded in fulfilling its initial objective, namely to create an easy, effective, and efficient solution  for  the  public  in  accessing  court  services. This  emphasizes  the  importance  of  a  prototyping-based  approach  in application development, especially in increasing the accessibility and convenience of public services.
Keywords: Application, Criminal Acquittal Certificate, District Court, Prototyping, UI/UX

## Abstrak
Prototyping yang dilakukan oleh seorang UI/UX Designer , merupakan elemen kritikal dalam pengembangan aplikasi. Proses ini  memungkinkan  perencanaan  yang  lebih  matang  terhadap  tampilan  aplikasi  dengan  mempertimbangkan  kebutuhan pengguna,  sehingga  memudahkan  kerja programmer .  Studi  kasus  penelitian  ini  berfokus  pada  Pengadilan  Negeri  Bale Bandung,  yang  menginginkan  pengembangan  aplikasi  berbasis  peningkatan  dari  aplikasi  Era-Terang.  Aplikasi  Era-Terang, yang  dirancang  untuk  memudahkan  masyarakat  dalam  pengajuan  permohonan  surat  keterangan,  masih  memiliki  beberapa kekurangan.  Oleh  karena  itu,  aplikasi  yang  dikembangkan  bertujuan  untuk  mengeliminasi  kebutuhan  fisik  mendatangi pengadilan untuk pengiriman berkas atau pendaftaran. Dalam penelitian ini, metode prototyping diaplikasikan menggunakan alat desain Figma. Prosesnya meliputi pengumpulan data awal, identifikasi masalah, pembuatan alur penggunaan, kerangka kerja, sketsa, dan desain antarmuka akhir. Hasil dari penelitian ini menunjukkan bahwa aplikasi Layanan Pengadilan Negeri Bale Bandung, yang dikembangkan dengan metode prototyping , berhasil meningkatkan kualitas pengalaman pengguna. Hal ini dibuktikan melalui pengujian aplikasi, di mana pengguna menyatakan bahwa aplikasi tersebut mudah untuk digunakan dan dipahami. Berdasarkan umpan balik pengguna ini, dapat disimpulkan bahwa aplikasi berhasil memenuhi tujuan awalnya, yaitu untuk  menciptakan  solusi  yang  mudah,  efektif,  dan  efisien  bagi  masyarakat  dalam  mengakses  layanan  pengadilan.  Ini menegaskan  pentingnya  pendekatan  berbasis prototyping dalam  pengembangan  aplikasi,  khususnya  dalam  meningkatkan aksesibilitas dan kemudahan layanan publik.
Kata kunci : Aplikasi, Pengadilan Negeri, Prototyping , Surat Keterangan Bebas Pidana, UI/UX
1. PENDAHULUAN
Seiring  dengan  zaman yang  semakin  berkembang,  hampir semua orang sudah familier dengan penggunaan teknologi,
terutama perangkat seperti smartphone . Hal ini mendorong masyarakat  untuk  terus  beradaptasi  dengan  perubahan dalam sistem pengelolaan informasi, sehingga mereka dapat
mengatasi  berbagai  kendala  yang  muncul  serta  dapat mempublikasikan  data  yang  akurat,  cepat,  dan  dapat diandalkan.  Langkah  memaksimalkan  wadah  seperti internet  dengan  mencari  dan  menganalisis  permasalahan menjadi suatu trend dimasa kini [1].
Aplikasi mobile yaitu  suatu  program  yang  dirancang  agar dapat  memudahkan  berbagai  aktivitas  melalui  suatu perangkat  [2].  Dengan  hal  tersebut,  penulis  menemukan permasalahan  yang  ada  pada  Pengadilan  Negeri  Bale Bandung  yakni  diperlukannya  suatu  aplikasi  yang  berisi layanan  informasi  terkait  permohonan  surat  keterangan sekaligus  sebagai  wadah  untuk  melakukan  permohonan surat  keterangan.
Surat  Keterangan  Bebas  Pidana  Pengadilan  Negeri merupakan  salah  satu  berkas  yang  diajukan  oleh  Calon Kepala  Daerah  beserta  Wakil  Kepala  Daerah  kepada pengadilan  sesuai  dengan  keterangan  yang  tertera  dalam Surat Edaran No. 3 Tahun 2016 mengenai Pengajuan Surat Keterangan  bagi  Calon  Kepala  Daerah  dan  Wakil  Kepala Daerah di Pengadilan [3].
Aplikasi  ini  juga  merupakan  penyempurnaan  dari  aplikasi Era-terang.  Dengan  adanya  aplikasi  permohonan  surat keterangan  Pengadilan  Negeri  Bale  Bandung  ini, diharapkan dapat memudahkan masyarakat dalam mengajukan  surat  secara online tanpa  harus  datang  ke Pengadilan.  Hal  ini  tentu  menjadi  poin  efektif  dan  efisien dari adanya aplikasi ini.
Sebelum  aplikasi  dibuat,  dibutuhkan  pembuatan  desain aplikasi untuk menyesuaikan tampilan fitur dan fungsinya. Desain  disesuaikan  dengan  kebutuhan  pengguna  sehingga mampu  mempermudah  dan membantu  dalam memperoleh tujuan. Desain yang dimaksud disebut pula dengan  UI/UX.
UI  atau User  Interface adalah  representasi  visual  desain produk yang mengaitkan sistem yang ada dengan pengguna. User  interface atau antarmuka  yaitu  semua  hal yang  yang terlihat  dalam  sistem  pada  suatu  program,  sedangkan user experience adalah  semua  hal  yang  berkaitan  dengan perasaan  pengguna  ketika  menggunakan  program  tersebut [4].
Dalam  pembuatan  desain  aplikasi  yang  menarik  penulis telah  membuat mock-up menggunakan  Figma.  Figma merupakan  suatu  alat  yang  dapat  dimanfaatkan  dalam pembuatan  desain  tampilan    aplikasi mobile , website , desktop  dan  lainnya  [5].  Penulis  memilih  Figma  dengan alasan agar dapat membuat desain yang mudah dengan alat- alat yang berada di Figma.
Figma  memiliki  keunggulan  yaitu prototyping yang  dapat kita  gunakan  untuk  menggerakkan  hasil  tampilan  seolah sedang  menggunakan aplikasi  yang  dirancang.  Figma  pun beroperasi secara real time , setiap perubahan akan otomatis terganti dan tersimpan oleh Figma [6].

## 2. METODE PENELITIAN
Pada  bagian  ini  berisi  penjelasan  tentang  jenis penelitian/desain penelitian.

## 2.1. Metode pengumpulan data
Proses  pengumpulan  data  diawali  dengan  mewawancarai pihak terkait tentang permasalahan yang ada di Pengadilan Negeri  Bale  Bandung  dan  menganalisis  solusi  dari permasalahan  yang  ada.  Proses  ini  bertujuan  untuk menerjemahkan  keinginan  pengguna  ketika  memakai aplikasi berdasarkan data-data yang akan didapatkan.
2.2. Pengembangan Sistem
2.2.1 Model Prototyping
Prototype memberikan gambaran kepada pengguna terkait sistem yang akan dikembangkan [7]. Dalam bagian desain, purwarupa atau arketipe merupakan bentuk awal yang dapat dijadikan  model  mula  atau  standar  ukuran  dari  tiap proyeknya.  Tampilan  Aplikasi  Layanan  Pengadilan  Bale Bandung  memiliki  bentuk  komunikasi  visual  yang menggunakan  elemen  gambar,  teks,  dan  video  untuk menyampaikan  informasi  yang  diperlukan.  Hal  ini bertujuan  untuk  menciptakan  tampilan  yang  efektif  dan mampu  berkomunikasi  dengan  baik,  sehingga  pengguna lebih  nyaman  ketika  menggunakan  dan  memenuhi kebutuhan pengguna pada aplikasi ini.
Prototipe dalam Bahasa Inggris dikenal sebagai " prototype model ".  Di  sisi  lain,  dalam  Bahasa  Indonesia,  prototipe dapat  disebut  juga  sebagai  purwarupa.  Kata  Prototipe berasal  dari  Bahasa  Latin,  yaitu  kata  " proto "  yang  berarti asli,  dan  " typus "  yang  berarti  bentuk  atau  model.  Dalam konteks  yang  tidak  bersifat  teknis.  Sebuah  prototipe merupakan contoh khusus  yang  mewakili  suatu  kelompok tertentu.  Dalam  bidang  desain,  purwarupa  merupakan bentuk  awal  yang  berfungsi  sebagai  contoh  atau  standar ukuran dari suatu entitas.
Model Prototype (dapat dilihat pada Gambar 1) secara garis besar  digambarkan  dengan  3  yaitu listen  to  customer , build/revise mock-up , dan customer test-drives mock-up .
Gambar 1. Model Prototype

## 2.2.2 Listen to Customer
Dalam  tahap  ini,  pengumpulan  data  dilakukan  dari  hasil sosialisasi bersama pihak Pengadilan Negeri Bale Bandung untuk  mengetahui  permasalahan  yang  sedang  dihadapi. Hasil  yang  didapatkan  dari  sosialisasi  tersebut  adalah
adanya  kebutuhan  Pengadilan  Negeri  Bale  Bandung terhadap  suatu  aplikasi  yang  dapat  memudahkan  proses pengajuan surat untuk masyarakat yang efektif dan efisien. Hasil  sosialisasi  tersebut  kemudian  diterjemahkan  lewat sketsa yang kemudian disesuaikan secara  bertahap dengan pengguna.  Setelah  sketsa  tersebut  disetujui,  langkah selanjutnya  adalah  dengan  membuat  desain mock  up ( prototyping ) dari aplikasi.
2.2.3 Build/Revise Mock-up
Langkah berikutnya yakni pembuatan desain dan prototipe yang  berfungsi  untuk  memperjelas  hasil  sketsa  dan memberikan  bayangan  pada  pengguna  seperti  ketika menggunakan  Aplikasi  Layanan  Pengadilan  Negeri  Bale Bandung.  Pada  tahap  ini,  tampilan  desain  dibuat berpedoman pada hasil sosialisasi berama pengguna.

## 2.2.4 Customer Test-Drives Mock-up
Langkah  akhir  melibatkan  pengujian  terhadap  prototipe yang  telah  dibuat  guna  memastikan  kesesuaian  prototipe dengan  kebutuhan  yang  ada.  Desain  yang  telah  dibuat kemudian  diuji  untuk  mengetahui  apakah  desain  sudah sesuai  dengan  permintaan?  Jika  masih  ada  yang  kurang sesuai  maka  dilakukan  perbaikan  hingga  mendapatkan kesesuaian  permintaan  dan  kepuasan  pelanggan  terhadap Aplikasi Layanan Pengadilan Bale Bandung.

## 2.3. Alat Bantu Pengembangan Sistem

## 1.2.1 Figma
Figma  merupakan  aplikasi  editor  dan prototyping  tool berbasis website yang  dapat  diakses  secara  online  pada browser.  Aplikasi  Figma  dapat  mempermudah  pengerjaan dalam mendesain User Interface maupun User Experience dan mempunyai fitur cloud sehingga pengguna Figma dapat mengakses file dan data yang tersimpan di mana pun.
Figma  memiliki tools (alat-alat)  yang  dibutuhkan  oleh pengguna untuk mendesain suatu proyek, membuat ilustrasi secara menyeluruh, membuat Prototype ,  dan membuatkan kode  untuk hand-off .  Dengan  kata lain,  Figma merupakan aplikasi  desain  UI  dan  UX  berbasis  browser  yang user- friendly terutama untuk pemula dan dapat digunakan untuk prototyping dengan mudah.
Figma  merupakan  salah  satu  perangkat  lunak  yang digunakan oleh UI/UX designer dalam menciptakan visual pada situs web dan aplikasi seluler. Berbeda dengan Adobe Photoshop,  Figma  memiliki  keunggulan  dalam  hal kolaborasi,  memungkinkan  tim  untuk  bekerja  bersama dalam  dokumen  yang  sama, memberikan  komentar,  saran, dan  bahkan  mengedit  desain  secara  simultan.  Kelebihan lainnya  adalah  Figma  secara  otomatis  menyimpan  setiap perubahan saat terhubung dengan internet [8].
1.2.2 Site Map
Site Map adalah ‘ map ’ atau peta yang  menjabarkan setiap halaman yang ada pada proyek. Pada Aplikasi ini terdapat beberapa bagian antara lain sub menu (berisi pilihan seperti profil,  riwayat,  alur,  syarat, log  out ,  dan  ganti  akun), halaman  awal,  halaman  utama  (berisi  pilihan  tampilan seperti  info  aplikasi,  alur  pendaftaran,  dan  syarat  & ketentuan), dan layanan (berisi pilihan seperti info riwayat pengajuan, Template surat, tambah pengajuan permohonan, dan informasi pembayaran). Adapun Site Map dari aplikasi ini dapat dilihat pada Gambar 2 berikut.
Gambar 2. Site Map

## 1.2.3 User flow
User  flow yaitu  langkah  tahapan  pengguna  lakukan  ketika memakai  sebuah  karya  dalam  menyelesaikan  permintaan pengguna [9].
Simbol-simbol user  flow yang  dapat  dilihat  pada Tabel  1 seperti sebagai berikut:
Tabel 1. Tabel User Flow Simbol Nama Arti Simbol Terminator Sebagai  titik  awal  atau akhir suatu kegiatan. Flow Line Simbol penghubung antara simbol satu dengan yang lainnya. Process Simbol penunjuk pengolahan yang dilakukan oleh komputer. Input/Output Data Simbol  proses input dan output .
Pre Dedined Process Simbol pelaksanaan suatu bagian (sub- program)/prosedure Dicision Simbol  pemilihan  proses berdasarkan  kondisi  yang ada.
User  flow yang  telah  dirancang  digunakan  untuk memperkirakan  tahapan  pengguna  dalam  menggunakan aplikasi Permohonan Surat Keterangan.
Berikut user flow dari aplikasi ini:
a. User flow Registrasi Akun
User  flow registrasi  akun  dapat  dilihat  pada  Gambar  3  di bawah ini.
Gambar 3. User Flow Registrasi Akun
b. User flow pengajuan permohonan
User  flow pengajuan  permohonan  dapat  dilihat  pada Gambar 4 berikut ini.
Gambar 4 User Flow Pengajuan Permohonan c. User Flow Konfirmasi Pembayaran
Pembayaran hanya dapat dilakukan jika sudah mengisi form pendaftaran dan  sudah mendapatkan  kode billing. Adapun User Flow terkait konfirmasi pembayaran dapat dilihat pada Gambar 5 di bawah ini.
5 | Jurnal Informatika Terpadu Vol. 10 No. 1 Maret 2024
3. HASIL DAN PEMBAHASAN
3.1. Analisis Masalah Sistem yang Berjalan
Dalam hal ini, penulis menemukan permasalahan yang ada pada  Pengadilan  Negeri  Bale  Bandung  yakni  masyarakat sering  kali  terkendala  jarak  untuk  dapat  mengajukan permohonan surat keterangan.
Meskipun  sebelumnya  telah  dibuatkan website era-terang (e-surat  keterangan)  yang  memiliki  tujuan  serupa,  namun terdapat  kekurangan  di  dalamnya  yakni website tersebut masih mengharuskan masyarakat untuk mendatangi kantor pengadilan.
Sehingga  dalam aplikasi  yang  dibandingkan  tersebut  (era- terang) perlu dikembangkannya aplikasi yang lebih efektif dan efisien.

## 3.2. Analisis Hasil Solusi
Setelah  didiskusikan  dengan  perwakilan  pihak  Pengadilan Negeri  Bale  Bandung,  maka  solusi  yang  dapat  dilakukan yakni  dengan  dibuatkannya  aplikasi  berbasis mobile yang berisi  layanan  informasi  terkait  permohonan  surat keterangan  sekaligus  sebagai  wadah  untuk  melakukan permohonan surat  keterangan. Sehingga Masyarakat dapat mengecek riwayat dan status pengajuan tanpa harus cek ke tempat.
Nantinya  Aplikasi  Layanan  Pengadilan  Negeri  Bale Bandung  ini  diharapkan  dapat  lebih  memudahkan masyarakat  dalam  mendapat  informasi  dan  memudahkan dalam melakukan surat pengajuan secara efektif dan efisien. Proyek yang dibuat kemudian dinamakan Aplikasi Layanan Pengadilan Negeri Bale Bandung.

## 3.3. Analisis Kebutuhan Sistem
Seiring  dengan  tujuan  dibuatnya  Aplikasi  Layanan Pengadilan  Negeri  Bale  Bandung  yakni  masyarakat  dapat mendaftar dan mengajukan permohonan Surat Keterangan, maka  dalam  aplikasi  ini  dibutuhkannya  info  dan  alur pendaftaran, form pendaftaran  permohonan,  syarat  dan ketentuan  permohonan,  riwayat  permohonan,  mengunduh hasil  keterangan,  mengunggah    berkas  pendaftaran  serta bukti pembayaran.
2.3.1 Spesifikasi Perangkat Keras dan Lunak
2.3.1.1 Perangkat Keras
Adapun spesifikasi perangkat keras yang  digunakan untuk membuat  prototipe  tampilan  pengguna  yakni  sebagai berikut:
Perangkat : Laptop Merek :Asus Vivobook A412U Prosesor :Intel Core i3-8145U Memori RAM :4 GB
2.3.1.2 Perangkat Lunak
Perangkat lunak yang digunakan untuk membuat prototipe tampilan  pengguna  yakni  menggunakan  Sistem  Operasi Windows 10 .

## 3.4. Analisis Sistem

## 2.4.1 Warna
Pada Aplikasi Layanan Pengadilan Negeri Bale Bandung ini didominasi  oleh  warna  Hijau  dan  Kuning  yang  identik dengan  logo dari  pengadilan  negeri.  Makna   dan  psikologi warna hijau dan kuning yakni sebagai berikut:
a. Hijau  Tua:  sering  dihubungkan  dengan  uang, finansial, bank, ambisi.
b. Hijau Olive: melambangkan kedamaian.
c. Hijau  Aqua:  melambangkan  emosi  penyembuhan, dan perlindungan.
d. Hijau sedang: melambangkan pertumbuhan, harmoni, kesegaran, dan kesuburan. [10]
Adapun  perincian  warna-warna  yang  dipakai  di  dalam aplikasi ini ada pada Tabel 2 sebagai berikut:
Tabel 2 . Tabel Palet Warna Aplikasi Kode Warna Warna Keterangan 026500 Digunakan pada background utama aplikasi 548056 Digunakan pada Judul Gradasi dari 00CC14 dan 188715 Digunakan  pada toolbar 87B700 Digunakan pada Pop up bagian bawah E3E3E3
Digunakan pada menu bar

## 3.5. Perancangan sistem dan implementasi sistem

## 2.5.1 Figma
Dalam pelaksanaannya, penulis melakukan langkah-langkah berikut dalam menggunakan Figma:
a. Penulis membuka dan registrasi pada website figma.com
b. Setelah  itu,  penulis  dapat login menggunakan  akun tersebut.
c. Pada halaman dashboard Figma, penulis klik “ new Design file”.
6 | Jurnal Informatika Terpadu Vol. 10 No. 1 Maret 2024
d. Setelah itu, akan muncul tampilan kosong. Sebagai awal dalam  membuat User  Interface sebuah  aplikasi,  penulis memilih frame sesuai ukuran device yang akan digunakan dengan klik Menu frame ada di atas (ketiga dari kiri) dan panel  kanan  akan  berubah  menjadi  beberapa  pilihan ukuran frame yang dapat dipilih.
e. Setelah memilih frame dan muncul frame dengan ukuran yang sesuai, Penulis membuat Design yang diinginkan.
f. Lalu  setelah  desain  selesai  dibuat,  Penulis  melakukan prototyping (alur  perintah)  dengan  klik  “ Prototype ”  di panel  kanan  terlebih  dahulu  dan  mengarahkan  panah sesuai rancangan.
g. Setelah  selesai,  penulis  mengklik  tombol  ikon  “ Play ” yang  ada  di  pojok  kanan  atas  untuk  menampilkan  hasil mock  up, sehingga  muncul  tampilan  seperti  kita  sedang menggunakan aplikasi yang diinginkan.
2.5.2 Wireframe
Wireframing merupakan  tahap  krusial  dalam  proses perancangan  desain  digital.  Proses wireframing digunakan untuk  merencanakan  tata  letak  suatu  desain  tanpa memasukkan elemen detail seperti teks atau warna [11].
Pembuatan wireframe adalah  langkah  kunci  dalam  proses desain  media  digital.  Ini  memungkinkan  adanya  aturan hierarki  informasi,  sehingga  lebih  mudah  dimengerti  serta dapat  membantu  perencanaan  tata  letak  struktur  informasi yang  tepat  berdasarkan  model  informasi  yang  diperlukan oleh pengguna ( user ) [12].
Dalam  tahap  ini,  perancang  menciptakan  kerangka  dasar menggunakan Figma setelah melakukan sketsa awal secara konvensional di atas kertas.
Hal  ini  dilakukan  agar  dapat  lebih  jelas  memahami  hasil perancangan  awal  yang  telah  disepakati  bersama  pihak terkait.
Adapun wireframe  a plikasi  ini  seperti  pada  Gambar  6 berikut.
Gambar 6. Wireframe

## 2.5.3 Implementasi Prototype
Tampilan  Aplikasi  Layanan  Pengadilan  Negeri  Bale Bandung yang telah di desain oleh  penulis dapat dilihat dari Tabel 3 seperti berikut ini.
Tabel 3. Tabel Prototype Log in Daftar Sign-in Google Gambar 7. Log-in Gambar 8. Daftar Gambar 9. Sign-in Google Gambar  7  menampilkan  logo,  nama  aplikasi,  dan registrasi akun. Gambar 8 menampilkan halaman daftar. Pengguna mendaftarkan email, kemudian membuat password.
Gambar 9 menampilkan halaman Sign-in . Pengguna dapat Sign-in menggunakan akun Google
Halaman Awal
Halaman Utama
Profil
Gambar 10. Halaman Awal
Gambar 11. Halaman Utama Gambar 12. Profil Gambar 10 menampilkan halaman awal yang berisi pilihan jenis surat Gambar 11 menampilkan halaman utama berisi informasi  yang  dapat  di  baca  lebih  lengkap ketika di klik Gambar  12  merupakan  tampilan  menu  profil. Pengguna  diarahkan  untuk  melengkapi  profil. Tampilan profil terdiri dari foto, nama lengkap, nomor telepon, alamat, dan email. Sub Menu Halaman Utama Alur Gambar 13. Sub Menu
Gambar 14. Hal. Utama
Gambar 15. Alur
Gambar  13  tampilan  sub  menu  digunakan  untuk memudahkan  pengguna  dalam  mencari  tampilan yang  dituju  dengan  pilihan  secara  lengkap  seperti profil, riwayat permohonan, formulir permohonan surat  keterangan, Template surat,  alur  proses pengajuan permohonan, syarat pengajuan, log out ,
dan ganti akun Gambar 14 merupakan tampilan  halaman utama berisi informasi yang dapat di baca lebih lengkap ketika di klik Gambar 15 menampilkan alur digunakan untuk mengarahkan  dan  memberi  edukasi  kepada pengguna dalam mengajukan permohonan surat keterangan bebas pidana Syarat dan Ketentuan
Template Surat Layanan Gambar 16. S&K
Gambar 17. Template
Gambar 18. Layanan
Gambar  16  merupakan  tampilan  syarat  dan ketentuan digunakan untuk memberikan informasi terkait  syarat  dan  ketentuan  yang  harus  dipenuhi oleh pemohon
Gambar  17  merupakan  tampilan Template digunakan  untuk  membantu  pemohon  dalam membuat surat.
Pada  Gambar  18  ini  terdapat  fitur  yang  dapat menunjang kebutuhan pengguna dalam melakukan pengajuan (seperti riwayat, template surat, dan info-info lainnya)
Form Permohonan Konfirmasi Pendaftaran
Gambar 19. Form Permohonan
Gambar 20. Konfirmasi Pendaftaran
Pada  Gambar  19  ini  berfungsi  sebagai  fitur  yang  dapat  memudahkan masyarakat dalam melakukan pendaftaran pengajuan
Pada Gambar 20 ini berfungsi untuk mengkonfirmasi pembayaran sehingga memudahkan staf Pengadilan untuk dapat melanjutkan proses pengajuan
Pop Up
Gambar 21. Pop Up
Pada Gambar 21 menampilkan beberapa Pop Up digunakan sebagai konfirmasi ulang untuk memastikan tindakan yang dilakukan oleh pengguna
2.5.4

## Testing
Setelah proses prototyping selesai, dilakukan pengujian hasil mock  up pada  desain  antarmuka  Aplikasi  Layanan Pengadilan  Negeri  Bale  Bandung.  Testing  adalah  langkah terakhir  yang  bertujuan  untuk  menilai  apakah  solusi  dan desain  yang  telah  dibuat  dapat  berfungsi  dengan  baik  bagi calon pengguna.
Setelah  proses  pengujian,  dilakukan  perbaikan  sebagai penyelesaian dari proses desain antarmuka pada proyek ini seperti pada Tabel 4.
Tabel 4. Tabel Testing Testing ke- … Sebelum
Sesudah 1. Palet Warna berwarna Biru Palet  Warna  berwarna hijau 2. Judul  Aplikasi  “Elektronik Surat Keterangan (ERATERANG)  Pengadilan Negeri Kabupaten Bandung” Judul aplikasi yakni “Aplikasi Layanan Pengadilan  Negeri  Bale Bandung”
3. Belum adanya tampilan khusus dari Sub menu, Alur, S&K, Template Surat,  dan Konfirmasi Pembayaran.
Adanya tampilan khusus dari  Sub  menu,  Alur,
S&K, Template Surat, dan Konfirmasi Pembayaran.
Setelah  dilakukannya  perbaikan,  dilakukannya  pengujian akhir dengan menyiapkan beberapa responden dengan hasil yang dapat dilihat pada Tabel 5 sebagai berikut:
Tabel 5. Hasil Pengujian Akhir No. Pertanyaan Resp.1 Resp.2 Resp.3 1. Apakah kesan  pertama Anda ketika menggunakan  aplikasi ini sesuai dengan ekspektasi Anda? Ya Ya Ya Apakah  tulisan  mudah terbaca?
Ya Ya Ya 3. Apakah  Anda  cepat menjadi terampil dengan aplikasi ini? Ya Ya Tidak 4. Apakah fitur-fitur yang ada sudah sesuai dengan kebutuhan? Ya Ya Ya 5. Pada  saat  pertama  kali mencoba  prototipe  ini, apakah  Anda  dapat memahami sendiri tanpa menanyakan pada orang lain? Tidak Ya Ya
Kesimpulan  dari  hasil  pengujian  di  akhir  dengan  beberapa responden adalah pengguna menilai bahwa:
a. Kesan  pertama  ketika menggunakan  aplikasi ini  yakni adanya kesesuaian  dengan ekspektasi pengguna.
b. Tulisan yang ada pada aplikasi ini sangat mudah terbaca.
c. Pengguna cukup cepat menjadi terampil dengan aplikasi ini.
d. Fitur-fitur  yang  disediakan  sangat  sesuai  dengan kebutuhan dari pengguna.
e. Aplikasi ini cukup mudah untuk dipahami sendiri.

## 4. KESIMPULAN
Berdasarkan  uraian  di  atas  dapat  disimpulkan  bahwa pengerjaan  perancangan  tampilan  desain user ( User Interface ) sangat diperlukan sebelum akhirnya di eksekusi oleh programmer untuk  memberikan  gambaran  realisasi aplikasi  yang  akan  digunakan  oleh  pengguna.  UI/UX dapat  lebih  mudah  dirancang  menggunakan tool Figma. Selain  itu,  tujuan  dibuatnya  Aplikasi  Layanan  Pengadilan Negeri  Bale  Bandung  adalah  untuk  memudahkan masyarakat dalam melakukan proses pengajuan surat secara online tanpa  harus  datang  ke  Pengadilan.  Hal  ini  tentu menjadi poin efektif dan efisien dari adanya aplikasi ini.
Dari  hasil  laporan  ini,  penulis  menyarankan  untuk dilakukannya  perbaikan      dan  pengembangan  seperti berikut:
a. Desain  dari  Aplikasi  Layanan  Pengadilan  Negeri  Bale Bandung Pengadilan Negeri Bale Bandung dapat diteruskan dan  dikembangkan  sehingga  penggunaan  aplikasi  dapat lebih maksimal.
b. Berdasarkan hasil desain yang dibuat maka saran untuk pengembangan desain Aplikasi Layanan Pengadilan Negeri Bale Bandung Pengadilan Negeri Bale Bandung yaitu:
a) Selain  digunakan  sebagai  verifikasi  pengguna, email  dan  nomor Handphone dapat  digunakan  untuk fungsi  lain  yakni  dapat  digunakan  sebagai  notifikasi validasi ketika status proses berubah dan sebagai wadah pengiriman surat hasil keputusan baik dari email maupun whatsapp .
b) Dapat  ditambahkan  fitur-fitur  lain  sebagai  agar aplikasi  ini  kelak  menjadi  aplikasi  yang  multifungsi sehingga tidak hanya memiliki satu benefit saja. Adapun fitur lainnya seperti:
1) Permohonan  pendaftaran  pendirian  CV,  firma, perusahaan dagang, dll;
2) Permohonan Waarmerking surat-surat;
3) Permohonan  Surat  Izin  untuk  melaksanakan penelitian/riset;
4) Permohonan Keterangan Data Perkara dan Turunan Putusan  Perkara  yang  Sudah  Berkekuatan  Hukum Tetap;
5) Permohonan Pendaftaran Surat Kuasa;
6) Pendaftaran Legalitas Surat;
7) Permohonan Informasi;
8) Kuasa Insidental; dan
9) Penolakan Waris.

## Ucapan Terima Kasih
Penulis mengucap syukur kepada Allah Subhanahu Wa Ta ’ala serta berterima kasih kepada seluruh pihak yang telah mendukung  baik  doa,  materi,  maupun  moral  sehingga tulisan  ini  dapat  selesai  sebagaimana  mestinya,  terutama kepada  Keluarga,  Rektor  Universitas  Teknologi  Digital, Dosen  Pembimbing,  Pihak  Pengadilan  Negeri  Bale Bandung, Sahabat-sahabat serta teman-teman D3
Manajemen Informatika Universitas Teknologi Digital.

## DAFTAR PUSTAKA
[1] I.  R.  Marbun  and  R.  Somya,  “Perancangan  Data Warehouse  untuk  Data  Transaksi  Penjualan Menggunakan  Schema  Snowflake  Studi  Kasus :
Online Market Dataset.,” in SEMINAR NASIONAL Dinamika Informatika, 2021, p. 87.
[2] S. Surahman and E. B. Setiawan, “Aplikasi Mobile Driver Online Berbasis Android Untuk Perusahaan Rental Kendaraan,” Jurnal ULTIMA InfoSys, vol. 8, no.  1, pp. 35–42, Aug. 2017, doi: 10.31937/si.v8i1.554.
[3] Mahkamah  Agung,  “Selamat  Datang,”  Website Pengadilan  Negeri  Bale  Bandung  -  Depan,  2015. https://pn-balebandung.go.id  (accessed  May  10, 2023).
[4] A.  Naser,  Syafwandi,  and  S.  Ahdi,  “Perancangan User  Interface  Dan  User  Experience  Halaman Website Program Studi Desain Komunikasi Visual Universitas Negeri Padang,” 2018.
[5] M.  A.  Muhyidin,  M.  A.  Sulhan,  and  A.  Sevtiana, “PERANCANGAN  UI/UX  APLIKASI  MY  CIC LAYANAN INFORMASI
AKADEMIK
MAHASISWA  MENGGUNAKAN  APLIKASI FIGMA,” Jurnal Digit, vol. 10, no. 2, p. 208, Dec. 2020, doi: 10.51920/jd.v10i2.171.
[6] S.  Suryaningsih,  Y.  Riandika,  A.  Hasanah,  and  S. Anggraito,  “Aplikasi  Wakaf  Indonesia  Berbasis Blockchain,” Edumatic: Jurnal Pendidikan Informatika, vol. 4, no. 2, pp. 20–29, Dec. 2020, doi: 10.29408/edumatic.v4i2.2402.
[7] A.  Fikriyya  and  R.  T.  Dirgahayu,  “Implementasi Prototyping  dalam  Perancangan  Sistem  Informasi Pendar Foundation Yogyakarta,” Automata, vol. 1, no. 2, 2020.
[8] S.  Suryaningsih,  Y.  Riandika,  A.  Hasanah,  and  S. Anggraito,  “Aplikasi  Wakaf  Indonesia  Berbasis Blockchain,” Edumatic: Jurnal Pendidikan Informatika, vol. 4, no. 2, pp. 20–29, Dec. 2020, doi: 10.29408/edumatic.v4i2.2402.
[9] R.  P.  Sutanto,  “Studi  Kasus  Website  Gramedia sebagai  Media  Online  untuk  Membeli  Buku,” Nirmana,  vol.  17,  no.  1,  p.  37,  Oct.  2018,  doi: 10.9744/nirmana.17.1.37-41.
[10] B. Abdullah, “Makna Warna Dalam Desain,” 2015.
10 | Jurnal Informatika Terpadu Vol. 10 No. 1 Maret 2024
[11] A.  Segara,  “Penerapan  Pola  Tata  Letak  (Layout Pattern)  pada  Wireframing  Halaman  Situs  Web,” Magenta  |  Official Journal  STMK Trisakti,  vol.  3, no. 01, pp. 452–464, Feb. 2019, doi: 10.61344/magenta.v3i01.45.
[12] A. H. A. Pratama and A. G. Persada, “Perancangan UI/UX  Aplikasi  Crowdfunding  UMKM  berbasis mobile  Menggunakan  Pendekatan  HCD  (Human
Centered Design)(Studi Kasus: UMKM Mahasiswa
UII),” Jurnal Nuansa Informatika, vol. 17, no. 1, pp.
99–110,
Jan.
2023, doi:
https://doi.org/10.25134/nuansa .