## Bulletin of Information Technology (BIT)

## Perancangan Desain UI/UX Berbasis Scan Barcode Dengan Metode Design Thinking Untuk Pemesanan Makanan
Ahmad Rayhaan Yusri, Isa Faqihuddin Hanif, Muhammad Daffa Al-farel, Naufalrio Zaandami , Muhammad Yasin 5
Fakultas Teknik, Teknik Informatika, Universitas Muhammadiyah Prof. Dr. HAMKA, Jakarta Timur, Indonesia Email: 1 ahmadrayhaanyusri@gmail.com, 2 isa@uhamka.ac.id, 3 daffaalrel95@email.com, 4 zm.naufalrio52@gmail.com,
5 muhammadyasin2002@gmail.com, Email Penulis Korenspondensi : ahmadrayhaanyusri@gmail.com
Abstrak- Permintaan untuk kemudahan dan kecepatan dalam pemesanan makanan terus meningkat di era digital ini. Warkop Bu Haji, yang terkenal dengan cita rasa otentik masakan khas warung Tegal, ingin meningkatkan layanan dan  pengalaman pelanggan dengan memanfaatkan  teknologi  terbaru. Penelitian  ini  bertujuan  untuk  mengatasi  masalah  ketidaknyamanan  dan  waktu  tunggu  yang  lama dalam pemesanan makanan manual dengan mengembangkan solusi pemesanan makanan digital yang efisien. Solusi yang ditawarkan adalah sistem pemesanan makanan berbasis scan barcode, di mana pelanggan dapat memesan makanan dengan mudah menggunakan perangkat seluler mereka untuk memindai barcode di meja. Desain antarmuka pengguna (UI) dan pengalaman pengguna (UX) dari aplikasi ini dioptimalkan menggunakan metode Design Thinking , yang mengutamakan kebutuhan dan kenyamanan pengguna dalam menciptakan solusi inovatif. Penelitian ini melibatkan 15 responden pelanggan dan 1 responden mitra untuk menguji prototipe. Hasil evaluasi  menunjukkan  bahwa  desain  prototipe  mendapatkan  nilai  86,6%  dari  pelanggan  dan  90%  dari  mitra,  sementara  kepuasan pelanggan  berdasarkan  kuesioner  mencapai  97,1%  dan  kepuasan mitra  91,6%.  Temuan  ini  menunjukkan  bahwa  sistem  pemesanan makanan berbasis scan barcode dapat meningkatkan efisiensi dan pengalaman pelanggan di Warkop Bu Haji. Penelitian ini diharapkan dapat memberikan manfaat signifikan bagi Warkop Bu Haji dan industri warung kopi secara umum dengan meningkatkan reputasi dan memperluas basis pelanggan melalui pengalaman pemesanan yang lebih baik.
Kata  Kunci:  User  Experience , User  Interface , Design  Thinking ,  Food  Ordering,  Digital  Innovation,  Barcode  Scanning,  Process Efficiency
Abstract- The demand for convenience and speed in food ordering continues to increase in this digital era. Warkop Bu Haji, known for its authentic Tegal-style cuisine, aims to enhance its service and customer experience by leveraging the latest technology. This study aims to address the issues of inconvenience and long wait times in manual food ordering by developing an efficient digital food ordering solution. The proposed solution is a barcode-based food ordering system, where customers can easily order food using their mobile  devices  to  scan  the  barcode  on  the  table.  The  user  interface  (UI)  and User  Experience (UX)  design  of  this  application  are optimized using the Design Thinking method, which prioritizes user needs and comfort in creating innovative solutions. This study involved 15 customer respondents and 1 partner respondent to test the prototype. Evaluation results showed that the prototype design received  a score of 86.6% from  customers  and 90% from partners, while customer satisfaction based on the questionnaire reached 97.1%  and  partner  satisfaction  reached  91.6%.  These  findings  indicate  that  the  barcode-based  food  ordering  system  can  improve efficiency and customer experience at Warkop Bu Haji. This research is expected to provide significant benefits to Warkop Bu Haji and the coffee shop industry in general by enhancing reputation and expanding the customer base through a better ordering experience.
Keywords : User  Experience , User  Interface , Design  Thinking ,  Food  Ordering,  Digital  Innovation,  Barcode  Scanning,  Process Efficiency

## 1. PENDAHULUAN
Pesatnya kemajuan teknologi setiap tahun, terutama dalam bidang internet, tidak hanya mengubah cara masyarakat berpikir, tetapi juga mengubah cara hidup mereka. mulai dari cara berinteraksi, menggunakan media sosial, dan membeli barang.  Desain User  Interface (UI) dan User  Experience (UX) dapat  memanfaatkan  kemajuan  teknologi  dengan memanfaatkan perangkat digital dan internet untuk menciptakan produk yang mudah digunakan dan nyaman digunakan pelanggan [1].
Di Warkop Bu Haji, suasana hangat dan hidangan khas warung Tegal yang menggugah selera menjadi daya tarik utama. Namun, proses pemesanan makanan yang masih manual menimbulkan ketidaknyamanan dan waktu tunggu yang lama. Banyak warung kopi mulai mempertimbangkan penggunaan teknologi baru, seperti sistem pemesanan makanan digital, untuk meningkatkan layanan mereka. Namun, implementasi sistem semacam itu bergantung pada kemampuan teknis dan desain  antarmuka  pengguna (UI/UX) yang  baik.  Dalam  hal  ini,  penelitian  ini  bertujuan  untuk  merancang  antarmuka pemesanan  makanan  digital  yang  menggunakan  scan  barcode  sebagai  alat  inovatif  yang  akan  membuat  pemesanan makanan  di  warung  kopi  lebih  mudah  dan  lebih  cepat.  Dalam  proses  perancangan  ini,  kami  juga  akan  menggunakan Metode Design Thinking . Oleh karena itu, kami berharap dapat menghasilkan desain produk yang tidak hanya memenuhi kebutuhan  tetapi  juga  memberikan  pengalaman  pengguna  yang  optimal,  efisiensi  operasional  yang  lebih  tinggi,  dan kepuasan  pelanggan  yang  lebih  tinggi.  Masalah  penelitian  ini  adalah  keinginan  kuat  Warkop  Ibu  Haji  untuk menghilangkan  prosedur  tradisional  untuk  memesan  makanan  secara  langsung  dan  membayar  secara offline .  Mereka mengatakan bahwa semua proses pemesanan dan pembayaran harus dilakukan secara online . Warkop juga mengharapkan fitur yang dapat memantau pesanan makanan secara real-time dan mengelola produk yang akan dijual. Mereka berharap ini akan meningkatkan efisiensi operasional dan pengelolaan bisnis secara keseluruhan.
Mereka  berharap  ini  akan  meningkatkan  efisiensi  operasional  dan  pengelolaan  bisnis  secara  keseluruhan.  Metodologi Design  Thinking adalah  memberikan  konsep  dan  solusi  untuk  menangani  masalah.  Pendekatan  langsung  untuk

