## DESAIN USER INTERFACE WEBSITE PEMESANAN ONLINE PRODUK MAKANAN KRIPDUNK DENGAN METODE USER CENTERED DESIGN
Nursehan Zaelani, Nana Suarna, Willy Prihartono Teknik Informatika, STMIK IKMI Cirebon Jalan Perjuangan No.10B, Karyamulya, Kec. Majasem, Kota Cirebon, Jawa Barat 45135 nursehanz101@gmail.com

## ABSTRAK
KripDunk,  sebuah  bisnis  makanan  berbasis home  industry yang  mengandalkan  media  sosial  WhatsApp untuk  penjualan  produknya.  KripDunk  mengalami  kendala  keterbatasan  promosi  dan  interaksi  dalam penjualannya.  Masalah  tersebut  dapat  diatasi  dengan  membuat website sebagai  sarana  menjangkau  pasar  yang lebih luas. Tujuan penelitian ini adalah merancang desain user interface website KripDunk dengan menerapkan 4E ( Error – Free, Easy to Use, Easy to Understand, Effective For End Goal or Product ). User Centered Design digunakan  sebagai  metode  untuk  merancang user  interface dengan  tahapan  Memahami  Konteks  Pengguna, Menspesifikan  Kebutuhan  Pengguna,  Solusi  Desain  dan  Evaluasi  terhadap  Kebutuhan  Pengguna.    Populasi ditetapkan tanpa batasan dan  jumah sampel ditentukan  menggunakan Simple Random Sampling (SRS) dengan jumlah  20  kemudian  dijadikan  sebagai user  persona pengujian.  Teknik  pengumpulan  data  dilakukan  dengan menggunakan  kuesioner  dengan  data  yang  akan  dianalisis  untuk  mengidentifikasi  prefensi  dan  kebutuhan pengguna.  Hasil  penelitian  menunjukkan  bahwa Maze  Usability  Score (MAUS)  mencapai  77%,  menandakan desain user interface website KripDunk telah dipahami dengan baik oleh responden dan sesuai dengan preferensi dan kebutuhan pengguna. Selain itu, pengujian usability dengan System Usability Scale (SUS) menunjukkan skor 78, yang  berada dalam rentang acceptability range dengan penilaian " Good " dan peringkat "B". Penelitian  ini membuktikan  keberhasilan  pendekatan  yang  diadopsi  dalam  menghasilkan  user  interface  sesuai  dengan kebutuhan dan harapan pengguna.
Kata kunci : KripDunk, User Interface, User Centered Design. Maze Usability Score, System Usabiility Scale

## 1. PENDAHULUAN
Pesatnya  perkembangan  teknologi  di  era  digital saat  ini  mengakibatkan  terjadinya  peningkatan aktivitas  manusia,  hampir  seluruh  bidang  aktivitas manusia  kini  terkait  dengan  teknologi.  Salah  satu sektor  yang  terdampak  adalah  sektor  bisnis e- commerce . Dengan 82 juta orang atau sekitar 30% dari total penduduk Indonesia menggunakan internet, pasar e-commerce menjadi peluang besar bagi mereka yang bisa melihat potensinya ke depan [1]. Pertumbuhan ini juga  didukung  oleh  data  Menkominfo yang menunjukkan  nilai  transaksi e-commerce mencapai Rp130 triliun pada tahun 2013 [2].
KripDunk, sebuah bisnis makanan berbasis home industry menawarkan  berbagai  jenis  produk  keripik pisang  aneka  rasa.  Saat  ini,  KripDunk  hanya beroperasi  melalui  platform  media  sosial  WhatsApp untuk  penjualan  produknya.  Kendala  utama  yang dihadapi oleh bisnis ini adalah keterbatasan jangkauan produk  kepada  konsumen  sehingga  diperlukan implementasi sebuah sistem, yaitu pembuatan website . Saat  ini,  banyak  individu  yang  mengakses  platform website  e-commerce untuk  berbelanja  dan  mencari informasi produk. Oleh karena itu, dapat disimpulkan bahwa  memiliki  situs e-commerce dapat  membantu pengusaha memperluas jangkauan pasar mereka, yang pada  akhirnya  akan  meningkatkan  penjualan  [3]. Selain itu, website juga. Namun, dalam sebuah website diperlukan user  interface. User  interface dibutuhkan karena memiliki dampak langsung terhadap pengalaman pengguna.
Desain user  interface sangat  penting  dalam website karena  dampaknya  yang  signifikan.  Menurut data  Google,  sekitar  67%  pengguna  internet  lebih cenderung  melakukan  transaksi  di  situs  web  dengan antarmuka  yang user  friendly .  Sebaliknya,  61% pengguna cenderung meninggalkan situs web dengan desain yang tidak user friendly [4].
Penelitian  terdahulu  yang  dilakukan  Dinata  dan timnya  dengan  judul  “Perancangan  UI/UX  web e- commerce 'Hallo  Coffee'  dengan  metode User- Centered Design (UCD)”. Dengan 20 pengguna dan 6 pemilik kafe sebagai sampel, hasilnya berupa prototipe antarmuka  pengguna  yang  menarik  dan  mudah dipahami  setelah  diuji  oleh  ahli.  Metode  UCD digunakan  untuk  membantu  pemilik  kafe  dalam penjualan produk dan memenuhi kebutuhan pelanggan,  meskipun coffee  shop terkenal  memiliki aplikasi sendiri [5].
Penelitian ini bertujuan merancang user interface website pemesanan online KripDunk  dengan  prinsip 4E: Error-Free, Easy to Use, Easy to Understand, dan Effective .  Fokus  perancangan  pada  mengurangi kesalahan  pengguna  dan  menyajikan  pengalaman pengguna  yang  intuitif.  Kemudahan  pemahaman diwujudkan  melalui  elemen  visual  yang  jelas  dan petunjuk  yang  mudah  dipahami.  Efektivitas  dalam mencapai tujuan produk menjadi fokus utama, dengan harapan  desain interface meningkatkan  efisiensi  dan efektivitas  dalam  proses  pemesanan  makanan KripDunk secara online .

