## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
User Interface and User Experience E-commerce Berbasis Mobile 1 Rani Tarisa, *2 Fatoni, 3 Kurniawan, 4 Siti Sauda 1,2 Fakutlas Sains Teknologi, Universitas Bina Darma, Indonesia
1 ranitarisa13@gmail.com, *2 fatoni@binadarma.ac.id, 3 kurniawan@binadarma.ac.id, 4 siti_sauda@binadarma.ac.id
Article Info ABSTRAK Article history: Received, 2023-09-23 Revised, 2023-10-02 Accepted, 2023-11-28 CV. Global Sakti Mandiri merupakan tempat yang menjual berbagai macam alat elektronik dan juga tempat yang menyediakan jasa servis elektornik.  Pada  penelitian  ini  menggunkan  metode User  Centered Design (UCD)  sebagai  pendekatan  yang  merupakan  konsep  dari rancangan melalui pendekatan oleh pengguna sistem, dimana proses perancangan  sistem  berfokus  pada  kebutuhan user. Adapun  tujuan menggunaan  metode  ini  untuk  membantu  menentukan  kesesuaian antarmuka  aplikasi e-commerce berbasis mobile berdasarkan  daya tarik oleh  pengguna. Prototype ini agar dapat menyesuaikan  dengan keinginan dan kebutuhan pengguna. langkah-langkah dari metode user centered  design. Penelitian  ini  akan  dimulai  dari  tahap Specify  the context  of  use, setelah  itu  ke  tahap  kedua Specify  User  and organization  requirements, kemudian  tahap  ketiga Produce  design solution, dan  terakhir Evaluate  design . Hasil  penilian  ini menggunakan metode system usability scale (SUS) menunjukan skor 73,6 kategori baik, menunjukan bahwa sistem e-commerce memiliki tingkat  kemudahan  pengguna  yang  baik.  Pengguna  merasa  bahwa antarmuka dan fungsionalitas mudah digunakan dan dipahami.
Kata Kunci: e-commerce,  user  centered design, user interface, user experience

## ABSTRACT
Keywords: e-commerce,  user  centered design, user interface, user experience CV.  Global  Sakti Mandiri is  a  place  that  sells  various  kinds  of  electronic equipment and is also a place that provides electronic service services. In this research, the user interface and user experience are used as the design of a mobile-based buying and selling system on CV. Global Sakti Mandiri , where this research was conducted in the city of Palembang. Building the desired mobile-based e-commerce user interface and user experience. Therefore, this research  focuses  on  a  mobile-based  user  interface  and  user  experience Prototype with an interface display, so that it is easy to use. This system was built  using  the  figma  application  which  was  designed  specifically  for Prototypes, and uses the user centered design method. With the user interface and user experience, it makes it easier to develop the system that will be built later, and the other goal is to provide convenience to users and the best service with  the  user  interface  and  user  experience  display.  The  results  of  this research are in the form of a mobile-based display Prototype on CV. Global Sakti Mandiri .
This is an open access article under the CC BY-SA license.

## Penulis Korespondensi:
Fatoni Program Studi Teknik Informatika Universitas Bina Darma Email  : fatoni@binadarma.ac.id