## Bulletin of Information Technology (BIT)
perancangan  prototype  dan  pengujian,  serta  reframing  kendala  dengan  berpusat  pada  objek  manusia,  memungkinkan Design Thinking lebih efektif dan efisien [2]. Menurut Kelley dan Brown , konsep pikir adalah sebuah metode inovasi di mana  orang  menggunakan  alat  desain  untuk  menggabungkan  kebutuhan  masyarakat  umum,  kemungkinan  teknis,  dan prosedur untuk kesuksesan suatu proyek atau bisnis. Konfigurasi diyakini dapat mengatasi masalah [3]. Dalam bukunya “Analysis and Design ” Jogiyanto mengatakan bahwa desain merupakan langkah selanjutnya dalam siklus pengembangan sistem setelah analisis. Menggambar, merencanakan, dan membuat sketsa atau mengatur sejumlah bagian yang berbeda menjadi satu kesatuan yang fungsional semuanya termasuk dalam kategori ini. Konfigurasi perangkat lunak dan  perangkat  keras  system  [4].  juga  disertakan  Salah  satu  alat  desain  yang  paling  umum  adalah  Figma,  yang  dapat digunakan untuk membuat tampilan aplikasi mobile , desktop , website , dan lainnya. Dengan menggunakan internet, Figma dapat digunakan di sistem operasi Windows , Linux , dan Mac . Figma memiliki keunggulan, yaitu lebih dari satu orang dapat  bekerja  sama  untuk  tugas  yang  sama  bahkan  di  tempat  yang  berbeda.  Aplikasi  figma  memungkinkan  banyak desainer UI/UX untuk membuat prototype website atau aplikasi dengan cepat dan efektif, yang membuatnya cocok untuk kerja kelompok [5].
Menurut penelitian sebelumnya, pemesanan makanan manual di warung tradisional sering menyebabkan kesalahan dan ketidakpuasan pelanggan. Oleh karena itu, penerapan UI/UX dengan metode Design Thinking sangat penting. Penelitian ini menggunakan evaluasi SUS dan UEQ, dengan skor rata-rata 82 dan skor tinggi pada aspek UEQ [6]. Tujuan penelitian saya  adalah  untuk  meningkatkan  layanan  di  Warkop  Bu  Haji  dengan  menggunakan  sistem  pemesanan  makanan  yang menggunakan barcode dan menggunakan metode Design Thinking . Hasil evaluasi yang dilakukan dengan 15 pelanggan dan 1 mitra menunjukkan bahwa nilai desain prototipe 86,6 persen dari pelanggan dan 90 persen dari mitra, dan kepuasan pelanggan 97,1 persen dan  mitra 91,6 persen. Penelitian ini  menunjukkan bahwa teknologi  scan barcode dapat secara signifikan meningkatkan efisiensi dan pengalaman pelanggan.
User Interface (UI) User Experience ( UX ) merupakan komponen penting untuk situs web, aplikasi, atau platform online . UI/UX dapat  menjadi  salah  satu  faktor  penentu  bagi  pengunjung  yang  ingin  menjelajahi  platform  web. UI dan UX merupakan singkatan dari User Interface (UI) dan User Experience ( UX ), khususnya antarmuka visual suatu aplikasi atau alat pemasaran digital berupa website atau aplikasi untuk meningkatkan branding lebih baik lagi [7]. User Interface juga dikenal sebagai UI , adalah representasi visual dari produk digital yang biasanya ditemukan dalam aplikasi atau website . UI berfungsi untuk menghubungkan pengguna dengan fitur suatu produk dan membantu mencapai hasil yang diinginkan melalui  interaksi  manusia-mesin. UI terdiri  dari  kisi,  tata  letak,  tipografi,  warna,  animasi,  dan  mikro  interaksi  yang dikombinasikan sedemikian rupa sehingga dapat membuat interaksi yang baik dan alami [8].
Pengalaman  pengguna  adalah  bagaimana  mereka  berinteraksi  atau  menggunakan website dan  aplikasi.  Pengalaman pengguna dapat diukur dan diukur dari seberapa mudah menjalankan website tersebut, dengan kata lain, website dengan pengalaman  pengguna  yang  baik  tidak  akan  menyusahkan  pengguna  untuk  mencapai  tujuan  mereka.  Pengalaman pengguna juga dapat memaksimalkan aspek-aspek seperti fitur, desain, dan konten untuk membuat interaksi lebih mudah. Ini dapat dicapai dengan berbagai cara, termasuk desain UI yang tertata rapi, kemudahan akses, menu yang tidak berbelit- belit,  dan  pengalaman  pengguna  yang  menyenangkan.  Sebaliknya,  pengalaman  pengguna  yang  buruk  dapat  membuat pengguna  frustrasi  karena  kesulitan  mendapatkan  apa  yang  mereka  butuhkan  dari website [9].  Proses  yang  diikuti pengguna  mulai dari saat  mereka  mulai  menggunakan sistem (atau situs  web) hingga  mereka  menyelesaikan tindakan terakhir di dalamnya dikenal sebagai alur pengguna. Biasanya, alur pengguna ditampilkan sebagai diagram alur untuk membantu pengguna dalam setiap langkah yang mereka ambil saat menggunakan sistem . [10]. Wireframe adalah kerangka kerja desain yang digunakan untuk menyusun elemen-elemen pada halaman aplikasi sebelum proses desain utama dimulai. Pembuatan Wireframe umumnya dilakukan dengan menggunakan alat desain seperti Figma. Secara  visual, Wireframe terdiri  dari  garis  dan  kotak  yang  menata  tata  letak  elemen-elemen  yang  akan  ada  di  dalam aplikasi [11]. Wireframe terbagi menjadi dua jenis yaitu Wireframe low-fidelity dan high-fidelity akan digunakan sebagai dasar  untuk  desain  prototype. Wireframe low-fidelity.  Salah  satu  desain  yang  paling  dasar  dalam  proses wireframing adalah Wireframe low-fidelity, yang dibuat dengan tujuan menentukan struktur dan tata letak dari tiap elemen yang akan dibuat dalam rancangan desain. Wireframe ini tidak menyertakan warna, ukuran teks, atau elemen tambahan lainnya. Ini merupakan Wireframe high-fidelity ,  yang  merupakan  evolusi  dari Wireframe low-fidelity,  Struktur  dan  tata  letak  dari rancangan desain yang sebenarnya dapat dilihat dalam Wireframe high-fidelity . Perbedaannya terletak pada warna dan skala yang sudah dimasukkan dalam rancangan desain  [12]. Dalam hal ini, prototipe adalah tata letak semi-fungsional yang  dapat  menunjukkan  fungsi  antarmuka  pengguna  aplikasi  atau front-end (situs  web)  yang  sebenarnya.  Sementara prototipe  mungkin  tidak  memiliki  semua  fitur,  mereka  biasanya  memberi  pelanggan  dan  pengguna  akhir  kemampuan untuk  mengklik elemen antarmuka dan  meniru cara aplikasi benar-benar bekerja. Protokol  mungkin  mencakup semua komponen desain atau tidak. Pada tahap ini, kami dapat menunjukkan dan membahas setelah demonstrasi fitur produk dan mekanismenya. Ini berguna saat menguji ide-ide dan mengubahnya di awal proyek. Protokol dapat dengan mudah diubah; itu lebih rumit daripada Wireframe s, tetapi jauh lebih mudah daripada produk akhir. Jadi, membuat prototipe juga dapat membuat pengembangan perangkat lunak lebih cepat [13].