## 2. TINJAUAN PUSTAKA
2.1. Penelitian Terdahulu
Penelitian  Khasanah  dkk.  (2019)  berjudul "Metode User  Centered  Design dalam  Merancang Tampilan  Antarmuka Ecommerce Penjualan  Pupuk Berbasis Website Menggunakan  Aplikasi  Balsamiq Mockups”  bertujuan  meningkatkan  promosi  pupuk cair  Metland  Tambun  Cluster  Fontania  di  Bekasi. Menggunakan  metode User  Centered  Design , penelitian  melibatkan  langkah-langkah plan  the human  centered  process,  specify  the  context  of  use, specify  user  and  organizational  requirements ,  serta produce  design  solutions .  Hasilnya  adalah  tampilan antarmuka  pengguna  yang  lebih  terfokus  pada kebutuhan  pengguna,  mencakup  halaman  beranda, profil,  kontak,  produk,  dan  galeri  untuk  platform e- commerce [6].
Penelitian yang dilakukan oleh Puji dan Engraini (2021)  dengan  judul  "Perancangan User  Interface Website E-Commerce Pada Usaha Kuliner Menggunakan User  Centered  Design "  mengatasi tantangan  penjualan  konvensional  di  Rumah  Makan Sarang  Kepiting.  Penelitian  berfokus  pada  perluasan pasar kuliner dengan pengalaman belanja online yang mudah.  Metodologi  melibatkan  UCD,  dari  analisis kebutuhan  hingga  implementasi  UI,  menghasilkan tampilan  yang  ramah  pengguna.  Penerapan  UCD berhasil  menciptakan  UI  efisien  dan  informatif, meningkatkan daya tarik pengunjung untuk berbelanja online [3].

## 2.2. KripDunk
KripDunk adalah bisnis makanan berbasis home industry yang didirikan pada tahun 2023 oleh Ahmad Jamaludin.  KripDunk  merupakan  bisnis  makanan yang  menawarkan  produk  kripik  yang  dibuat menggunakan  bahan  baku  pisang  dan  memiliki berbagai jenis rasa variatif seperti coklat, balado, dan keju  manis.  Usaha  ini  berlokasi  di  Desa  Depok, Kecamatan  Depok,  Kabupaten  Cirebon,  Jawa  Barat, Indonesia.

## 2.3. Website
Website adalah  kumpulan  halaman  dengan  data digital seperti teks, gambar, animasi, suara, dan video yang dapat diakses melalui internet. Halaman-halaman ini  dibuat  dengan  bahasa  standar  HTML  dan diterjemahkan  oleh  web  browser  untuk  ditampilkan sebagai informasi bagi pengguna [7].

## 2.4. E-Commerce
E-Commerce  adalah  bentuk  pertukaran  barang secara digital untuk memenuhi kebutuhan sehari-hari. Transaksi online (E-commerce) terlibat antara penjual dan  pembeli  melalui  internet,  dilakukan  secara langsung melalui berbagai platform seperti tokopedia, shopee, buka lapak, lazada, JD.id, dan lainnya [8]. 2.5. UI/UX User  Interface (UI)  adalah  titik  di  mana  sistem dan  pengguna  dapat  saling  berinteraksi  melalui
perintah, seperti  mengakses konten dan  memasukkan data.  Sementara  itu, User  Experience (UX)  merujuk pada pengalaman yang terkait dengan reaksi, persepsi, perilaku,  emosi,  dan  pemikiran  pengguna  saat menggunakan sistem [9].

## 2.6. UCD
UCD  ( User  Centered  Design )  adalah  metode desain yang berfokus pada kebutuhan user [10]. Proses UCD merupakan pendekatan berulang, di mana desain dan evaluasi secara berkelanjutan dikembangkan dari tahap awal hingga implementasi.
Desain  antarmuka  dalam  User  Centered  Design (UCD)  menitikberatkan  pada  kegunaan,  kebutuhan pengguna,  lingkungan,  tugas,  dan  alur  kerja  Desain antarmuka  dalam  User  Centered  Design  (UCD) menitikberatkan pada kegunaan, kebutuhan pengguna, lingkungan,  tugas,  dan  alur  kerja  [11].  Aspek-aspek kunci  UCD  melibatkan  pengembangan  aplikasi  yang berorientasi  pada  pengguna,  perancangan  terstruktur dan terintegrasi, pengujian yang melibatkan pengguna dari  awal  hingga  akhir,  serta  pemberian  fokus  utama pada perancangan interaktif.

## 3. METODE PENELITIAN
Metode yang digunakan untuk perancangan user interface  website KripDunk  adalah User  Centered Design (UCD).  Desain user  interface yang  dibangun melalui  UCD  difokuskan  pada  kebutuhan  pengguna akhir,  sehingga  program  yang  dikembangkan  akan selaras  dengan  kebutuhan  pengguna  dan  pengguna tidak perlu mengubah cara mereka berinteraksi dengan program  [12].  Tahapan  penelitian  dapat  dilihat  pada Gambar 1.
Gambar 1. Tahapan metode penelitian (Sumber: Agarina dkk., 2019)
Berikut ini penjelasan dari tahapan metode UCD pada  Gambar  1  untuk  desain user  interface  website KripDunk:
3.1. Understand Context of Use
Tahap Understand  Context  of  Use adalah  tahap dimana peneliti melakukan proses analisa pada sistem yang akan dirancang. Peneliti membutuhkan informasi mengenai  kebutuhan  pengguna  sehingga  perlu dilakukan User  Research [13].  Dalam  penelitian  ini User  Research bertujuan  untuk  mengidentifikasi kebutuhan  dan  preferensi  pengguna  sehingga  desain user interface dapat dikembangkan secara lebih efektif sesuai  dengan  perspektif  dan  kepentingan  pengguna.
User  Research dilakukan  melalui  penyebaran kuesioner  G-Form  untuk  mengidentifikasi  preferensi dan  kebutuhan  pengguna,  dengan  penentuan  Sampel atau User  Persona menggunakan Simple  Random Sampling dengan Excel.

