Perancangan User Interface dan User Experience Aplikasi Kepegawaian Berbasis Mobile Pada J&T Express dengan Metode Human Centered Desain.
Puspa Mayangsari 1 , Mohammad Badrul 2
12 Universitas Nusa Mandiri, Jl. Jatiwaringin No.2, Cipinang Melayu, Jakarta Timur, 13620, Indonesia

## I NFORMASI A RTIKEL

## A B S T R A C T
Sejarah Artikel: Diterima Redaksi: 15 Juli 2023 Revisi Akhir: 24 Juli 2023 Diterbitkan Online : 05 September 2023
Human resources are a valuable asset for every company. Human resources can help  create  a  positive  work  culture,  increase  productivity,  increase  employee satisfaction, and support company growth and innovation. The J&T company is an 8-year-old shipping and logistics service company in Indonesia. Of course, employees have a lot of hope, especially in terms of welfare and transparency in the staffing system. Because this system is not yet computerized, it results in data  recording  errors,  such  as  typing  wrong  numbers,  ignoring  data  entry,  or changing  the  position  of  numbers.  Errors  like  this  can  cause  inaccuracies  in recorded data such as attendance, recording of overtime and others which result in  recording  errors  in  calculating  employee  salaries  that  are  not  appropriate. Therefore  it  is  necessary  to  design  a  user  interface  and  user  experience  to develop the application. The method used by researchers is the Human Centered Design method, which is an approach in which the system focuses on all forms of activities carried out by users and can identify what the user's needs are. This research is expected to create a solution by developing the needs of system users and creating a more modern and user friendly appearance when used by users.
K ATA K UNCI
Human Resource user interface
user experience Human Centered Design

## K ORESPONDENSI

## E-mail: mohammad.mbl@nusamandiri.ac.id

