## Desain Ui/Ux Website Inventory Barang Pada Pt Dari Visi
Teknologi Menggunakan Metode User-Centered Design 1 Conni Lestari Siahaan, 2 Syafrianto, M.Kom
Program Studi Sistem Informasi Universitas Nusa Mandiri Jakarta www.nusamandiri.ac.id
1 connisiahaan97@gmail.com 2 syafrianto.yfr@nusamandiri.ac.id
Abstract - In an era of rapid technological advances, there are many companies that have not utilized technology, one of which is PT Dari Visi Technology. So that the company's performance is not optimal. Therefore, we need a system to help the company's performance. The system can be a website or mobile. PT Dari Visi Technology requires a website inventory to help check goods. To produce a good website, user  interface  design  and  user  experience  are  needed  in  order  to determine the level of user satisfaction when using the system. This design  will  be  designed  using  the  User  Centered  Design  (UCD) method where this method is focused on the needs and requirements of the user. In the UCD User Centered Design method there are 5 steps  that  need  to  be  done,  namely  Plan  the  Human  Centered Process, Specify the Context of Use, Specify User and Organizational Requirements,  Produce  Design  Solutions,  and  Evaluate  Designs against  User  Requirements.  Following  each  step  and  stage  of  the UCD method will produce a design that fits the user's needs. This is proven  by  evaluating  the  design  using  the  System  Usability  Scale (SUS) method to determine the user experience score. The test results using the System Usability Scale (SUS) get a result of 71,875. In the SUS range, it gets a grade C and is included in the good category.
Keywords  —  Goods  Inventory,  UI/UX  Design,  User  Centered Design, System Usability Scale
Abstrak —Dalam  era  dengan  kemajuan  teknologi  yang  sangat pesat, banyak perusahaan-perusahaan yang belum memanfaatkan  teknologi,  salah  satunya  PT  Dari  Visi  Teknologi. Sehingga  membuat  kinerja  perusahaan  tidak  maksimal.  Oleh karena  itu  dibutuhkan  sebuah  sistem  untuk  membantu  kinerja perusahaan. Sistem itu dapat berupa website atau mobile. PT Dari Visi  Teknologi  membutuhkan  sebuah  website  inventory  untuk membantu  pengencekan  barang.  Utuk  menghasilkan  web  yang baik, dibutuhkan desain user interface dan user experience agar mengetahui  tingkat  kepuasan  pengguna  saat  menggunakan sistem.  Desain  ini  akan  dirancang  menggunakan  metode  User Centered  Design  (UCD)  dimana  metode  ini  berpusat  pada kebutuhan  dan  keperluan  pengguna.  Dalam  metode  User Centered Design (UCD) ada 5 langkah yang perlu dilakukan, yaitu Plan  the  Human  Centered  Proses,  Specity  the  Context  of  Use, Specify  User  and  Organizational  Requirements,  Produce  Design Solutions,  dan  Evaluate  Designs  Against  User  Requirements. Dengan mengikuti setiap langkah dan tahapan dari metode UCD akan menghasilkan sebuah desain yang sesuai dengan kebutuhan pengguna. Hal ini dibuktikan dengan melakukan evaluasi desain menggunakan  metode  System  Usability  Scale  (SUS)  untuk mengetahui  skor  user  experience.  Hasil  dari  pengujian menggunakan  System  Usability  Scale  (SUS)  mendapatkan  hasil 71,875. Dalam rentang SUS mendapatkan grade C dan termasuk dalam kategori Good.
Kata  Kunci— Goods  Inventory,  UI/UX  Design,  User  Centered Design, System Usability Scale

