Jurnal Teknik Informatika dan Sistem Informasi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 291
Perancangan Front And Aplikasi Penjualan Berbasis Web Menggunakan Metode HCD
Indah Rafiqa Zulva* 1 , Edi Susilo 2 , Muhammad Fazlie 3
1,2,3 Program Studi Teknik Informatika, Fakultas Teknik, Universitas Riau, Pekanbaru e-mail: * 1 indah.rafiqa.zulva@gmail.com, 2 edi.susilo@lecturer.unri.ac.id, 3 mfzl3927@gmail.com

## Abstrak
Koperasi  Unit  Desa  (KUD)  Jaya  Makmur  merupakan  koperasi  yang  terletak  di Kampung  Kumbara  Utama.  Bidang  usahanya  yaitu  warung  serba  ada  (Waserda),  sarana produksi (Saprodi), dan Unit Simpan Pinjam (USP). Bidang usaha waserda mencatat transaksi penjualan  menggunakan  aplikasi  iPos  versi  4.0.5.3.  yang  dibuat  dengan  Visual  Basic  .NET. Aplikasi  iPos  versi  4.0.5.3  yang  digunakan  pada  KUD  Jaya  Makmur  ditemukan  beberapa permasalahan. Waserda memiliki  server dan 3 kasir, namun aplikasi tersebut baru digunakan pada server dan 1 kasir, sehingga kasir yang lain menuliskan penjualan barang secara manual. Pada  aplikasi  tersebut  juga  terdapat  kendala  pada  fitur  jumlah  stok.  Angka  berapapun  yang ditulis  pada  tabel  stok  tersebut  akan  tetap  ditampilkan  jumlahnya  nol.  Hal  tersebut menyebabkan  selisih  antara  barang  masuk  dan  barang  keluar  tidak  sesuai.  Penelitian  ini dilaksanakan untuk merancang front end aplikasi penjualan berbasis web menggunakan metode Human  Centered  Design  (HCD).  Pengujian  front  end  dilakukan  menggunakan  Standard  ISO 25010  aspek  UX.  Dibandingkan  dengan  aplikasi  sebelumnya,  aplikasi  penjualan  KUD  Jaya Makmur terbukti lebih baik. Melalui pengujian UX yang dilakukan terhadap aplikasi penjualan KUD  Jaya  Makmur  maupun  aplikasi  iPos  versi  4.0.5.3  dengan  cara  yang  sama,  didapatkan hasil bahwa aplikasi penjualan KUD Jaya Makmur lebih baik dalam segala aspek.
Kata kunci — front end, UI, aplikasi, HCD

## Abstract
Village  Unit  Cooperatives (KUD)  Jaya  Makmur  is  a  cooperative  located  in  Kampung Kumbara Utama. The line of business are convenience stores (Waserda), production facilities (Saprodi),  and  Savings  and  Loan  Units  (USP).  The  waserda  business  sector  records  sales transactions  using  the  iPos  application  version  4.0.5.3.  created  with  Visual  Basic  .NET.  The iPos application version 4.0.5.3 used in KUD Jaya Makmur found several problems. Waserda has a server and 3 cashiers, but the application is only used on the server and 1 cashier, so the other cashiers manually write down goods sales. There are also problems with the stock count feature.  Any  number  written  in  the  stock  table  will  still  be  displayed  as  zero.  Some  of  these problems  have  become  obstacles  faced  so  far.  This  research  was  conducted  to  design  a  web- based sales application front end using the Human Centered Design (HCD) method. Front end testing  was  carried  out  using  Standard  ISO  25010  in  terms  of  UX.  Through  UX  testing conducted on the KUD Jaya Makmur sales application and the iPos version 4.0.5.3 application in the same way, it was found that the sales application for KUD Jaya Makmur was better in all aspects.
Keywords — front end, UI , application, HCD
292 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933

## 1. PENDAHULUAN