## 1. PENDAHULUAN
CV.  Global  Sakti  Mandiri  adalah  sebuah  usaha  yang  bergerak  dibidang  penjualan  alat  elektronik khususnya dibidang pendingin seperti ac, kulkas, mesin cuci, dispenser, dan menyediakan sparepart untuk alat elektronik yang di jual serta menerima jasa servis atau perbaikan alat-alat elektronik. CV. Global Sakti Mandiri ini terletak di Jl. Jendral Sudirman No. 545 RT. 08 RW. 03 KM. 5 Kel. 20 Ilir D.  IV  Kec.  IT  Plg.  Yang  awalnya hanya  menyediakan  jasa  servis  elektronik  dan  hingga  sekarang bukan hanya menyediakan jasa servis elektronik tetapi juga menyediakan berbagai macam penjualan alat elektronik.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
CV. Global Mandiri ingin memajukan usaha nya di era teknologi informasi saat ini dengan demikian CV.  Global  Sakti  Mandiri  memerlukan  sebuah Prototype  e-commerce berbasis mobile yang diinginkan dengan tampilan antarmuka agar mudah digunakan oleh pengguna. Sebuah sistem user interface  and  user  experience . Tool yang  digunakan  untuk  membangun user  interface and user experience berbasis mobile adalah figma , figma sendiri  adalah tool yang  digunakan  untuk membangun  sebuah  sistem e-commerce berbasis mobile ,  banyak  yang  menggunakan figma untuk membangun  sebuah user  interface and user  experience [1]. Figma memiliki  keunggulan  yaitu kemampuan untuk bekerja secara kolaboratif, memungkinkan beberapa orang bekerja bersama-sama, meskipun  berada  di  lokasi  yang  berbeda,  pada  pekerjaan  yang  sama  [2].  Untuk  melakukan pendekatan langsung dengan pengguna maka dari itu metode yang digunakan adalah metode user centered design . E-Commerce merupakan salah satu bentuk bisnis online yang melibatkan kegiatan penjualan-beli  produk  dan  layanan  melalui  jaringan  [3].  Manfaat  dari user  interface and user experience adalah  sebuah  perancangan  yang  bagus,  mudah  digunakan  oleh  pengguna  dan  tidak menyulitkan pengguna. Yang  dimaksud  dapat  dilihat dari    betapa    mudahnya    para    pengguna dalam mendapatkan  apa  yang  mereka  inginkan  dari  suatu produk tersebut [4]. Wireframe adalah tahapan elemen yang sangat penting dalam desain produk yang harus dipahami dengan baik [5]. Dalam  membangun user  interface and user  experience berbasis mobile tampilan prototype e- commerce pasti  harus  mudah  digunakan  dan  mudah  dipahami  oleh  pengguna.  Oleh  karena  itu membangun prototype membuat tampilan antarmuka tentu dapat dimengerti oleh semua orang, jadi pada  saat  pengguna  mengunakan prototype pertama  kali  tidak  perlu  binggung  karena  tombol  dan tampilannya  sudah  tidak  asing  lagi  dan  bahkan  tampilan  nya  pun  sering  kali  dilihat. Prototype merupakan bentuk  draft  dari  produk  yang  bisa  ditunjukkan  kepada user ataupun  klien, sehingga mereka  bisa  merasakan  dan  melakukan  eksplorasi konsep  fitur  dari produk  yang  kita  buat [6]. User interface and user experience merupakan dua komponen penting yang tidak dapat dipisahkan dalam  proses  desain. User  interface merupakan  tampilan  yang  dapat  dilihat  oleh  pengguna  saat mereka  menggunakan  sebuah  program,  sedangan user  experience merupakan  apa  yang  dirasakan oleh pengguna saat mengoprasikan suatu program [7]. User experience adalah sistem yang mengatur pengalaman  yang  dirasakan  pengguna  terhadap  perangkat  lunak  yang  menilai  tentang  tingkat kemudahan  dan  kenyamanan  terhadap  fungsionalitas  dari  sebuah  perangkat  lunak  [8]. User experience akan memberikan pengalaman bagi pengguna dalam berinteraksi langsung dengan sistem [9].
Pada  penelitian  ini  menggunkan  metode  User  Centered  Design  (UCD)  sebagai  pendekatan  yang merupakan  konsep  dari  rancangan  melalui  pendekatan  oleh  pengguna  sistem,  dimana  proses perancangan sistem berfokus pada kebutuhan user.  Adapun tujuan menggunaan metode ini untuk membantu  menentukan  kesesuaian  antarmuka  aplikasi  e-commerce  berbasis  mobile  berdasarkan daya tarik oleh pengguna. Prototype ini agar dapat menyesuaikan dengan keinginan dan kebutuhan pengguna. langkah-langkah dari metode user centered design. Penelitian ini akan dimulai dari tahap Specify the context of use, setelah itu ke tahap kedua Specify User and organization requirements, kemudian tahap ketiga Produce design solution, dan terakhir Evaluate design.
Tujuan  penelitian  ini  adalah  untuk  membangun  user  interface  and  user  experience  e-commerce berbasis  mobile  pada  CV.  Global  Sakti  Mandiri  berfungsi  sebagai  prototype  dengan mempertimbangkan beberapa aspek user interface and user experience menggunakan metode user centered desain. Berdasarkan uraian diatas dengan demikian, maka penelitian ini dilakukan bertujuan untuk membangun prototype user interface and user experience e-commerce berbasis mobile pada CV. Global Sakti Mandiri dengan tampilan yang enak dipandang dengan pilihan warna yang baik dan mudah digunakan oleh pengguna.

