J URNAL M ULTIMEDIA DAN IT
VOL . 05 NO . 01 , PP . 036 - 041
P -ISSN : 2548-9534 | E -ISSN : 2548-9550

## Perancangan Media Penjualan Produk Pada Toko Tina Tailor Berbasis Mobile Web
Larasati Lugi Aryaningsih a Sari Setyaning Tyas, M.Ti b Rudy Cahyadi, MT c
c Politeknik Negeri Media Kreatif

## I NFORMASI A RTIKEL

## ABSTRACT
Sejarah Artikel:
Salah  satu  aktivitas  yang  menggunakan  media  internet  dalam mengembangkan  penjualannya  yaitu  dengan e-commerce ,  sama  halnya dengan  bisnis  online.  Lain  halnya  dengan  Tina  Tailor,  belum mengoptimalkan penjualannya secara online dan media informasi pada Tina Tailor masih menggunakan perantara via WhatsApp . Solusi yang diberikan untuk permasalah pada toko Tina Tailor yaitu menambah media penjualan dengan sistem digitalisasi berbasis mobile website menggunakan WordPress dengan  plugin WooCommerce. Metode  perancangan  sistem  menggunakan Entity  Relationship  Diagram (ERD)  dan Unified  Modeling  Language (UML). Pengujian mobile  web menggunakan  metode black  box untuk  uji fungsional  dan  sebaran  kuesioner  untuk usability  test. Hasil  pengujian fungsionalitas memperlihatkan data masukan dengan hasil yang diinginkan telah  selaras.  Hasil  pengujian  kompatibilitas  menunjukan  hasil  kecepatan yang  baik.  Hasil  pengujian usability  mobile  web Tina  Tailor  mencapai 92.36% menunjukan bahwa mobile web Tina Tailor sangat layak digunakan oleh pengguna sebagai media penjualan.
DOI: 10.46961/jommit.v5i2
Diterima Redaksi: 04 November 2021
Revisi Akhir: 10 Desember 2021
Diterbitkan Online : 15 Desember 2021 K ATA K UNCI E-Commerce, Tina Tailor, Mobile Website

## K ORESPONDENSI

## Email : larasatilugi@gmail.com