## I. Pendahuluan
Inventory adalah stok barang dan sumber daya yang digunakan dalam  perusahaan  untuk  kegiatan  produksi  dan  operasional (Jacobs, F. Robert dan Chase, 2016). Secara umum, inventory dapat juga diartikan stok barang yang dipunyai oleh perusahaan untuk  dijual  kepada  konsumen  sehingga  mendapatkan keuntungan (Azeharie, 2022). Dengan perkembangan teknologi pencatatan  inventory  semakin  dipermudah  dengan  adanya sebuah sistem yang membantu mengontrol stok barang masuk dan  keluar.  Karena  itu  perusahaan-perusahaan  yang  ingin berkembang  membutuhkan  pemahaman  penggunaan  sistem agar  informasi  yang  dihasilkan  semakin  akurat.  PT  Dari  Visi Teknologi  adalah  perusahaan  yang  bergerak  di  bidang perdagangan  mesin  kasir  POS  dan  telah  menjual  hampir  ke seluruh Indonesia.
PT  Dari  Visi  Teknologi  didirikan  pada  tahun  2020  dan berlokasi  di  Jl.  Kapuk  Kayu  Besar  No.288,  RT.12/RW.1, Pergudangan  Kapuk  Ecopark  Blok  BR/BS  Jakarta.  Untuk membantu  proses  bisnisnya  PT  Dari  Visi  Teknologi menggunakan  Microsoft  Excel  dan  juga  Google  Sheet  dalam pembuatan  nota  penjualan,  report  penjualan  dan  pencatatan stok  barang  masuk  dan  keluar.  Namun  berdasarkan  hasil observasi  yaitu  melalui  wawancara  yang  dilakukan  dengan salah  satu  karyawan  PT  Dari Visi  Teknologi  pada  tanggal  25 Oktober  2022  menunjukkan  bahwa  penggunaan  Microsoft Excel sebagai aplikasi untuk pencatatan stok barang masuk dan keluar  belum  memadai.  Dikarenakan  file  yang  di  share  tidak tersimpan saat dibuka bersama-sama karena jaringan sehingga sering  terjadi  kesalahan  saat  pencatatan  jumlah  barang  yang sudah  masuk  dan  keluar.  Hal  ini  juga  disebabkan  terjadinya miskomunikasi  antara  pihak  Gudang  dan  Admin  Penjualan perihal  jumlah  barang  yang  masuk  atau  keluar.  Sehingga jumlah  barang  yang  di  catat  oleh  Admin  Penjualan  di  dalam Microsoft  Excel  dengan  barang  yang  keluar  dari  gudang berbeda.  Dan  terdapat  keterlambatan  pembuatan  laporan inventory  barang  setiap  bulannya,  dikarenakan  belum  tercatat dengan benar data yang barang masuk dan data barang keluar. Berdasarkan  permasalahan  yang  telah  dipaparkan  diatas, dibutuhkan  sebuah  perancangan  sistem  yang  dapat  diakses bersama-sama  untuk  mempermudah  penyesuain  jumlah  stok barang. Sistem tersebut dapat berupa aplikasi berbasis website atau  aplikasi  mobile.  Oleh  karena  itu,  terbentuk  ide  untuk
mendesain  sebuah  aplikasi  berbasis  website.  Tahap  awal pembuatan  website  diperlukan  desain  yang  terdiri  dari  User Interface  (UI)  yang  berfokus  pada  tata  letak  komponen web/aplikasi  dan  User  Experience  (UX)  berfokus  pada pengalaman  pengguna  saat  mulai  menggunakan  web/aplikasi yang  dibangun  (Frendiana  &  Widhiantoro,  2020).  Agar terciptanya  aplikasi  berbasis  website  tersebut  perlu  dilakukan perancangan  desain  untuk  merekomendasikan  tampilan  user experience  dengan  menggunakan  metode  User-Centered Design (UCD). User-Centered Design memiliki 4 langkah yang dapat  memberikan  hasil  terbaik  dengan  mengutamakan kebutuhan user yaitu analisis kebutuhan, perancangan, evaluasi dan implementasi (Puji & Engraini, 2021).

## II. Metode Penelitian
A. Metode User Centered Design (UCD)
User  Centered Design  adalah  metode  yang  berpusat  pada kebutuhan  dan  keperluan  pengguna  terhadap  produk  agar pengguna  merasa  nyaman  saat  menggunakannya  (Elva  et  al., 2021).
Gambar 1.  Metode User Centered Design Seperti  yang  terlihat  di  gambar,  ada  5  langkah-langkah  yang perlu di perhatikan, yaitu (Supardianto & Tampubolon, 2020):
1.  Plan  the  human  centered  process:  Langkah  pertama melakukan  studi  kepustakaan  yang  berkaitan  dengan metode user centered-design.
2.  Specify the context of use: Langkah kedua yaitu mengetahui latar  belakang  dari  pengguna  yang  akan  menggunakan produk.
3.  Specify  User  and  Organizational  Requirements:  Langkah ketiga mencari tahu apa yang dibutuhkan oleh pengguna dan organisasi untuk membuat produk.
4.  Produce Design Solutions: Tahap keempat mulai merancang desain  yang  menjadi  solusi  dari  permasalahan  pengguna.
Misalnya  membuat storyboard yang  menjadi  alternatif pemecahan  masalah  visual  (Ahdan  et  al.,  2019),  membuat wireframe, yang  merupakan  kerangka  awal  dari  tata  letak halaman web yang ingin dirancang (Hartawan, 2022). Dan terakhir  membuat  desain prototype sebagai  pendekatan,
pengujian  dan  desain  yang  akan  dievalusi  (Rahman  et  al., 2020).
5.  Evaluate Design: Tahap terakhir mengevaluasi desain yang telah dirancang sebelumnya agar sesuai dengan  kebutuhan pengguna