## 3.2. Specify User Requirements
Pada  tahap Specify  User  Requirements ,  peneliti menganalisis dan mengidentifikasi data yang diperoleh  pada  tahap  sebelumnya.  Pada  tahap  ini, dilakukan  Analisis  Data  Responden.  Selain  itu, dilakukan  Identifikasi  Kebutuhan  Pengguna  serta merancang Architecture  Information dalam  bentuk Sitemap menggunakan website Cacoo dan User Flow menggunakan website Miro.

## 3.3. Design Solutions
Tahap Design  Solutions adalah  tahapan  untuk menentukan  solusi  dalam  penelitian.  [13].  Tahap Design Solutions melibatkan pembuatan Wiredframe, Design/Mockup, dan Prototype ,  menggunakan Figma bertujuan menghasilkan solusi desain yang efektif.

## 3.4. Evaluate Against Requirements
Evaluate Against Requirements dilakukan melalui Usability Testing dengan pengukuran Mission Usability  Score (MIUS)  & Maze  Usability  Score (MAUS).  MIUS  mencerminkan  seberapa  mudahnya pengguna  menyelesaikan  tugas  atau  misi  pada prototipe  tersebut  [14].  Setelah  itu, System  Usability Scale (SUS)  dilakukan  untuk  mengumpulkan  data kepuasan  pengguna.  Tingginya  skor  usability menunjukkan bahwa produk dapat digunakan dengan mudah, intuitif, dan efisien [15].
Gambar 2. System usability scale score
(Sumber: Sauro, 2018)
Gambar  2  menjelaskan  Hasil  Skor System Usability  Scale (SUS)  terdapat  beberapa  indikator, termasuk acceptable  rating,  adjective  rating  dan grade scale.
Gambar 3. Interpretasi skor system usability scale
(Sumber: Marbun 2022)
Pada Gambar 3, acceptable rating terkait dengan sejauh  mana  sistem  yang  diuji  dapat  diterima  oleh pengguna.  G rade  scale menjelaskan  penilaian  secara umum,  mirip  dengan  indeks  penilaian  akademik. A djective rating menggambarkan pengalaman pengguna  dalam  menggunakan  suatu  sistem.  Iterasi dilakukan untuk perbaikan desain berdasarkan umpan balik dari uji coba pengguna. Keseluruhan tahapan ini diarahkan  untuk  menciptakan  solusi  desain  yang optimal sesuai dengan kebutuhan pengguna.

## 4. HASIL DAN PEMBAHASAN
4.1. Undestand Context of Use
Gambar 4. Jumlah responden user research kuesioner
User Research pada Gambar 4 dengan kuesioner menghasilkan  138  responden  dan  dengan  hasil ditampilkan pada Tabel 1.
Tabel 1. Tabel hasil kuesioner Hasil Kuesioner
Hasil Kuesioner
Hasil Kuesioner
Dari  138  responden,  kemudian  ditentukan  20 sampel  menggunakan Simple  Random  Sampling dan menghasilkan seperti ditampilkan pada Tabel 2.
Tabel 2. Tabel data user persona Nama Jenis Kelamin (L/P) Nurni Hidayah P Nisa Kusmawanti P Fujiani Saqilah P Fauziah Gita Cahyani P Selvi Silviana P Lia Anggraini P Rendi Maulana L Dian Agustin P Habibah Nurhafizh P Siti Rahimah P Rita Andia P Fitri Sekar Ramadan P Fitri Rizki Ani P Nurul Ainisa P Nicky Nurliana P Puput Putriana P Nur Apriliani P Novi Laelatul Azizah P Muhammad Chrisna Basila L Anggi Sazwati P
Dari  Tabel  2  telah  diperoleh  sampel  dengan jumlah  20  yang  akan  dijadikan  user  persona  dalam usability testing pada desain UI yang telah dirancang menggunakan website Maze.
4.2. Specify User Requirements

## Tabel 3. Tabel analisis data responden

## Fungsional
Bagaimana pendapat Anda tentang tampilan awal
(halaman depan) website pemesanan makanan online yang ideal?
Bagaimana pendapat Anda tentang sistem penilaian dan ulasan pelanggan untuk setiap menu makanan? Pilih metode pembayaran yang paling Anda sukai saat memesan makanan online.
Apakah Anda ingin adanya fitur "pesan ulang" untuk pesanan sebelumnya yang sama?
Bagaimana Anda biasanya mencari restoran atau menu makanan favorit Anda di website pemesanan makanan online?
Apakah Anda ingin adanya opsi kustomisasi makanan?