## 2. METODE PENELITIAN
Pada tahap pertama pada user centered design menentukan siapa yang akan menjadi pengguna akhir dan produk seperti apa yang akan dibuat berdasarkan latar belakang penggun. Tahap ini dilakukan observasi  dimulai  dengan  proses  indentifikasi  pengguna  yang  akan  menggunakan  sistem.  Sebuah proses mendefinisikan apa yang akan dilakukan tentang komponen dan tantangan yang akan dihadapi selama proses pengerjaan.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085

## Identifikasi Tujuan
Pada  tahapan  identifikasi  tujuan  Pengguna  adalah  orang  yang  menggunakan  sistem  secara  tidak langsung atau langsung. Tujuan dari identifikasi yaitu pengguna yang akan menggunkan sistem. Hal yang  dilakukan  selanjutnya  melakukan  terhadap  identifikasi  karakteristik  pengguna  identifikasi dilakukan  dengan  tujuan  untuk  mengetahui  jangkauan  pengguna  karakteristik  yang  akan diindentifikasi  berikut  ketetapan  karakteristik  identifikasi  tujuan  pengguna  yaitu  pengguna  dapat berasal  dari  semua  jenis  kelamin,  dan  pengguna  tidak  ada  batasa  usia.  Pada  identifikasi  tujuan memfokuskan siapa saja yang akan terlibat dalam menggunakan sistem atau produk identifikasi ini dilakukan  untuk  mengarahkan  agar  sesuai  dengan  kebutuhan  dan  harapan  pengguna.  Setelah mengidentifikasi tujuan pengguna kemudian mengidentifikasi karakteristik pengguna. Karakteristik pengguna ini meliputi berbagai aspek seperti usia,dan jenis kelamin. Dalam hal ini mengidentifikasi pengguna tidak dapat membatasi pengguna hanya pada kelompok tertentu. Pengguna dapat berasal dari  berbagai  jenis  kelamin  dan  tidak  ada  batasan  usia.  Dimana  produk  tersebut  dirancang  untuk dapat digunkan oleh berbagai lapisan masyarakat.

## Identifikasi Pengguna
Identifikasi pengguna sistem yang merupakan siapa saja yang menggunakan produk atau sistem yang sedang  dirancang . Mengetahui  karakteristik  pengguna  yang  diharapkan  dan  tugas  yang  dilakukan oleh pengguna diharapkan dalam hal ini. Identifikasi pengguna ini dilakukan dengan tujuan untuk mengetahui siapa saja yang terlibat dengan pengguna. Hasil dari identifisi pengguna dilakukan secara observasi berikut adalah identifikasi pengguna.
Tabel 1. Identifikasi Pengguna
Kelompok   Pengguna Sistem Kegunaan Pengguna akhir Berperan sebagai pengguna sistem menyediakan antarmuka yang sederhana dan muda dipahami untuk tampilan produk Pengguna staff admin Memantau stok produk, mengelola pesanan dan mengelola informasi yang masuk dari pengguna

## Specify User And Organization Reqirements
Pada  tahap  kedua,  menyaring  informasi  melakukan  apa  saja  yang  dibutuhkan  oleh  penguna, kebutuhan  pengguna  didapat  pada  saat  mengidentifikasi  masalah  berdasarkan  hasil  observasi menentukan  kebutuhan  pengguna  serta  sistem  yang  akan  diterapkan  pada  perancangan  desain. Langkah  ini  mencari  tahu  apa  yang  dibutuhkan  oleh  pengguna  dan  organisasi  untuk  membuat produk.

## Identifikasi Kebutuhan Pengguna
Pada  tahapan identifikasi  kebutuhan  pengguna  merupakan  tahapan mengumpulkan  kebutuhan  dan harapan pengguna terhadap suatu produk, layanan, dan sistem. Tahapan ini mendapatkan gambaran umum yang dilakukan lewat observasi yang melibatkan pempinan dan pengguna untuk mengetahui kendala dan permasalahan yang dihadapi. Berikut ini beberapa langkah dalam identifikasi pengguna yaitu,  mengumpulkan  informasi  dalam  mengumpulkan  informasi  dari  berbagai  sumber  termasuk melakukan observasi langsung dan tinjauan literatur. Tujuan dari mengumpulkan data adalah agar dapat memahami konteks pengguna dan harapan pengguna.

