JURNAL ILMIAH KOMPUTER GRAFIS.
Vol.
No.
JULI 2022, pp.
83 - 94
p-ISSN : 1979-0414.
e-ISSN : 2621-6256 .
http://journal.
id/index.
php/pixel C page 83
DESAIN USER INTERFACE PADA TOKO ONLINE HELM
INDONESIA BERBASIS WEB
Teguh Khristianto 1.
Isworo Nugroho 2,Dwi Agus Diartono 3.
Soelistijadi4 Sistem Informasi.
UNISBANK Semarang Jl.
Trilombajuang No.
Semarang, teguhkhris@edu.
Sistem Informasi.
UNISBANK Semarang Jl.
Trilombajuang No.
Semarang, isworo@edu.
Sistem Informasi.
UNISBANK Semarang Jl.
Trilombajuang No.
Semarang, dwieagus@edu.
Tehnik Informatika.
UNISBANK Semarang Jl.
Trilombajuang No.
Semarang, r.
soelitijadi@edu.
ARTICLE INFO
Article history:
ABSTRACT
The growth rate of internet users in recent years has increased very rapidly and is growing 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 PENDAHULUAN Penjualan barang secara online sangat banyak dinikmati oleh berbagai kalangan 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 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 Received Mei 23, 2022.
Revised Juni 29, 2022.
Accepted Juli 12, 2022 p-ISSN : 1979-0414 e-ISSN : 2621-6256 membutuhkan jasa penjualan barang .
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.
TINJAUAN PUSTAKA
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 ecommerce.
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 Ini karena e-commerce memungkinkan penjual menjangkau dan menjual lebih banyak E-commerce merupakan solusi bagi produk dengan jumlah pembeli terbatas untuk mendapatkan pangsa pasar yang lebih besar.
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 .
METODOLOGI
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 .
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.
JURNAL ILMIAH KOMPUTER GRAFIS
Vol.
No.
Juli 2022 : 83Ae94
JURNAL ILMIAH KOMPUTER GRAFIS
p-ISSN : 1979-0414 e-ISSN : 2621-6256.
Gambar 1 Prototyping Model oleh Khosrow-Pour .
UML (Unified Modelling Languag.
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 .
Metode Pengumpulan data Pengumpulan data adalah rangkaian kegiatan penelitian yang mencakup pencarian datadata atau sumber yang menjadi acuan dalam mendukung penelitian terkait.
Metode pengumpulan data yang dilakukan adalah:
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.
Observasi Teknik pengumpulan dengan observasi adalah pengumpulan data dengan mengadakan tinjauan platform online Wawancara Wawancara adalah metode pengumpulan data melalui pertanyaan secara langsung/lisan kepada responden melalui wawancara semi terstruktur dan angket.
HASIL DAN PEMBAHASAN
Arsitektur Sistem Arsitektur sistem adalah cara untuk menyatakan bagaimana mendefinisikan komponenkomponen 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.
Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristiant.
p-ISSN : 1979-0414 e-ISSN : 2621-6256 Gambar 2 Arsitektur Sistem 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.
Class Diagram
JURNAL ILMIAH KOMPUTER GRAFIS
Vol.
No.
Juli 2022 : 83Ae94
JURNAL ILMIAH KOMPUTER GRAFIS
p-ISSN : 1979-0414 e-ISSN : 2621-6256.
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 .
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.
Activity Diagram Jual Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristiant.
p-ISSN : 1979-0414 e-ISSN : 2621-6256 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 Proses pembayaran yang berhasil akan disimpan ke Database.
Activity Diagram Validasi Penjualan JURNAL ILMIAH KOMPUTER GRAFIS Vol.
No.
Juli 2022 : 83Ae94
JURNAL ILMIAH KOMPUTER GRAFIS
p-ISSN : 1979-0414 e-ISSN : 2621-6256.
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.
Activity Diagram Konfirmasi Gambar 9.
Activity Diagram Konfirmasi Proses konfirmasi pembayaran dimulai dari halaman utama lalu user mengisi form konfirmasi Setelah mengisi form, admin akan memverifikasi pembayaran user kemudian sistem akan menyimpan data ke database.
Perancangan Database Database aplikasi Marketplace Helm Indonesia Store terdiri dari:
Tabel Barang, tabel barang digunakan untuk menyimpan data barang.
Tabel transaksi, tabel transaksi digunakan untuk menyimpan data transaksi Tabel Users, tabel users digunakan untuk menyimpan data users yang terdiri dari Pelanggan dan Admin.
Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristiant.
p-ISSN : 1979-0414 e-ISSN : 2621-6256 Tabel Shipping, tabel shipping digunakan untuk menyimpan database ongkos kirim yang terdiri dari Provinsi dan Harga Ongkos Kirim.
Gambar 10.
ERD Database Halaman Utama Halaman Utama Pelanggan pada gambar 11 akan ditampilkan tentang informasi berupa banner, produk, login/registrasi.
Gambar 11.
Halaman Utama Halaman Login Halaman login pada gambar 12 ditampilkan tentang informasi yang bisa di input untuk login kedalam sistem.
JURNAL ILMIAH KOMPUTER GRAFIS
Vol.
No.
Juli 2022 : 83Ae94
JURNAL ILMIAH KOMPUTER GRAFIS
p-ISSN : 1979-0414 e-ISSN : 2621-6256.
Gambar 12.
Halaman Login 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 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.
Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristiant.
p-ISSN : 1979-0414 e-ISSN : 2621-6256 Gambar 14.
Halaman Produk 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 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.
JURNAL ILMIAH KOMPUTER GRAFIS
Vol.
No.
Juli 2022 : 83Ae94
JURNAL ILMIAH KOMPUTER GRAFIS
p-ISSN : 1979-0414 e-ISSN : 2621-6256.
Gambar 16 Halaman Order 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 Desain User Interface Pada Toko Online Helm Indonesia Berbasis Web (Teguh Khristiant.
p-ISSN : 1979-0414 e-ISSN : 2621-6256
DAFTAR PUSTAKA