## 1. PENDAHULUAN
Sumber  daya  manusia  (SDM)  yang  ada  di  perusahaan merupakan salah satu asset berharga. SDM mencakup individu- individu yang bekerja dalam organisasi dan berkontribusi dalam mencapai  tujuan  perusahaan  [1].  SDM  berperan  penting  dalam memastikan keberlanjutan dan keberhasilan perusahaan. Dengan pengelolaan  yang  baik,  SDM  dapat  membantu  menciptakan budaya  kerja  yang  positif,  meningkatkan  produktivitas, meningkatkan kepuasan karyawan, dan mendukung pertumbuhan dan  inovasi  perusahaan[2].  SDM  yang  dimiliki  oleh  suatu Lembaga  atau  perusahaan  digunakan  untuk  merujuk  pada manejemen  dan  administrasi  terkait  dengan  karyawan  atau pegawai  di  istilahkan  dengan  kepegawaian.  Hal  ini  mencakup proses perekrutan, penempatan, pengembangan, pengelolaan, dan pemeliharaan  karyawan.  Manajemen  kepegawaian  yang  efektif sangat penting dalam menjaga kelancaran operasional organisasi, meningkatkan  produktivitas  karyawan,  dan  menciptakan lingkungan kerja yang sehat dan harmonis[3].
Perusahaan  J&T  adalah  perusahaan  jasa  pengiriman  dan logistik yang beroperasi di Indonesia. J&T Express, atau sering disebut  J&T,  didirikan  pada  tahun  2015  dan  telah  berkembang menjadi  salah  satu  perusahaan  pengiriman  terkemuka  di Indonesia.  Sebagai  perusahaan  jasa  pengiriman,  J&T  Express menyediakan  berbagai  layanan  logistik,  termasuk  pengiriman paket  dan  dokumen  secara  nasional  maupun  internasional. Mereka  memiliki  jaringan  distribusi  yang  luas,  dengan  ribuan
titik layanan dan ratusan pusat sortir di seluruh Indonesia. Salah satu cabang perusahaan J&T ada di daerah Pademangan Jakarta Utara. Dengan usia perusahaan yang menginjak 8 tahun tentunya banyak harapan yang digantungkan oleh karyawan di perusahaan J&T terutama dalam hal kesejahteraan dan transparansi di sistem kepegawaian. Namun sampai saat ini sistem kepegawaian di J&T belum mengimplementasikan sistem yang terkomputerisasi.
Karena  sistem  yang  belum  terkomputerisasi  inilah  yang dapat mengakibatkan kesalahan saat mencatat data, seperti salah mengetik  angka,  mengabaikan  entri  data,  atau  menukar  posisi angka. Kesalahan semacam ini dapat menyebabkan ketidakakuratan  data  yang  dicatat  seperti  presensi,  pencatatan lembur dan lainnya yang berimbas pada kesalahan pencatatan di perhitungan  gaji  karyawan  yang  kurang  sesuai.  Dalam  upaya meningkatkan  efisiensi  dan  akurasi,  banyak  perusahaan  beralih ke pencatatan digital dan otomatisasi proses. Penggunaan sistem manajemen  informasi  atau  perangkat  lunak  kepegawaian  yang terintegrasi  dapat  membantu  mengatasi  kelemahan-kelemahan yang terkait dengan pencatatan manual. Untuk menjembatani hal ini  dibutuhkan  aplikasi  yang  dapat  digunakan  untuk meningkatkan  produktivitas  karyawan  di  perusahaan  yaitu aplikasi kepegawaian.
Aplikasi kepegawaian adalah perangkat lunak atau sistem yang digunakan oleh perusahaan untuk mengelola berbagai aspek
kepegawaian.  Aplikasi  ini  membantu  mengotomatisasi  dan memudahkan  proses  administrasi,  pengelolaan  data  karyawan, dan kegiatan terkait kepegawaian. Dengan menggunakan aplikasi kepegawaian, perusahaan dapat menghemat  waktu,  mengurangi kesalahan  manusia,  meningkatkan  efisiensi,  dan  meningkatkan akurasi  dan  keandalan  dalam  pengelolaan  kepegawaian.  di  era digital saat ini, akses informasi yang cepat dan update merupakan tuntutan  yang  penting  bagi  aplikasi  perusahaan.  Para  karyawan umum  memiliki  harapan  yang  tinggi  terhadap  kemudahan  dan kecepatan dalam mengakses informasi terkini khususnya aplikasi kepegawaian yang disediakan oleh perusahaan [4] .
Dalam mengembangkan atau memilih aplikasi perusahaan, penting untuk memperhatikan kebutuhan dan tuntutan pengguna dalam  hal  akses  informasi  yang  cepat  dan  update.  Penggunaan teknologi  yang  tepat,  pengelolaan  data  yang  efisien,  dan pembaruan  sistem  secara  teratur  dapat  membantu  memenuhi tuntutan ini dan memberikan pengalaman yang memuaskan bagi karyawan. Oleh sebab itu dibutuhkan perancangan user interface dan user  experience untuk  mengembangkan  aplikasi  tersebut. User  Interface (UI)  dan User  Experience (UX)  memiliki  peran yang sangat penting dalam kesuksesan suatu aplikasi atau produk digital[5].  Menginvestasikan  waktu  dan  sumber  daya  dalam merancang dan mengoptimalkan UI dan UX adalah penting untuk menciptakan pengalaman pengguna yang positif dan memuaskan. Hal  ini  dapat  membantu  meningkatkan  kepuasan  pengguna, retensi, dan keunggulan kompetitif perusahaan.
Ada  beberapa  penelitian  sebelumnya  yang  membahas tentang  perancangan User  Interface (UI)  dan User  Experience (UX),  seperti  yang  dilakukan  oleh[6]  yang  melakukan Perancangan  Website  Apotek dengan  Metode Human  Centered Design dan System  Usability  Scale yang  bertujuan  untuk membantu  sistem  informasi  pendataan  yang  ada  pada  Apotek rakyat anda. Penelitian lain yang dilakukan oleh  [7] melakukan penelitian  dengan  judul  Perancangan User  Interface dan User Experience Aplikasi Medical  Tourism Indonesia  menggunakan Metode User Centered Design , Hasil perancangan menghasilkan rumusan  kebutuhan  pengguna  yang  dijadikan  fitur,  serta menghasilkan  desain  dan  prototype  yang  kemudian  dievaluasi menggunakan metode Sistem Usability Scale (SUS) dan berhasil mendapat  skor  80,125  dengan  rating  “ Good ”  yang  berarti tampilan  aplikasi  Medical  Tourism  Indonesia  sudah  baik  dan telah memenuhi kebutuhan pengguna.
Berdasarkan  permasalahan  yang  muncul  dilakukan penelitian  untuk  merancang  sebuah  desain  antar  muka  serta pengalaman  pengguna  yang  bertujuan  untuk  memenuhi kebutuhan  pengguna  dan  memudahkan  pemakaian  fitur-fitur yang  terdapat  pada  aplikasi[8].  Metode  yang  digunakan  oleh peneliti  adalah  metode Human  Centered  Design .  Dengan menggunakan  metode Human  Centered  Design [9] dapat diketahui apa saja kebutuhan pengguna. Metode Human Centered Design (HCD) ini merupakan sebuah pendekatan yang sistemnya berfokus kepada segala bentuk aktivitas-aktivitas yang dilakukan oleh  pengguna[10].  Dalam  penerapan  metode Human  Centered Design perancangan  yang  dilakukan  memerlukan  pendekatan terhadap  pengguna,  karena  hal  itu  dapat  menjadikan  seorang menempatkan posisinya sebagai orang yang akan menggunakan sistem[11].  Penelitian  ini  diharapkan  dapat  membuat  sebuah solusi  dengan  melakukan  pengembangan  pada  kebutuhan pengguna sistem dan membuat tampilan yang lebih modern dan user friendly ketika digunakan oleh user.