## Tabel 2. Kriteria Pengguna

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
Demographics • Laki-laki atau perempuan Pychographics • Pengguna smartphone Behavior • Pernah melakukan transaksi jual beli online
1. Kuesioner  mengumpulkan  data  yan  dilakukan  dengan  cara  memberi  seperangkat  pertanyaan menentukan kebutuhan pengguna.

## Tabel 3. Kuesioner Kebutuhan Pengguna
Apakah  sistem  penyediaan  barang  dan  jasa online  dapat  mempercepat  pencarian  barang yang diinginkan pengguna. Dari hasil diperoleh 100% pengguna menyatakan sistem penyedian barang dan jasa online mempercepat pencarian barang.
Apakah tampilan pada fitur yang ada menjadi pertimbangan dalam menggunakan. Dari hasil diperoleh  84,4%  lebih  mempertimbangkan tampilan  pada  fitur  dan  15,6%  tidak mempertimbangan  tampilan  pada  fitur  dalam menggunakan sistem.
Apakah  lebih  menyukai  warna  biru  dan  putih pada fitur tampilan yang diinginkan penguna e- commrce .  Dari  hasil  yang  diperoleh  81,3%
pengguna menyukai perpaduan warna biru dan putih  sebagai  desain  tampilan,  sedangakan 18,8%  pengguna  mempertimbangkan  warna tampilan tersebut.
Dalam menggunakan sistem apakah pengguna lebih menyukai fitur yang simple tampilannya. Dari  hasil  yang  diperoleh  100%  pengguna menyatakan lebih menyukai fitur yang simple tampilannya  karena  dapat  memahami  secara cepat  pada  saat  menggunakan  dan  lebih cepat mengingat pada saat menggunakannya
kembali.
2. Wawancara kebutuhan pengguna terkait desain produk yang diinginkan. Wawancara dilakukan secara lengsung dengan pengguna, wawancara dilakukan untuk mengetahui informasi kebutuhan pengguna. Tahapan ini dilakukan dengan menggunkan wawancara ke pengguna salah  satu cara yang umum digunakan untuk memahami apa yang diinginkan oleh pengguna sehinga desain dapat diarahkan  untuk  memenuhi  keinginan  pengguna.  Berikut  wawancara  yang  dilakukan  untuk kebutuhan desain pengguna.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
Tabel 1. Wawancara Kebutuhan Pengguna
Pertanyaan Jawaban pengguna Bagimana  tentang  warna  ikon  yang digunakan dalam antarmuka? Warna-warna  ikon  sebaiknya  konsisten  dan mudah dibedakan Apa  elemen  visual  menurut  anda  sangat penting dalam antarmuka? Suka  memiliki  gambar  produk  dengan  jelas membantu  saya  tanpa  harus  banyak  membaca teks Bagimana  perasaan  anda  warna  dalam tampilan  produk  menggunakan  warna biru dan putih untuk tampilan antarmuka Setuju  karna  penggunaan  warna  yang  tidak terlalu  banyak  sehingga  tampilan  antarmuka muda digunakan dan tampak menarik Apakah  setuju  jika  dengan  tampilan sederhana antarmuka agar mudah dipahami? Setuju  dengan  tampilan  sedehana  membuat mudah  digunakan  dan  diingat  tampilannya sehingga tidak kesulitan pada saat menggunakannya lagi.

## 3. HASIL DAN PEMBAHASAN
Adapun struktur pada aliran proses yang terjadi dengan menggunakan metode user centered design terdiri  dari Use  Case  Diagram ,  pada  tahap  ini  digunakan  untuk  memodelkan  bisnis  proses berdasarkan  pengguna.  Yang  terdiri  dari  pengguna  yang  akan  mengoprasikan  atau  orang  yang berinteraksi,  diagram use  case dapat  digunakan untuk mengambarkan  secara  grafis  interaksi  actor dan use case .
Gambar 2 Use Case Diagram

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
Pada tahapan ini digunakan untuk memodelkan pengguna dapat melakukan aktifitas Daftar terdiri dari mulai, masuk login, meminta masuk email dan password, masukan username dan password, cek username  dan  password,  menampilkan  produk,  pilih  produk,  menampilkan  detail  produk, menampilkan beli sekarang, menampilkan konfirmasi pesanan, selesai.