## 1.1 Latar Belakang
Koperasi  Unit  Desa  (KUD)  merupakan  badan  usaha  yang  anggotanya  merupakan masyarakat  desa.  KUD  berdiri  di  kawasan  desa  yang  fungsinya  menyediakan  keperluan masyarakat  (Ichsan  et  al.,  2021).  KUD  Jaya  Makmur  merupakan  koperasi  yang  terletak  di Kampung  Kumbara  Utama  Kecamatan  Kerinci  Kanan  Kabupaten  Siak.  Para  anggotanya merupakan petani kelapa sawit. Bidang usaha pada KUD ini yaitu warung serba ada (Waserda), sarana produksi (Saprodi), dan Unit Simpan Pinjam (USP).
Bidang  usaha  waserda  mencatat  transaksi  penjualan  menggunakan  aplikasi  iPos  versi 4.0.5.3.  yang  dibuat  dengan  Visual  Basic  .NET.  Fitur  pada  aplikasi  tersebut  antara  lain pembuatan database, daftar item, daftar supplier, daftar pelanggan, dan laporan.  Aplikasi iPos versi  4.0.5.3  yang  digunakan  pada  KUD  Jaya  Makmur  ditemukan  beberapa  permasalahan. Waserda memiliki  server dan 3 kasir, namun aplikasi tersebut baru digunakan pada server dan 1 kasir,  sehingga  kasir  yang  lain  menuliskan  penjualan  barang  secara  manual.  Pada  aplikasi tersebut juga  terdapat  kendala  pada  fitur jumlah  stok.  Tabel  stok  tidak  berfungsi  dengan  baik. Angka  berapapun  yang  ditulis  pada  tabel  stok  tersebut  akan  tetap  ditampilkan  jumlahnya  nol. Hal  tersebut  menyebabkan  selisih  antara  barang  masuk  dan  barang  keluar  tidak  sesuai. Permasalahan tersebut menjadi kendala yang dihadapi selama ini.
Untuk  memudahkan  penggunaan  aplikasi  penjualan  pada  KUD  Jaya  Makmur,  peneliti membuat  aplikasi  penjualan  berbasis web .  Aplikasi  berbasis web memungkinkan  pengguna dapat mengakses aplikasi tersebut kapanpun dan dimanapun asalkan terkoneksi dengan internet. Dalam  pengembangan  aplikasi,  terdapat  istilah client  side  (front  end) dan server  side  (back end) . Front end berfokus pada user interface dan user experience. Sedangkan back end berfokus pada  penanganan  logika  serta  aliran  kerja  aplikasi  [1]. UI memperhatikan  kemudahan penggunaan aplikasi [2]. Sedangkan UX merupakan hasil korelasi dari aplikasi, pengguna, dan konteksnya [3]. Dalam rangka penyelesaian masalah yang telah dipaparkan, peneliti fokus pada perancangan  dan  pengujian front  end .  Pembuatan front  end dipilih  agar  data  yang  terdapat dalam database dapat ditampilkan dan bisa dilihat oleh pengguna. Penggunaan  metode Human  Centered  Design  (HCD).  HCD merupakan  metode perancangan  aplikasi  yang  berfokus  pada  pengguna  [4].  Metode HCD dapat  meningkatkan keefektifan,  efisiensi,  kepuasan,  dan  kenyamanan  pengguna  [5].  Diharapkan  aplikasi  yang dirancang  dapat  membantu  pihak  KUD  Jaya  Makmur  untuk  mencatat  transaksi  penjualan dengan efektif dan efisien.

## 1.2 Penelitian Terdahulu
Penelitian pertama dilakukan oleh Muhammad Galang Ramadhan, Lela Nurpulaela, dan Ulinnuha  Latifa  pada  Tahun  2020.  Penelitian  ini  berjudul  Perancangan  Sistem  Informasi POS (Point  Of  Sales) Berbasis Web dengan  menggunakan Framework  Codeigniter pada  Pasar Swalayan  Muhammad.  Masalah  yang  ada  pada  penelitian  ini  adalah  proses  transaksi  lambat karena penelitian transaksi dan pembuatan nota masih dilakukan manual. Pengolahan data pun masih  manual  sehingga  menyebabkan  besarnya  peluang  kesalahan  input  data.  Dari permasalahan  tersebut,  peneliti  membangun  sebuah  sistem  informasi POS berbasis web menggunakan  metode waterfall untuk  pembuatan  sistemnya.  Penelitian  ini  berhasil memudahkan kasir dalam penelitian transaksi dan pembuatan nota [6].
Penelitian  kedua  dilakukan  oleh  Rizka  Novelianti  pada  Tahun  2022.  Penelitian  ini berjudul Sistem Informasi Akuntansi Penjualan Warung Serba Ada (Waserda) pada KUD Mina Jaya.  Masalah  yang  ada  pada  penelitian  ini  adalah  Penjualan  waserda  pada  KUD  Mina  Jaya masih dicatat manual pada kertas memo. Hal tersebut beresiko rusak ataupun hilang. Selain itu,
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 293
kasir pun kesulitan dalam pembuatan laporan piutang dan laporan penjualan. Dari permasalahan tersebut,  peneliti  membangun  sebuah  sistem  informasi  akuntansi  penjualan  waserda menggunakan  metode waterfall. Penelitian  ini  berhasil  menyediakan  sistem  yang  dapat  dapat mempersingkat waktu dalam pemrosesan transaksi dan menghilangkan kemungkinan duplikasi data [7].
Penelitian ketiga dilakukan oleh Alam Syaputra dan Novri Hadinata pada Tahun 2022. Penelitian ini berjudul Pengembangan Sistem Informasi Penjualan pada Koperasi SMA Negeri 1  Rambang  Kuang  dengan  Menerapkan  Metode Prototype. Masalah  yang  ada  pada  penelitian ini adalah pegawai koperasi kesulitan dalam membuat laporan transaksi dalam periode tertentu karena  proses  perhitungan  masih  dilakukan  secara  manual.    Hal  tersebut  menyebabkan keterlambatan dalam pelaporan. Dari permasalahan tersebut, peneliti membangun sebuah sistem informasi  penjualan.  Penelitian  ini  berhasil  membangun  sistem  yang  dapat  mengolah  data transaksi dan meminimalkan masalah yang sebelumnya dihadapi [8].