## 1. PENDAHULUAN
Kemajuan  dalam  bidang  teknologi,  informasi  dan komunikasi  membuat  kehidupan  berubah  dan  meningkat  pesat. Hampir di setiap sektor telah terkoneksi dengan internet. Jumlah masyarakat yang menggunakan internet di Indonesia, berdasarkan  riset We  Are  Social [1],  telah  mencapai  175,4  juta pengguna.  Sebenarnya,  pengguna  internet mobile jauh  lebih banyak nyaris dua kali lipatnya. Sekarang dicatatkan masyarakat Indonesia yang memakai koneksi internet pada perangkat mobile , semacam smartphone ataupun  tablet,  mencapai  338,2  juta pengguna.
Salah  satu  aktivitas  yang  dilakukan  dengan  menggunakan media internet dalam mengembangkan penjualannya yaitu dengan e-commerce, adalah sejenis marketplace tempat dimana transaksi bisnis online terjadi. Semakin maraknya penggunaan smartphone, calon  pembeli  ataupun  konsumen  bisa  menemui laman  penjual,  mencari  produk,  membandingkan,  berinteraksi dan memesan secara online. Pemakaian e-commerce lebih banyak
memberi keuntungan apabila dibandingkan dengan cara membeli yang konvensional[2].
Tina Tailor merupakan sebuah usaha yang menjual jasa jahit pakaian.  Selain  jasa  jahit  pakaian,  Tina  Tailor  menjual  produk pakaian. Media penjualan yang dilakukan oleh Tina Tailor pada awalnya  sebatas  offline dan  masih  bersifat  konvensional hanya dengan memberikan informasi produk dari mulut ke mulut , dan konsumen  mendatangi  langsung  toko.  Pada  layanan  custom pakaian,  berdasarkan  keterangan  dari  pengunjung  toko mengungkapkan  bahwa  kurangnya  media  informasi  untuk penjadwalan  dikarenakan  pada  saat  pengunjung  datang  ke  toko untuk custom pakaian, pemilik sering kali tidak berada di tempat. Setelah  Tina  Tailor  mengeluarkan  produk  pakaian  sehingga mulai  merambah  media  penjualan  online  melalui  media  sosial Instagram. Pemilik toko Tina Tailor menggunakan  media sosial instagram  untuk  menaikan  volume  penjualan.  Berikut  tabel penjualan  yang  dimiliki  oleh  toko  Tina  Tailor  dengan menggunakan instagram dan metode oflline pada tahun 2020.
Gambar 1. Data Penjualan
Gambar  diatas  menunjukkan  bahwa  penjualan  toko  Tina Tailor mengalami peningkatan walaupun sempat ada penurunan volume penjualan yang signifikan pada bulan april dikarenakan adanya  dampak  peraturan  terkait  Covid-19.  Jumlah  penjualan tersebut  dibagi  berdasarkan  penjualan  online  menggunakan instagram  dan  penjualan  offline.  Gambar  diatas  menunjukkan bahwa  penjualan  online  belum  dapat  mempengaruhi  penjualan jika  di  bandingkan  dengan  penjualan  offline.  Dalam  hal  ini, penjualan  online  melalui  instagram  tidak  berjalan  seperti  yang diharapankan oleh pemilik toko Tina Tailor. Jika total penjualan dihitung  terlepas  dari  metode  penjualan  yang  digunakan, penjualan  toko  Tina  Tailor  rata-rata  meningkat  dari  waktu  ke waktu.
Penjualan online melalui Instagram mengambil peran dalam perwujudan  kegiatan  penjualan,  tetapi  akun  instagram  yang digunakan semata-mata hanya untuk memberi informasi tentang produk,  sehingga  sedikit  yang  melanjutkan  sampai  ketahap pembelian  produk.  Selain  itu  untuk  mengetahui  informasi  stok produk  yang  tersedia,  konsumen  masih  perlu  menghubungi penjual  melalui  perantara  via  WhatsApp.  Hal  tersebut  menjadi penghambat  pelayanan  dan  informasi  yang  diterima  oleh konsumen.  Dengan  demikian,  toko  Tina  Tailor  memiliki kekurangan  dalam  mengoptimalkan  penjualan  produk  secara online dan juga kurangnya media informasi untuk layanan custom pakaian,  sehingga  proses  penjualan  yang  dilakukan  belum optimal.
Penulis  memberikan  solusi  yaitu  dengan  membantu  Tina Tailor  menambah  media  penjualan  dengan  sistem  digitalisasi sehingga  terciptanya mobile  website yang  dapat  diakses  oleh pelanggan  dengan  mudah  melalui smartphone yang  terhubung dengan internet yang dapat diakses tanpa adanya batasan waktu. Penulis mengupayakan dengan pembuatan mobile website dapat memberikan hasil yang dapat membantu usaha Tina Tailor untuk menciptakan dan mendapatkan keuntungan dengan menyediakan wadah bagi produk dan layanan yang tersedia.
penjualan,  pemasaran  barang  dan  jasa  melalui  internet  atau jaringan  komputer.  Seluruh  komponen  yang  terdapat  pada perdagangan  diterapkan  ke  dalam e-commerce ,  misalnya  cara pembayaran,  layanan  produk  dan  promosi.  Menggunakan e- commerce adalah  kebutuhan  penting  bagi  sebuah  bisnis  supaya bisa bersaing secara global[4].

## 2.3. Key Point E-Commerce
Banyak  pelangan  berbelanja  online  demi  kenyamanan.  Sebagai pemilik  bisnis,  harus  membuat  segalanya  lebih  mudah  bagi pembeli.  Untuk  mempengaruhi  pembeli  dan  melakukan penjualan, situs e-commerce yang dibuat harus mudah digunakan dan  menerapkan  beberapa  point.  Berikut  adalah  hal  yang  perlu dipertimbangkan Ketika mengembangkan atau merestrukturisasi situs  e-commerce  yaitu User  Friendly , Shopping  Cart  and Checkout Process , Mobile Compatibility , Call to Action (CTA) , Images and Descriptions , In Stock , Customer Support , Security and Privacy.

