JURNAL ILMIAH KOMPUTER GRAFIS , Vol.15, No.1, JULI 2022, pp. 83 - 94 p-ISSN : 1979-0414(print) e-ISSN :  2621-6256 (online) http://journal.stekom.ac.id/index.php/pixel
 page 83
Received Mei 23, 2022; Revised Juni 29, 2022; Accepted Juli 12, 2022

## DESAIN USER INTERFACE PADA TOKO ONLINE HELM INDONESIA BERBASIS WEB
Teguh Khristianto 1 , Isworo Nugroho 2 ,Dwi Agus Diartono 3 , R.Soelistijadi 4 1 Sistem Informasi, UNISBANK Semarang Jl. Trilombajuang No. 1, Semarang, teguhkhris@edu.unisbank.ac.id 2 Sistem Informasi, UNISBANK Semarang Jl. Trilombajuang No. 1, Semarang, isworo@edu.unisbank.ac.id 3 Sistem Informasi, UNISBANK Semarang Jl. Trilombajuang No. 1, Semarang, dwieagus@edu.unisbank.ac.id 4 Tehnik Informatika, UNISBANK Semarang Jl. Trilombajuang No. 1, Semarang, r.soelitijadi@edu.unisbank.ac.id

## ARTICLE  INFO
Article history:

## ABSTRACT
The growth rate of internet users in recent years has increased very rapidly and is growing rapidly. This triggers the creation of a new business model in the form of a marketplace that is used to buy and sell goods. This study aims to load an online store that is simple and lightweight but can meet the needs of sellers who use this website.
Application  development  uses  methods while the prototype in modeling the application uses use case diagrams, class diagrams, activity diagrams, and sequence diagrams. The research is expected to produce  a  web-based  marketplace  application  that facilitates  the  transaction  process  of  consignment providers  and  consumers  at  the  Indonesian  Helmet Shop.
Furthermore,  the  design  of  this  messaging service  application  prototype  still  needs  to  be developed  in  terms  of  user  interface  and  user experience  so  that  consumers  can  be  more comfortable in transacting.
Keywords: Design, Marketplace, Website

## 1. PENDAHULUAN
Penjualan  barang  secara  online  sangat  banyak  dinikmati  oleh  berbagai  kalangan masyarakat.  Banyaknya marketplace yang  beredar  membuat  masyarakat  berlomba-lomba memanfaatkan peluang ini untuk meningkatkan penjualannya, yang sebelumnya dilakukan secara offline , kini beralih menjadi online. Marketplace sendiri merupakan salah satu jenis Consumer to Consumer (C2C) dari e-commerce yang merupakan tempat pertemuan antara penjual dan pembeli online. Tidak hanya jual beli marketplace juga digunakan untuk penyedia jasa atau layanan yang sudah  ada  secara  offline  sebelumnya.  Hal  ini  membuktikan  bahwa marketplace semakin berkembang  fungsinya  tidak  hanya  sekedar  jual  beli  barang  tetapi  juga  dapat  digunakan  untuk pelayanan dan jasa. Hal ini memudahkan masyarakat untuk melakukan transaksi dimana saja.
Dewasa ini, sebagian orang membutuhkan marketplace yang lebih spesifik sebagai sarana untuk  berjualan  seperti  perlengkapan  berkendara  atau  seputar  otomotif.  Orang  yang
membutuhkan jasa penjualan barang (konsinyasi) untuk barang-barang perlengkapan berkendara seperti  helm,  jaket  mengemudi,  dan  sebagainya.  Sebagian  orang  kesulitan  mencari  tempat penyimpanan barang yang cocok dan aman untuk barangnya.
Toko  Helm  Indonesia  adalah  sebuah  UMKM  yang  bergerak  di  bidang  jual  beli perlengkapan berkendara seperti helm, jaket riding, sepatu riding di Semarang.. Selain jual beli, Toko  Helm  Indonesia  juga  menyediakan  jasa  pengiriman  perlengkapan  berkendara.  Pada UMKM, sistemnya masih   menggunakan manual. Setiap barang yang masuk akan diinput secara manual ke excel untuk pencatatan dan penghitungan stok barang.
Oleh karena itu sering terjadi ketidak sesuaian  antara data manual dengan stok yang ada, sehingga UKM ini membutuhkan suatu sistem yang dapat melakukan inventarisasi barang secara otomatis dan transaksi secara otomatis yang terhubung dengan sistem tersebut.