## 2. METODE PENELITIAN
Pada pembuatan aplikasi penjualan berbasis web, sebelumnya diperlukan rancangan alur penelitian guna memudahkan pembuatan aplikasi. Flowchart alur penelitian tergambar pada gambar 1 dibawah ini.
294 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
Gambar 1. Flowchart Alur Penelitian
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 295
Tahapan  yang  digunakan  pada  penelitian  ini  mengacu  pada  metode Human  Centered Design (HCD). Metode tersebut memiliki tahapan yaitu:
1. Perencanaan desain
Tahap  ini  diawali  dengan  proses  wawancara  dan  observasi  aplikasi  yang  masih  digunakan. Wawancara dilakukan antara peneliti dengan pengguna aplikasi terkait dengan requirements UI yang dibutuhkan.
2. Pemahaman dan penentuan konteks penggunaan
Informasi yang didapat sebelumnya kemudian dirumuskan masalahya dan ditentukan apakah UI perlu ditingkatkan atau harus dirubah.
3. Spesifikasi kebutuhan pengguna
Pada tahap spesifikasi kebutuhan pengguna dilakukan analisis kebutuhan fungsional dan non fungsional
4. Pembuatan desain
Desain  yang  dibuat  pada  tahap  ini  yaitu prototype  front  end. Desain  aplikasi  kemudian diimplementasikan menjadi UI aplikasi.
5. Evaluasi desain
Desain  yang  telah  dibuat  kemudian  dikomunikasikan  bersama  pengguna  aplikasi  untuk dievaluasi bersama. Evaluasi dilakukan menggunakan pengujian International Organization for  Standarization  (ISO) 25010  aspek User  Experience  (UX) .  Pengujian  tersebut  dipilih karena ISO 25010 merupakan standar internasional dalam pengujian kualitas software [9].

## 3. HASIL DAN PEMBAHASAN

## 3.1 Perencanaan Desain
Sebelum  perancangan front  end aplikasi  penjualan,  dirumuskan  dahulu  konsep  aplikasi sebagai berikut 1. Aplikasi yang dibuat memiliki 4 kategori pengguna, yaitu admin, ketua, bendahara, dan kasir
2. Aplikasi dapat digunakan oleh semua kasir
3. Aplikasi dibuat berbasis website
4. Aplikasi memiliki fitur laporan penjualan

## 3.2 Pemahaman dan Penentuan Konteks Penggunaan
Dari  beberapa  permasalahan  yang  ditemukan  pada  aplikasi  iPos  versi  4.0.5.3,  maka ditentukan  bahwa UI harus  dirubah.  Dalam  rangka  perubahan UI ,  peneliti  menganalisis informasi yang telah didapatkan dari hasil wawancara dan observasi, diantaranya:
1. Aplikasi  iPos  versi  4.0.5.3  hanya  memiliki  1  kategori  pengguna  yaitu  admin.  Untuk memfokuskan  kinerja,  maka  dibuatlah  aplikasi  yang  mencakup  4  kategori  pengguna  yaitu admin, ketua, bendahara, dan kasir
2. Aplikasi  iPos  versi  4.0.5.3  hanya  dapat  dioperasikan  menggunakan PC  client karena database tersimpan pada server, sehingga kesulitan memantau transaksi penjualan jika tidak sedang  berada  di  KUD  Jaya  Makmur.  Maka  dari  itu  dibuatlah  aplikasi  penjualan  berbasis web agar  ketua  dapat  memantau  transaksi  penjualan  kapanpun  dan  dimanapun  asalkan terkoneksi dengan jaringan internet.