## Gambar 3 Activity Diagram

## Perancangan Wireframe
Pada tahapan wireframe dilakukan pembuat gambar kerangka dari bentuk awal sebuah desain dalam penataan  item-item  sebelum  proses  pembuatan  desain  dimulai,  agar prototype yang  dibuat  sesuai dengan kebutuhan pengguna. Pada tahapan wireframe dilakukan pembuatan kerangka sederhana atau garis  besar  paling  awal  sebelumnya melakukan  rancangan prototype .  Dengan  menguraikan  secara terperinci penampilan setiap komponen seperti button, teks, menu, image, dan lainnya yang nantinya akan menjadi pedoman dalam pembuatan prototype di tahap selanjutnya.

## Konsep Visual
Konsep  visual  melakukan  pemilihan  warna,  gamabar,  dan  teks  yang  akan  digabungkan  ke  dalam tahapan wireframe . Dalam perancangan desain konsep visual melakukan konsep ide sebuah desain, konsep visual ini terdiri dari warna, font, dan icon. Warna dalam material design membantu designer menerapkan warna ke user interface dengan cara yang berarti dan dapat memilih warna pada produk design yang akan dibuat. Warna yang digunakan adalah warna biru (3939BF), warna putih (FFFFFF), warna  hitam  pekat  (000000)  dan  warna  hitam  normal (838181)  untuk  desain.  Dalam  perancangan desain konsep visual melakukan konsep ide sebuah desain, konsep visual ini terdiri dari warna, font, dan icon.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085

## Prototype
Pembutan prototype dibuat  berdasarkan  hasil  dari  tahapan wireframe ,  dengan  menambahkan komponen warna, tipografi , dan button .

## Tampilan UI/UX
Adapun tampilan UI/UX yang telah didesaign menggunakan figma, dapat dilihat dibawah ini :
(a)                                          (b)                                      (c)
(d)

## Gambar 4.  Prototype

## Halaman Login
Halaman login adalah halaman ketika sudah memiih menu masuk. Dihalaman ini terdapat username dan password pengguna dengan catatan sudah memiliki akun. Untuk yang belum mempunyai akun maka bisa memilih menu daftar dan akan dialihkan ke pembuatan akun. Untuk melihat design UI/UX dapat dilihat pada gambar (a)

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085

## Halaman Produk
Halaman produk adalah berisi tentang produk yang dijual oleh pihak mitra terdapat produk elektronik yang  dijual.  Adapun  pada  halaman  produk  tersebut  menampilkan  produk-produk  elektronik  yang tersedia  yang  bisa  dilakukan  pemesanan  oleh  pembeli.  Untuk melihat  design  UI/UX  dapat  dilihat pada gambar (b).

## Halaman Detail Produk
Halaman detail produk merupakan halaman yang mejelaskan detail produk dan filter produk. Pada halaman ini dijelaskan detail produk dan filter produk yang dijelaskan spesifikasi, model, kapasitas dan  ukuran.  Seluruh  informasi  mengenai  produk  ditampilkan  dengan  jelas  pada  halaman  detail produk. Untuk melihat design UI/UX dapat dilihat pada gambar (c).

## Halaman Proses Pembayaran
Halaman pembayaran adalah akhir dari proses. Pada halaman ini produk yang kita beli, harga produk, metode  pembayaran  dan  alamat  pengiriman  produk.  Ketika  pengguna  sudah  memilih menu  bayar maka akan ada informasi bahwa transaksi telah berhasil. Pada halaman ini pengguna diarahkan untuk memilih  metode  pembayaran  kemudian  diarahkan  untuk  konfirmasi  pembayaran  dan  transaksi berhasil. Untuk melihat design UI/UX dapat dilihat pada gambar (d).