## 2. TINJAUAN PUSTAKA

## 2.1. E-commerce
Perdagangan  elektronik  atau e-commerce adalah  model  bisnis  yang  memungkinkan perusahaan  atau  individu  untuk  membeli  atau  menjual  barang  melalui  Internet.  Hampir  semua produk,  termasuk  layanan,  tersedia  di  Internet,  mulai  dari  bahan  makanan,  musik,  buku, perlengkapan  rumah  tangga,  tiket  pesawat,  hingga  investasi  yang  dapat  dibeli  melalui e- commerce . Sebagai  model  bisnis, e-commerce memungkinkan  perusahaan  atau  individu  untuk membeli atau menjual barang melalui Internet. Hampir semua produk, termasuk layanan, tersedia di Internet, mulai dari bahan makanan, musik, buku, perlengkapan rumah tangga, tiket pesawat, hingga investasi yang dapat dibeli melalui e-commerce .
Aplikasi e-commerce berdampak  besar  pada  penjual  yang  tidak  dapat  menjual  secara online .  Ini  karena e-commerce memungkinkan  penjual    menjangkau  dan  menjual  lebih  banyak konsumen. E-commerce merupakan  solusi  bagi  produk  dengan  jumlah  pembeli    terbatas  untuk mendapatkan pangsa pasar yang lebih besar.[2].
Marketplace merupakan model e-commerce . Secara khusus, marketplace adalah platform di  mana  penjual  dan  pembeli  bertemu  dan  bertransaksi.  Banyak  pemangku  kepentingan  yang terlibat  di  pasar  ini,  tidak  hanya  perusahaan  penyedia  platform  dan  aplikasi.  Pemangku kepentingan  termasuk  penyedia  layanan  pengiriman,  penyedia  jasa  keuangan  seperti  bank  dan dompet  digital.  Melalui platform  marketplace ,  perusahaan marketplace dapat  membantu mempromosikan  produk,  sehingga  proses  jual  beli  menjadi  lebih  mudah  dan  efisien. Sederhananya,  marketplace  sebenarnya  memiliki  konsep  yang  sama  dengan  pasar  tradisional, hanya  saja  yang  membedakan marketplace dilakukan  sepenuhnya  melalui  internet  atau  media online . [3].

## 3. METODOLOGI

## 3.1 Metode Pengembangan Perangkat Lunak.
Sebuah prototype adalah  versi  awal  dari  sistem  perangkat  lunak  yang  digunakan  untuk mendemonstrasikan konsep-konsep, percobaan rancangan, dan menemukan lebih banyak masalah dan solusi yang memungkinkan [4]. Sistem dengan model prototype memperbolehkan pengguna untuk mengetahui bagaimana sistem berjalan dengan baik.
Metode prototyping yang digunakan di dalam penelitian ini bertujuan untuk mendapatkan gambaran  aplikasi  yang  akan  dibangun  melalui  rancangan  aplikasi prototype terlebih  dahulu kemudian  akan  dievaluasi  oleh  user.  Aplikasi prototype yang  telah  dievaluasi  oleh  user selanjutnya  akan  dijadikan  acuan  untuk  membuat  aplikasi  yang  dijadikan  produk  akhir  sebagai output dari penelitian ini.
Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristianto)
Gambar 1 Prototyping Model oleh Khosrow-Pour [5].

## 3.2. UML (Unified Modelling Language)
Pada Perkembangan teknik pemrograman berorientasi objek, muncul sebuah standarisasi bahasa  pemodelan  untuk  pembangunan  perangkat  lunak  yang  dibangun  dengan  menggunakan teknik  pemrograman  berorientasi  objek. Unified  Modeling  Language  (UML) muncul  karena adanya kebutuhan pemodelan visual untuk menspesifikasikan, menggambarkan, membangun, dan dokumentasi dari sistem perangkat lunak. Unified Modeling Language (UML) merupakan bahasa visual untuk pemodelan dan komunikasi mengenai sebuah sistem dengan menggunakan diagram dan teks - teks pendukung. UML hanya berfungsi untuk melakukan pemodelan. Jadi penggunaan UML tidak terbatas pada metodologi tertentu, meskipun pada kenyataannya UML paling banyak digunakan pada  metodologi berorientasi objek [6]