## 2. TINJAUAN PUSTAKA
2.1 User Interface
Penggunaan  user  interface  atau  antarmuka  aplikasi  pada dasarnya  untuk  melakukan  komunikasi  antara  manusia  dengan mesin  komputer. User  Interface (UI)  melibatkan  berbagai prinsip,  pedoman,  dan  elemen-elemen  yang  membentuk  desain antarmuka  yang  baik  dan  efektif.  Beberapa  hal  penting  dalam User  Interface  (UI)  antara  lain  Kesederhanaan  ( Simplicity ),
Konsistensi ( Consistency ), Antarmuka yang Intuitif ( Intuitiveness ), Efisiensi ( Efficiency ), Responsif
( Responsiveness ),  Estetika  Visual  ( Visual  Aesthetics )  dan Aksesibilitas  ( Accessibility )[12].  Konsep-konsep  ini  membantu menciptakan desain UI yang efektif, mengarah pada pengalaman pengguna  yang  baik,  dan  memudahkan  pengguna  dalam berinteraksi dengan sistem atau aplikasi komputer[13]. 2.2 User Experience
User  Experience (UX)  merupakan  istilah  yang  mengacu pada  keseluruhan  pengalaman  subjektif  yang  dialami  oleh pengguna saat berinteraksi dengan produk, layanan, atau sistem. UX melibatkan aspek-aspek emosional, kognitif, dan praktis dari pengalaman  pengguna,  termasuk  persepsi,  respons,  dan pemahaman  pengguna  terhadap  produk  atau  layanan  yang digunakan. beberapa konsep utama dalam User Experience (UX) seperti  Pengguna  Sentris  ( User-Centric ),  Penelitian  Pengguna ( User  Research ),  Penggunaan  yang  Mudah  ( Ease  of  Use ),
Kenyamanan ( Comfort ), Keberdayaan ( Empowerment ), Konsistensi ( Consistency ), Emosi ( Emotions )[14]. Semua konsep ini  membantu  menciptakan  pengalaman  pengguna  yang  positif, memuaskan, dan efektif. Memperhatikan UX memainkan peran penting  dalam  membangun  loyalitas  pengguna,  meningkatkan kepuasan  pengguna,  dan  mencapai  tujuan  bisnis  yang diinginkan[15].
2.3 User Centered Design (UCD) User-Centered  Design (UCD)  adalah  pendekatan  dalam proses  desain  yang  menempatkan  pengguna  sebagai  pusat perhatian  utama.  UCD  berfokus  pada  pemahaman  yang mendalam  tentang  pengguna,  kebutuhan  mereka,  dan  konteks penggunaan  produk  atau  layanan  yang  sedang  dirancang[16]. HCD merupakan pendekatan dalam merancang produk, layanan, atau  sistem  yang  berfokus  pada  kebutuhan,  preferensi,  dan pengalaman  pengguna.  Pendekatan  ini  menempatkan  pengguna sebagai pusat perhatian dalam semua tahap proses desain, mulai dari penelitian pengguna awal hingga evaluasi produk yang telah jadi.  Tujuannya  adalah  untuk  menciptakan  solusi  yang  relevan, efektif,  dan  memuaskan  bagi  pengguna.  Berikut  beberapa langkah yang terdapat pada User-Centered Design (UCD) seperti pada gambar berikut ini:
Gambar 1. Metode User Centered Design Ada  beberapa  tahapan  yang  digunakan  di  metode User- Centered Design (UCD) yaitu[14]:
1. Menentukan konteks penggunaan ( specify the context of use ).
Pada  tahap ini  dilakukan pengidentifikasian  user yang  akan melakukan aplikasi. yang pertama adalah guest, guest disini hanya  dapat  melihat  halaman  home  yang  terdapat  pada dasboard. yang kedua adalah karyawan, karyawan juga hanya dapat  melihat  halaman  home  yang  terdapat  pada  dasboard. yang ketiga adalah Vice President Business and Technologi
(VP  Bistek),  VP  Bistek  dapay  mengakses  semua  halaman yang ada pada dasboard yaitu halaman home dan detail.
2. Menentukan  kebutuhan  penggunaan  dan  organisasi (specify user  and  organizational  requirements ).  Pada  tahapan  ini dilakukan  identifikasi  terhadapat  kebutuhan  pengguna melalui  teknik  wawancara.  Berdasarkan  hasil  wawancara yang  sudah  dilakukan  ada  beberaoa  informasi  yang diperlukan terkait pengembangan aplikasi seperti menampilkan data project serta data financial pada dashboard untuk melakukan monitoring kinerja perusahaan.
3. Membuat desain solusi ( produce design solutions ). Tahap ini merupakan  tahap  desain  solusi  produk  dimana  akan membangun desain sebagai solusi dari tampilan sistem yang akan  dianalisis  pada  aplikasi  yaitu  halaman  yang  dapat menampilkan  data  yang  dibutuhkan  seperti  menampilkan data project dan data financial dengan bentuk grafik
4. Mengevaluasi desain terhadap kebutuhan pengguna ( evaluate designs  against  user  requirements). proses  penting  dalam memastikan bahwa solusi yang dirancang memenuhi harapan dan kebutuhan pengguna. Berikut ini adalah beberapa metode umum yang dapat digunakan dalam evaluasi desain terhadap kebutuhan pengguna