## Testing
Pembuatan  kuesioner  dalam  hal  ini  membuat  daftar  pertanyaan  sebagai  kuesioner  untuk responden. Pada tahapan ini tertujuan mendapatkan feedback yang nantinya akan digunakan kepada user. Setelah  responden  melakukan  tahap  testing,  selanjutnya  akan  mengisi  sebuah  pernyataan berkaitan  dengan  pengalaman  menggunakan  desain  tersebut.  Pada  tahap  testing  ini  menggunakan System Usability Scale dengan mengajukan 10 pernyataan. Berikut adalah pernyataan yang diajukan kepada responden.
Tabel 5. Pertanyaan Responden
No Pernyataan
1 Saya berfikir akan menggunakan sistem ini lagi
2 Saya merasa sistem ini rumit untuk digunakan
3 Saya merasa sistem ini mudah untuk digunakan
4 Saya membutuhkan bantuan dari orang lain untuk menggunakan sistem ini
5 Saya merasa fitur fitur di sistem ini berjalan sebagaimana mestinya
6 Saya merasa ada banyak hal yang tidak konsisten dalam sistem ini
7 Saya  merasa  orang  lain  akan  memahami  cara  menggunakan  sistem  ini  dengan cepat
8 Saya merasa sistem ini membingungkan
9 Saya merasa tidak ada hambatan dalam menggunakan sistem ini
10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
Dari  pernyataan  yang  diajukan  tersebut,  responden  mendapat  5  pilihan  jawaban.  Pilihan  jawaban sendiri  memiliki  skor  yang  berguna  untuk  menghitung System  Usability  Scale .  Berikut  adalah  5 alternatif jawaban serta skor dari masing masing jawaban yang akan diajukan kepada responden.
Setelah  melakukan  sebuah  pernyataan  kepada  20  responden,  maka  hasil  dari  pernyataan  dalam bentuk skor dari pernyataan berikut adalah jawaban responden:
Tabel  6.  Nilai Hasil  System Usability Scale
No Responden Q1  Q2  Q3  Q4  Q5  Q6  Q7  Q8  Q9  Q10  Jumlah  N(jumlah X 2,5) R1 4 3 4 3 4 2 4 4 4 3 35 87,5 R2 4 2 4 3 4 3 4 3 4 1 32 33,5 R3 4 3 4 4 4 4 4 0 4 3 34 85 R4 3 2 3 2
3 2 3 2 2 0 22 55 R5 4 3 3 2 3 3 3 3 3 2 29 72,5 R6 4 3 3 4 3 4 3 4 3 3 34 85 R7 4 3 4 3 3 4 4 3 4 2 34 85 R8 4 3 4 3 3 3 4 3 4 3 34 85 R9 4 0 4 0 4 0 4 0 4 0 20 50 R10 3 3 3 2 3 2 3 3 4 1 27 67,5 R11 3 3 3 3 3 3 3 3 3 3 30 75 R12 3 3 4 1 4 3 4 3 4 1 30 75 R13 4 1 3 1 3 1 3 1 2 1 20 50 R14 1 3 3 4 3 4 3 3 3 4 31 77,5 R15 4 3 4 3
3 3 3 3 3 3 32 80 R16 4 3 3 3
4 3 4 3 4 1 32 80 R17 3 3 4 1 4 3 4 3 3 1 29 72,5 R18 4 4 4 3
4 3 4 3 4 3 36 90 R19 4 4 3 4
3 2 3 3 4 4 34 85 R20 4 3 2 4 3 2 4 4 3 4 33 82,5 Jumlah 1.473,5 Nilai Hasil 73,6
Dari  hasil  akhir  tersebut  maka  didapat  nilai  73,6  yang  berarti  nilai  tersebut  diatas  nilai  rata  rata dengan kategori GOOD yang juga berarti sudah layak diterima atau bisa dipakai.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
Gambar 5.  System Usability Scale

## 4. KESIMPULAN
Hasil penilian ini menggunakan metode system usability scale (SUS) menunjukan skor 73,6 kategori baik,  menunjukan  bahwa  sistem  e-commerce  memiliki  tingkat  kemudahan  pengguna  yang  baik. Pengguna  merasa  bahwa  antarmuka  dan  fungsionalitas  mudah  digunakan  dan  dipahami.  Metode system usability scale digunakan untuk mengukur kepuasan pengguna dan pendekatan user centered design sebagai fokus utama dalam proses desain mengarah kepada kebutuhan pengguna. Hal tersebut sudah sesuai dengan tujuan penelitian ini yang ingin mengetahui bagaimana kategori impelementasi dari design UI/UX yang telah diimplementasikan.