## Non-fungsional
Apakah Anda sering memesan makanan secara
online?
Apa alasan utama Anda memesan makanan secara online?
Apakah Anda lebih suka melihat menu makanan dengan harga termurah terlebih dahulu?
Seberapa penting tampilan gambar makanan yang menarik bagi Anda?
Seberapa sering Anda memeriksa promo dan diskon pada website pemesanan makanan?
Seberapa sering Anda memberikan masukan atau komentar kepada website pemesanan makanan tentang pengalaman Anda?
Seberapa sering Anda memanfaatkan program loyalitas atau poin rewards dari website pemesanan makanan?
Pada  Tabel  3,  data  responden  dianalisis  dengan membagi  dua  kategori  yaitu  Fungsional  dan  Non- fungsional. aspek fungsional (yang berkaitan langsung dengan  fungsi  atau  fitur website )  dan  non  fungsional (yang  berkaitan  dengan  kualitas  atau  karakteristik tertentu dari website ). Selanjutnya,  Identifikasi  Kebutuhan User telah dilakukan  dan  mendapatkan  wawasan  mendalam terhadap  preferensi  pengguna  terkait  antarmuka  dan pengalaman  berbelanja online .  Peneliti  juga  berhasil mengenali  kebutuhan  fitur  yang  diinginkan  oleh pengguna. Rincian hasil Identifikasi  Kebutuhan User adalah sebagai berikut: a. Tampilan  awal  yang  menampilkan  promo  dan diskon  terbaru  (68,8%)  menjadi  signifikan  dalam memengaruhi  preferensi  pengguna,  sementara 24,6% lebih suka tampilan bersih dan sederhana.
b. Fitur ulasan pelanggan dinilai sangat penting oleh 62,3%  responden,  menegaskan  kepercayaan  pada pandangan pelanggan dalam memilih menu.
c. Mayoritas pengguna (53,6%) memilih pembayaran saat  pengiriman  (COD),  sementara  35,1%  lebih suka pembayaran digital melalui e-wallet.
d. Fitur  pesan  ulang  diinginkan  oleh  57,2% responden,  menunjukkan  kebutuhan  pengguna akan kemudahan mengulang pesanan.
e. Fitur  pencarian  produk  menjadi  kunci,  dengan 70,1%  responden  mencari  restoran  atau  menu favorit melalui fitur ini.
f. Fitur  kustomisasi  makanan  mendapat  respons positif  dari  76,1%  pengguna,  menekankan pentingnya memberikan opsi personalisasi.
g. Sebanyak  75,4%  responden  memiliki  kebiasaan memesan  makanan  online  beberapa  kali  dalam sebulan, menunjukkan kebiasaan reguler pengguna.
h. Alasan  utama  memesan  online  melibatkan kenyamanan  (43,5%),  pilihan  menu  yang  lebih banyak (12,3%), dan hemat waktu (18,1%).
i. Dalam tampilan menu makanan, 52,2% responden lebih  memilih  melihat  harga  termurah  terlebih dahulu  sebagai  faktor  utama  dalam  pengambilan keputusan.
j. Tampilan  gambar  produk  yang  menarik  dianggap sangat penting oleh 64,5% responden.
k. Aspek  tampilan  diskon  dan  promo  memengaruhi keputusan  dengan  46,4%  selalu  memeriksa,  dan 35,5% kadang-kadang melakukannya.
l. Kritik  dan  saran  pelanggan  mencerminkan partisipasi  aktif,  dengan  52,9%  responden memberikan  masukan  saat  memesan  makanan online.
m. Voucher atau kupon pelanggan dimanfaatkan oleh 59,4% responden, menunjukkan tingkat partisipasi dan  nilai  program  loyalitas  dalam  pengalaman pengguna.
Data  Responden  yang  telah  dianalisis  dan diidentifikasi  kemudian  di  implementasikan  dalam perancangan Information  Architecture berbentuk Sitemap seperti  ditampilkan  pada  Gambar  5  dan Perancangan User  Flow seperti  ditampilkan  pada Gambar 6.
Gambar 5. Rancangan information architecture website kripdunk (Sumber: Dokumentasi pribadi)
Gambar 5 Information Architecture yang disusun dimaksudkan untuk mempermudah proses perancangan  antarmuka  pengguna,  karena  telah tersusun secara terstruktur dalam sitemap .
Gambar 6. Rancangan user flow website kripdunk (Sumber: Dokumentasi pribadi)
Gambar  6 user  flow merupakan  visualisasi  dari langkah-langkah pergerakan yang dilakukan pengguna saat menggunakan suatu produk. Pentingnya user flow terbukti  dalam  membantu  peneliti  memahami  pola kognitif pengguna, menciptakan pemetaan pergerakan pengguna  sepanjang  penggunaan  produk,  dan menggambarkan setiap tahap interaksi, mulai dari titik awal hingga akhir penggunaan [17].

## 4.3. Design Solutions
Tahapan  Solusi  Desain  dirancang  dengan berdasarkan  Information  Architecture  yang  telah disusun  pada  tahap  sebelumnya  dan  menghasilkan desain, diantaranya:
1. Tampilan Halaman Dashboard
Gambar 7. Wiredframe & desain halaman dashboard (Sumber: Dokumentasi pribadi)
Dari  Gambar  7,  halaman Dashboard berfungsi sebagai  tampilan  produk  dan  promosi  yang  tersedia dengan  berbagai  fitur,  termasuk  tombol  navigasi, kotak  pencarian,  keranjang  belanja,  dan  tampilan
promo.  Pengguna  dapat  melihat  semua  produk  yang ada  dan  mendapatkan  informasi  lebih  detail  dengan menggeser layar ke bawah.

## 2. Tampilan Halaman Fitur Pencarian Produk
Gambar 8. Wiredframe & desain fitur pencariaan produk
(Sumber: Dokumentasi pribadi)
Dari  Gambar  8,  halaman  Fitur  Pencarian dirancang  dengan  fungsi  menampilkan  hasil pencarian  produk,  memberikan  informasi  seperti nama,  rating,  foto,  harga,  dan  opsi  untuk menambahkan  ke  keranjang  belanja.  Terdapat tombol  navigasi  dan  keranjang  belanja  untuk mempermudah pengguna.
3. Tampilan Halaman Informasi Produk
Gambar 9. Wiredframe & desain halaman informasi produk
(Sumber: Dokumentasi pribadi)
Dari  Gambar  9,  tampilan  halaman  Informasi Produk  berfungsi  untuk  menampilkan  informasi  dari produk yang tersedia.  Di halaman informasi produk, user akan  menemukan  logo  KripDunk,  foto  produk, nama  produk,  dan  deskripsi  produk.  Terdapat  juga tombol kembali untuk kembali ke halaman sebelumnya.