## 3.3. Metode Pengumpulan data
Pengumpulan data adalah rangkaian kegiatan penelitian yang mencakup pencarian data- data atau sumber yang menjadi acuan dalam mendukung penelitian terkait. Metode pengumpulan data yang dilakukan adalah:
1. Studi Literatur
Studi literatur adalah pengumpulan data dengan cara mencari referensi yang relefan dengan permasalahan yang ditemuka. Referensi ini berasal paper yang berkaitan dengan penelitian.
2. Observasi
Teknik  pengumpulan  dengan  observasi  adalah  pengumpulan  data  dengan  mengadakan tinjauan platform online
3. Wawancara Wawancara  adalah  metode  pengumpulan  data  melalui  pertanyaan  secara  langsung/lisan kepada responden melalui wawancara semi terstruktur dan angket.

## 4. HASIL DAN PEMBAHASAN

## 4.1.Arsitektur Sistem
Arsitektur  sistem  adalah  cara  untuk  menyatakan  bagaimana  mendefinisikan  komponen- komponen  yang  lebih  spesifik  secara  teratur.  Desain  arsitektur  sistem  ini  melibatkan User dan Admin dimana User dan Admin dapat tersambung ke aplikasi marketplace menggunakan internet, kemudian data yang ada di dalam aplikasi marketplace disimpan di dalam database.

## Gambar 2 Arsitektur Sistem

## 4.2. Use Case Diagram

## Gambar 3. Use Case Diagram
Terdapat  3  aktor  dalam  usecase  diagram,  yaitu  Pembeli,  Penjual  dan  Admin.  Pembeli  dapat melakukan  Registrasi/Daftar,  Login,  Beli  Barang  dan  Pembayaran.  Penjual  dapat  melakukan Login,  Registrasi/Daftar  dan  Jual  Barang.  Admin  dapat  melakukan  Login,  Kelola  Transaksi, Validasi Pembayaran, Kelola Barang, Kelola user dan konfirmasi produk.

## 4.3. Class Diagram
JURNAL ILMIAH KOMPUTER GRAFIS p-ISSN : 1979-0414   e-ISSN :  2621-6256.
Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristianto)
Gambar 4. Use Case Diagram
Class Diagram aplikasi Marketplace Helmet Indonesia Store dapat dilihat pada Gambar 4. Class Barang berelasi dengan Class Transaksi dan Class Transaksi berelasi dengan Class Users .
4.4. Activity Diagram Login

## Gambar 5. Activity Diagram Login
Login dimulai dari halaman Login, kemudian user memasukkan email dan password yang telah di registrasi. Kemudian sistem  melakuakan verifikasi email dan password untuk user masuk ke halaman utama.

## 4.5. Activity Diagram Jual

## Gambar 6 Activity Diagram Jual
Proses  jual  barang  dimulai  dari  halaman  utama  kemudian user memilih  opsi  jual  barang  lalu mengisi  form  penjualan  dan  upload  foto  barang  yang  akan  dijual.  Data user kemudian  akan disimpan ke database oleh sistem.
Gambar 7. Activity Diagram Order
Order  dimulai  dari  halaman  utama,  kemudian  user  bisa  melihat  produk  yang  tersedia,  lalu melakukan  order  produk  dan  mengisi  form  pengiriman.  Setelah  itu  user  melakukan  proses pembayaran. Proses pembayaran yang berhasil akan disimpan ke Database .
4.6. Activity Diagram Validasi Penjualan
Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristianto)
Gambar 8.  Activity Diagram Validasi Penjualan
Proses  validasi  penjualan  dilakukan  dari  Halaman  Admin  kemudian  Admin  melakukan Konfirmasi Penjualan dan akan disimpan oleh sistem kedalam Database .

## 4.7. Activity Diagram Konfirmasi
Gambar 9. Activity Diagram Konfirmasi
Proses  konfirmasi  pembayaran  dimulai  dari  halaman  utama  lalu  user  mengisi  form  konfirmasi pembayaran. Setelah mengisi form, admin akan memverifikasi pembayaran user kemudian sistem akan menyimpan data ke database.

## 4.8. Perancangan Database
Database aplikasi Marketplace Helm Indonesia Store terdiri dari:
1. Tabel Barang, tabel barang digunakan untuk menyimpan data barang.
2. Tabel transaksi, tabel transaksi digunakan untuk menyimpan data transaksi
3. Tabel Users ,  tabel users digunakan  untuk  menyimpan  data  users  yang  terdiri  dari Pelanggan dan Admin.
4. Tabel Shipping , tabel shipping digunakan untuk menyimpan database ongkos kirim yang terdiri dari Provinsi dan Harga Ongkos Kirim.
Gambar 10. ERD Database