## REFERENSI
[1] M.  A.  Muhyidin,  M.  A.  Sulhan,  and  A.  Sevtiana,  “Perancangan  Ui/Ux  Aplikasi  My  Cic  Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma,” J. Digit , vol. 10, no. 2, p. 208, 2020, doi: 10.51920/jd.v10i2.171.
[2] M. N. M. Al-Faruq, S. Nur’aini, and M. H. Aufan, “Perancangan Ui/Ux Semarang Virtual Tourism Dengan  Figma,” Walisongo  J.  Inf.  Technol. ,  vol.  4,  no.  1,  pp.  43–52,  2022,  doi: 10.21580/wjit.2022.4.1.12079.
[3] N. Musthofa and M. A. Adiguna, “Perancangan Aplikasi E-Commerce Spare-Part Komputer Berbasis Web Menggunakan CodeIgniter Pada Dhamar Putra Ccomputer Kota Tangerang,” J.  Ilmu  Komput. dan Sci. , vol. 1, no. 03, pp. 199–207, 2022, [Online]. Available: https://journal.mediapublikasi.id/index.php/oktal
[4] G.  Dwi,  P.  Haryanto,  and  A.  Voutama,  “Perancangan  Ui/Ux  Sistem  Informasi  Penyewaan  Mobil Berbasis Mobile Dengan Metode Design Thinking,” Joutica  J. Inform. Unisla , vol. 8, no. 1, pp. 23– 30,
2023, [Online]. Available: https://www.jurnalteknik.unisla.ac.id/index.php/informatika/article/view/949
[5] A.  Naser,  Syafwandi,  and  S.  Ahdi,  “Perancangan  User  Interface  Dan  User  Experience  Halaman Website Program Studi Desain Komunikasi Visual Universitas Negeri Padang,” DEKAVE J. Desain Komun. Vis. , vol. 8, no. 1, pp. i–23, 2018, [Online]. Available: http://ejournal.unp.ac.id/index.php/dkv/article/view/100136
[6] B. Kurniawan and M. Romzi, “Perancangan Uiux Aplikasi Manajemen Penelitian Dan Pengabdian Kepada Masyarakat Menggunakan Aplikasi Figma,” J. Sist. Inf. Mahakarya , vol. 05, no. 1, pp. 1–7, 2022.
[7] N. luh P. G. G. Saraswati, A. A. K. O. Sudana, and N. K. A. Wirdiani, “Perancangan User Interface Berbasis Web Pada SIMRS Modul Sarana Dan Prasarana,” J. Ilm. Teknol. dan Komput. , vol. 1, no. 2, pp. 154–163, 2020, [Online]. Available: https://www.neliti.com/publications/351372/
[8] M. S. Hartawan, “Penerapan User Centered Design (Ucd) Pada Wireframe Desain User Interface Dan User Experience Aplikasi Sinopsis Film,” Jeis J. Elektro Dan Inform. Swadharma , vol. 2, no. 1, pp. 43–47, 2022, doi: 10.56486/jeis.vol2no1.161.
[9] Eni, “Perancangan  UI/UX  pada  Aplikasi  Financial Technology  ARENA,” Angew.  Chemie  Int.  Ed. 6(11), 951–952. , vol. 9, no. Mi, pp. 5–24, 2023.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 412~422 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
[10] I. U. Khasanah, M. Fachry, N. S. Adriani, N. Defiani, Y. Saputra, and A. Ibrahim, “Penerapan Metode User  Centered  Design  dalam  Menganalisis  User  Interface  pada  Website  Universitas  Sriwijaya,” INTEGER J. Inf. Technol. , vol. 3, no. 2, pp. 21–27, 2018, doi: 10.31284/j.integer.2018.v3i2.226.
[11] W. Hariyani, A. Zakir, and B. O. Sembiring, “Sistem Informasi Administrasi Skripsi Dan Kerja Praktik Pada  Program  Studi  Sistem  Informasi  Menggunakan  Metode  User  Centered  Design  (Ucd),  (Studi Kasus Universitas Harapan Medan),” Djtechno J. Teknol. Inf. , vol. 3, no. 1, pp. 115–125, 2022, doi: 10.46576/djtechno.v3i1.2207.
[12] Y.  P.  Savira,  I.  V  Paputungan,  and  B.  Suranto,  “Analisis  User  Experience  pada  Pendekatan  User Centered Design dalam rancangan Aplikasi Placeplus,” Automata , vol. 1, no. 2, pp. 28–29, 2020.
[13] Tb Asyraf Dakhilullah and Beni Suranto, “Penerapan Metode User Centered Design Pada Perancangan Pengalaman Pengguna  Aplikasi I-Star,” Automata , 2022.