## 3.3 Spesifikasi Kebutuhan Penggunaan
Aplikasi  akan  dirancang  sesuai  kebutuhan  pengguna,  maka  dirumuskanlah  spesifikasi kebutuhan pengguna sebagai berikut:
296 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
1. Kebutuhan fungsional
- Aplikasi ini memungkinkan pengguna untuk login dan logout
- Aplikasi  ini  memungkinkan  pengguna  untuk  melihat  dan  men-download  laporan penjualan
- Aplikasi ini memungkinkan pengguna untuk melakukan transaksi penjualan dan melihat riwayat serta detail penjualan
- Aplikasi ini memungkinkan pengguna untuk menambah, mengedit, dan menghapus detail penjualan
- Aplikasi  ini  memungkinkan  pengguna  untuk  menambah,  melihat,  mengedit,  dan menghapus kategori
- Aplikasi  ini  memungkinkan  pengguna  untuk  menambah,  melihat,  mengedit,  dan menghapus data supplier
- Aplikasi  ini  memungkinkan  pengguna  untuk  menambah,  melihat,  mengedit,  dan menghapus data barang
- Aplikasi  ini  memungkinkan  pengguna  untuk  menambah,  melihat,  mengedit,  dan menghapus data pembelian
- Aplikasi  ini  memungkinkan  pengguna  untuk  menambah,  melihat,  mengedit,  dan menghapus data anggota
- Aplikasi  ini  memungkinkan  pengguna  untuk  menambah,  melihat,  mengedit,  dan menghapus data kelompok
- Aplikasi  ini  memungkinkan  pengguna  untuk  menambah,  melihat,  mengedit,  dan menghapus data pengguna
2. Kebutuhan non fungsional
- Aplikasi harus dapat dioperasikan apabila terhubung ke jaringan internet
- Aplikasi dapat dioperasikan pada semua jenis web browser
- Aplikasi dapat dioperasikan melal UI PC ataupun smartphone
- Pengguna diharuskan login terlebih dahulu agar dapat mengakses fitur yang tersedia pada aplikasi
- Aplikasi dapat loading dengan cepat
3.4 Pembuatan Desain
Tahapan pembuatan desain merupakan implementasi dari tahapan sebelumnya. Prototype front end aplikasi penjualan dapat dilihat pada gambar 2-12.
Gambar 2.  Tampilan Halaman Login
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 297
Gambar 3.  Tampilan Halaman Dashboard
Gambar 4.  Tampilan Halaman Kasir
298 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
Gambar 5.  Tampilan Halaman Kategori
Gambar 6.  Tampilan Halaman Supplier
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 299
Gambar 7.  Tampilan Halaman Barang
Gambar 8.  Tampilan Halaman Penjualan
300 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
Gambar 9.  Tampilan Halaman Pembelian
Gambar 10.  Tampilan Halaman Anggota
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 301
Gambar 11.  Tampilan Halaman Kelompok
Gambar 12.  Tampilan Halaman Pengguna

## 3.5 Evaluasi Desain
Pengujian UX dilaksanakan  dengan  memakai  kuesioner User  Experience  Questionnare (UEQ) [10] . Kuesioner  tersebut  diberikan  kepada  5  responden    yang  terdiri  dari  ketua, bendahara,  dan  3  orang  kasir.  Pengujian  ini  dilakukan  sebanyak  dua  kali  agar  dapat  menjadi perbandingan  antara  aplikasi  iPos  Versi  4.0.5.3  dan  aplikasi  penjualan  KUD  Jaya  Makmur. Perbandingan skor kedua aplikasi tersebut terpadat pada gambar 13 dan 14.
302 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
Gambar 13.  Hasil Pengujian UX Aplikasi iPos versi 4.0.5.3
Gambar 14.  Hasil Pengujian UX Aplikasi Penjualan Berbasis Web