## B. Metode System Usability Scale (SUS)
John  Broke  pertama  kali  memperkenalkan  System  Usability Scale  pada  tahun  1986  sebagai  salah  satu  metode  yang  dapat digunakan  untuk  menguji  usability  suatu  produk  secara sederhana, dimana metode ini mempunyai 10 pertanyaan dan 5 pilihan  jawaban  pada  setiap  pertanyaan.  Jawaban  setiap pertanyaan  dimulai  dari  jawaban  sangat  tidak  setuju  sampai sangat setuju (Indra Gunawan et al., 2019).

## III. Hasil dan Pembahasan
1. Plan The Human Centered Process
Pada  tahap  pertama  penelitian,  melakukan  studi  literatur mengenai metode user centered design dengan membaca buku referensi,  jurnal,  dan  media  lainnya  untuk  mendapatkan pemahaman  cara  menganalisa  user  experience  menggunakan metode  tersebut.    Selanjutnya  mengidentifikasi  masalah  yang terdapat  pada  PT  Dari  Visi  Teknologi  terkait  pencatatan inventory  barang,  sehingga  dapat  memberikan  solusi  yang dibutuhkan
2. Understand and Specify the Context of Use
Tahap  kedua  adalah  mengidentifikasi  pengguna  dari  produk yang  akan  dirancang.  Setelah  melakukan  observasi  secara langsung  di  kantor  PT  Dari  Visi  Teknologi  kemudian mewawancarai  karyawan  PT  Dari  Visi  Teknologi  akan menghasilkan user persona karyawan PT Dari Visi Teknologi. User  Persona  berperan  penting  dalam  membangun  user interface,  karena  didalam  user  persona  terdapat  beberapa informasi pengguna (Priowibowo et al., 2020).
Gambar 2.  User Persona Karyawan PT Dari Visi Teknologi
3. Specify User and Organizational Requirements
Pada  tahap  ketiga  yaitu  specify  user  and  organisational requirement  yaitu  melakukan  analisis  kebutuhan  infomasi pengguna. Berdasarkan hasil wawancara yang dilakukan pada tahap  kedua,  ditemukan  beberapa  informasi  kebutuhan pengguna.  Kebutuhan  pengguna  ada  dua  yaitu  kebutuhan fungsional dan kebutuhan non-fungsional. Setelah menentukan identifikasi kebutuhan pengguna, selanjutnya membuat sitemap atau daftar halaman pada website inventory yang akan didesain. Menurut N. Babich, 2019 dalam referensi (Amini et al., 2021), sitemap merupakan diagram hierarki yang menunjukkan detail arsitektur  dan  hubungan  antar  halaman  di  situs  web  atau aplikasi. Sitemap dibuat pada fase mengidentifikasi kebutuhan pengguna setelah pembuatan user persona.
Gambar 3.  Sitemap Website Inventory