## 4. Tampilan Halaman Ulasan Produk
Gambar 10. Wiredframe & desain halaman ulasan produk (Sumber: Dokumentasi pribadi) Dari  Gambar  10,  halaman  Ulasan  Produk memiliki  fungsi  untuk  menampilkan  ulasan  produk yang  telah  dibeli  oleh  pembeli.  Ulasan  tersebut melibatkan foto dan nama pembeli, rating, serta ulasan produk.  Selain  itu,  terdapat  tombol  kembali  yang memungkinkan  pengguna  untuk  kembali  ke  halaman sebelumnya setelah melihat ulasan.

## 5. Tampilan Halaman Keranjang
Gambar 11. Wiredframe & desain halaman keranjang (Sumber: Dokumentasi pribadi)
Dari  Gambar  11,  halaman  Keranjang  berfungsi untuk menampilkan detail produk sebelum pembelian. Pengguna dapat melihat tombol kembali, detail alamat, variasi  produk,  jumlah  yang  diinginkan,  opsi penambahan  pesanan,  promo  atau  voucher,  rincian total  pembayaran,  metode  pembayaran,  total  harga produk, dan tombol pembelian.
6. Tampilan Halaman Pemilihan Promo/ Voucher
Gambar 12. Wiredframe & desain halaman pemilihan promo/voucher (Sumber: Dokumentasi pribadi)
Pada  Gambar  12,  halaman  Keranjang  berfungsi untuk menampilkan promo/ voucher yang dapat dipilih untuk  pembelian  produk.  Promo/voucher  yang tersedia  ditampilkan  dengan  tombol  kembali  untuk kembali  ke  tampilan  sebelumnya. User dapat mengaktifkan  promo/ voucher dengan  mengkliknya, dan  secara  otomatis  akan  diaplikasikan  pada pembelian.

## 7. Tampilan Halaman Pilih Metode Pembayaran
Gambar 13. Wiredframe & desain halaman pilih metode pembayaran
(Sumber: Dokumentasi pribadi)
Dari  Gambar  13,  halaman  Pilih  Metode Pembayaran  berfungsi  menampilkan  berbagai  opsi pembayaran seperti COD, e-Wallet , dan Transfer Bank untuk  pembelian  produk.  Pengguna  dapat  memilih metode  pembayaran  saat  melakukan  transaksi  di KripDunk,  dan  terdapat  tombol  kembali  untuk navigasi ke tampilan sebelumnya.

## 8. Tampilan Halaman Pembelian Produk
Gambar 14. Wiredframe & desain halaman pembelian produk (Sumber: Dokumentasi pribadi)
Pada  Gambar  14,  tampilan  Pembelian  Produk menandakan  kesuksesan  pembelian  dengan  gambar ceklis,  teks  konfirmasi  pengiriman,  dan  opsi  untuk memberikan  penilaian  dan  ulasan  pada  produk  jika user menekan tombol pesanan selesai.

## 9. Tampilan Halaman Beri Ulasan Produk
Gambar 15 . Wiredframe & desain halaman beri ulasan produk (Sumber: Dokumentasi pribadi)
Dari  Gambar  15,  halaman  Beri  Ulasan  Produk berfungsi untuk memungkinkan pengguna memberikan  ulasan  terhadap  produk  yang  sudah dibeli. Informasi yang ditampilkan melibatkan rincian pesanan, logo KripDunk, nama dan foto produk, total pembayaran,  serta  rating  produk.  Pengguna  dapat memberikan rating dengan mengklik bintang di bawah foto  produk  dan  menuliskan  ulasan  melalui  tombol "Nilai Produk".

## 10. Tampilan Halaman Perpesanan
Gambar 16. Wiredframe & desain halaman perpesanan (Sumber: Dokumentasi pribadi)
Pada Gambar 16, halaman Perpesanan berfungsi sebagai sarana komunikasi antara pembeli dan penjual, mencakup  pertanyaan  produk  dan  umpan  balik. Dengan  formulir  obrolan  dan  navigasi,  pengguna dapat dengan mudah berpindah ke halaman lain. Fitur tambahan  seperti  pengiriman  gambar  dan  emotikon disediakan, memudahkan pengguna dalam berkomunikasi  dan  memberikan  umpan  balik. Interaksi  antara  pembeli  dan  penjual,  termasuk pertanyaan  tentang  pembelian,  dapat  dilakukan melalui halaman ini.

## 11. Tampilan Halaman Riwayat Pesanan
Pada  Gambar  17,  halaman  Riwayat  Pesanan berfungsi untuk menampilkan histori pesanan produk yang  pernah  dibeli  oleh  pengguna.  Fitur  ulang memungkinkan  pengguna  untuk  memesan  kembali produk yang telah dipesan sebelumnya, dan tampilan navigasi  memudahkan  akses  ke  halaman  lain.  Di halaman  ini,  pengguna  dapat  melihat  daftar  pesanan sebelumnya  dan  dengan  mudah  memesan  ulang melalui  tombol  "Beli  lagi".  Terdapat  juga  fitur pencarian, keranjang belanja, dan navigasi.
Gambar 17. Wiredframe & desain halaman riwayat pesanan (Sumber: Dokumentasi pribadi)