## 2.4. Mobile Website
Mobile  website merupakan  situs  yang  didesain  spesifik  buat perangkat  selular  yang  didesain  memakai  standard  yang  sama dengan website pada desktop .  Beberapa  aspek  yang  wajib diperhatikan pada perancangan mobile website yaitu keterbatasakan  fisik,  mencakup  bentuk  fisik  yang  mini  dan inputan  terbatas.  Selain  itu  keterbatasan  teknis,  mencakup  taraf keamanan  yang  terbatas,  faktor  device  yang  bervariasi,  input yang  bervariasi  misalnya  layer  sentuh ,  numeric  keypad,  qwerty keypad, dan akses data yang bervariasi[5].

## 2.5. Mobile Website Development
Mobile website pada dasarnya sama dengan situs web biasa, satu- satunya  pengecualian  adalah  ukurannya  disesuaikan,  biasanya menggunakan  desain  responsif  untuk  menyesuaikan  tata  letak agar sesuai dengan ukuran layar yang lebih kecil dari perangkat seluler  yang  sedang  dilihat.  Dilansir  dari  halaman website Developer  Mozilla [6]  terdapat  beberapa  teknik  utama  yang diperlukan  untuk  merancang  situs  web  yang  berfungsi  dengan baik di perangkat seluler yaitu designing for mobile devices dan cross browser compatibility.

## 2.6. ERD
Entity  Relationship  Diagram (ERD)  adalah  suatu  cara  untuk menjelaskan  kepada  para  pemakai  tentang  dokumentasi  yang digunakan untuk menyajikan relasi, dan tentang hubungan antar data secara logic .

## 2. TINJAUAN PUSTAKA

## 2.1. Penjualan
Kegiatan  penjualan  akan  menjadi  lengkap  apabila  terdapat pembelian,  buat  membentuk  suatu  transaksi  terjadi.  Aktivitas penjualan akan terjadi apabila ada pembeli dan terjadinya suatu transaksi, yang dapat diakhiri melalui proses pembayaran[3].

## 2.2. E-Commerce
E-commerce kependekan  dari electronic  commerce atau perdagangan  elektronik  adalah  penyebaran,  pembelian,

## 2.7.  UML
UML (Unified Modeling Language) adalah sebuah bahasa yang berdasarkan  grafik  atau  gambar  untuk  memvisualisasi, menspesifikasikan,  membangun,  dan  pendokumentasian  dari sebuah sistem pengembangan software berbasis Object-Oriented. UML sendiri juga memberikan standar penulisan sebuah sistem blue print, yang meliputi konsep bisnis proses, penulisan kelas- kelas dalam bahasa program yang spesifik, skema database, dan komponen-komponen yang diperlukan dalam sistem software[7]
2
.

## 3. KONSEP PERANCANGAN
Penulis  menggunakan  UML  dan  ERD  yang  akan  digunakan untuk memaparkan mengenai alur sistem yang akan dibuat pada karya ini.
Gambar 2. ERD
Gambar 3. Use Case Diagram Admin
Gambar 4. Use Case Diagram Customer Gambar 5. Activity Diagram Pemesanan
Gambar 6. Activity Diagram Pembayaran
Gambar 7. Sequence Diagram Pemesanan

## 4. HASIL DAN PEMBAHASAN

## 4.1. Tampilan Mobile Website Tina Tailor

## Gambar 9. Tampilan Halaman Utama