## Bulletin of Information Technology (BIT)

## 2. METODOLOGI PENELITIAN

## 2.1 Metode Design Thinking
Kami menggunakan pendekatan Design Thinking untuk penelitian ini. Design Thinking adalah teknik kerja tim yang menggabungkan berbagai ide dari berbagai bidang untuk menghasilkan solusi. Design Thinking memperhatikan apa yang dilihat dan dirasakan serta pengalaman pengguna (user). Ini digunakan untuk menemukan solusi yang paling efisien untuk masalah yang kompleks. Pemikiran yang diterapkan adalah pemikiran yang mampu menyelesaikan masalah [14]. Design Thinking adalah pendekatan berbasis solusi untuk memecahkan masalah yang memungkinkan pengamatan pemahaman yang lebih baik tentang target pengguna [15]. Design Thinking memiliki lima tahap, yaitu:
a) Emphatize . Tahap ini bertujuan untuk mendapatkan pemahaman yang lebih baik tentang perasaan yang dirasakan pengguna  dengan  melakukan  wawancara  mendalam  dengan  menyiapkan  skenario  untuk  mendapatkan  data  yang kemudian akan diolah ke tahap berikutnya [16].
b) Define . Definisi adalah konsep atau perspektif pengguna yang berfungsi sebagai dasar dari produk aplikasi yang akan dibuat. membuat daftar yang memenuhi kebutuhan pengguna.Ideate [17].
c) Ideate . Pada tahap ini, penulis akan berpikir secara luas dan kreatif untuk menemukan solusi untuk masalah yang sudah didefinisikan sebelumnya. Setelah banyak ide dikumpulkan, solusi dipilih untuk memilih satu atau bahkan tiga ide terbaik. Tahap prototype akan dilakukan setelah ide solusi dipilih. [18]
d) Prototype . disebut sebagai rancangan awal suatu produk yang akan dibuat untuk mendeteksi kesalahan sejak awal dan  memperoleh  berbagai  kemungkinan  baru.  Dalam  praktiknya,  rancangan  awal  ini  akan  diujicobakan  kepada pengguna  untuk  mendapatkan  umpan  balik  dan  umpan  balik  yang  tepat  yang  akan  membantu  menyempurnakan rancangan [19].
e) Terakhir adalah test , Tujuannya adalah untuk menghimpun masukan dari pengguna melalui pengujian prototipe yang telah dibuat dan memastikan bahwa pengalaman pengguna mencapai tingkat optimal. [20].

## 2.2 Alur Penelitian
Studi ini menggunakan alur Design Thinking , yang terdiri dari lima tahap utama :
a) Tahap Empathize, mitra  (Warkop  Bu  Haji)  dan  pelanggan  diwawancarai  secara  menyeluruh  untuk  memahami kesulitan yang dihadapi dan harapan mereka terhadap sistem pemesanan makanan.
b) Tahap Define, menetapkan lingkup proyek dengan fokus pada pengembangan sistem pemesanan yang efisien dan mudah digunakan yang berbasis scan barcode.
c) tahap Ideate, kami mengumpulkan dan menilai berbagai ide kreatif untuk memecahkan masalah.
d) Tahap Prototype, mencakup pembuatan model desain awal untuk pengujian fitur dan antarmuka pengguna.
e) tahap Test, kami melakukan pengujian usability untuk mengetahui bagaimana pengguna potensial berinteraksi dan memastikan pengalaman pengguna yang optimal.