## 12. Tampilan Halaman Profil
Gambar 18. Wiredframe & desain halaman profil (Sumber: Dokumentasi pribadi)
Dalam Gambar 18, halaman Profil menyajikan informasi pengguna secara lengkap dan memungkinkan  pengguna  untuk  mengedit  data pribadi,  seperti  nama,  email,  nomor  telepon,  dan alamat,  menggunakan  tombol  "Ubah".  Fitur  ini  juga memungkinkan  pengguna  untuk  mengganti  atau menghapus  foto  profil  dengan  tombol  "Ubah"  dan "Hapus".  Setelah  melakukan  perubahan,  pengguna dapat  menyimpannya  dengan  mudah  melalui  tombol "Simpan".
13. Tampilan Halaman Tentang Kami
Pada  Gambar  19,  halaman  Tentang  Kami berfungsi  sebagai  sumber  informasi  terperinci mengenai  KripDunk,  menyediakan  tampilan  produk, dan  menawarkan  navigasi  untuk  akses  ke  halaman lain. Di sini, pengguna dapat melihat foto-foto produk KripDunk  beserta  informasi  lengkapnya.  Tombol- tombol  di  halaman  ini  memudahkan  pengguna  untuk beralih  ke  platform  lain  seperti  GoFood,  GrabFood, atau  Shopee  Food  untuk  menemukan  dan  memesan produk KripDunk favorit mereka.
Gambar 19. Wiredframe & desain halaman tentang kami (Sumber: Dokumentasi pribadi) Prototype dirancang berdasarkan User Flow yang telah  dirancang  dan  diimplementasikan  untuk Usability  Testing pada website Maze.  Berikut  ini merupakan daftar Skenario Prototype untuk Usability Testing diantaranya:
14. Blok 1: Menggunakan Fitur Pencarian Produk & Menampilkan Deskripsi Produk
Gambar 20. Blok 1 prototyping
(Sumber: Dokumentasi pribadi)
Pada Gambar 20, u ser diminta untuk menggunakan  "Fitur  Pencarian"  dengan  mengklik ikon  kaca  pembesar  di  pojok  kanan  atas.  Setelah  itu, jika  nama  "KripDunk"  muncul, user diminta  untuk klik  ikon  kaca  pembesar  sekali  lagi  untuk menampilkan  produk  hasil  pencarian.  Selanjutnya, user diminta  untuk  melihat  deskripsi  produk  dengan cara  mengklik  "Gambar  Produk".  Dalam  percobaan ini, user diminta  untuk  mengklik  gambar  produk "KripDunk Balado".
15. Blok 2: Menambahkan Produk ke Keranjang
Gambar 21. Blok 2 prototyping
(Sumber: Dokumentasi pribadi)
Dalam  Gambar  21,  u ser diminta  untuk menambahkan  produk  ke  keranjang  dengan  cara mengklik "+ Keranjang". Pada percobaan kali ini, user diminta untuk klik pada produk "KripDunk Balado".
16. Blok 3: Mengkostumisasi Produk dan
Memasang Promo/ Voucher
Gambar 22. Blok 3 prototyping (Sumber: Dokumentasi pribadi)
Pada  Gambar  22  Blok  3,  u ser diminta  untuk mengkostumisasi  produk  dengan  memilih  Variasi level  pada  varian  produk.  Dalam  Percobaan  ini,  user diminta  untuk  klik  pada  "LV.10".  Setelah  itu,  user diminta untuk memastikan bahwa kostumisasi berhasil dilakukan dengan memeriksa apakah sudah  berwarna merah.
Selanjutnya, user diminta  untuk  menggunakan Voucher Potongan Harga dengan cara mengklik tanda panah di  button "Pasang  voucher dulu,  yuk". Setelah itu, user diminta untuk memilih voucher yang tersedia dan  mengklik  pada voucher tersebut,  sehingga Voucher Potongan Harga berhasil terpasang.
17. Blok 4: Memilih Metode Pembayaran dan Melakukan Pembelian Produk Gambar 23. Blok 4 prototyping
(Sumber: Dokumentasi pribadi) Pada  Gambar  23  Blok  4, user diminta  untuk memilih metode pembayaran dengan cara melakukan scroll  kebawah  dan  mengklik  pada  tanda  panah  ">" disebelah  kanan  teks  "Pilih  metode  pembayaran". Setelah  berhasil  diklik,  user  diminta  untuk  memilih metode pembayaran "Pembayaran Tunai/COD".
Setelah  memilih  metode  pembayaran, user diminta  untuk  klik  "Beli  dan  pesan  sekarang"  untuk melakukan pembelian. Setelah itu, user diminta untuk mengklik  "Pesanan  selesai"  untuk  melakukan penilaian produk.

## 18. Blok 5: Memberikan Penilaian Produk
Gambar 24. Blok 5 prototyping (Sumber: Dokumentasi pribadi) Pada Gambar 24, user diminta untuk memberikan rating pada produk dengan cara mengklik pada  ikon  bintang  yang  berada  di  bawah  gambar produk.  Setelah  muncul  bintang,  user  diminta  untuk memastikan bahwa rating produk berhasil dilakukan.
Setelah  memberikan  rating, user diminta  untuk klik  "Ketik  disini.."  untuk  memberikan  ulasan  pada produk.  Setelah  ulasan  muncul,  user  diminta  untuk klik "Nilai Produk" untuk menyelesaikan pesanan dan melihat hasil ulasan. Selanjutnya, user diminta untuk klik kembali di pojok kiri atas untuk menutup ulasan.
1. Blok:  Eksplorisasi  Menu  dan  Lakukan  Pesan Ulang Produk
Gambar 25. Blok 6 prototyping bagian 1
(Sumber: Dokumentasi pribadi)
Pada  Gambar  25 ,  user diminta  untuk  klik " Dashboard "  untuk  kembali  ke  tampilan  awal. Selanjutnya, user diminta  untuk  mencoba  mengklik "Perpesanan,"  "Tentang  Kami,"  dan  "Lihat  Profil" pada samping kiri tampilan UI.