## 3. METODOLOGI

## 3.1. Tahapan Penelitian
Tahapan  penelitian  yang  dilakukan  oleh  peneliti  dalam membuat  perancangan user  interface dan user  experience digambarkan dalam bentuk flowchart. Dalam penelitian ini, ada beberapa  tahapan  yang  dilaksanakan  oleh  peneliti  untuk menghasilkan  desain  yang  sesuai.  Alur  penelitian  dapat digambarkan seperti berikut ini
Gambar 1. Tahapan Penelitian Gambar  diatas  menampilkan  tahapan  penelitian  yang  penulis lakukan dengan melihat studi literatur dari beberapa artikel ilmiah yang  relevan  dengan  penelitian  yang  penulis  bahas  terutama metode  yang  digunakan.  Kemudian,  melakukan  pengumpulan masalah  yang  sering  dihadapi  karyawan  pada  J&T  Express terutama dalam hal penggajian karyawan dan mengolah masalah tersebut  untuk  menjadikannya  solusi,  kemudian  sekanjutnya membuat  rancangan  desain  sistem  serta  melakukan  pengujian terhadap desain sistem apakah sistem telah bekerja dengan baik atau  tidak.  Penelitian  ini  difokuskan  untuk  perancangan  user experience  dengan  pendekatan Human  Centered  Design dan rancangan sistem juga berfokus pada kebutuhan pengguna.

## 3.1. Metode Human Centered Desain (HCD)
Proses  Perancangan  aplikasi  kepegawaian  pada  J&T Express cabang Pademangan 07 Jakarta Utara ini menggunakan
metode Human  Centered  Design (HCD)  yang  memiliki  tiga tahapan sebagai berikut:
1. Inspiration Tahap  di  metode Human  Centered  Design yang  harus dilakukan pertama kali karena metode ini lebih menekankan terhadap  peran  manusia  sehingga  membutuhkan  observasi terlebih  dahulu  kepada  pengguna  yang  nantinya  akan menggunakan  sistem  informasi  tersebut.  Tahapan  ini sangatlah  penting  dilakukan  karena  tujuannya  adalah memahami  dari  sisi  manusia  sebagai  calon  pengguna  dan pengembang  sistem  informasi  tersebut. Salah  satu  aktifitas yang dilakukan di tahap ini adalah observasi . Aktifitas yang dilakukan peneliti di tahapan ini adalah  membuat quesioner untuk memperoleh data dan informasi berikut permasalahan yang  dihadapi  pengguna  yang  telah  menggunakan  sistem informasi  berikut  capaian  dari  perusahaan  J&T  Express Cabang Pademangan 07 Jakarta. Pertanyaan pada kuesioner melibatkan kebiasaan para  pegawai,  mekanisme  dari  sistem kepegawaian  dan  capaian  mengenai  sistem  kepegawaian yang ingin di bangun.
2. Ideation Tahap  kedua  di  metode Human  Centered  Design adalah ideation ,  tahap  ini  dilakukan  jika  masalah  yang  ingin diselesaikan  sudah  terlihat  dan  diketahui  dari  pengisian questioner  di  tahapan Inspiration .  Tahap  berikutnya  adalah membuat  solusi  yang  akan  digunakan  untuk  menyelesaikan masalah  tersebut.  Kreatifitas  di  tahap  kedua  ini  mutlak diperlukan  unutk  mewujudkan  kebutuhan-kebutuhan  dari user  atau pegawai.  Tahapan pembuatan  desain perancangan user interface dibuat sesuai dengan kebutuhan dan kebiasan dari  pengguna  yang  menggunakan  sistem  yang  sudah dipahami dari jawaban questioner di tahap pertama. Beberapa aktifitas yang dilakukan di tahap ideation yaitu membuat ide sebaik  mungkin  yang  diperoleh  dari  permasalahan  yang hadapi  pengguna  sistem  atau  idea  generation,  melakukan perancangan prototyping untuk  dicoba  kepada  pengguna, penggunaan prototyping ini dapat mempermudah
menyalurkan  ide  desain  dari  masalah  yang  sudah  diketahui dan  mengetahui  kebiasaan  yang  biasa  dilakukan  oleh pengguna sistem. Setelah tahap pembuatan prototyping sudah dibuat  sesuai  kebiasaan  pengguna,  tahap  desain  selanjutnya membutuhkan pengguna untuk merealisasikan masalah yang diperoleh dari pemikirian desainer tersebut untuk mendapatkan feedback dari pembuatan prototyping tersebut.
3. Implementation Tahap  ketiga  di  metode Human  Centered  Design adalah implementation ,  tahap  ini  merupakan  tahap  penggabungan ide, inovasi dan kreatifitas dari desainer menjadi bentuk nyata yang berfungsi untuk menyelesaikan permasalahan yang ada di  tahap  pertama  dan  kedua.  Hasil  terakhir  dari  tahapan  ini berbentuk  sistem  real  yang  merupakan  pembaharuan  dari sistem  informasi  kepegawaian  dari  desain  yang  sudah  di lakukan  evaluasi  dari  umpan  balik  pengguna  yang menggunakan  sistem  informasi  tersebut.  Aktifitas  yang dilakukan  di  tahap  ini  adalah  pengecekan  atau  testing. Tahapan  pengujian  ini  perlu  dilakukan  untuk  mengetahui pengalaman,  kebiasaan  atau user  experience dari  pengguna atau pegawai yang menggunakan sistem informasi tersebut.
Studi Literatur
Mengumpulkan Masalah Mencari dan Mendapatkan Solusi Membuat Desain Menguji Desain Hasil dan Saran
Selesai