## 2.3 Hasil Metode Design Thinking
Hasil Metode Penelitian. Hasil penelitian yang telah kami lakukan dengan menggunakan metode Design Thinking disajikan di sini. Dalam proses ini, kami telah melakukan berbagai langkah dan teknik untuk memahami masalah yang dihadapi, menemukan berbagai solusi, dan menguji dan mengembangkan ide-ide kreatif yang dapat berdampak positif
a) Empathize merupakan tahap kritis dalam metode Design Thinking di mana tim secara aktif terlibat dalam wawancara dan observasi untuk meresapi perspektif dua pihak yang berbeda: pihak mitra, dalam hal ini Warkop Ibu Haji, dan pelanggan. Dengan mendengarkan dan memahami kebutuhan serta harapan dari kedua pihak, tim dapat membentuk pemahaman  yang  komprehensif  tentang  tantangan  yang  dihadapi  dan  peluang  untuk  menciptakan  solusi  yang bermanfaat bagi semua pihak yang terlibat. Pihak mitra (Warkop bu haji). Dalam berinteraksi dengan mitra kami, Warkop Ibu Haji, kami telah secara seksama mendengarkan dan memahami kebutuhan mereka untuk meningkatkan pengalaman pelanggan serta efisiensi operasional. Kami memahami bahwa mereka menginginkan sistem pemesanan dan  pembayaran online yang  efisien,  serta  kebutuhan  tambahan  untuk  melihat  antrian  pesanan.  Ini  menyoroti keinginan  mereka  untuk  memiliki  kontrol  yang  lebih  baik  atas  proses  bisnis  mereka,  sambil  tetap  memberikan pengalaman yang nyaman dan praktis bagi pelanggan mereka. Pihak Customer. Dalam menjalani interaksi dengan pelanggan,  kami  telah  bertanya  secara  langsung  tentang  preferensi  mereka.  Kami  menggali  informasi  yang menunjukkan  keinginan  mereka  untuk  dapat  memesan  dan  membayar  makanan  tanpa  harus  meninggalkan  kursi mereka  di  Warkop  Ibu  Haji. Hal  ini  menyoroti  kebutuhan  mereka  akan  pengalaman  pemesanan  yang  praktis  dan nyaman di lingkungan warkop.
b) Define .  Dalam  menetapkan  ruang  lingkup  proyek,  kami  memfokuskan  pada  pengembangan  sistem  pemesanan makanan berbasis teknologi scan barcode untuk Warkop Ibu Haji. Fokus utama kami adalah menciptakan solusi yang memungkinkan pelanggan untuk memesan dan membayar makanan secara online tanpa meninggalkan kursi mereka, sambil memberikan kemampuan kepada warkop untuk mengelola produk, nomor meja, dan melihat antrian pesanan secara efisien. Dengan menetapkan tujuan yang jelas ini, kami dapat memandu proses desain dengan lebih terarah dan memastikan solusi yang kami hasilkan memenuhi kebutuhan yang telah ditetapkan

## Bulletin of Information Technology (BIT)
c) Ideate . Dalam tahap Ideate, kami secara proaktif mengembangkan beragam konsep dan gagasan untuk memenuhi kebutuhan yang telah diidentifikasi, termasuk mengusulkan fitur-fitur seperti integrasi dengan sistem pembayaran online , antarmuka untuk melihat antrian pesanan, serta opsi untuk mengelola produk dan nomor meja secara efisien. Kami menyadari bahwa hasil dari ideate ini memerlukan pendekatan desain yang mengakomodasi dua  Perspektif, yaitu dari perspektif mitra dan pelanggan. Kami melakukan sesi brainstorming yang kolaboratif untuk menghasilkan solusi-solusi kreatif yang dapat memberikan nilai tambah kepada mitra kami, Warkop Ibu Haji, dan meningkatkan pengalaman pelanggan di warkop tersebut
d) Prototype .  prototyping  (pembuatan  prototipe)  merupakan  tahap  penting  dalam  proses  pengembangan  sistem pemesanan makanan berbasis teknologi scan barcode untuk Warkop Ibu Haji. Prototype adalah versi awal atau model sederhana dari solusi yang dirancang, yang digunakan untuk menguji fungsi, fitur, dan antarmuka pengguna sebelum mengembangkan versi final produk. Dalam tahap ini, akan dibuat prototipe yang dapat memberikan gambaran visual tentang bagaimana sistem pemesanan akan berfungsi. Ini bisa berupa sketsa Wireframe , mockup antarmuka pengguna (UI) , atau prototipe interaktif yang dapat dijalankan secara sederhana. Prototyping memungkinkan untuk : Pertama. Menguji Konsep: Prototipe memungkinkan pengujian langsung terhadap ide-ide yang diajukan untuk melihat apakah mereka efektif dalam memecahkan masalah yang ditentukan. Kedua. Mendapatkan Umpan Balik Awal: Umpan balik dari  pengguna  potensial  dan  mitra  dapat  dikumpulkan  mengenai  desain  dan  fungsionalitas  sistem  sebelum menghabiskan waktu dan sumber daya untuk pengembangan lanjutan. Ketiga. Mengidentifikasi Perbaikan: Dengan memperhatikan  reaksi  dan  tanggapan  dari  pengguna,  dapat  diidentifikasi  area-area  yang  perlu  diperbaiki  atau ditingkatkan  sebelum  melanjutkan  ke  tahap  pengembangan  selanjutnya.  Dengan  menggunakan  prototipe,  dapat menguji konsep-konsep desain secara cepat dan efisien, sambil memastikan bahwa solusi yang dikembangkan benar- benar memenuhi kebutuhan dan harapan mitra, Warkop Ibu Haji, serta pengguna akhir.
e) Tahap terakhir adalah Usability Testing , pengujian calon pengguna, menggunakan metode pengujian usability . Tahap pengujian  kemudahan penggunaan adalah proses pengujian produk atau fitur  untuk  mengetahui seberapa nyaman suatu User  Interface digunakan.  Kami  menyiapkan  sepuluh  user  untuk  sudut  Perspektif  pelanggan  dan  satu  user pemilik  mitra  untuk  sudut  pandang  mitra.  selama  proses  pengujian  kegunaan,  pengguna  akan  diuji  menggunakan prototype antarmuka, Pada titik ini, kami menggunakan aplikasi Maze untuk mengumpulkan data pengguna.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Hasil
1. Sistem scan barcode di meja mengarahkan pelanggan ke homepage pemesanan, pesanan masuk keranjang, dan bayar dengan uang elektronik, meningkatkan efisiensi dan kenyamanan.
Gambar 1. Userflow Perspektif pelanggan memesan makanan. 2. Admin tiba di dashboard dan langsung melihat laporan penjualan singkat di homepage .
Gambar 2. Perspektif Warkop dashboard. 3. Pada dashboard admin, dengan menekan menu 'Daftar Pesanan', admin dapat melihat daftar pesanan pelanggan beserta detailnya serta memiliki kemampuan untuk mengubah status pesanan pelanggan sesuai kebutuhan.
Gambar 3. Perspektif Warkop melihat pesanan.
4. Admin  perlu  masuk  ke  menu  “Produk”  untuk  menambahkan  produk  baru.  Setelah  itu,  dengan  menekan  tombol “Tambah Produk”, admin dapat mengisi formulir untuk produk baru yang akan diterbitkan