## Gambar 26. Blok 6 prototyping bagian 2
(Sumber: Dokumentasi pribadi)
Pada  Gambar  26  Blok  6, user diminta  untuk mengklik "Riwayat Pesanan" dan kemudian mengklik "Beli  lagi" untuk memesan ulang produk yang sudah dipesan  sebelumnya. User diharapkan  melakukan langkah-langkah  tersebut  seperti  pada  tahap-tahap sebelumnya,  sampai  akhirnya  mencapai  halaman Dashboard . Jika user berhasil melalui proses ini, maka dapat dianggap  bahwa usability testing telah berhasil dilakukan.
4.4. Evaluate Against Requirements
Pada  uji  coba  penggunaan website Maze, prototype diubah menjadi blok pada Usability Testing . Hasilnya  termasuk Mission  Usability  Score (MIUS) dan Maze Usability Score (MAUS) pada Tabel 1.
Tabel 4. Tabel hasil mission usability score dan maze usability score No. Blok MIUS B1 67%
B2 85% B3 87% B4 69% B5 79% B6 73% MAUS 77%
Berdasarkan  Tabel  1,  hasil  MAUS usability testing UI website KripDunk adalah 77%, menunjukkan  desain  user  interface  yang  dimengerti dengan baik oleh responden sesuai dengan preferensi dan kebutuhan pengguna.
Tabel 5. Parameter pertanyaan system usability scale
NO. PERTANYAAN
1 Saya berpikir akan menggunakan sistem ini lagi.
2 Saya merasa sistem ini rumit untuk digunakan.
3 Saya merasa sistem ini mudah digunakan.
4 Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakan sistem ini.
5 Saya merasa fitur-fitur sistem ini berjalan dengan semestinya.
6 Saya merasa ada banyak hal yang tidak konsisten (tidak serasi pada 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.
Parameter digunakan untuk SUS melalui website Jotform  untuk  mengevaluasi feedback  User  Persona setelah usability  testing dengan  parameter  10 pertanyaan seperti ditampilkan pada Tabel 2.
Tabel 6. Tabel hasil skor system usability scale Skor Q 1 Q 2 Q 3 Q 4 Q 5 Q 6 Q 7 Q 8 Q 9 Q1 0
4 1 5 1 5 2 5 1 5 2 4 2 4 2 5 2 3 1 4 4 4 2 5 2 4 2 4 2 4 3 5 2 4 2 5 2 4 2 2 4 4 1 5 1 1 1 4 1 5 2 5 1 5 2 5 1 5 2 5 4 5 2 5 2 4 2 5 1 5 3 4 2 4 2 5 2 4 2 5 2 4 2 5 1 4 2 4 1 4 2 5 1 5 3 5 1 5 1 5 1 4 2 4 4 4 3 4 2 4 4 4 3 4 4 4 3 4 1 4 4 4 2 4 2 4 1 4 2 5 2 5 2 4 1 4 2 4 2 4 2 4 2 4 2 4 2 4 2 4 2 5 1 5 3 5 2 5 2 2 4 5 1 4 4 5 3 4 2 3 4 5 1 5 1 5 2 5 1 5 3 4 1 5 4 4 2 4 2 4 4 4 2 5 4 4 2 4 2 4 4
Pada Tabel 3, setiap  parameter  pertanyaan akan dinilai  menggunakan  skala  1-5:  1=Sangat  Tidak Setuju,  2=Tidak  Setuju,  3=Ragu-ragu,  4=Setuju, a5=Sangat Setuju.
Tabel 7. Tabel hasil pengolahan data system usability scale
Skor Hasil Hitung Q 1 Q 2 Q 3 Q 4 Q 5 Q 6 Q 7 Q 8 Q 9 Q1 0 3 4 4 4 4 3 4 4 4 3 3 3 3 3 4 3 2 4 3 1 3 3 4 3 3 3 3 3 3 2 4 3 3 3 4 3 3 3 1 1 3 4 4 4 0 4 3 4 4 3 4 4 4 3 4 4 4 3 4 1 4 3 4 3 3 3 4 4 4 2 3 3 3 3 4 3 3 3 4 3
3 3 4 4 3 3 3 4 3 3
4 4 4 2 4 4 4 4 4 4 3 3 3 1 3 2 3 3 3 1 3 2 3 1 3 2 3 4 3 1 3 3 3 3 3 4 3 3 4 3 4 3 3 4 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 4 4 4 2 4 3 4 3 1 1 4 4 3 1 4 2 3 3 2 1 4 4 4 4 4 3 4 4 4 2
3 4 4 1 3 3 3 3 3 1
3 3 4 1 3 3 3 3 3 1
Pada Tabel 4, hasil System Usability Scale (SUS) diolah dengan menerapkan rumus khusus: pertanyaan dengan  nomor  ganjil  dianggap  positif  (skor-1), sementara pertanyaan dengan  nomor genap dianggap negatif (5-skor).  Setelah mengonversi skor SUS untuk setiap pertanyaan, skor individu responden dijumlahkan dan hasilnya dikalikan dengan 2.5.
Dengan  menghitung  dan  mengevaluasi  hasil System  Usability  Scale (SUS)  dari  tabel  di  atas, diperoleh skor rata-rata (Hasil Akhir) sebesar 78. Skor rata-rata  tersebut  mencerminkan  tingkat  kepuasan pengguna  secara  keseluruhan  terhadap  sistem  yang dinilai. Dengan demikian, skor rata-rata 78 menggambarkan  bahwa  sistem  tersebut  mendapat penilaian  positif  dari  pengguna  dengan  tingkat kepuasan  yang  baik.  Skor  ini  masuk  dalam  rentang penerimaan ( acceptability range ) yang dapat dianggap baik dengan penilaian kata sifat " Good " dan peringkat skala  "B".  Selain  melakukan  pengukuran  kualitatif, hasil usability  testing juga  memberikan  umpan  balik yang  digunakan  sebagai  bahan  evaluasi  desain. Feedback dari  responden  akan  masuk  pada  tahapan Interasi.

## 5. KESIMPULAN DAN SARAN
Penelitian  perancangan user  interface  website pemesanan online produk  makanan  KripDunk menggunakan  metode User  Centered  Design (UCD) menunjukkan  bahwa  penerapan  prinsip  4E  ( Error- Free, Easy to  Use, Easy to  Understand, Effective for End  Goal  or  Product )  memberikan  landasan  kuat
untuk  menciptakan  pengalaman  pengguna  positif. Partisipasi  aktif  pengguna  dalam  perancangan  dan UCD efektif dalam memastikan keterlibatan pengguna dari desain hingga evaluasi. Evaluasi melalui Mission Usability  Score (MIUS), Maze  Usability  Score (MAUS),  dan System  Usability  Scale (SUS) menunjukkan  keberhasilan  desain,  dengan  MAUS mencapai 77% dan SUS  mencetak skor 78, dianggap baik.  Saran  untuk  penelitian  selanjutnya  mencakup analisis  lebih  mendalam  pada  aspek-aspek  spesifik, melibatkan  kelompok  pengguna  lebih  luas,  dan mempertimbangkan  metode  pengukuran  tambahan. Kontak langsung dengan peneliti melalui nursehanz101@gmail.com  diusulkan  untuk  wawasan tambahan dan potensi kolaborasi.

## DAFTAR PUSTAKA
[1]  I.  S.  Y.  Saputri,  M.  Fadhli,  and  I.  Surya, “Penerapan  metode  ucd  (user  centered  design) pada e-commerce putri intan shop berbasis web,” J.  Nas.  Teknol.  … ,  2017,  [Online].  Available: https://teknosi.fti.unand.ac.id/index.php/teknosi/ article/view/328
[2]  P.  Kominfo,  “Pengguna  Internet  Indonesia Nomor  Enam  Dunia,” …  Resmi  Kementerian Komunikasi Dan Informatika RI . 2018.
[3]  A.  A.  Puji  and  V.  Engraini,  “Perancangan  User Interface  Website  E-Commerce  Pada  Usaha Kuliner Menggunakan User Centered Design,” J. CoSciTech  (Computer  Sci.  … ,  2021,  [Online].
Available: https://ejurnal.umri.ac.id/index.php/coscitech/art icle/view/2196
[4]  A.  Indonesia,  “Hasil  survei  penetrasi  dan perilaku  pengguna  internet  Indonesia  2018.” 2018.
[5]  P.  Z.  Dinata,  M.  A.  Urwah,  M.  R.  Rahmawan, and ..., “Perancangan UI/UX Web e-Commerce ’Hallo  Coffee’Menggunakan  Metode  User Centered Design,” Jambura J. … , 2023, [Online]. Available: https://ejurnal.ung.ac.id/index.php/jji/article/vie w/17511
[6]  F.  N.  Khasanah,  S.  Rofiah,  and  D.  Setiyadi, “Metode  User  Centered  Design  dalam Merancang  Tampilan  Antarmuka  Ecommerce
Penjualan Pupuk Berbasis Website Menggunakan  Aplikasi  Balsamiq  …,” Jurnal
Aplikasi  Sains  Dan  … .  core.ac.uk,  2019. [Online].
Available:
https://core.ac.uk/download/pdf/229030353.pdf
[7]  R. Abdullah, “Pemrograman web untuk pemula, jakarta: PT,” Ele x Media Komputindo . 2018.
[8]  D.  Riswandi,  “Transaksi  on-line  (e-commerce): peluang dan tantangan dalam perspektif ekonomi Islam,” … Econetica J. Ilmu Sos. Ekon. Dan … , 2019,  [Online].  Available:  https://unu-ntb.e- journal.id/econetica/article/view/80
[9]  H. Joo, “A study on understanding of UI and UX, and  understanding  of  design  according  to  user
interface  change,” International  Journal  of Applied Engineering Research . 2017.
[10]  N. A. Ningsih and M. R.  Abidin,  “Perancangan Design  User  Interface  Website  Pada  Pet  Shop Azria Di Kabupaten Lamongan,” BARIK , 2021, [Online]. Available: https://ejournal.unesa.ac.id/index.php/JDKV/arti cle/view/42324
[11]  Y. A. Rahman, E. D. Wahyuni, and ..., “Rancang Bangun Prototype Sistem Informasi Manajemen Program Studi Informatika Menggunakan
Pendekatan  User  Centered  Design,” Jurnal
Repositor . pdfs.semanticscholar.org, 2020.
[Online]. Available: https://pdfs.semanticscholar.org/b82e/21ac3d0b dc99406b3f74d8399b1696c0496b.pdf
[12]  M. Agarina, A. S. Karim, and S. Sutedi, “User- Centered Design Method in the Analysis of User Interface  Design  of  the  Department  of Informatics System’s Website,” … Int. Conf. … , 2019, [Online]. Available:
https://jurnal.darmajaya.ac.id/index.php/icitb/art icle/view/2098
[13]  A.  G.  Pramesti,  Q.  J.  Adrian,  and  ..., “Perancangan  Ui/Ux  Pada  Aplikasi  Pemesanan Buket  Menggunakan  Metode  User  Centered Design  (Studi  Kasus:  Bouquet  Lampung),” J. Inform.  dan  … ,  2022,  [Online].  Available: http://jim.teknokrat.ac.id/index.php/informatika/ article/view/2025
[14]  R.  R.  Marbun,  F.  Al  Mufied,  and  ..., “Perancangan  User  Interface/User  Experience (UI/UX)  Website  Helpmeong  Untuk  Shelter Menggunakan  Metode  Goal-Directed  Design,” JIPI  (Jurnal  … ,  2022,  [Online].  Available: https://www.jurnal.stkippgritulungagung.ac.id/i ndex.php/jipi/article/view/3190
[15]  S.  Kinney,  “How  your  Usability  Score  is calculated.” 2021.
[16]  J.  Sauro,  “MeasuringU:  5  Ways  to  Interpret  a SUS Score. MeasuringU.” 2018.
[17]  R. P. Sutanto, Analisis User Flow pada Website Pendidikan: Studi Kasus Website DKV UK Petra . repository.petra.ac.id, 2022. [Online]. Available: https://repository.petra.ac.id/19660/