## 4. HASIL DAN PEMBAHASAN
Berdasarkan  penelitian  yang  telah  penulis  lakukan  kepada Karyawan atau User dari Aplikasi Kepegawaian ini yang sudah di  lakukan  sebagai  tahapan  metodologi  diatas.  Menghasilkan uraian hasil sebagai berikut.
4.1. Tahapan Deklarasi
Berikut  beberapa  tahapan  yang  yang  dilakukan  di  tahapan deklarasi:
1. Inspiration: Tahap di metode Human Centered Design yang harus  dilakukan  pertama  kali  karena  metode  ini  lebih menekankan terhadap peran manusia sehingga membutuhkan observasi terlebih dahulu kepada pengguna yang  nantinya  akan  menggunakan  sistem  informasi tersebut. Untuk itu kita perlu melakukan observasi dengan manusia  itu  sendiri  untuk  lebih  memperharikan  apa  yang dingin kan dari user atau pengguna.
2. Observasi: Observasi  ini  menghasilkan  skema  desain aplikasi  yang  di  dapatkan  pada  saat  observasi  dengan mengajukan  beberapa  pertanyaan  kepada  user  atau pengguna.  Untuk  itu  aplikasi  ini  dibuat  berdasarkan keinginan  dan  masukan  baik  dari  pihak  J&T  CP Pademangan 7 Jakarta Utara.
3. Ide Generation: Pada tahap ini penulis membuat beberapa referensi-referensi dari beberapa design yang berkaitan dari masalah yang dihadapi oleh user atau pengguna.
4. Prototyping: Penulis melakukan perancangan Prototyping untuk  dievaluasi  atau  dicoba  langsung  kepada  pengguna yang menggunakan sistem informasi tersebut. Prototyping yang  dibuat  menggunakan  aplikasi  Figma  yang mempermudah penyaluran ide desainer dari permasalahan dan kebiasaan yang pengguna lakukan. Sebelum akhirnya aplikasi tersebut di implementasikan ke tahap development.
5. Testing: Tahapan  Testing  ini  penting  untuk  mengetahui user  experience dari  pengguna.  Penulis  akan  melakukan beberapa  uji  testing  terkait Usability  Tesing yang  akan menggunakan tools dari Maze.