## Bulletin of Information Technology (BIT)
Vol 5, No 2, Juni 2024, Hal. 102 - 113 ISSN 2722-0524 (media online) DOI 10.47065/bit.v5i2.1340 https://journal.fkpt.org/index.php/BIT
Gambar 4. Perspektif Warkop tambah produk 5. Untuk mengedit produk, admin harus masuk ke menu 'Produk', kemudian memilih produk yang ingin diubah. Setelah itu, admin menekan tombol ' Edit ', dan mengisi formulir untuk memperbarui informasi produk yang ingin diubah.
Gambar 5. Perspektif Warkop edit produk. 6. Admin  harus  masuk  ke  menu  'Produk'  untuk  menghapus  produk.  Selanjutnya,  admin  memilih  produk  yang  akan dihapus dan menekan tombol 'Hapus Produk' untuk mengonfirmasi penghapusan
Gambar 6. Perspektif Warkop hapus produk. 7. Admin tambahkan kategori dengan  masuk  ke  menu  'Kategori', lalu  menekan  'Tambah  Kategori' dan  mengisi  form untuk kategori produk baru
Gambar 7. Perspektif Warkop tambah kategori..
8. Admin mengedit kategori dengan masuk ke menu 'Kategori', pilih kategori, lalu tekan ' Edit ', dan isi formulir dengan perubahan yang diinginkan.
Gambar 8. Perspektif Warkop edit kategori.
9. Untuk menghapus kategori, admin harus menuju ke menu 'Kategori', lalu memilih kategori yang ingin dihapus, dan akhiri dengan menekan tombol 'Hapus'.
Gambar 9. Perspektif Warkop hapus kategori. 10. Untuk menambahkan meja, admin harus masuk ke menu 'Meja', kemudian tekan tombol 'Tambah Meja', dan mengisi formulir untuk meja baru yang akan diunggah.
Gambar 10. Perspektif Warkop tambah meja. 11. Untuk  mengedit  meja,  admin  harus  masuk  ke  menu  'Meja',  memilih  meja  yang  ingin  diedit,  lalu  menekan  tombol ' Edit ', dan mengisi formulir yang sesuai untuk merubah meja yang dipilih

## Bulletin of Information Technology (BIT)
Gambar 11. Perspektif Warkop edit meja. 12. Admin pergi ke menu 'Meja', pilih meja yang akan dihapus, tekan tombol 'Hapus' untuk mengonfirmasi penghapusan meja
Gambar 12. Perspektif Warkop hapus meja.
13. Berikut  adalah Wireframe yang  telah  dioptimalkan  sesuai  dengan User  Flow pengguna  dalam  proses  pemesanan makanan.
Gambar 13 Wireframe perspektif pelanggan dalam memesan makanan 14. Berikut adalah tampilan Wireframe untuk menu 'Melihat Pesanan' yang telah dioptimalkan.
Gambar 14. Wireframe perspektif warkop melihat pesanan pelanggan. 15. AdBerikut adalah tampilan Wireframe yang dioptimalkan untuk menu 'Produk'.
Gambar 15. Wireframe perspektif warkop mengatur produk. 16. Berikut adalah tampilan Wireframe yang dioptimalkan untuk menu 'Kategori

## Bulletin of Information Technology (BIT)
Vol 5, No 2, Juni 2024, Hal. 102 - 113 ISSN 2722-0524 (media online) DOI 10.47065/bit.v5i2.1340 https://journal.fkpt.org/index.php/BIT
Gambar 16. Wireframe perspektif warkop mengatur kategori. 17. Berikut adalah tampilan Wireframe yang dioptimalkan untuk menu 'Meja’
Gambar 17. Wireframe perspektif warkop mengatur meja. 18. Berikut adalah desain antarmuka yang dioptimalkan dalam perspektif pelanggan, dengan alur yang telah diatur sesuai dengan user flow.
Gambar 18. Antarmuka Perspektif pelanggan memesan makanan.
19. Berikut adalah desain antarmuka yang dioptimalkan dalam perspektif warkop pada menu 'Melihat Pesanan', dengan alur yang telah diatur sesuai dengan user flow .
Gambar 20. Antarmuka Perspektif pelanggan memesan makanan. 20. Berikut adalah desain antarmuka yang dioptimalkan dalam perspektif warkop pada menu 'Melihat Pesanan', dengan alur yang telah diatur sesuai dengan user flow .