## 4. KESIMPULAN
Pada penelitian ini, perancangan front end aplikasi penjualan KUD Jaya Makmur dibuat menggunakan metode Human Centered Design (HCD). Sedangkan pengujiannya menggunakan Standard ISO 25010 aspek User Experience (UX) . Dibandingkan dengan aplikasi sebelumnya, aplikasi  penjualan  KUD  Jaya  Makmur  terbukti  lebih  baik.  Melal UI pengujian UX yang dilakukan  terhadap  aplikasi  penjualan  KUD  Jaya  Makmur  maupun  aplikasi  iPos  versi  4.0.5.3 dengan  cara  yang  sama,  didapatkan  hasil  bahwa  aplikasi  penjualan  KUD  Jaya  Makmur  lebih baik  dalam  segala  aspek,  baik  aspek attractiveness (daya  tarik), perspicUIty (kejelasan), efficiency (efisiensi), dependability (ketepatan), stimulation (stimulasi),  maupun  dalam  aspek novelty (kebaruan). Hasil pengujian menunjukkan bahwa perancangan front end menggunakan metode HCD bisa  menghasilkan  desain  yang  bagus  sesuai  hasil  pengujian UX yang  telah dilaksanakan.

## 5. SARAN
Berdasarkan  hasil  implementasi  aplikasi  penjualan  KUD  Jaya  Makmur,  peneliti memberikan saran guna pengembangan aplikasi selanjutnya, diantaranya:
1. Aplikasi  ini  bisa  dikembangkan  dengan  menambah  fitur    notifikasi  kepada  anggota  KUD berupa sms ataupun email setelah transaksi pembelian dilakukan.
2. Aplikasi  ini  dapat  dikembangkan  dengan  menambahkan  fitur  notifikasi  per  bulan  berupa jumlah transaksi anggota kepada setiap ketua kelompok

## UCAPAN TERIMA KASIH
Penulis  mengucapkan  terima  kasih  kepada  prodi  Teknik  Informatika  Universitas  Riau dan pihak KUD Jaya Makmur yang telah menjembatani penulis dalam menyelesaikan penelitian ini.
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 303

## DAFTAR PUSTAKA
[1] P.  P.  Arhandi, “Pengembangan  Sistem  Informasi  Perijinan  Tenaga  Kesehatan  Dengan Menggunakan Metode Back End dan Front End,” Teknol. Inf. , Vol. 7, No. 1, pp. 39–48, 2016.
[2] I. Rochmawati, “Analisis User Interface Situs Web iwearup.com,” Visualita , Vol. 7, No. 2, pp. 31–44, 2019.
[3] Y.  Firantoko,  H.  Tolle,  and  H.  M.  Az-zahra, “Perancangan  User  Experience  Dengan Menggunakan  Metode  Human  Centered  Design  Untuk  Aplikasi  Info  Calon  Anggota Legislatif  2019,”  J.  Pengemb.  Teknol.  Inf.  dan  Ilmu  Komput. ,  Vol.  3,  No.  3,  pp.  2798– 2806, 2019.
[4] 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.
[5] S.  Saito  and  K.  Ogawa, “International  Standard  ISO  9241-210,”  Japanese  J.  Ergon. , Vol. 30, No. 1, pp. 1–32, 1994.
.
[6] Muhammad  Galang  Ramadhan, “Perancangan  Sistem  Informasi  Pos  (Point  of  Sales) Berbasis  Web  Dengan  Menggunakan  Framework  Codeigniter  pada  Pasar  Swalayan,” Electrician , Vol. 14, No. 3, pp. 76–83, 2020, doi: 10.23960/elc.v14n3.2155.
[7] R.  Novelianti, “Sistem  Informasi  Akuntansi  Penjualan  Warung  Serba  Ada  (Waserda) pada KUD Mina Jaya,” Ilmudata , Vol. 2, No. 2, pp. 1–12, 2022.
[8] A.  Syaputra  and  N.  Hadinata, “Pengembangan  Sistem  Informasi  Penjualan  pada Koperasi  SMA  Negeri  1  Rambang  Kuang  Dengan  Menerapkan  Metode  Prototype,”  J. Inform. , Vol. 08, No. 02, pp. 32–37, 2022.
[9] D.  Lesmideyarti,  S.  Rochimah,  and  U.  L.  Yuhana, “Penyusunan  dan  Pengujian  Metrik Operabilitas Untuk Sistem Informasi Akademik Berdasarkan ISO 25010,” J. Inspir. , Vol. 7, No. 2, pp. 92–100, 2017.
[10]  H.  B.  Santoso,  M.  Schrepp,  R.  Yugo  Kartono  Isal,  A.  Y.  Utomo,  and  B.  Priyogi, “Measuring  User  Experience  of  The  Student-Centered  E-Learning  Environment,” J. Educ. Online , Vol. 13, No. 1, pp. 1–79, 2016.