## 4.2. Membuat MVP (Minimum Viable Product)
Tahapan  yang  dimulai  dari  perancangan  sketsa  atau  yang bisa  disebut wireframe yang  dijadikan  sebagai  kerangka  untuk menata,  mengurutkan  desain  aplikasi  sistem  informasi kepegawaian.  Item-item  yang  saling  terkait  seperti  layout, gambar,  teks  dan lainnya.  Selanjutnya  setelah  tahap  pembuatan perancangan  sketsa  atau wireframe selesai  dilakukan,  tahapan berikutnya  adalah  melakukan  evaluasi,  tahap  pembuatan user interface dan user experience hingga tahap pengujian.
1. Perancangan Wireframe
Tahapan  ini  merupakan  tahap  membuat  desain  konsep prototype .  Hal  ini  dilakukan  untuk  memberikan  gambaran  dari kerangka  atau  layout  berikut  konten  serta  fitur-fitur  yang disediakan  nantinya.  Perancangan Wireframe menggunakan aplikasi Figma menggunakan Smartphone yang memiliki ukuran minimal 5 inch keaatas supaya hasilnya lebih maksimal. a.   Sign In dan Sign Up
Pada bagian sign in user atau pengguna yang sudah memiliki akses dapat mengisikan Field Email dan Kata sandi nya, Jika yang  tidak  memiliki  akses  terdapat  fitur  Sign  Up  yang  di lengkapi  beberapa  informasi  yang  harus diisi.  Ketika  sudah mengeklik  tombil  Daftar  maka  akan  di  daftarkan  akun tersebut  dengan  email  yang  sudah  di  daftarkan.  Untuk password akan sudah ada otomatis sendiri.
Gambar 3. Wireframe Sign In dan Sign Up b.  Home
Pada  menu  home  ini  atau  yang  bias  akita  sebut  halaman beranda,  dimana  halaman  ini  terdapat  fitur-fitur  yang disediakan  yang  disesuaikan  dengan  pengguna  atau  user. Seperti  adanya  menu  Cuti,  Lembur  dan  Kehadiran.  Pada menu  ini  untuk  Kehadiran  penulis  tampilkan  di  awal  untuk lebih efisensi dalan User Experience.
Gambar 4. Wireframe Home c.  Profile
Pada  menu  ini  adalah  menu  profile  dimana  menu  ini menampilkan  data  diri  dari  pemilik  akun  pada  Aplikasi Kepegawaian  JNT  ini.  Dilengkapi  dengan  Ubah  Profile Ketika  user  atau  pengguna.  Lupa  dengan  Email  maka  bisa mengganti  Email  dengan  disediakan  fitur  verfikasi  sebagai security check untuk mencegah adanya pembobolan data.
Gambar 5. Wireframe Profile
d.   Rekam Kehadiran (Absensi)
Pada  menu  ini  adalah  menu  absensi  pegawai  yang  akan dipakai oleh pengguna atau user. Absensi ini disediakan fitur lokasi  untuk  absensi  lebih  akurat.  Jadi  Ketika  absen  lokasi harus dihidupkan supaya lokasi dapat terdeteksi. Dan Ketika rekam kehadiran sudah  berhasil akan tampil popup berhasil dan Ketika gagal akan menampilkan validasi gagal absensi.
Gambar 6. Wireframe Rekam Kehadiran e.  Cuti
Tampilan cuti ini dibuat menjadi 2 menu di dalamnya yang pertama  adalah  Riwayat  dimana  Riwayat  ini  diisi  oleh Riwayat-riwayat  cuti  yang  diajukan  dan  dilengkapi  dengan status  cuti  di  dalamnya.  Dan  menu  kedua  adalah  Saldo. Dimana saldo ini adalah jumlah dari cuti yang diberikan oleh pegawai. Ketika saldo cuti itu dipakai maka terdapat diagram dan angka yang akan berkurang. Untuk pembuatan cuti dapat klik  tombol  ajukan  untuk  mengisi  field  didalamnya  secara lengkap.  Ketika  sudah  diisi  akan  terdapat  detail  cuti  yang diajukan  dan  terdapat  tombol  kembali  untuk  Kembali kehalaman Riwayat Cuti.
Gambar 7. Wireframe Cuti f.  Lembur
Menu tampilan lembur di awali dengan Riwayat lembur yang sudah  diajukan  dan  dilengkapi  dengan  status  pengajuan lemburnya.  Dan  terdapat  tombol  Permintaan  Baru  untuk membuat  lembur  yang  baru  di  halaman  form  lembur  dan Ketika  klik  tombol  ajukan  maka  akan  tambil  detail  lembur yang diisi sesuai pengajuan. Dan ada tombol Kembali untuk Kembali ke menu lembur awal.
Gambar 8. Wireframe Lembur g.  Report
Dalam  tampilan  Report  ini  terdapat  beberapa  laporan  yang terdiri  dari  3  fitur  utama  yaitu  kehadiran,  cuti  dan  lembur. Laporan tersebut Ketika di klik icon panah akan ke halaman detail  report  yang  bisa  diatur  dengan  sesuai  filter  tanggal didalamnya. Dan bisa di unduh dengan excel atau dikirim ke email.  Ketika  berhasil  dengan  menggunakan  unduh  excel maka  akan  kebuka  file  excelnya.  Ketika  dikirim  ke  email akan ada popup berhasil Ketika sudah dikirim ke email.

## Gambar 9. Wireframe Report

