DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta

## PENERAPAN UI/UX PADA E-COMMERCE BATIK JAMBI DUO SERANGKAI BERBASIS WEB
(STUDI KASUS GERAI BATIK JAMBI DUO

## SERANGKAI)
1 Akmad Yudiyanto Kurniawan, 2 Ezrifal Sany, 3 Merti Megawaty
1,2,3 Teknik Informatika, Ilmu Komputer, Universitas Nurdin Hamzah JL. Kolonel Abunjani RT.25 Selamat Danau Teluk, Selamat, Kec. Telanaipura, Kota Jambi, Jambi 36124 Indonesia
*e-mail: a.yudiyanto.k@email.com , Ezrifalsany@gmail.com , mertimegawaty1@gmail.com

## Abstrak
User  experience merupakan  sebuah  ilmu  yang  mempelajari  bagaimana  merancang  dan  merubah sebuah  perasaan,  presepsi,  serta  perilaku  pengguna  terhadap  suatu  tampilan,  layanan  dan  kinerja sebuah produk, sistem, atau jasa. User experience (UX) menilai seberapa kepuasan dan kenyamanan seseorang  terhadap  sebuah  produk,  sistem,  dan  jasa, User  interface adalah  salah  satu  faktor  yang menentukan  peningkatan traffic pada  sebuah website .  Karena  user  berinteraksi  dengan  logika pemrograman  melalui user  interface .  Dan  desain user  interface sendiri  menjadi  sangat  penting mengingat semakin efektif dan efisien suatu desain, semakin betah pula user untuk berlama-lama di website tersebut. User  interface merupakan  salah  satu  faktor  terpenting  dalam  membangun  sebuah website . E-commerce merupakan  satu  set  dinamis  teknologi  aplikasi  dan  proses  bisnis  yang menghubungkan  perusahaan,  konsumen  dan  komunitas  tertentu  melalui  transaksi  elektronik  dan perdagangan  barang,  jasa  dan  informasi  yang  dilakukan  secara  elektronik.  UI/UX  pada  web e- commerce Batik  Duo  Serangkai  Jambi  adalah  memberikan  solusi  untuk  meningkatkan  fitur  ongkos kirim  yang  transparan,  menampilkan  produk  populer,  meningkatkan  informasi  tentang  warna  dan ukuran produk, serta menciptakan pengalaman visual yang memanjakan mata bagi pelanggan.
Kata kunci: Batik Duo Serangkai , E-Commerce, Figma, User Experience, User Interface .

## Abstract
User experience is a science that studies how to design and change a user's feelings, perceptions and behavior towards a display, service and performance of a product, system or service. User experience (UX) assesses how satisfied and comfortable a person is with a product, system and service. The user interface  is  one  of  the  factors  that  determines  the  increase  in  traffic  on  a  website.  Because  users interact with programming logic through the user interface. And the design of the user interface itself is very important considering that the more effective and efficient a design is, the more comfortable the  user  will  be  to  linger  on  the  website.  The  user  interface  is  one  of  the  most  important  factors  in building a website. E-commerce is a dynamic set of application technologies and business processes that  connect  companies,  consumers  and  certain  communities  through  electronic  transactions  and trading of goods, services and information that is carried out electronically. The UI/UX on the Batik Duo Serangkai Jambi e-commerce website is to provide a solution to enhance the transparent postage feature,  display  popular  products,  increase  information  about  product  color  and  size,  and  create  a visual experience that spoils the eyes for customers.
Keywords: Batik Duo Serangkai, E-Commerce, Figma, User Experience, User Interface.
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta

## I. Pendahuluan
E-Commerce adalah  istilah  yang  digunakan  untuk  menggambarkan  penjualan  barang  dan  jasa melalui  Internet.  Dalam  pengertian  yang  paling  umum,  hanya  menciptakan  situs  Web  yang mengiklankan  dan  mempromosikan  produk  anda  dapat  dianggap  “ e-commerce .”  dalam  beberapa tahun  terakhir,  bagaimanapun e-commerce telah  menjadi  jauh  lebih  canggih.  E-commerce  telah merevolusi  cara  konsumen  dalam  membeli  barang  dan  jasa.  Produk  barang  dan  jasa  dapat dimodifikasi  sesuai  dengan  keingingan  konsumen.  Bisnis  dapat  dijalankan  tanpa  mengenal  batas waktu karena dijalankan secara online melalui internet yang selalu beroperasi tiap hari [1]. Bisnis e- commerce sekarang  menawarkan  toko  online  di  mana  pelanggan  dapat  mengakses  ribuan  produk, pemesanan,  pilih  metode  pengiriman  yang  diinginkan  dan  pembayaran  dengan  menggunakan  atm, mobile-banking, atau kartu kredit mereka [2].
UI/UX  adalah  singkatan  dari User  Interface (Antarmuka  Pengguna)  dan User  Experience (Pengalaman  Pengguna). User  interface merupakan  salah  satu  faktor  terpenting  dalam  membangun sebuah  website.  Tanpa  persiapan  dan  perancangan  yang  matang,  suatu  website  tertentu  tidak  bisa berjalan secara maksimal, bahkan bisa mengakibatkan user berpindah ke website lain [3] .

## II. Tinjauan Literatur
A. Tinjauan Literatur
Sebagai    acuan    dalam    penelitian    ini,    peneliti    mengambil    beberapa  sampel  jurnal  yang membahas  hal  yang  sama  dengan  yang  dilakukan  oleh  peneliti.  Berikut  untuk  hasil  review  dari jurnal - jurnal tersebut:
Penerapan UI / UX dengan Metode Design Thinking (Studi Kasus: Warung Makan)
Penelitian  dengan  judul  yang  disebutkan  diatas  bertujuan  untuk  mengevaluasi  dan meningkatkan  pengalaman  pengguna  melalui  penerapan  metode Design Thinking pada  desain aplikasi pemesanan makanan pada warung makan berbasis mobile. Metode System Usability Scale (SUS) dan User Experience Questionnaire (UEQ) digunakan untuk menguji kepuasan pengguna terhadap aplikasi yang dikembangkan dengan menggunakan metode Design Thinking.
Perancangan UI / UX Aplikasi e-wallet “MyBank”
Dalam  penelitian  kedua  yang  menjadi  acuan,  penelitian  tersebut  bertujuan  untuk  mengetahui perkembangan penggunaan digital wallet di masyarakat dari berbagai jurnal yang bersumber dari Scholar dan beberapa website yang telah di analisis dan di olah peneliti menjadi sebuah aplikasi MyBank. Dari aplikasi  yang  dibuat dapat disimpulkan mampu mempermudah pengguna digital wallet, khususnya di Indonesia.  Apalagi  setelah  banyaknya  aplikasi  dompet  digital,  jumlah pengguna digital wallet semakin meningkat karena dari itu aplikasi MyBank akan mempermudah pengguna sehingga lebih banyak melakukan transaksi secara digital
Design  UI  /  UX  Prototype  Aplikasi  Pemesanan  Produk  Dimskuy  Berbasis Mobile Dengan Menggunakan Figma
Penelitian yang menjadi acuan selanjutnya adalah penelitian dengan judul yang tertera di atas. Penelitian  tersebut  bertujuan  untuk  menghasilkan  konsep  alur  proses  dalam  pemesanan  produk Dimskuy,  menghasilkan design yang  menarik  dan  menerapkan hasil design ke  dalam prototype . Dengan adanya design prototype ini diharapkan dapat menjadi dasar dalam pembangunan aplikasi yang  dapat  mempermudah  pelanggan  dalam  melakukan  pemesanan  produk  Dimskuy.  Metode penelitian  yang  dipakai  yaitu  dengan  melakukan  wawancara  dan  menganalisis  data  yang  telah dikumpulkan. Dari data tersebut menghasilkan user persona, user flow , information architecture dan atom.
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta
B. Definisi-Definisi
Definisi User Experience User  experience merupakan  sebuah  ilmu  yang  mempelajari  bagaimana  merancang  dan  merubah sebuah perasaan, presepsi, serta perilaku pengguna terhadap suatu tampilan, layanan dan kinerja sebuah  produk,  sistem,  atau  jasa. User  experience (UX)  menilai  seberapa  kepuasan  dan kenyamanan seseorang terhadap sebuah produk, sistem, dan jasa. Istilah umum dari pengalaman pengguna seperti apa yang konsumen sukai, seberapa mudah  mereka  mengakses itu ataupun hal apa saja yang dapat mereka tidak sukai [4].
Definisi User Interface User interface adalah salah satu faktor yang menentukan peningkatan traffic pada sebuah website. Karena  user  berinteraksi  dengan  logika  pemrograman  melalui  user  interface.  Dan  desain user interface sendiri  menjadi  sangat  penting  mengingat  semakin  efektif  dan  efisien  suatu  desain, semakin betah pula user untuk berlama-lama di website tersebut. User interface merupakan salah satu faktor terpenting dalam membangun sebuah website. Tanpa persiapan dan perancangan yang matang,  suatu  website  tertentu  tidak  bisa  berjalan  secara  maksimal,  bahkan  bisa  mengakibatkan user berpindah ke website lain [2].
Definisi Usability Usability ialah teknik analisa secara kualitatif untuk menentukan seberapa mudah perangkat lunak digunakan  oleh  pengguna.  Aspek usability merupakan  aspek  agar  tercapainya  keberhasilan perangkat  lunak  dan  sebagai  tanda penerimaan  perangkat  lunak  oleh  pengguna. Usability dalam proses  pengujiannya  dapat  melibatkan  pengguna  akhir  secara  langsung  atau  tidak,  dengan  kata lain dapat disesuai dengan keadan objek dan pilihan penguji perangkat lunak. Pengujian usability dapat  dilakukan  pada  perangkat  lunak  yang  kecil  maupun  besar  dan multi  platform seperti berbasis dekstop , web ,  dan mobile. Fokus  dari  pengujian usability adalah  kemudahan menggunakan perangkat lunak oleh pengguna [5].
Definisi Usability Testing Usability  testing adalah  teknik  yang  digunakan  untuk  mengevaluasi  produk  dengan  mengujinya langsung  pada  pengguna, Usability  testing merupakan  suatu  attribut  untuk  menilai  seberapa mudah website digunakan.  Hasil  dari  penelitian  metode usability  testing akan  memberikan masukan  untuk  pengembangan website kedepan  agar  lebih  baik  lagi. Usability  testing atau  uji ketergunaan adalah mengukur efisiensi, kemudahan dipelajari, dan kemampuan untuk mengingat bagaimana berinteraksi tanpa kesulitan atau kesalahan [6].
Definisi E-Commerce E-Commerce merupakan proses pembeliandan penjualan jasa atau produk antara dua belah pihak melalui  internet  (Commerce-net)  dan  sejenis  mekanisme  bisnis  electronik  dengan  fokus  pada transaksi bisnis berbasis individu dengan menggunakan internet sebagai media pertukaran baran atau jasa baik antar instansi atau individu dengan instansi [1].

## Definisi Batik
Batik merupakan salah satu warisan budaya, memiliki nilai kehidupan dan makna filosofis yang harus dipelajari serta dilestarikan. Berbagai macam teknik batik diantaranya batik cap, batik tulis dan  batik  jumputan.  Batik  ditetapkan  sebagai Indonesia  Cultural  Heritage oleh United  Nations Educational,  Scientific  and  Cultural  Organisation (UNESCO)  pada  tanggal  2  Oktober  2009. Batik kaya akan nilai kehidupan manusia dan memiliki makna filosofis yang harus dipelajari serta dilestarikan.  Batik  memiliki  fungsi  praktis  dan  estetika,  dimana  fungsi  praktis  berkaitan  dengan
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
kegunaan batik untuk memenuhi kebutuhan manusia dan fungsi estetika berkaitan dengan unsur keindahan dari motif batik [7].

## Definisi Web
Website menjadi  suatu  sistem  informasi  yang  sangat  terkenal  saat  ini.  Dibangun  dengan  desain yang  independen  terhadap platform menjadi  salah  satu  keunggulannya.  Selain  itu website merupakan  kumpulan  halaman  yang  digunakan  untuk  menampilkan  informasi  berupa  teks, gambar,  suara,  video,  atau  gabungan  dari  semuanya,  baik  yang  bersifat  statis  maupun  dinamis yang  membentuk  satu  rangkaian  bangunan  yang  saling  berhubungan  melalui  internet.  Di  jaman informasi  saat ini website telah  menjadi  kebutuhan  bagi  siapa saja  yang  ingin  berbagi informasi melalui  internet  termasuk  salah  satunya  lembaga  pendidikan  untuk  menyebarkan  informasi tentang  lembaganya  ke  masyarakat  luas,  melakukan  proses  belajar  mengajar  online  dan menyediakan  manajemen  pelayanan  secara  online,  sehingga  interaksi  dan  komunikasi  lembaga pendidikan dengan stake holdernya tidak lagi dibatasi oleh masalah jarak, waktu dan tempat [8].

## Defisini Figma
Figma  adalah salah  satu design  tool  yang  biasanya  digunakan  untuk  membuat  tampilan  aplikasi mobile,  desktop,  website  dan  lain-lain.  Figma  bisa  digunakan  di  sistem  operasi  windows,  linux ataupun  mac  dengan  terhubung  ke  internet.  Umumnya  Figma  banyak  digunakan  oleh  seseorang yang  bekerja  dibidang  UI/UX,  web  design  dan  bidang  lainnya  yang  sejenis.  Selain  mempunyai kelengkapan fitur layaknya Adobe XD, Figma  memiliki keunggulan yaitu untuk pekerjaan yang sama  dapat  dikerjakan  oleh  lebih  dari  satu  orang  secara  bersama-sama  walaupun  ditempat  yang berbeda.  Hal  tersebut  bisa  dikatakan  kerja  kelompok  dan  karena  kemampuan  aplikasi  figma tersebut lah  yang  membuat  aplikasi  ini  menjadi pilihan  banyak  UI/UX  designer untuk  membuat prototype website atau aplikasi dengan waktu yang cepat dan efektif [9].

## Definisi Adobe Photoshop
Adobe Photoshop adalah sebuah perangkat lunak Editor citra yang dugunakan untuk pengeditan foto  atau  gambar  serta  pemberian  efek  pada  gambar  tersebut.  Pada  pengembangan  aplikasi  ini Adobe Photoshop digunakan untuk merancang tampilan interface dari aplikasi [10].
Definisi Sitemap
Sitemap adalah  sebuah  peta  yang  berisi  berbagai  macam  direktori  yang  terdapat  dalam  sebuah website .  Istilah  yang  lebih  sederhana  adalah  daftar  isi.  Semua  artikel/konten  yang  telah  dibuat akan  terlihat  dalam sitemap dalam  tampilan  lebih  simpel.  Pastinya  ini  sangat  penting  untuk sebuah website karena  tanpa  adanya  ini  pembaca  akan  kesulitan  untuk  menumukan  informasi yang dicari [11].
Defisini User Flow User  Flow adalah  gambaran  dari  alur  pengguna,  tujuannya  untuk  mengetahui  langkah-langkah juga batasan yang dapat dilakukan oleh pengguna dan digunakan untuk mencapai tujuannya [12].

## Definisi Black Box
Metode Blackbox  Testing adalah  metode  merupakan  pengujian  yang  berfokus  pada  spesifikasi fungsional  dari  perangkat  lunak,  tester  dapat  mendefinisikan  kumpulan  kondisi  input  dan melakukan  pengetesan  pada  spesifikasi  fungsional  program.  Proses  Black  Box  Testing  dengan cara mencoba program yang telah dibuat dengan mencoba memasukkan data pada setiap formnya. Pengujian  ini  diperlukan  untuk  mengetahui  program  tersebut  berjalan  sesuai  dengan  yang dibutuhkan  oleh  perusahaan.  Pengujian  dengan  metode Blackbox  Testing memiliki  dua  teknik yaitu Equivalence  Partitioning dan Boundary  Value  Analysis .  Pada  penelitian  ini  menggunakan teknik Equivalence Partitioning. Pengujian Black box memakai metode Equivalence Partitioning. [13].
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta

## III. Metode Penelitian

## A. Pendekatan Penelitian
Metode  ini  disebut  juga  dengan  penelitian  langsung,  karena  peneliti  akan  berhadapan  langsung dengan  pihak  yang  terkait di  tempat  melakukan  penelitian.  Dalam  hal ini  peneliti  mencari data-data yang diperlukan dengan cara:
1. Metode Observasi
Peneliti  mendapatkan  data  yang  diperlukan  untuk  menyusun  penelitian  dengan  cara  datang langsung  ke  tempat  penelitian  dan  mengamati  hal-hal  yang  berkaitan  dengan  desain interior dan eksterior.
2. Metode Wawancara
Peneliti  melakukan  tanya  jawab  secara  langsung  kepada  pihak  yang  terkait  secara  rinci berkaitan  dengan  penelitian  tentang  pengolahan  data  desain  interior    dan  mendapatkan  data yang akurat
3. Metode Angket
Penelitian  juga  melakukan  metode  angket  atau  kuisioner  berdasarkan  aplikasi e-commerce yang  sebelumnya  telah  dibuat,  untuk  mendapatkan  data  atau design apa  saja  yang  masih belum memuaskan kepada pelanggan.

## B. Kerangka Kerja Penelitian
Metode  penelitian  yang  penulis  gunakan  dalam  penelitian  ini  adalah  menggunakan  metode kualitatif, adapun objek penelitian ini adalah Sanggar Batik Duo Serangkai Jambi. Untuk membantu dalam pelaksanaan penelitian ini, maka perlu adanya kerangka  kerja yang jelas tahapan-tahapannya. Kerangka  kerja  ini  merupakan  langkah-langkah  yang  akan  dilakukan  dalam  penyelesaian  masalah yang akan dibahas. Adapun kerangka kerja penelitian yang digunakan adalah sebagai berikut.
Gambar 1. Kerangka Kerja Penelitian
Berdasarkan  kerangka  kerja  penelitian  yang  telah  digambarkan  diatas,  maka  dapat  diuraikan pembahasan masing-masing tahap dalam penelitian adalah sebagai berikut:
1. Identifikasi Masalah
Pada  tahap  ini  penulis  mengidentifikasi  masalah  yang  terjadi  pada  Sanggar  Batik  Duo Serangkai  untuk  penjualan  yang  masih  dilakukan  secara  manual  dengan  menggunakan
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
pencatatan buku dan brosur harga sehingga ditemukan beberapa kendala dan desain yang di perlukan untuk e-commerce tersebut.
2. Studi Literatur
Pada  tahap  ini  peneliti  mengumpulkan  data  dengan  cara  mempelajari  teori  dan  konsep  dari literatur yang akurat dengan masalah penelitian dan kuis dimana peneliti banyak mencari data - data dari beberapa sumber buku, jurnal, karya ilmiah dan program e-commerce sebelumnya yang telah dibuat, sehingga mendapatkan hasil yang maksimal.
3. Pengumpulan Data
Pada  tahap  ini  dilakukan  pengumpulan  data  dengan  menggunakan  metode  wawancara, observasi dan angket untuk mendapatkan data dan informasi untuk e-commerce pada Sanggar Batik Duo Serangkai.
4. Menentukan Ide dan Solusi Pada  tahap  ini  peneliti  melakukan  analisis  mencari  ide  dan  solusi  untuk user  interface dan user  experience pada  tampilan  web  untuk  memecahkan  masalah  yang  terjadi  pada  Sanggar Batik Duo Serangkai, dengan membuat desain sistem sesuai kebutuhan.
5. Pembuatan Desain
Pada  tahap  pembuatan  desain  dilakukan  desain  sesuai  hasil  wawancara  dan  hasil  kuisioner yang  telah  dilakukan  sehingga  mendapatkan  hasil  yang  maksimal  dan  memuaskan.  Jika terdapat kekurangan maka tahap ini berhubungan dengan tahapan desain sistem.
6. Pengujian Desain
Pada  tahap  pengujian  desain  ini,  jika  terdapat  kekurangan  maka  tahap  ini  berhubungan dengan tahap pembuatan desain. Pada tahap ini dilakukan pengujian keseluruhan sistem dari mulai tahap pemberian dialog interaktif sampai rekomendasi diberikan.
7. Kesimpulan dan Saran
Pada tahap ini merupakan tahap akhir dimana penulis membuat laporan akhir skripsi dengan judul  “Penerapan  UI  /  UX  Pada E-Commerce Batik  Jambi  Duo  Serangkai  Berbasis  Web” yang  terdiri  dari  6  Bab  Utama  yaitu  pendahuluan,  landasan  teori,  metodologi  penelitian, perancanga, implementasi dan pembahasan, kesimpulan dan saran.

## C. Riset dan Pengumpulan Data
Pada  tahap  ini  dilakukan  studi  pendahuluan  yaitu  mengkaji  berbagai  sumber  untuk  memperoleh gambaran topik  yang  akan  diteliti.  Sumber  yang  digunakan  yakni jurnal-jurnal, e-book. Dan  artikel- artikel yang berhubungan dengan user centered design dan usability. Setelah itu dilakukan identifikasi permasalahan yang diteliti dan dari hasil identifikasi tersebut akan dirumuskan dalam bentuk rumusan masalah.  Rumusan  yang  dapat  disimpulkan  ialah  bagaimana  desain  yang  baik  dan  bagus  serta  cara mengukur usability berdasarkan  pengalaman  pengguna  pada website Batik  Duo  Serangkai  Jambi dengan menerapkan metode User Centered Design. User  Centered  Design (UCD)  merupakan  pendekatan  yang  digunakan  untuk  mengembangkan sistem  secara  interaktif  yang  melibatkan  pengguna  dalam  proses  pengembangannya.  Menurut  ISO 9241-210:2010,  UCD  merupakan  metode  dalam  perancangan  dan  pengembangan  sistem  yang bertujuan  untuk  melibatkan  pengguna  dalam  proses  pembangunan  sistem  sehingga  mampu menyesuaikan  dengan  kebutuhan  pengguna.  Sedangkan  menurut  [15].  UCD  merupakan  teori  desain yang  menempatkan  pengguna  sebagai  pusat  berdasarkan  proses  pengembangan  sistem.  Metode  ini akan  berfokus  pada  kebutuhan  user  atau  pengguna  dalam  aplikasi  tersebut.  Mengingat  peran pengguna  sangat  ditekankan  pada  tahap  proses  pengembangan  sistem  maka  nilai  kebergunaan ( usability )  sangat  berpengaruh  terhadap  kepuasan  pengguna.  Pendekatan  UCD  juga  dapat meningkatkan nilai usability berdasarkan aspek efektivitas, efisiensi dan kepuasan pengguna.
Dalam  proses  pengembangan  aplikasi  menggunakan  metode  UCD,  terdapat  beberapa  tahapan yang  dilakukan  secara  iteratif  atau  dapat  mengulang  sesuai  dengan  kebutuhan.  Adapun  tahapan- tahapan yang dimaksud ialah sebagai berikut:
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta
Gambar 2 . Tahapan UCD Tabel 1. Pendekatan UCD
Hasil dari observasi didapatkan dari website Batik Duo Serangkai yaitu mengetahui bahwa Batik Duo Serangkai dalam website ini merupakan e-commerce dari Batik Duo Serangkai. Isi dari website tersebut bisa dilihat pada gambar 3.
Gambar 3 . Sitemap website Batik Duo Serangkai Jambi
D. Analisis Kompetitor Untuk  mengetahui  karakteristik  suatu  website e-commerce yang  khusus  menjual  produk  maka dilakukan survey website e-commerce yang khusus menjual produk yang sudah ada di pasar. Berikut merupakan hasil analisis kompetitor yang sudah dilakukan oleh peneliti.
Tabel 2 . Hasil Analisis Kompetitor
Website Deskripsi https://id.hm.com/ - Website  ini  berfokus  menjual  produk  fashion bergaya - Terdapat promosi pada tampilan awal dashboard - Memiliki konsep bisnis pada footer website - Informasi  yang  ditampilkan  didalam  detail  produk yaitu  gambar  produk,  harga  produk,  warna  produk dan ukuran produk https://3second.co.id/ - Website  ini  berfokus  menjual  produk  fashion
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta

## bergaya
- Memiliki Official Brand pada halaman dashboard - Informasi  yang  ditampilkan  detail  produk  yaitu gambar  produk,  harga  produk,  deskripsi  produk, ukuran produk dan ulasan produk. https://danarhadistore.co.id/days/ - Website ini berfokus menjual produk batik modern - Website  ini  mencantumkan  arti  dari  kategori  dari tiap batik - Informasi  yang  ditampilkan  detail  produk  yaitu gambar  produk,  harga  produk,  ukuran  produk, deskripsi produk dan model info. https://www.uniqlo.com/id/id/ - Website  ini  berfokus  menjual  produk  fashion bergaya - Menampilkan  apa  saja  yang  ditawarkan  oleh perusahaan  dan  menampilkan  highlight  tentang mengapa harus memilih uniqlo - Menampilkan  bahan  dan  kualitas  produk  pada halaman dashboard
- Informasi  yang  ditampilkan  pada  produk  yaitu gambar produk, harga produk, warna produk, ukuran produk,  jumlah  pembelian,  deskripsi  dan  ulasan produk https://global.batikboutique.com/ - Website ini menampilkan produk fashion batik - Menampilkan discount pada halaman dashboard - Memberikan promosi produk pada halaman dashboard - Memiliki misi perusahaan pada halaman dashboard - Informasi pada halaman detail produk yaitu gambar produk,  harga  produk,  deskripsi  produk,  ukuran produk, jumlah pembelian, ulasan produk pembayaran produk - Memiliki fitur chat
Dari  tabel  2.  diatas  dapat  disimpulkan  bahwa  karakteristik  website e-commerce yang  spesifik menjual  produk fashion yaitu  bagaimana  cara  website e-  commerce ini  meyakinkan  pengguna  agar membeli  atau  mempercayakan  calon  pembeli  kepada  perusahaan  tersebut  serta  menjamin  produk memiliki kualitas dan bagus oleh pelanggan, serta memiliki promosi yang ditampilkan pada halaman dashboard kepada  pelanggan  agar  menarik  perhatian.  Berbeda  dengan  website e-commerce biasa yang  hanya  menampilkan  semua  produknya  dan  pembeli  tinggal  membeli  produk.  Menurut  tabel  3. tentang  analisis  kompetitor  dapat  dianalisis informasi yang  ditampilkan  dan fitur  yang  ada  di dalam website khusus e-commerce penjualan produk.
Tabel 3. Analisis Kebutuhan
Kebutuhan Informasi Kebutuhan Fitur
- Nama Produk
- Harga Produk
- Gambar Produk
- Deskripsi Produk
- Fitur Chat
- Fitur Keranjang
- Fitur Pencarian
- Fitur Pilihan Metode Pengiriman
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta
- Rating dan Ulasan
- Ukuran Produk
- Promosi Produk
- Fitur Rating dan Ulasan
- Fitur Pilihan Metode Pembayaran

## E. Pengujian Metode Black Box Testing
Metode Blackbox  Testing adalah  metode  merupakan  pengujian  yang  berfokus  pada  spesifikasi fungsional dari perangkat lunak, tester dapat mendefinisikan kumpulan kondisi input dan melakukan pengetesan  pada  spesifikasi  fungsional  program.  Proses Black  Box  Testing dengan  cara  mencoba program  yang  telah  dibuat  dengan  mencoba  memasukkan  data  pada  setiap  formnya.  Pengujian  ini diperlukan  untuk  mengetahui  program  tersebut  berjalan  sesuai  dengan  yang  dibutuhkan  oleh perusahaan.  Pengujian  dengan  metode Blackbox  Testing memiliki  dua  teknik  yaitu Equivalence Partitioning dan Boundary  Value  Analysis .  Pada  penelitian  ini  menggunakan  teknik Equivalence Partitioning . Pengujian Black box memakai metode Equivalence Partitioning .
Tabel 4. Hasil Pengujian No Deskripsi Pengujian Hasil yang Diharapkan Hasil Pengujian Kesimpulan 1 Pada form login user tidak mengisi username dan password, kemudian klik login Tidak bisa login harus mengisi username dan password Sistem tidak bisa login karena harus mengisi username dan password Sesuai 2 Pada form register user tidak mengisi semua form Tidak bisa register Register tidak bisa di klik karena semua form tidak di isi Sesuai 3 Saat Klik kategori Wanita Akan memberikan kategori dari baju wanita saja Muncul kategori wanita Sesuai 4 Saat Klik Filter Sistem akan mem- filter sesuai apa yang diinginkan Muncul kategori dari filter yang di klik Sesuai 5 Saat klik detail produk dan memilih foto gambar Gambar produk akan berganti ke gambar lainnya Gambar berganti ke gambar produk lainnya Sesuai

## IV. Hasil dan Pembahasan
Berikut  ini  hasil  penelitian  Penerapan  UI/UX  Pada E-Commerce Batik  Jambi  Duo  Serangkai Berbasis Web:
1. Halaman Dashboard
Halaman dashboard merupakan halaman yang akan diakses pertama kali oleh pengguna saat membuka aplikasi. Pada halaman ini user dapat melihat produk, kategori dan halaman utama. Antarmuka halaman dashboard dapat dilihat pada gambar berikut.
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta

## 2. Sidebar Pencarian
Sidebar pencarian  merupakan  halaman  yang  menampilkan  produk  yang  ingin  kita  cari, terdapat  produk  rekomendasi  pilihan.  Gambar  halaman  pencarian  produk  adalah  sebagai berikut.
Gambar 5. Sidebar Pencarian
3. Halaman Detail Produk Halaman detail produk  merupakan  halaman  yang  menampilkan  produk  yang  diinginkan, terdapat  nilai  produk,  deskripsi  produk, size produk  dan  komentar  produk  yang  dilakukan oleh  pelanggan  ketika  selesai  membeli  produk.  Gambar  halaman  detail  produk  dapat  dilihat pada gambar 6.
Gambar 6. Detail Produk

## 4. Halaman Checkout
Halaman checkout merupakan  halaman  yang  berfungsi  ketika  pelanggan  telah selesai  dalam memilih  produk  dan  segera  melakukan  transaksi,  pelanggan  dapat  memilih  transaksi pembayaran melalui bank mana. Gambar checkout dapat dilihat pada gamnar 7.
Gambar 7. Halaman Checkout

## 5. Hasil Grafik Perbandingan Kuisioner
Penerapan  perubahan  pada  UI/UX  telah  memberikan  dampak  yang  luar  biasa.  Berdasarkan perbandingan  dengan  hasil  kuisioner  sebelumnya  yang  telah  dilakukan  dengan  responder yang  sama,  terlihat  bahwa  pengguna  merespons  dengan  lebih  baik  terhadap  pengalaman pengguna  yang  disempurnakan.  Rating  pengalaman  pengguna  meningkat  secara  konsisten. Respons  positif  dari  pengguna,  mulai  dari  kemudahan  navigasi  hingga  estetika  visual  yang
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta
ditingkatkan,  menegaskan  bahwa  upaya  kami  dalam  meningkatkan  elemen-elemen  UI/UX telah membuahkan hasil yang nyata. Berikut hasil grafik dapat dilihat pada gambar 8 dan 9.
Gambar 8. Hasil Kuisioner Pada Website Batik Duo Serangkai
Gambar 9. Hasil Kuisioner Penerapan UI / UX Batik Duo Serangkai

## V. Kesimpulan

## A. Kesimpulan
Setelah  peneliti  melakukan  pengembangan  UI  /  UX E-Commerce Batik  Jambi  Duo  Serangkai berbasis web, peneliti menarik kesimpulan sebagai berikut :
Untuk  merancang  dengan  baik  dan  benar,  dibutuhkan  berbagai  riset  dan  penelitian  yang  dapat membantu  proses  perancangan  sebagai  fondasi  yang  kuat.  Riset  dan  data  yang  diperlukan  yaitu kuantitatif  berupa  kuesioner  dan  kualitatif  berupa  wawancara  dengan  ahli,  dan  observasi.  Tahap perancangan UI dimulai dengan brainstorm, moodboard, sketsa, layout, penentuan metafora, animasi tombol, dan dilanjutkan dengan digitalisasi sesuai dengan warna moodboard, penyatuan dengan font yang  tepat  dan  penambahan  micro-interactions  berupa  efek  dan  partikel.  Pengembang  dapat  dengan mudah melakukan implementasi pada aplikasi web.

## B. Saran
Dari kesimpulan di atas dan berdasarkan pembahasan dari bab sebelumnya peneliti menyarankan beberapa hal, yaitu :
Awal  perancangan  UI/UX  sebaiknya  didasari  dengan  konsep  dan  teori  yang  matang  tentang warna, bentuk, metafora, dan lain-lain yang berhubungan dengan teori dasar tentang desain, sehingga tampilan  dari  UI  akan  dapat  menghasilkan  kesan  yang  diinginkan.  Perancangan  UI/UX  sebaiknya dikaitkan  dengan  karakter dan  environment  secara  erat,  yang  artinya  perancangan  UI/UX  yang  baik tidak  dapat  berjalan  sendiri  namun  menyesuaikan  dengan  faktorfaktor  lain  yang  membentuk  suatu perancangan  sebagai  satu  kesatuan  yang  saling  berhubungan.  Perancangan  sebaiknya  benar-benar didasarkan dengan teori yang telah diteliti, sehingga dapat berjalan sesuai dengan yang direncanakan dan sesuai dengan hasil yang diuraikan dalam teori desain.
DOI: https://doi.org/10.52362/jmijayakarta.v4i1.1313
This work is licensed under a Creative Commons Attribution 4.0 International License . http://journal.stmikjayakarta.ac.id/index.php/JMIJayakarta

## Referensi
[1]  Sany,  E.  and  Kurniawan,  Y.,  (2023).  PENERAPAN  E-COMMERCE  PADA  USAHA  BATIK JAMBI PADA TOKO BATIK DUO SERANGKAI. JURNAL AKADEMIKA , 15 (2), pp.84-90.
[2]  Rehatalanit,  Y.L.  2021.  Peran  E-Commerce  Dalam  Pengembangan  Bisnis.    Jurnal  Teknologi Industri, 5(0), pp. 62–69. Available at:
https://journal.universitassuryadarma.ac.id/index.php/jti/article/view/764.Review, P.L. 2022 ‘https://doi.org/10.33751/palar.v8i3.
[3]  Aziza,  R.F.A.  and  Hidayat,  Y.T.  2019.  Analisa  Usability  Desain  User  Interface. Teknokompak , 13(1), pp. 7–11. Available at:
https://ejurnal.teknokrat.ac.id/index.php/teknokompak/article/view/265.
[4]  Syahidi,  A.  and  Arif,  Z.  2023  ‘Sistem  Informasi  Presensi  Pegawai  Realtime  Pada  Toko  AMD Sports Tegal Menggunakan Metode User Experience ( UX ) Lifecycle’, 6(2), pp. 14–19.
[5]  Ependi,  U.,  Kurniawan,  T.B.  and  Panjaitan,  F.,  2019.  System  usability  scale  vs  heuristic evaluation:  a  review. Simetris:  Jurnal  Teknik  Mesin,  Elektro  dan  Ilmu  Komputer , 10 (1),  pp.65- 74.
[6]  Larasati,  I.,  2020.  Evaluasi  Penggunaan  Website  Universitas  Islam  Negeri  Syarif  Hidayatullah Jakarta  Dengan  Menggunakan  Metode  Usability  Testing. Computatio:  Journal  of  Computer Science and Information Systems , 4 (1), pp.68-77.
[7] Susetyawati,  M.E.,  2022.  PEMBUATAN  BATIK  CIPRAT  UNTUK  MENINGKATKAN KREATIVITAS  MASYARAKAT  PADA  MASA  PANDEMI  COVID-19. Indonesian  Journal Of Community Service , 2 (4), pp.434-442.
[8] Tangkudung,  I.,  Dako,  R.D.R.  and  Dako,  A.Y.,  2019,  December.  Evaluasi  Website Menggunakan Metode ISO/IEC 25010. In SemanTECH (Seminar Nasional Teknologi, Sains dan Humaniora) (Vol. 1, No. 1, pp. 87-107).
[9] Muhyidin,  M.A.,  Sulhan,  M.A.  and  Sevtiana,  A.  2020  ‘Perancangan  Ui/Ux  Aplikasi  My  Cic Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma’, Jurnal Digit , 10(2), p. 208. Available at: https://doi.org/10.51920/jd.v10i2.171 .
[10] Syafrizal,  A.,  Rifqo,  M.H.  and  Ardiansyah,  M.  2018  ‘Aplikasi  Pengenalan  Tempat  Wisata Propinsi  Bengkulu  Menggunakan  Teknologi  Augmented  Reality  (Video  Playback)  Berbasis Android’, Journal  of  Technopreneurship  and  Information  System  (JTIS) ,  1(1),  hh.  50–53. Available at: https://doi.org/10.36085/jtis.v1i2.23 .
[11] Yunus, A.I., 2018. TA: Perancangan Desain User Interface dan User Experience pada Aplikasi SIAKAD  dengan  Menggunakan  Metode  User  Centered  Design  (UCD)  pada  Universitas  Islam Negeri  Sunan  Ampel  Surabaya (Doctoral  dissertation,  Institut  Bisnis  dan  Informatika  Stikom Surabaya).
[12] Pratama,  M.A.D.,  Ramadhan,  Y.R.  and  Hermanto,  T.I.,  2022.  Rancangan  UI/UX  Design Aplikasi  Pembelajaran  Bahasa  Jepang  Pada  Sekolah  Menengah  Atas  Menggunakan  Metode Design Thinking. JURIKOM (Jurnal Riset Komputer) , 9 (4), pp.980-987.
[13] Shadiq,  J.,  Safei,  A.  and  Loly,  R.W.R.,  2021.  Pengujian  Aplikasi  Peminjaman  Kendaraan Operasional  Kantor  Menggunakan  BlackBox  Testing. Information  Management  For  Educators And Professionals: Journal of Information Management , 5 (2), pp.97-110.
[14] Zendrato,  R.J.  and  Irawan,  M.D.  (2022)  ‘Sistem  Informasi  Monitoring  Pembayaran  Listrik Berbasis  Web  pada  PT.  PLN  (Persero)  ULP  Berastagi  Menggunakan  Metode  User  Centered Design’, Blend Sains Jurnal Teknik, 1(3), pp. 202–212. Available at: https://doi.org/10.56211/blendsains.v1i3.174.