## 4. Product Design Solutions
Pada  tahap  keempat  akan  dibuatkan prototype menggunakan aplikasi  figma.  Figma  merupakan  alat  desain  berbentuk  web yang  tersambung  dengan  cloud  sehingga  dapat  dipergunakan kapapun dan dimanapun jika terdapat jaringan internet. Figma cocok untuk mendesain UI web dan mobile (Vivian, 2022). a. Prototype Login sebagai Bagian Penjualan dan Gudang. Bagian  penjualan  dan  gudang  memiliki  kesamaan  alur  saat menggunakan  aplikasi  web  inventory  ini.  Mereka  dapat menggunakan  fungsi  CRUD  (membuat,  membaca,  mengedit, dan  menghapus)  pada  master  data  customer,  dan  laporan inventory barang.
Gambar 4.  Prototype Login
Gambar 5.  Prototype Beranda
Gambar 6.  Prototype Data Master Customer
Gambar 7.  Prototype Laporan Inventory
b. Prototype Login sebagai Bagian Sales Bagi  sales,  aplikasi  web  inventory  ini  berguna  untuk  melihat jumlah stok barang yang tersedia. Sehingga sales lebih mudah menjual barang kepada customer. Sama seperti bagian gudang dan  penjualan,  sales  dapat  login  ke  aplikasi  menggunakan username dan password yang telah ditentukan. Dalam laporan Inventory, sales akan melihat jumlah seluruh barang yang ada di dalam gudang. Jika ingin menampilkan kode barang tertentu, bisa  menggunakan  button  search  yang  terdapat  di  kiri  atas laporan.  Dalam  kotak  button  tinggal  mengetik  kode  barang yang ingin dicari.
Gambar 8.  Prototype Laporan Inventory (2) c.
Prototype Login  sebagai  Bagian  Admin  Service  dan Teknisi  Halaman  data  master  sparepart  dan  laporan  serices dapat diakses oleh bagian admin service dan teknisi.
Gambar 9.  Prototype Data Master Sparepart

## 5. Evaluate Design Against Requirement
Tahap  evaluasi  desain  dilakukan  dengan  metode System  Usability  Score  (SUS),  dimana  dilakukan  penyebaran kuesioner dalam bentuk google form kepada 8 orang responden PT  Dari  Visi  Teknologi.  Pertanyaan-pertanyaan  yang  dipakai adalah pertanyaan menurut ketentuan SUS.
Ketentuan  perhitungan  nilai  kuersionernya  adalah  untuk pertanyaan  ganjil,  skor  akan  dikurangi  1  (X-1)  dan  setiap pertanyaan  genap  skor  dikurangi  5  (5-X).  Selanjutnya,  nilai- nilai yang diperoleh akan dijumlahkan dan dikalikan dengan 2,5 (jumlah  Skor  per  Responden  x  2,5).  Kemudian  hasilnya dijumlahkan dan ditemukan nilai rata-rata. Hasil dari kuesioner yang dibagikan terdapat dalam tabel dibawah ini.
Tabel 1. Skor Jawaban Kuesioner
Dan hasil skor kuesioner sesuai dengan aturan System Usability Score (SUS) dapat diperhatikan pada tabel dibawah ini.
Tabel 2. Perhitungan Skor Jawaban Kuesioner menggunakan Metode SUS

## IV. Kesimpulan
Desain  user  interface  dan  user  experience  website  inventory menggunakan  metode  user  centered  design  menghasilkan sebuah  prototype  yang  kemudian  dapat  diterapkan  saat membuat  sistem.Rekomendasi  desain  website  inventory  telah diuji  menggunakan  metode  system  usability  scale  (SUS)  dan mendapatkan  nilai  71,875.  Dimana  dalam  rentang  nilai  SUS nilai 71,875 mendapatkan grade C dan termasuk dalam kategori Good. Berdasarkan hasil pengujian yang dilakukan pada desain website  inventory  dapat  disimpulkan  bawah  rekomendasi desain tersebut sudah baik dan dapat di bangun sebagai aplikasi utuh.