## Bulletin of Information Technology (BIT)
Vol 5, No 2, Juni 2024, Hal. 102 - 113 ISSN 2722-0524 (media online) DOI 10.47065/bit.v5i2.1340 https://journal.fkpt.org/index.php/BIT
Gambar 20. Antarmuka Perspektif pelanggan memesan makanan. 21. Berikut adalah desain antarmuka yang dioptimalkan dalam perspektif warkop pada menu 'Kategori', dengan alur yang telah diatur sesuai user flow.
Gambar 21. Antarmuka Perspektif pelanggan memesan makanan.
22. Berikut adalah desain antarmuka yang dioptimalkan dalam perspektif warkop pada menu 'Meja', dengan alur yang telah diatur sesuai user flow.
Gambar 22. Antarmuka Perspektif pelanggan memesan makanan.
Kami  telah  menyiapkan  tiga  tugas  untuk  perspektif  pelanggan  yang  akan  dikerjakan  oleh  15  pengguna,  serta  sepuluh tugas  untuk  perspektif  warkop  yang  akan  dikerjakan  oleh  satu  pengguna.  Dengan  menggunakan  parameter  waktu, berbagai indikator keberhasilan aplikasi dapat diukur secara  menyeluruh.  Untuk  mendapatkan pemahaman  yang lebih baik tentang kinerja aplikasi dan pengalaman pengguna secara keseluruhan, kami dapat mengumpulkan informasi penting tentang efisiensi, kepuasan pengguna, dan ruang untuk perbaikan dengan memantau dan menganalisis parameter waktu seperti durasi sesi, waktu respons, dan waktu penyelesaian tugas. Tabel di bawah ini menggambarkan indikator parameter yang digunakan untuk menghitung waktu keberhasilan pelanggan.
Tabel 1. Parameter waktu keberhasilan pelanggan Task Berhasil Bingung Kesulitan Task 1: Menambahkan pesanan ke dadlam keranjang < 60 Detik 60 Detik – 80 Detik > 80 Detik Task 2: Melakukan pembayaran < 25 Detik 25 Detik – 60 Detik > 60 Detik Task 3: Melihat status pesanan < 11 Detik 11 Detik – 20 Detik > 20 Detik Tabel 2. Hasil durasi waktu pelanggan dalam mengerjakan task User Task 1 Task 2 Task 3 User 1: Inodhi 52 Detik 20 Detik 16 Detik User 2: Jupar 47 Detik 14 Detik 4 Detik

## Bulletin of Information Technology (BIT)
User 3: Putri 44 Detik 16 Detik 4 Detik User 4: Ari Rama 24 Detik 19 Detik 4 Detik User 5: Dafa 29 Detik 21 Detik 4 Detik User 6: Luthfia 53 Detik 24 Detik 21 Detik User 7: Farand 30 Detik 14 Detik 5 Detik User 8: Akbar 25 Detik 11 Detik 4 Detik User 9: Pandu 59 Detik 17 Detik 11 Detik User 10: Fadhil 22 Detik 14 Detik 4 Detik User 11: Ihsan 34 Detik 30 Detik 10 Detik User 12: Okta 70 Detik 46 Detik 8 Detik User 13: Hani 16 Detik 13 Detik 4 Detik User 14: Khoirunisa 25 Detik 9 Detik 5 Detik User 15: Eka 20 Detik 10 Detik 2 Detik Tabel 3. Nilai keseluruhan pelanggan Task 1 Task 2 Task 3 14 15 𝑥 100 = 𝑁𝑖𝑙𝑎𝑖 93,3% 13 15 𝑥 100 = 𝑁𝑖𝑙𝑎𝑖 86,6% 12 15 𝑥 100 = 𝑁𝑖𝑙𝑎𝑖 80% Hasil Nilai Keseluruhan Customer 86.6%
Setelah  itu,  analisis  data  dilakukan.  Tujuan  analisis  ini  adalah  untuk  mengetahui  seberapa  efficiency,  learnbility,  dan memorability desain antarmuka tersebut digunakan. Kami telah membuat sejumlah pertanyaan yang akan diajukan kepada responden dengan tujuan mengumpulkan informasi yang relevan dan mendalam tentang subjek penelitian kami.
Tabel 4. Nilai learnability pelanggan No Question Learnability Yes No Yes (%) No (%) 1 Apakah text desain prototype pemesanan makanan kami mudah dan jelas bagi anda? 15 0 100% 0% 2 Apakah desain prototype kami mudah dioperasikan? 15 0 100% 0% 3 Apakah tampilan warna pada prototype  kami  enak  dilihat  dan mudah dipahami 14 1 93.3% 6.6% 4 Apakah menu yang ada cukup mudah dipahami? 15 0 100% 0% Total Nilai Learnability 98.3% 1.6% Tabel 5. Nilai efficiency pelanggan No Question Efficiency Yes No Yes (%) No (%) 1 Apakah produk yang and acari mudah ditemukan? 14 1 93.3% 6.6% 2 Apakah saat tombol atau fitur yang anda klik dapat menampilkan dengan cepat? 15 0 100% 0% 3 Apakah proses pembayaran sangat mudah? 14 1 93.3% 6.6% Total Nilai Efficiency 95.5% 4.4% Tabel 6. Nilai memorability pelanggan No Question Efficiency Yes No Yes (%) No (%) 1 Apakah  icon  pada  desain  prototype kami mudah dipahami? 15 0 100% 0% 2 Apakah anda bisa mengingat Kembali halaman  atau  menu  yang  anda kunjungi? 15 0 100% 0% 3 Apakah menu halaman desain prototype kami mudah diingat? 14 1 93.3% 6.6% Total Nilai Memorability 97.7% 2.2%