## 2. Perancangan UI/UX Design
Tahapan  ini  merupakan  tahapan  untuk  menyempurnakan tahapan  sebelumnya  yaitu  pembuatan  wireframe  yang  akan menyatukan semua aspek baik user interface dan user experience. Perancangan  desain  sudah  menyerupai  aplikasi  asli  karena  di kombinasikan  dengan  perpaduan  teks,  warna  maupun  typografi dan  dapat  dijalankan  atau  bisa  di  klik.  Tahap  inipun menggunakan pengaplikasian dari aplikasi figma yang dijalankan di smartphone yang memiliki ukuran minimal 5 inch keaatas.
a. Sign in dan Sign up
b. Home
Gambar 11. UI/UX Design Home c. Profile Gambar 12. UI/UX Design Profile
d. Rekam Kehadiran
Gambar 13. UI/UX Design Rekam Kehadiran
e. Cuti
f. Lembur Gambar 15. UI/UX Design Lembur
g. Report

## Gambar 16. UI/UX Design Report

## 3. Run An Experiment
Tahapan  terakhir  yang  penulis  lakukan  yaitu  melakukan testing.  Penulis  menggunakan  aplikasi  Maze  dengan  partisipan yang digunakan sebanyak 5 pengguna yang menggunakan sistem informasi tersebut. Berikut hasil pengujian dari tahapan ini.
a. Test Sign in dan Sign up
Tahapan testing Sign in dan Sign up yang dilakukan  oleh penulis  kepada  pengguna  sistem  informasi  kepegawaian yang  menghasilkan  nilai  100  %  sukses  seperti  gambar berikut ini.
Gambar 17. Testing Sign in dan Sign up b. Test Profile Tahapan testing profile yang dilakukan oleh penulis kepada pengguna sistem informasi kepegawaian yang menghasilkan nilai 100 % sukses seperti gambar berikut ini.
Gambar 18. Testing Profile
c. Test Rekam Kehadiran
Tahapan  testing  rekam  kehadiran  yang  dilakukan  oleh penulis  kepada  pengguna  sistem  informasi  kepegawaian yang  menghasilkan  nilai  100  %  sukses  seperti  gambar berikut ini.
Gambar 19. Testing Rekam Kehadiran d. Test Cuti
Tahapan  testing  cuti  yang  dilakukan  oleh  penulis  kepada pengguna sistem informasi kepegawaian yang
menghasilkan nilai 100 % sukses seperti gambar berikut ini.
Gambar 20. Testing Cuti e. Test Lembur
Tahapan testing lembur yang dilakukan oleh penulis kepada pengguna sistem informasi kepegawaian yang
menghasilkan nilai 100 % sukses seperti gambar berikut ini. .
f. Testing Report Tahapan testing Report yang dilakukan oleh penulis kepada pengguna sistem informasi kepegawaian yang
menghasilkan nilai 100 % sukses seperti gambar berikut ini.
Gambar 22. Testing Report

## 5. KESIMPULAN DAN SARAN
Berdasarkan hasil penelitian dan perancangan desain yang telah dilakukan maka penulis dapat menarik kesimpulan sebagai berikut :
1. Dengan  perpaduan  metode  waterfall  dan  HCD  ( Human Centered  Desaign )  Proses  penelitian  dan  perancangan Aplikasi  Kepegawaian  JNT  CP  Pademangan  7  berjalan dengan baik dan cepat. Sehingga menghasilkan desain yang efesiensi dan sesuai dengan kebutuhan user  atau pengguna.
2. Dari  penentuan  testing  telah  dilakukan  oleh  para  partisipan pegawai yang sekaligus menjadi user atau pengguna aplikasi tersebut  dengan  metode  HCD  ( Human  Centered  Desaign ), proses  testing  menghasilkan  tingkat  presentase  mencapai 100%  dalam  testing  desain  aplikasi  atau prototype  tersebut. Secara  keseluruhan  pegawai  cepat  memahami  apa  yang penulis  intruksikan  atau  jelaskan  sebelum  para  pegawai melakukan  testing  terhadap  aplikasi  aplikasi  kepegawaian tersebut.