## 4.2. Pengujian Sistem
Pengujian  dilakukan  dengan  menguji  setiap  proses  dan kemungkinan kesalahan yang terjadi untuk setiap proses. Adapun pengujian  sistem  yang  dilakukan,  yaitu  uji  fungsi  website,  uji kompatibilitas, dan uji kebergunaan website.
Tabel 1. Hasil Function Test Kasus dan Hasil Uji (Data Benar) Data Masukan Yang Diharapkan Pengamatan Hasil Passed Fail Menu Akan tampil Tampil shop halaman shop halaman dipilih berisi   foto-foto shop  berisi produk, user foto-foto memilih  produk, produk, data akan masuk kedalam user memilih ✓ keranjang produk  data yang dipilih masuk ke dalam keranjang Icon mini Akan tampil Tampil cart produk yang produk dipilih dipilih, button yang lihat   keranjang dan pembayaran dipilih, button lihat ✓ keranjang dan pembayaran Button Akan tampil Tampil lihat halaman halaman keranjang keranjang dan keranjang ✓ dipilih detail produk dan detail produk 4
Tabel 2. Hasil Comptable Test Proses Pengujian Perangkat Smartphone Vivo V15 Xiaomi Poco F2 Iphone 7 Iphone 11 Network Wi-Fi Wi-Fi Wi-Fi 4G Browser Load Chrome Chrome Safari Safari Durasi sampai  ke halaman utama 4.1 detik 3.6 detik 4.4 detik 3.8 detik Menu Shop 3.5 detik 2.9 detik 4 detik 3.4 detik Menu Custom 3.1 detik 2 detik 3.4 detik 3.7 detik Menu My Account 2.04 detik 1.9 detik 2.6 detik 2.4 detik Menu Konfirmasi Pembayaran 4.05 detik 3.2 detik 4.1 detik 3.6 detik Menu Wishlist 3.8 detik 3.3 detik 3.9 detik 4.01 detik Menu Lacak Pesanan 3.6 detik 3.2 detik 3.4 detik 4.3 detik Menu Contact 4.1 detik 2.7 detik 3.3 detik 3.8 detik Menu About 3.9 detik 3.4 detik 4.5 detik 4.2 detik Mesin Pencarian 3.3 detik 2.4 detik 2.9 detik 3.5 detik Melihat Produk 2.6 detik 2 detik 2.3 detik 3 detik Mini Cart 0.81 detik 0.48 detik 0.73 detik 0.62 detik Luas Layar Baik Baik Baik Baik Kejernihan Gambar Baik Baik Baik Baik Kelengkapan Tampilan Baik Baik Baik Baik Tabel 3. Hasil Usability Test Hasil Pengujian Aspek Learnability Kode Pernyataan Total Skor Skor Max P1 Saya mampu dengan mudah mengerti  alur  dari  navigasi yang  ada  pada  mobile  web Tina Tailor 137 150 P2 Saya mampu dengan mudah memahami menu-menu yang  tersedia pada mobile web Tina Tailor 134 150 P3 Saya mampu dengan mudah memahami tulisan teks yang digunakan secara jelas pada mobile web Tina Tailor 143 150 P4 Saya mampu dengan mudah memahami  simbol,  ikon, dan  gambar  yang  ada  pada mobile web Tina Tailor 137 150 P5 Saya mampu dengan mudah menemukan  tombol  search 135 150

## 5
pada mobile web Tina
Tailor P6 Saya mampu dengan mudah mengakses informasi produk yang  ditawarkan pada mobile web Tina Tailor 141 150 Hasil Pengujian Aspek Efficiency P7 Saya mampu dengan mudah memahami tampilan website secara cepat pada mobile web Tina Tailor 140 150 P8 Saya mampu dengan mudah mengakses menu-menu yang tersedia  secara  cepat pada mobile web Tina Tailor 141 150 P9 Saya mampu dengan mudah memperoleh informasi produk  secara  cepat  pada mobile web Tina Tailor 140 150 P10 Saya mampu dengan mudah memperoleh hasil pencarian produk  secara  cepat  pada mobile web Tina Tailor 137 150 P11 Saya mampu dengan mudah melakukan transaksi pembayaran  secara  cepat pada mobile web Tina Tailor 136 150 Hasil Pengujian Aspek Memorability P12 Saya mampu dengan mudah mengingat  arah  navigasi pada mobile web Tina Tailor 128 150 P13 Saya mampu dengan mudah mengingat menu-menu yang  tersedia pada mobile web Tina Tailor 139 150
P14 Saya mampu dengan mudah mengingat  tampilan  dari halaman yang tersedia pada mobile web Tina Tailor 143 150 Hasil Pengujian Aspek Errors P15 Saya tidak menemukan menu  yang  error  pada mobile web Tina Tailor 144 150 P16 Saya tidak menemukan error saat melakukan transaksi  pembayaran  pada mobile web Tina Tailor 137 150 P17 Saya tidak menemukan saat menu diklik tidak memberikan respon pada mobile web Tina Tailor 144 150 Hasil Pengujian Aspek Satisfaction P18 Saya merasa nyaman dalam mengoperasikan mobile web Tina Tailor 140 150 P19 Saya merasa nyaman dengan  tampilan,  paduan warna dan tata letak konten secara keseluruhan pada mobile web Tina Tailor 142 150
Berorientasi  Objek,” JIKO  (Jurnal  Inform.  dan Komputer) ,  vol.  2,  no.  1,  pp.  19–25,  2019,  doi: 10.33387/jiko.v2i1.1052.
Hasil  pengujian  usability  mobile  web  Tina  Tailor  mencapai 92.36% menunjukan bahwa mobile web Tina Tailor sangat layak digunakan oleh pengguna sebagai media penjualan.