## Bulletin of Information Technology (BIT)
Tabel 7. Total nilai keseluhan pertanyaan untuk customer Total Nilai Keseluruhan Yes 97.1% No 2,7%
Tabel di bawah ini menggambarkan indikator parameter yang digunakan untuk menghitung waktu keberhasilan mitra
Tabel 8. Parameter waktu keberhasilan mitra Task Berhasil Bingung Kesulitan Task  1  :  User  diminta  untuk  melihat  status  pesanan pelanggan,  mengubah  status  pesanan  pelanggan,  dan melihat detail pesanan pelanggan < 10 Detik 10 Detik -  30 Detik > 30 Detik Task 2 : User diminta untuk menambahkan produk  baru untuk penjualan mereka. < 15 Detik 15 Detik - 60 Detik > 60 Detik Task 3 : User diminta  untuk  mengedit informasi produk lama mereka. < 20 Detik 20 Detik - 60 Detik > 60 Detik Task  4  :  User  diminta  untuk  menghapus  produk  lama mereka. < 10 Detik 10 Detik - 30 Detik > 30 Detik Task 5 : User diminta untuk menambahkan jenis kategori pada penjualan mereka < 10 Detik 10 Detik - 40 Detik > 40 Detik Task 6 : User diminta untuk mengedit informasi kategori lama mereka. < 15 Detik 15 Detik - 35 Detik > 35 Detik Task  7  :  User  diminta  untuk  menghapus  kategori  lama mereka. < 10 Detik 10 Detik - 30 Detik > 30 Detik Task 8 : User diminta untuk menambahkan meja baru. < 20 Detik 20 Detik - 40 Detik > 40 Detik Task  9  :  User  diminta  untuk  mengedit  informasi  meja mereka < 10 Detik 10 Detik - 30 Detik > 30 Detik Task 10 : User diminta untuk menghapus meja mereka. < 10 Detik 10 Detik - 30 Detik > 30 Detik
Berikut adalah table informasi hasil dari durasi waktu yang dihabiskan mitra dalam mengerjakan tugas kami.
Tabel 9. Hasil durasi waktu mitra dalam mengerjakan task
Task Durasi Mitra Task 1 : User diminta untuk melihat status pesanan pelanggan, mengubah status pesanan pelanggan, dan melihat detail pesanan pelanggan 4 Detik Task 2 : User diminta untuk menambahkan produk baru untuk penjualan mereka. 12 Detik Task 3 : User diminta untuk mengedit informasi produk lama mereka. 21 Detik Task 4 : User diminta untuk menghapus produk lama mereka. 5 Detik Task 5 : User diminta untuk menambahkan jenis kategori pada penjualan mereka 4 Detik Task 6 : User diminta untuk mengedit informasi kategori lama mereka. 5 Detik Task 7 : User diminta untuk menghapus kategori lama mereka. 4 Detik Task 8 : User diminta untuk menambahkan meja baru. 12 Detik Task 9 : User diminta untuk mengedit informasi meja mereka 6 Detik Task 10 : User diminta untuk menghapus meja mereka. 4 Detik
Hasil dari kuesioner yang kami berikan kepada mitra tentang pengalaman mereka setelah mencoba prototipe desain kami ditunjukkan di table di bawah ini. Data ini mencakup aspek pengalaman pengguna dengan rumus, yaitu. jumlah task yang berhasil / jumlah total task x 100 = presentase nilai.
Tabel 10. Nilai keberhasilan pengerjaan task Jumlah Berhasil Mengerjakan Task Jumlah Total Task Rumus Penilaian Hasil Nilai 9 10 9 10 𝑥 100 90% Tabel 11. Nilai learnability No Question Learnability Yes No 1 Apakah  tesxt  desain  managemen  pemesanan  makanan  kami  mudah  dan jelas bagi anda? 1 0 2 Apakah desain prototype managemen kami mudah dioperasikan? 1 0 3 Apakah  tampilan  warna  pada  desain  prototype  managemen  kami  enak dilihiat dan mudah dipahami? 0 1 4 Apakah menu yang ada cukup mudah dipahami? 1 0 Total Nilai Efficiency 100% 0%

## Bulletin of Information Technology (BIT)
Tabel 12. Nilai efficiency No Question Efficiency Yes No 1 Apakah produk yang and acari mudah ditemukan? 1 0 2 Apakah saat tombol atau fitur yang anda klik dapat menampilkan dengan cepat? 1 0 3 Apakah total pendapatan sangat mudah dilihat? 1 0 Total Nilai Efficiency 100% 0% Tabel 13. Nilai memorability No Question Memorability Yes No 1 Apakah icon pada desain prototype kami mudah dipahami? 1 0 2 Apakah anda bisa mengingat Kembali halaman atau menu yang anda kunjungi 1 0 3 Apakah total pendapatan sangat mudah dilihat? 1 0 Total Nilai Memorability 100% 0% Tabel 14. Nilai keseluruhan pengujian mitra Total Nilai Keseluruhan 91,6% 8,3%

## 4. KESIMPULAN
Berdasarkan  hasil  penelitian  berupa  Perancangan  Desain UI/UX Berbasis  Scan  Barcode  Dengan  Pendekatan  Metode Design Thinking Untuk Mempermudah Proses Pemesanan Makanan Secara Digital. Diterima beberaa nilai penting. Nilai desain prototipe untuk customer adalah 86,6%, dan nilai kuesioner customer adalah 97,1%, nilai desain prototipe untuk mitra adalah 90%, dan nilai kuesioner mitra 91,6%.