## V. Daftar Pustaka
[1] Ahdan, S., Sucipto, A., & Agus Nurhuda, Y. (2019). Game untuk  Menstimulasi  Kecerdasan  Majemuk  pada  Anak (Multiple Intelligence) Berbasis Android Game to Stimulate Children’s  Multiple  Intelligence  Based  on  Android. Seminar  Nasional  Teknik  Elektro  2019 , November ,  554– 568.
[2] Amini, T. N. A., Fabroyir, H., & Akbar, R. J. (2021). Desain dan Evaluasi Antarmuka Mobile App MyITS Alumni pada Platform  Android  dan  Ios  Melalui  Pendekatan  User- Centered  Design. Jurnal  Teknik  ITS , 10 (2),  133–139. https://doi.org/10.12962/j23373539.v10i2.63024
[3] Azeharie,  K.  (2022). Persediaan  adalah:  Pengertian  dan Manfaatnya Bagi Bisnis . Majoo. https://majoo.id/solusi/detail/persediaan-adalah.
[4] Elva,  D.,  Priyadi,  Y.,  Adrian,  M.,  &  Telkom,  U.  (2021).
Perancangan  User  Interface  dalam  Bentuk  Mobile Application  untuk  Aplikasi  Inventory  dan  Finance management  bagi  UMKM  Menggunakan  Metode  User Centered  Design  (  UCD  )  Berikut  Penjelasannya : berkembang  .  Hampir  semua  perusahaan  dalam  hal manajemen  stok  dan. E-Proceeding  of  Engineering , 8 (5),
11520–11533.
[5]  Frendiana,  V.,  &  Widhiantoro,  D.  (2020).  Desain  UI  dan UX  pada  Aplikasi  Android  Coronavirus  Disease  2019  (
COVID-19  ). Jurnal  Ilmu  Komputer  Dan  Desain Komunikasi Visual Volume , 5 (2), 85–93.
[6] Hartawan, M. S. (2022). Penerapan User Centered Design (UCD)  Pada  Wireframe  Desain  User  Interface  Dan  User Experience  Aplikasi  Sinopsis  Film. Jurnal  Elektro  & Informatika SWADHARMA (JEIS) , 2 (1), 43–47.
[7] Indra  Gunawan,  M.,  Indah  Rokhmawati,  R.,  & Hendrakusma Wardani, N. (2019). Evaluasi dan Perbaikan Antarmuka  Pengguna  Menggunakan  Pendekatan  User Centered  Design  (UCD)  dan  Card  Sorting  (Studi  Kasus: Website  Awake  Project  Malang). Jurnal  Pengembangan Teknologi Informasi Dan Ilmu Komputer , 3 (5), 4835–4845. http://j-ptiik.ub.ac.id
[8] Jacobs,  F.  Robert  dan  Chase,  R.  B.  (2016). Manajemen Operasi  dan  Rantai  Pasokan  (terjemahan),  Buku  2 (14th ed.). Salemba Empat.
[9] Priowibowo,  B.,  Effendy,  V.,  &  Junaedi,  D.  (2020). Designing user interface using user-centered design method on  reproductive  health  learning  for  visual  impairment teenagers. IOP  Conference  Series:  Materials  Science  and Engineering , 830 (2). https://doi.org/10.1088/1757- 899X/830/2/022092.
[10] Puji, A. A., & Engraini, V. (2021). Perancangan User
Interface  Website  E-Commerce  Pada  Usaha  Kuliner Menggunakan  User  Centered  Design. Jurnal  CoSciTech (Computer Science and Information Technology) , 2 (1), 1–
8. https://doi.org/10.37859/coscitech.v2i1.2196
[11] Rahman,  Y.  A.,  Wahyuni,  E.  D.,  &  Pradana,  D.  S.
(2020).  Rancang  Bangun  Prototype  Sistem  Informasi Manajemen  Program  Studi  Informatika  Menggunakan
Pendekatan User Centered Design. Jurnal Repositor , 2 (4), 503–510. https://doi.org/10.22219/repositor.v2i4.433.
[12] Supardianto, S., & Tampubolon, A. B. (2020). Penerapan UCD  (User  Centered  Design)  Pada  Perancangan  Sistem Informasi  Manajemen  Aset  TI  Berbasis  Web  di  Bid  TIK Kepolisian  Daerah  Kepulauan  Riau. Journal  of  Applied
Informatics and Computing . 4 (1), 74–83.
https://doi.org/10.30871/jaic.v4i1.2108 .
[13] Vivian, A. (2022). Figma Adalah: 4 Fitur, Fungsi, Cara Kerjanya,  serta  Bedanya  dengan  UI/UX  Lainnya . https://www.ekrut.com/media/figma-adalah .
[14] E. Susanti, E. Fatkhiyah, and E. Efendi, “Pengembangan Ui / Ux pada aplikasi M - Voting, ”Simp. Nas. RAPI, pp. 364 – 370, 2019.
[15]  R.  I.  Syabana,  P.  Y.  Saputra,  and  A.  N.  R,  “Penerapan Metode Design Thinking Pada Perancangan User Interface Aplikasi  Kotakku,”e-conversion-Propos.  a  Clust.  Excell., pp. 40–60, 2020.