## DAFTAR PUSTAKA
[1] H.  Riniwati, Manajemen  Sumber  Daya  Manusia .
Malang: UB Press, 2016.
[2] N. W. D. Irmayani, Manajemen sumber daya Manusia .
Yogyakarta: Deepublish, 2021.
[3] Heriani  Puspa  Kartika,  Ratih  Hesty  Utami  P,  and  Rr. Hawik  Ervina  Indiworo,  “Faktor-Faktor  yang Mempengaruhi  Kinerja  Karyawan  JNT  Express  Kota Rembang  Tahun  2022,” J.  Penelit.  Ekon.  Manaj.  dan Bisnis ,  vol.  1,  no.  4,  pp.  185–196,  2022,  doi: 10.55606/jekombis.v1i4.710.
[4] M.  S.  Hartawan,  “Penerapan  User  Centered  Design (Ucd) Pada Wireframe Desain User Interface Dan User Experience Aplikasi Sinopsis Film,” Jeis J. Elektro Dan Inform. Swadharma , vol. 2, no. 1, pp. 43–47, 2022, doi: 10.56486/jeis.vol2no1.161.
[5] A. Fadila Aprilina and M. Azrino Gustalika, “Analisis Usability Pada Aplikasi Alingka Menggunakan Metode Cognitive Walkthrough,” J. Ilm. Inform. , vol. 11, no. 01, pp. 69–76, 2023, doi: 10.33884/jif.v11i01.7158.
[6] C. Damayanti, A. Triayudi, and I. D. Sholihati, “Analisis UI/UX  Untuk  Perancangan  Website  Apotek  dengan Metode Human Centered Design dan System Usability Scale,” J.  Media  Inform.  Budidarma ,  vol.  6,  no.  1,  p. 551, 2022, doi: 10.30865/mib.v6i1.3526.
[7] S.  Ernawati  and  A.  D.  Indriyanti,  “Perancangan  User
Interface  dan  User  Experience  Aplikasi  Medical Tourism  Indonesia  Berbasis  Mobile  Menggunakan Metode  User  Centered  Design  (UCD)(Studi  …,” J. Emerg.  Inf.  … ,  vol.  03,  no.  04,  pp.  90–102,  2022, [Online]. Available:
https://ejournal.unesa.ac.id/index.php/JEISBI/article/vi ew/49296%0Ahttps://ejournal.unesa.ac.id/index.php/JE ISBI/article/download/49296/40999.
[8] R.  Parlika,  R.  R.  Mahendra,  M.  Lutfi,  and  ...,
“Pengukuran  Kualitas  Perangkat  Lunak  Website
Pendataan Ekskul Siswa Menggunakan Function Point,”
J. Ilm.
… , 2023, [Online]. Available: https://ejournal.upbatam.ac.id/index.php/jif/article/view /5578%0Ahttps://ejournal.upbatam.ac.id/index.php/jif/a rticle/download/5578/3094.
[9] L. Kirby, H. Tolle, and A. H. Brata, “Perancangan User
Experience  Aplikasi  Mobile  Social  Crowdsourcing Bencana  Alam  menggunakan  Pendekatan  Human- Centered Design (HCD),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. e-ISSN , vol. 2548, no. 5, p. 964X, 2019.
[10] F.  P.  Putra  and  A.  Tedyyana,  “Pendekatan  Human Centered  Design  pada  Perancangan  User  Experience Aplikasi Pemesanan Menu Cafe,” vol. 10, pp. 336–345, 2021.
[11] A.  R.  Setiadi  and  H.  Setiaji,  “Perancangan  UI/UX menggunakan  pendekatan  HCD  (Human-Centered design) pada website Thriftdoor,” Automata , vol. 1, no.
2, pp. 228–233, 2020.
[12] A.  M.  Nidhom, Interaksi  Manusia  dan  Komputer . Ahlimedia Book, 2019.
[13] K.  Khamdun,  E.  R.  Nainggolan,  and  J.  L.  Putra, “Perancangan  Sistem  Informasi  Manajemen  Pelatihan Kursus  Berbasis  Web  Pada  CV Nixtrain  Infotama,” J. Ilm.  Inform. ,  vol.  10,  no.  01,  pp.  1–7,  2022,  doi:
10.33884/jif.v10i01.4478.
[14] R. A. Malik and M. R. Frimadani, Lean UX:Pemahaman dan  Penerapan  Metodologi  Desain  UI  yang  Efektif . Yogyakarta: Jejak Pustaka, 2023.
[15] K.  R.  Carisfian,  A.  P.  Kharisma,  and  T.  Afirianto, “Perancangan  User  Experience  Aplikasi  Informasi Lomba  Karya  Tulis  Ilmiah  Mahasiswa  Menggunakan Metode  Human-Centered  Design,”  vol.  3,  no.  9,  pp. 8723–8731, 2019.
[16] I.  D.  P.  Nugroho  and  N.  S.  Fatonah, Penerapan  User
Centerd  Design  untuk  sistem  Contingency  Plan .  Buku Pedia, 2022.

## BIODATA PENULIS

## Puspa Mayangsari
Mahasiswi Universitas Nusa Mandiri Program Studi Sistem Informasi Email: puspamayangsari00@gmail.com

## Mohammad Badrul, M.Kom
Dosen  Universitas  Nusa  Mandiri  Jakarta Program Studi Sistem Informasi. Fakultas Teknologi Informasi Email: mohammad.mbl@nusamandiri.ac.id