## REFERENCE
[1] D. Haryuda Putra, M. Asfi, and R. Fahrudin, “PERANCANGAN UI/UX MENGGUNAKAN METODE DESIGN THINKING BERBASIS WEB PADA LAPORTEA COMPANY,” 2021.
[2] R. W. Purwitasari, P. D. Y. Nainggolan, N. Rahmawati, F. D. Adhinata, and N. G. Ramadhan, “Perancangan UI/UX Webinar Booking Terhadap Kepuasan Pengguna Menggunakan Metode Design Thinking,” JURIKOM (Jurnal Riset Komputer) , vol. 8, no. 6, p. 350, Dec. 2021, doi: 10.30865/jurikom.v8i6.3700.
[3] P.  F.  T.  D.  H.  B.  Herdin  Yohnes  Madawara,  “PERANCANGAN  UI/UX  APLIKASI  KTM MULTIFUNGSI   MENGGUNAKAN  METODE  DESIGN  THINKING,” Jurnal  Pendidikan  Teknologi Informasi (JUKANTI) , vol. 5, no. 2, pp. 111–125, 2022.
[4] A. G. Pramesti, Q. J. Adrian, and Y. Fernando, “PERANCANGAN UI/UX PADA APLIKASI PEMESANAN BUKET  MENGGUNAKAN  METODE  USER  CENTERED  DESIGN  (STUDI  KASUS:  BOUQUET LAMPUNG),” Jurnal Informatika dan Rekayasa Perangkat Lunak (JATIKA) , vol. 3, no. 2, pp. 179–184, 2022, [Online]. Available: http://jim.teknokrat.ac.id/index.php/informatika
[5] M.  N.  M.  Al-Faruq,  S.  Nur’aini,  and  M.  H.  Aufan,  “PERANCANGAN  UI/UX  SEMARANG  VIRTUAL TOURISM DENGAN FIGMA,” Walisongo Journal of Information Technology , vol. 4, no. 1, pp. 43–52, Aug. 2022, doi: 10.21580/wjit.2022.4.1.12079.
[6] F. Aziz, D. Uki, E. Saputri, N. Khasanah, and T. Hidayat, “Penerapan UI/UX dengan Metode Design Thinking (Studi Kasus: Warung Makan),” 2023. [Online]. Available: http://ejournal.bsi.ac.id/ejurnal/index.php/infortech
[7] M. Agus Muhyidin, M. A. Sulhan, and A. Sevtiana, “PERANCANGAN UI/UX APLIKASI MY CIC LAYANAN INFORMASI  AKADEMIK  MAHASISWA  MENGGUNAKAN  APLIKASI  FIGMA,”  2020.  [Online]. Available: https://my.cic.ac.id/.
[8] N.  Nurtsani  and  E.  Sarvia,  “Perancangan  dan  Analisis  User  Interface/User  Experience  Online  Store  dengan Menggunakan Pendekatan Ergonomi (Studi Kasus: Wods),” Journal of Integrated System , vol. 5, no. 1, pp. 27– 48, Jun. 2022, doi: 10.28932/jis.v5i1.4476.
[9] A. Kathleen, R. P. Sutanto, and A. Pranayama, “ANALISIS PERBANDINGAN USER FLOW DARI APLIKASI
E-CATALOGUE IFURNHOLIC,” 2021. Accessed:
Mar. 28, 2024. [Online]. Available:
https://publication.petra.ac.id/index.php/dkv/article/view/11269
[10] R. P. Sutanto, “Analisis User Flow pada Website Pendidikan: Studi Kasus Website DKV UK Petra,” Nirmana , vol. 22, no. 1, pp. 41–51, Jun. 2022, doi: 10.9744/nirmana.22.1.41-51.
[11] R. N. Fadilah and D. Sweetania, “PERANCANGAN DESIGN PROTOTYPE UI/UX APLIKASI RESERVASI RESTORAN DENGAN MENGGUNAKAN METODE DESIGN THINKING,” JUIT , vol. 2, no. 2.
[12] Elda  Chandra  Shirvanadi,  “SKRIPSI  PERANCANGAN  ULANG  UI/UX  SITUS  E-LEARNING  AMIKOM CENTER DENGAN METODE DESIGN THINKING (STUDI KASUS: AMIKOM CENTER),” 2021.
[13] Alif  Bimananda  Cavanaugh,  “16410100142-2021-UNIVERSITASDINAMIKA,”  2021,  Accessed:  Mar.  28, 2024. [Online]. Available: https://repository.dinamika.ac.id/id/eprint/5911/

## Bulletin of Information Technology (BIT)
Vol 5, No 2, Juni 2024, Hal. 102 - 113 ISSN 2722-0524 (media online) DOI 10.47065/bit.v5i2.1340 https://journal.fkpt.org/index.php/BIT
[14] I. P. Sari, A. H. Kartina, A. M. Pratiwi, F. Oktariana, M. F. Nasrulloh, and S. A. Zain, “Implementasi Metode Pendekatan Design Thinking dalam Pembuatan Aplikasi Happy Class Di Kampus UPI Cibiru,” Edsence: Jurnal Pendidikan Multimedia , vol. 2, no. 1, pp. 45–55, Jun. 2020, doi: 10.17509/edsence.v2i1.25131.
[15] F. Fariyanto and F. Ulum, “PERANCANGAN APLIKASI PEMILIHAN KEPALA DESA DENGAN METODE UX DESIGN THINKING (STUDI KASUS: KAMPUNG KURIPAN),” Jurnal Teknologi dan Sistem Informasi (JTSI) , vol. 2, no. 2, pp. 52–60, 2021, [Online]. Available: http://jim.teknokrat.ac.id/index.php/JTSI
[16] C.  S.  Surachman,  M.  Riyan  Andriyanto,  C.  Rahmawati,  and  P.  Sukmasetya,  “Implementasi  Metode  Design Thinking Pada Perancangan UI/UX Design Aplikasi Dagang.in,” 2022.
[17] E.  Susanti,  E.  Fatkhiyah,  and  E.  Efendi,  “PENGEMBANGAN  UI/UX  PADA  APLIKASI  M-VOTING MENGGUNAKAN METODE DESIGN THINKING,” 2019.
[18] A. A. Seila Tazkiyah, “PERANCANGAN
UI/UX PADA WEBSITE LABORATORIUM ENERGY  MENGGUNAKAN APLIKASI FIGMA,” Jurnal Teknologi Terpadu , vol. 8, pp. 72–78, 2022.
[19] A. Y. Kurniawan, “RANCANGAN UI/UX PADA GAME BELAJAR AKSARA LAMPUNG BERSAMA MULI (STUDI KASUS : SEKOLAH DASAR SWADHIPA NATAR),” Jurnal Informatika dan Rekayasa Perangkat
Lunak (JATIKA) , vol. 3, no. 3, pp. 266–277, 2022, [Online]. Available: http://jim.teknokrat.ac.id/index.php/informatika
[20] I. Adhiya Adha et al. , “PERANCANGAN UI/UX APLIKASI OGAN LOPIAN DISKOMINFO PURWAKARTA MENGGUNAKAN METODE DESIGN THINKING,” JOISIE Journal Of Information System And Informatics Engineering , vol. 7, no. 1, 2023.