## 5. KESIMPULAN DAN SARAN
Melalui  pemaparan  yang  sudah  dijabarkan  dalam  sejumlah  bab sebelumnya,  bisa  disimpulkan  bahwasanya  tujuan  penelitian telah  tercapai  yakni  membuat  media  penjualan  produk  berbasis mobile  website  untuk  mengoptimalkan  penjualan  secara  online dan  meniadakan  perantara  pada  toko  Tina  Tailor.  Hal  ini dibuktikan  oleh  melalui  beberapa  pengujian  yaitu fuctional testing  menggunakan  metode  pengujian blackbox,  compatable testing dengan  metode  manual  menggunakan  beberapa device , dan usability testing didapat dari hasil kuesioner ke user target. Hasil  pengujian  fungsionalitas  memperlihatkan  data  masukan dengan  hasil  yang  diinginkan  telah  selaras.  Hasil  pengujian kompatibalitas  menunjukan  hasil  kecepatan  yang  baik. Sedangkan  pengujian  kebergunaan  berdasarkan learnability, efficiency,  memoriability,  error,  satification menunjukan persentase  92,36%  yang  menyatakan  bahwa  mobile  website dinamis Tina Tailor sudah layak untuk digunakan.

## DAFTAR PUSTAKA
[1] S. Kemp, “Digital 2020: Global Digital Overview,” Https://Wearesocial.Com/Blog/2020/01/Digital-2020- 3-8-Billion-People-Use-Social-Media , 2020.
[2] M.  D.  S.  Ananda  and  I.  Novita,  “Sistem  Informasi Penjualan Batik Berbasis Website Pada Toko Kencana Ayu,” Idealis ,  pp.  28–32,  2015,  [Online].  Available: http://jom.fti.budiluhur.ac.id/index.php/IDEALIS/articl e/view/2727/1106.
[3] A.  Mutiarasari,  “IMPLEMENTASI  BISNIS  ONLINE SYARIAH  MELALUI  E-COMMERCE  DALAM MENINGKATKAN  PENJUALAN  DI  YUKSHIJAB PASURUAN,” Αγαη , vol. 8, no. 5, p. 55, 2019.
[4] R.  M.  A.  Wardani  and  A.  Meyliana,  “Perancangan Website Sebagai Media Penjualan Online Kain Shibori,” Speed - Sentra Penelit. Eng. dan Edukasi , vol. 10, no. 4, pp. 104–110, 2018, [Online]. Available: http://speed.web.id/ejournal/index.php/speed/article/vie w/405/398.
[5] B. Usmanto, R. Immawan, Fauzi, K. P. Sari, and M. I. Mahdi,
“Implementasi Web Mobile Sebagai Mediainformasi  Pemberdayaan  Masyarakat  Di  Desa Pirngadi,” J. Keteknikan dan Sains , vol. 1, no. 1, pp. 32– 40, 2018, [Online]. Available:
http://journal.unhas.ac.id/index.php/juteks/article/view/
4296.“Mobile Web Development.” 2016.
[6] A. Mubarak, “Rancang Bangun Aplikasi Web Sekolah
Menggunakan Uml (Unified Modeling Language) Dan Bahasa Pemrograman Php (Php Hypertext Preprocessor)
6

## BIODATA PENULIS

## Larasati Lugi Aryaningsih
Lahir di Jakarta, 17 Juni 2000. Meraih gelar Ahli  Madya  Desain  (A.Md.,  Ds.)  di Politeknik  Negeri  Media  Kreatif  Jakarta, Program  Studi  Konsentrasi Multimedia tahun 2021.

## LAMPIRAN
Testing Pemesanan Testing Pembayaran
P20 Saya akan mengunjungi kembali mobile web Tina Tailor 133 150 Total Skor 2771 3000