## 4.9. Halaman Utama
Halaman Utama Pelanggan pada gambar 11 akan ditampilkan tentang informasi berupa banner , produk, login/registrasi.
Gambar 11. Halaman Utama
4.10. Halaman Login
Halaman login pada gambar 12 ditampilkan tentang informasi yang bisa di input untuk login kedalam sistem.
Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristianto)

## Gambar 12.  Halaman Login

## 4.11.Halaman Registrasi
Halaman registrasi pada gambar 13 ditampilkan tentang informasi yang harus diisi untuk proses  registrasi  atau  daftar  ke  dalam  sistem.  Informasi  tersebut  berupa  Username,  Nama Lengkap, No. Hp, Password.
Gambar 13.  Halaman Registrasi

## 4.12. Halaman Produk
Halaman  produk  pada  gambar  14  ditampilkan  tentang  informasi  barang-  barang  yang dijual  pada  website  helmet  Indonesia  store.  Pada  Halaman  Produk  terdapat  fitur  Filter  produk menggunakan Merk helm dan Jenis helm.
Vol. 15, No. 1, Juli 2022 : 83–94

## Gambar 14. Halaman Produk

## 4.13.Halaman Jual Barang
Halaman  Jual  Barang  pada  gambar  15  ditampilkan  tentang  informasi  yang  harus  diisi oleh User ketika akan menjual barangnya di website helmet Indonesia store.
Gambar 15. Halaman Jual Barang
4.14.Halaman Order
Halaman  Order  pada  gambar  16  akan  ditampilkan  tentang  informasi  detail  order  yang dilakukan  oleh User berupa  harga  barang,  nama  penerima,  alamat  lengkap  dan  Provinsi pengiriman untuk menentukan harga ongkos kirim.
Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristianto)

## Gambar 16 Halaman Order
4.15. Halaman Konfirmasi Pembayaran
Halaman Konfimasi Pembayaran pada gambar 17 ditampilkan tentang informasi berupa detail order dan konfirmasi pembayaran.
Gambar 17. Halaman Konfirmasi Pembayaran

## KESIMPULAN DAN SARAN
Setelah melakukan tahapan dalam perancangan desain protoype website helmet Indonesia store, maka dapat diambil kesimpulan bahwasanya aplikasi Marketplace Helmet Indonesia Store dapat membantu proses transaksi penyedia jasa titip dan konsumen.
Desain  user  interface aplikasi marketplace Helmet  Indonesia  Store  dapat  memudahkan pengguna dalam bertransaksi. Tersedia media titip-jual helm dan kelengkapan berkendara secara online yang dapat mempermudah konsumen dalam melakukan transaksi Aplikasi Marketplace Helmet  Indonesia  Store  saat  ini  hanya  menyediakan  pembayaran melalui bank transfer, sehingga diharapkan pada pengembangan aplikasi selanjutnya Marketplace ini dapat melayani pembayaran dengan opsi yang lebih banyak

## DAFTAR PUSTAKA
[1] Ramadhan, V., Sulaksono, A., & Andarwati, M. (2018). “Desain Sistem Jasa Titip Berbasis E-Commerce Untuk Memudahkan Para Penyedia Jasa Titip Kue,” Seminar Nasional Sistem Informasi (SENASIF) , Vol 2 , no.1, pp. 1136-1145.
[2] Kosasi, S. (2015). “Perancangan Sistem E-Commerce Untuk Memperluas Pasar Produk Oleh- oleh Khas Pontianak,” SNASTIA, ISSN 1979-3960, pp. 110-119.
[3] Setiawan,  Iwan.,  Nirwan,  Saepudin.,  Amelia,  Firsta  Maisya.,  (2018).”  Rancang  Bangun Aplikasi  Marketplace  Bagi  Usaha  Mikro,  Kecil,  Dan  Menengah  Berbasis  Web.”    Jurnal Teknik Informatika Volume 10 - Nomor 3, pp. 37-43.
[4] Sommerville Ian, (2007). “ Software engineering ”, 9TH EDITIO. Boston: Addison-wesley.
[5] M.  Khosrow-Pour,  (2005).  “ Encyclopedia  of  Information  Science  and  Technology ”.  IGI Global.
[6] A.S  Rosa,  AS.  dan  Shalahuddin  M.  (2013),  “Rekayasa  Perangkat  Lunak”.Bandung, Informatika Bandung