## JURNAL MEDIA INFORMATIKA [JUMIN]
ISSN 2808-005X (media online) Available Online at http://ejournal.sisfokomtek.org/index.php/jumin

## Perancangan UI/UX Aplikasi Penjualan Makanan Berbasis Mobile Menggunakan Aplikasi FIGMA
Ayu Putri Qirani 1* , Prita Dellia 2 , Istighfarina Izzatul Laili 3 , Selvira Pramesti Cahyani 4 , Nabila Rizqiullah 5 , Ahmad Zahrial 6
1,2,3,4,5,6 Pendidikan Informatika, Unversitas Trunojoyo Madura, Bangkalan, Indonesia Email: 1 210631100005@student.trunojoyo.ac.id, 2 prita.dellia@trunojoyo.ac.id, 3 210631100026@student.trunojoyo.ac.id,
4 210631100034@student.trunojoyo.ac.id, 5 210631100017@student.trunojoyo.ac.id, 6 210631100018@student.trunojoyo.ac.id
Abstrak− Tujuan  dari  penelitian  ini  adalah untuk  merancang  UI/UX  aplikasi  penjualan  makanan  berbasis  mobile  dengan menggunakan  Figma,  dengan  harapan  dapat  memberikan  solusi  yang  lebih  efisien  dan  efektif  dibandingkan  metode tradisional.  Dalam  era  digital  saat  ini,  kebutuhan  akan  aplikasi  penjualan  makanan  online  semakin  meningkat  seiring  dengan perubahan perilaku konsumen yang lebih mengutamakan kemudahan dan kecepatan dalam berbelanja. Penelitian  ini menggunakan metodologi desain  berbasis  prototipe  yang  meliputi  tahap  Analisa  kebutuhan,  proses  desain,  pembuatan  prototipe,  dan  deployment delivery and feedback. Hasil dari penelitian ini adalah sebuah prototipe aplikasi yang intuitif, mudah digunakan, dan sesuai dengan kebutuhan  pengguna.  Pengujian  dilakukan  menggunakan  metode  blackbox  untuk  mengetahui  keberhasilan  fungsi  fitur  yang  sudah dibuat pada prototype. Kesimpulan dari penelitian ini menunjukkan bahwa penggunaan metode prototipe dengan Figma efektif dalam menghasilkan  desain  UI/UX  yang  dapat  meningkatkan  kepuasan  pengguna  dan  efisiensi  dalam  proses  penjualan  makanan  secara online.
Kata Kunci: UI/UX, Figma, Prototipe, Market Place
Abstract− The aim of this research is to design a UI/UX for a mobile food sales application using Figma, aiming to provide a more efficient and effective solution compared to traditional methods. In today's digital era, the demand for online food sales applications is increasing alongside changes in consumer behavior that prioritize convenience and speed in shopping. This study employs prototype- based design methodology, encompassing stages such as Needs Analysis, Design Process, Prototype Development, and Deployment, Delivery,  and  Feedback.  The  outcome  of  this  research  is  an  intuitive  and  user-friendly  application  prototype  that  meets  user requirements.  Blackbox  testing  methodology  is  utilized  to  assess  the  functionality  of  features  developed  in  the  prototype.  The conclusion of the study indicates that employing prototype methods with Figma effectively produces UI/UX designs that enhance user satisfaction and efficiency in the online food sales process.
Keywords : UI / UX, Figma, Prototype, Market Place

## 1. PENDAHULUAN
Saat ini, teknologi informasi berkembang dengan sangat cepat. Paradigma informasi masyarakat tidak lagi terbatas pada surat  kabar,  media  audio  visual,  dan  elektronik.  Namun,  dengan  menggunakan  jaringan  internet,  dapat  mendapatkan informasi dari berbagai sumber. Dengan menggunakan teknologi internet, banyak peluang untuk mendapatkan fasilitas berkualitas  tinggi  dalam  berbagai  bidang  dapat  dipermudah.  Untuk  memenuhi  kebutuhan  fasilitas  digital  masyarakat, tentunya diperlukan sumber daya manusia. Ini akan membantu Indonesia berkembang menjadi dunia digital. [1]. Ketika teknologi dan akses internet berkembang, perancangan (design) mengalami perubahan besar. Ini terutama berlaku untuk desain  antar  muka  pengguna,  juga  disebut  UI/UX  (User  Interface/User  Experience)  [2]. Karena  antarmuka  perangkat lunak berinteraksi langsung dengan pengguna, memahaminya sangat penting saat menggunakannya [3].
Tujuan interaksi manusia-komputer (IMK) adalah untuk membuat sistem yang mudah digunakan dan memiliki nilai usability yang tinggi. Bagian dari elemen user experience adalah usability, yang memastikan bahwa produk mudah digunakan oleh pengguna. Produk harus disesuaikan dengan kebutuhan pengguna agar pengguna senang dan puas saat melihat atau menggunakannya. [4].
Perkembangan  teknologi  digital  semakin  pesat  dalam  memudahkan  pengguna  berinteraksi  salah  satunya  pada kegiatan penjualan makanan. Kemajuan dalam setiap tahun seiring berjalannya waktu menumbuhkan beberapa rancangan fitur  dalam  memudahkan  pengguna  mengaplikasian  penjualan  makanan  berbasis  mobile.  Menurut  data  dari  Asosiasi Penyelenggara Jasa Internet Indonesia (APJII) didapatkan bahwa sebanyak 89,03% masyarakat di Indonesia mengakses internet  menggunakan  handphone/table,  dan  sebanyak  21,26%  yang  menggunakan  internet  untuk  berbelanja  produk makanan secara online pada e-commerce.
Teknologi digital adalah teknologi yang lebih mengutamakan pelaksanaan kegiatan secara komputer atau digital dibandingkan dengan penggunaan tenaga manusia. Teknologi ini biasanya diterapkan pada sistem pengoperasian otomatis yang canggih dengan sistem komputerisasi atau format yang dapat dibaca komputer. Peningkatan teknologi digital dalam penggunaan  smartphone  diikuti  oleh  peningkatan  pengembangan  aplikasi  mobile.  Aplikasi  berbasis  mobile  menjadi pilihan utama untuk smartphone saat ini karena banyaknya kemudahan yang membuatnya dapat diakses oleh setiap orang kapan saja dan di mana saja [5].  Aplikasi mobile, menurut Pressman dan Bruce (2014:9), adalah aplikasi yang dibuat khusus untuk platform ponsel (seperti Android atau iOS).

## JURNAL MEDIA INFORMATIKA [JUMIN]
ISSN 2808-005X (media online) Available Online at http://ejournal.sisfokomtek.org/index.php/jumin
Submitted: 23/06/2024 ; Accepted: 25/06/2024 ; Published: 30/06/2024
Sebelum  sistem  dibuat,  rancangan  desain  sistem  adalah  langkah  pertama  dalam  proses  pembuatan  sistem. Tampilan  antarmuka pengguna  (UI)  yang  tidak  sesuai  dengan  kebutuhan  pengguna  menyebabkan  pengguna  kesulitan untuk menggunakan aplikasi atau system yang dibuat tersebut merupakan salah satu masalah yang yang sering terjadi. Pada tahap ini kerumpangan dsn desain antarmuka yang tidak rinci berdampak pada pembuatan system yang akan menjadi lambat atau tidak bekerja sama sekali. Di era saat ini banyak aplikasi desain UI/UX yang digunakan tersedia dari yang berbayar hingga yang gratis, dari yang berbentuk aplikasi berdiri sendiri hingga web. Figma adalah aplikasi desain UI/UX berbasis web yang mudah digunakan dan tersedia secara gratis. Dengan banyak fitur gratis yang memudahkan pengguna, Figma menjadi pilihan utama bagi banyak desainer dalam membuat desain UI/UX untuk aplikasi dan website[6].
Perancangan antarmuka pengguna (UI) dan pengalaman pengguna (UX) pada aplikasi penjualan makanan berbasis mobile telah menjadi isu penting dalam industri teknologi informasi. Aplikasi-aplikasi tersebut tidak hanya harus memikat secara  visual,  tetapi  juga  harus  menyediakan  navigasi  yang  intuitif dan  pengalaman  yang  memuaskan  bagi  pengguna. Meski demikian, banyak penelitian terdahulu masih mengalami kesulitan dalam menemukan keseimbangan yang tepat antara  estetika  dan  fungsionalitas.  Analisis  terhadap  penelitian  yang  ada  menunjukkan  adanya  kesenjangan  dalam penggunaan  alat  perancangan  modern  yang  dapat  mengintegrasikan  berbagai  elemen  desain  dengan  efisien.  Sebagian besar  penelitian  masih  menggunakan  metode  tradisional  yang  tidak  selalu  sesuai  dengan  tuntutan  dan  perkembangan teknologi saat ini. Salah satu alat perancangan modern yang belum banyak dieksplorasi secara mendalam dalam konteks ini adalah Figma.
Figma  menawarkan  berbagai  keunggulan,  seperti  kolaborasi  real-time,  sistem  desain  yang  terintegrasi,  dan kemampuan prototipe yang interaktif. Namun, penelitian mengenai penggunaan Figma dalam perancangan UI/UX untuk aplikasi  penjualan  makanan  berbasis  mobile  masih  terbatas.  Kesenjangan  ini  menunjukkan  adanya  peluang  untuk melakukan penelitian yang dapat memberikan kontribusi praktis dan teoritis dalam bidang ini.
Prototyping adalah metode pengembangan perangkat lunak yang memungkinkan pengembang dan klien bekerja sama dalam pembuatan prototipe sistem secara cepat dan bertahap. Klien sering kali hanya mengungkapkan keinginan mereka tanpa menjelaskan detail proses input dan output dari sistem yang diinginkan. Untuk memahami kebutuhan klien secara akurat, pengembang harus berkolaborasi dengan baik untuk mengatasi ketidakjelasan ini. Antarmuka UI/UX akan dirancang untuk meningkatkan dan mengoptimalkan proses pemesanan berdasarkan informasi yang dikumpulkan dari masalah yang teridentifikasi[7].
Studi sebelumnya tentang desain UI/UX  aplikasi untuk menjual makanan online secara mobile telah banyak di teliti  dan  di  bahas.  Sebagai  contoh,  penelitian yang dilakukan  oleh  Dumalang  JM  et  al.,  2023  [8]  menemukan  bahwa desain UI/UX aplikasi penjualan makanan berbasis ponsel pada UMKM di kota Manado dapat diterima dengan baik oleh responden dan dapat menyelesaikan masalah yang mereka hadapi. Penelitian kedua yang serupa menggunakan metode prototype  oleh  Siti  NO  et  al.,  2022[3]  melakukan  analisis  bahwa  perancangan  program  aplikasi  penjualan  yang  akan digunakan oleh pengguna atau pelanggan membuat proses penjualan menjadi lebih efektif dan efisien. Ketiga penelitian yang dilakukan oleh Budi K et al., 2022[4] menghasilkan perancangan desain tampilan web atau aplikasi user interface yang menarik, modern, dan minimalis. Menurut Pamungkas, F.T., 2023 [9], perancangan UI/UX aplikasi variasi layanan penjualan makanan secara online yang menggunakan metode pengujian blackbox berjalan dengan baik, sesuai harapan, dan tidak ada cacat.
Penelitian  ini  bertujuan  untuk  merancang  UI/UX  aplikasi  penjualan  makanan  berbasis  mobile  dengan menggunakan  Figma,  dengan  harapan  dapat  memberikan  solusi  yang  lebih  efisien  dan  efektif  dibandingkan  metode tradisional. Kontribusi baru yang diharapkan dari penelitian ini adalah pengembangan panduan praktis untuk perancangan UI/UX menggunakan Figma, serta evaluasi dampak penggunaannya terhadap kualitas desain aplikasi penjualan makanan. Dengan demikian,  penelitian ini  tidak hanya  berusaha  untuk  menjawab  tantangan yang  ada  saat  ini,  tetapi  juga  untuk membuka jalan bagi penelitian lebih lanjut di masa depan.

## 2. METODOLOGI PENELITIAN
Pada  tahap  awal  penelitian  ini,  dilakukan  pengumpulan  data  melalui  studi  lapangan  dan  studi  literatur.  Langkah berikutnya  adalah  pengembangan  sistem  menggunakan  metode  prototyping,  yang  mencakup beberapa  tahapan  seperti analisis kebutuhan, desain wireframe, desain mockup, pembuatan prototipe, dan diakhiri dengan tahap evaluasi.

## 2.1 Metode Kualitatif
Para peneliti mengumpulkan dan menganalisis data serta informasi dari jurnal, penelitian sebelumnya, artikel, dan sumber relevan  lainnya  terkait  topik  penelitian  menggunakan  metode  literatur  atau  studi  kepustakaan.  Dalam  penelitian  ini, aplikasi yang dirancang untuk layanan jual beli online berbasis mobile menggunakan Figma[10].

## 2.2 Metode Prototyping
Tujuan dari metode prototyping dalam penelitian ini adalah untuk mendapatkan gambaran tentang aplikasi yang akan dikembangkan.  Prototipe,  atau  arketipe,  adalah  bentuk  awal  yang  berfungsi  sebagai  contoh  atau  standar  desain  suatu entitas.  Sebelum  aplikasi  dikembangkan  lebih  lanjut  atau  diproduksi  secara  massal,  prototipe  dibuat  terlebih  dahulu. Dalam penggunaan metode prototyping, kolaborasi langsung antara pengembang dan klien memungkinkan interaksi yang

## JURNAL MEDIA INFORMATIKA [JUMIN]
ISSN 2808-005X (media online) Available Online at http://ejournal.sisfokomtek.org/index.php/jumin
Submitted: 23/06/2024 ; Accepted:
25/06/2024 ; Published: 30/06/2024
intens selama pembuatan prototipe sistem. Namun, sering kali klien hanya menyediakan pandangan umum tentang tujuan sistem  tanpa  memberikan  rincian  tentang  apa  yang  seharusnya  dimasukkan  (input)  ke  dalam  sistem  atau  apa  yang diharapkan sebagai hasil (output). Untuk mengatasi ketidakjelasan ini, penting untuk membangun kerjasama yang kuat antara kedua belah pihak, Ini memungkinkan pengembang untuk memiliki pemahaman yang  akurat tentang kebutuhan klien, sehingga hasilnya adalah desain sistem yang interaktif dan sesuai dengan kebutuhan yang diinginkan. [1]. Prototype adalah  sebuah  framework  JavaScript  yang  diciptakan  untuk  menyederhanakan  pembangunan  aplikasi  web.  Metode prototyping, sebagai paradigma baru dalam pengembangan sistem informasi, tidak hanya mewakili perkembangan dari metode-metode sebelumnya, tetapi juga menghadirkan perubahan revolusioner dalam pengembangan sistem informasi manajemen..[11]. Berikut merupakan langkah-langkah atau tahapan dalam metode prototype:
1. Analisa Kebutuhan.
Proses  yang  disebut  "analisis  kebutuhan"  dilakukan  oleh  peneliti  untuk  mengumpulkan  informasi  tentang kebutuhan sistem. Proses ini selanjutnya dapat memberikan gambaran tentang proses perancangan sistem [12]. Pada  tahap  Analisa  kebutuhan  peneliti  mendistribusikan  kuesioner  kepada  mahasiswa  melalui  Google  Form sebagai upaya untuk memahami kebutuhan pengguna.
2. Proses Design.
Pada  tahap  ini,  kami  menggunakan  program  Figma  untuk  membantu  dalam  desain  UI  karena  kami  telah mengidentifikasi dan mengevaluasi tugas-tugas desain dan pengembangan sistem yang sesuai dengan kebutuhan pengguna. Kami akan menggunakan metode kualitatif sebagai panduan untuk produksi desain [13][14].
3. Pembentukan prototype. Setelah proses desain selesai, langkah selanjutnya yang penting adalah pembangunan prototipe. Pada tahap ini, wireframe akan diubah menjadi desain high fidelity, dan prototipe interaktif akan dibuat menggunakan aplikasi Figma  sesuai  dengan  kebutuhan  sistem  yang  telah  ditetapkan  sebelumnya.  Desain  high  fidelity  berbeda  dari wireframe karena desain ini sudah mencakup elemen visual, warna, dan detail dengan tingkat keakuratan yang tinggi.  Ini  menjadikannya  produk  akhir  yang  memungkinkan  pengguna  untuk  berinteraksi  langsung  dengan prototipe tersebut. Tujuannya adalah untuk menghasilkan gambaran konkret alur dan fungsi sistem yang telah dirancang, sebelum melangkah ke tahap pengembangan sistem yang melibatkan pemrograman.
4. Deployement Delivery & Feedback. Melalui pembuatan prototipe, tidak hanya untuk menguji teknisitas yang efektif dan mengkonfirmasi kegunaan antarmuka  pengguna,  juga  memungkinkan  untuk  memperkirakan  tampilan  perangkat  lunak  sehingga kekurangan yang ditemukan dapat segera diperbaiki[2]. Kemudian seluruh fitur prototype di uji menggunakan metode blackbox. Rangkaian kegiatan yang terjadi setelah pengembangan suatu sistem atau produk perangkat lunak  selesai.  Ketiga  tahapan  ini  saling  berkaitan  dan  berperan  penting  dalam  memastikan  produk  tersebut berfungsi dengan baik dan memenuhi kebutuhan penggunanya.

## 3. HASIL DAN PEMBAHASAN
Studi ini dimulai dengan desain yang dibuat menggunakan aplikasi editing Figma, yang mencakup menambahkan logo, teks, latar belakang, ilustrasi gambar, dan tampilan pendaftaran akun. Figma adalah aplikasi multiplatform dan berbasis cloud  yang  dapat  berjalan  di  sistem  operasi  apa  saja  yang  berbasis  cloud.  Ini  memungkinkan  penyimpanan  desain tersimpan  secara  otomatis  dan  memungkinkan  banyak  pengguna  untuk  bekerja  sama,  yang  meningkatkan  efektivitas proses  proyek  [15].  Selanjutnya,  dilakukan  proses  prototyping,  yaitu  proses  menghubungkan  simbol-simbol  dengan halaman yang dituju ketika simbol tersebut diklik.

## 3.1 Rancangan Prototype
Desain prototipe ini menggunakan tiga warna utama, yaitu kuning, abu-abu, dan biru, yang diaplikasikan mulai dari logo hingga  keseluruhan  tampilan  aplikasi.  Kuning  digunakan  untuk  menciptakan  suasana  ceria  dan  menarik  perhatian pengguna,  abu-abu  memberikan  kesan  sederhana  dan  profesional,  sementara  biru  digunakan  untuk  menimbulkan  rasa aman dan kepercayaan pada layanan aplikasi penjualan makanan online ini.

## JURNAL MEDIA INFORMATIKA [JUMIN]
ISSN 2808-005X (media online) Available Online at http://ejournal.sisfokomtek.org/index.php/jumin
Logo MA$IF Marketplace Technopreneurship PIF memiliki beberapa elemen utama, yaitu:
Keranjang belanja: Simbol ini umum digunakan untuk mewakili marketplace atau platform perdagangan daring. Dalam konteks logo ini, keranjang belanja dapat diartikan sebagai tempat di mana para pengusaha teknologi (technopreneur) dapat menjual produk dan layanan mereka.
a. Matahari  : Simbol  matahari  dapat  diartikan  sebagai  sumber  energi  dan  kekuatan.  Dalam  konteks  logo  ini, matahari dapat diartikan sebagai semangat dan optimisme para technopreneur dalam membangun bisnis mereka.
b. Huruf "MA$IF" : Huruf "MA$IF" merupakan singkatan dari "Marketplace Technopreneurship PIF". Huruf "A" dilambangkan  dengan  simbol  dolar  ($)  untuk  menunjukkan  fokus  marketplace  pada  transaksi  keuangan  dan bisnis.
c. Warna: Logo  ini  menggunakan  warna  biru  dan  kuning.  Warna  biru  melambangkan  kepercayaan  dan profesionalisme, sedangkan warna kuning melambangkan optimisme dan energi.
Secara keseluruhan, logo MA$IF Marketplace Technopreneurship PIF dapat diartikan sebagai berikut:
a. Marketplace yang memberikan ruang bagi para technopreneur untuk menjual produk dan layanan mereka.
b. Platform  yang  mendukung  para  technopreneur  dalam  membangun  bisnis  mereka  dengan  semangat  dan optimisme.
c. Simbol kepercayaan dan profesionalisme dalam transaksi keuangan dan bisnis.
Logo ini juga dapat diartikan sebagai berikut:
a. Mempermudah para technopreneur untuk memasarkan produk dan layanan mereka kepada khalayak yang luas.
b. Memberikan akses kepada para technopreneur terhadap sumber daya dan dukungan yang mereka butuhkan untuk mengembangkan bisnis mereka.
c. Menciptakan ekosistem yang kondusif bagi pertumbuhan technopreneurship di sekitar madura.

## Gambar 2. Hasil Prototype
Prototype ini adalah aplikasi mobile yang memungkinkan pengguna untuk memesan makanan secara online dari berbagai restoran.  Aplikasi  ini  dirancang  agar  mudah  digunakan  dan  ramah  pengguna,  dengan  antarmuka  yang  sederhana  dan intuitif.  Aplikasi  ini  juga  menawarkan  berbagai  fitur  untuk  membuat  proses  pemesanan  menjadi  nyaman  dan menyenangkan bagi pengguna.
a. Fitur Utama
1. Mencari dan Menjelajahi Restoran : Pengguna dapat dengan mudah mencari restoran berdasarkan nama, masakan,  atau  lokasi.  Pengguna  juga  dapat  menelusuri  daftar  restoran  terdekat  atau  memfilter  restoran berdasarkan kategori.
2. Lihat Detail Restoran : Setelah pengguna menemukan restoran yang mereka minati, mereka dapat melihat detailnya, termasuk menu, foto, ulasan, dan peringkat.
3. Tambahkan  Item  ke  Keranjang  : Pengguna  dapat  menambahkan  item  ke  keranjang  mereka  dari  menu restoran.  Pengguna  juga  dapat  menyesuaikan  pesanan  mereka  dengan  memilih  opsi  dan  menambahkan permintaan khusus.
4. Checkout  dan  Pembayaran  : Pengguna  dapat  melanjutkan  ke  checkout  dan  membayar  pesanan  mereka menggunakan berbagai metode pembayaran, termasuk kartu kredit, kartu debit, dan dompet elektronik.
5. Pelacakan  Pesanan  : Pengguna  dapat  melacak  status  pesanan  mereka  secara  real  time.  Mereka  akan menerima pemberitahuan ketika pesanan mereka dikonfirmasi, disiapkan, dan siap diantar.
6. Manajemen Akun : Pengguna dapat membuat akun untuk menyimpan alamat pengiriman dan informasi pembayaran mereka. Mereka juga dapat melihat riwayat pesanan mereka dan mengelola pengaturan profil mereka.
7. Selanjutnya
b. User Interface
Antarmuka  pengguna  aplikasi  ini  bersih  dan  modern,  dengan  skema  warna  yang  konsisten  dan  font  yang  mudah  dibaca. Navigasi intuitif, dan semua fitur aplikasi mudah diakses.
c. User Experience
Aplikasi  ini dirancang  untuk  memberikan  pengalaman  pengguna  yang  mulus dan  menyenangkan. Pengguna dapat dengan mudah menemukan restoran yang mereka cari, memesan dengan cepat dan mudah, dan melacak pesanan mereka secara real time.
d. Kesan Keseluruhan

## JURNAL MEDIA INFORMATIKA [JUMIN]
ISSN 2808-005X (media online) Available Online at http://ejournal.sisfokomtek.org/index.php/jumin
Prototype  ini  adalah  aplikasi  mobile  yang  dirancang  dengan  baik  dan  ramah  pengguna  untuk  memesan  makanan  online. Aplikasi ini memiliki berbagai fitur yang menjadikannya cara yang nyaman dan menyenangkan untuk memesan makanan dari restoran favorit Anda.
Prototype  aplikasi  pemesanan  makanan  ini  memiliki  desain  antarmuka  pengguna  yang  sederhana  dan  mudah digunakan, fitur aplikasi yang lengkap dan bermanfaat, dan kegunaan aplikasi yang tinggi. Namun, masih ada beberapa kekurangan  yang  perlu  diperbaiki,  seperti  belum  ada  fitur  untuk  melacak  status  pesanan  dan  belum  ada  fitur  untuk memberikan ulasan dan rating terhadap makanan.
Secara  keseluruhan,  prototype  aplikasi  pemesanan  makanan  ini  memiliki  potensi  yang  besar  untuk  menjadi aplikasi yang sukses di pasaran. Dengan beberapa perbaikan, aplikasi ini dapat menjadi solusi yang ideal bagi pengguna yang ingin memesan makanan secara online.

## 3.1.1 Hasil Tampilan Mobile
Gambar 3. Tampilan Mobile Fitur Login, Register, Beranda.
Gambar yang ditampilkan merupakan desain prototype aplikasi mobile. Desain ini menggambarkan bagaimana aplikasi akan terlihat jika dikembangkan lebih lanjut. Halaman yang ditampilkan dalam desain ini adalah halaman register atau login, halaman autentikasi, dan halaman beranda.
Gambar 4. Tampilan Mobile Fitur Kategori makanan, Pembayaran, update profile, Menu, dan Voucher.
a. Layar login : Layar login adalah tempat pengguna memasukkan kredensial mereka untuk mengakses aplikasi. Dalam kasus ini, layar login menunjukkan formulir dengan bidang untuk nomor telepon dan kata sandi. Ada juga tombol untuk masuk dan lupa kata sandi.
b. Layar registrasi: Layar registrasi adalah tempat pengguna baru membuat akun. Dalam kasus ini, layar registrasi menunjukkan formulir dengan bidang untuk nama, nomor telepon, alamat email, dan kata sandi. Ada juga tombol untuk mendaftar.
c. Layar beranda: Layar beranda adalah layar utama aplikasi. Biasanya menampilkan daftar restoran atau item lain yang  dapat  dijelajahi  atau  dicari  oleh  pengguna.  Dalam  kasus  ini,  layar  beranda  menunjukkan  daftar  restoran dengan logo, nama, dan peringkatnya. Ada juga bilah pencarian di bagian atas layar.
d. Layar detail restoran: Layar detail restoran menunjukkan informasi tentang restoran tertentu, seperti menunya, foto, dan ulasan. Dalam kasus ini, layar detail restoran menunjukkan menu dengan foto dan harga untuk setiap item. Ada juga tombol untuk menambahkan item ke keranjang dan memesan makanan.
e. Layar keranjang: Layar keranjang menunjukkan item yang telah ditambahkan pengguna ke keranjang mereka. Ini juga menunjukkan total harga pesanan. Dalam kasus ini, layar keranjang menunjukkan daftar item dengan jumlah dan harganya. Ada juga tombol untuk melanjutkan ke checkout.
f. Layar  checkout: Layar  checkout  adalah  tempat  pengguna  memasukkan  informasi  pembayaran  mereka  dan menyelesaikan  pesanan  mereka.  Dalam  kasus  ini,  layar  checkout  menunjukkan formulir  dengan bidang  untuk nama, alamat, dan informasi pembayaran. Ada juga tombol untuk memesan.
g. Layar konfirmasi pesanan: Layar konfirmasi pesanan menunjukkan detail pesanan, seperti restoran, item yang dipesan, dan total harga. Dalam kasus ini, layar konfirmasi pesanan menunjukkan daftar item dengan jumlah dan harganya. Ada juga tombol untuk melacak pesanan.
h. Layar  akun: Layar  akun  menunjukkan  informasi  akun  pengguna,  seperti  nama,  alamat  email,  dan  informasi pembayaran mereka. Dalam kasus ini, layar akun menunjukkan daftar pesanan pengguna. Ada juga tombol untuk keluar.
3.2 Uji Coba Sistem

## JURNAL MEDIA INFORMATIKA [JUMIN]
ISSN 2808-005X (media online) Available Online at http://ejournal.sisfokomtek.org/index.php/jumin
Metode pengujian blackbox digunakan untuk menguji sistem untuk memastikan bahwa setiap fungsi fitur Figma berfungsi sesuai dengan tujuannya.
Tabel 1. Tabel uji blacbox Platform Fungsional Fitur Hasil Uji Coba Registrasi Akun Sukses Login Akun Sukses Halaman Autentikasi Sukses Beranda Sukses Mobile Kategori Menu Makanan Sukses Halaman Pembayaran Sukses Update Profil Sukses Halaman Detail Produk Sukses Layar Menu Sukses Halaman Voucher Sukses

## 4. KESIMPULAN
Berdasarkan hasil pengujian menggunakan metode black box untuk menguji fungsionalitas semua fitur dalam aplikasi penjualan makanan online MA$IF, serta perancangan dan implementasi prototipe antarmuka pengguna dan pengalaman pengguna,  dapat  disimpulkan  bahwa  semua  fitur  pada  aplikasi  mobile  berjalan  dengan  lancar  dan  memenuhi  standar kebutuhan pengguna secara keseluruhan. Pengujian black box dilakukan untuk memastikan bahwa setiap fitur, mulai dari proses pemesanan makanan, pembayaran, hingga pengiriman, berfungsi sesuai yang diharapkan tanpa terpengaruh oleh struktur internal aplikasi. Selain itu, prototipe antarmuka pengguna dan pengalaman pengguna (UI/UX) telah dirancang dan diimplementasikan dengan mempertimbangkan kebutuhan dan preferensi pengguna, meningkatkan keterlibatan dan kepuasan mereka dalam menggunakan aplikasi. Hasil pengujian menunjukkan bahwa MA$IF mampu memenuhi standar kebutuhan pengguna secara optimal, mencakup kemudahan navigasi, desain yang menarik, dan responsivitas yang baik pada  platform  aplikasi  mobile.  Dengan  demikian,  keseluruhan  aplikasi  telah  teruji  dan  siap  untuk  memberikan pengalaman  berbelanja  makanan  online  yang  memuaskan  dan  efisien  bagi  pengguna.  Dengan  rancangan  desain antarmuka yang dibangun,  kedepannya diharapkan prototipe ini dapat digunakan untuk mendukung transaksi jual beli online.  Meskipun  rancangan  prototipe  saat  ini  belum  sempurna,  peneliti  berharap  untuk  meningkatkannya  melalui penelitian yang lebih mendalam dan mengembangkannya menjadi sebuah aplikasi mobile yang nyata.

## REFERENCES
[1] N. Hakam, “PERANCANGAN UI/UX APLIKASI AMAZE LAYANAN ONLINE TRAVEL AGENT MENGGUNAKAN APLIKASI FIGMA,” Jawa Timur, Sep. 2022.
[2] 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.
[3] A.  H.  Luthfi  and  I.  Arfiani,  “Perancangan  UI/UX  Aplikasi Sampahocity  Menggunakan  Pendekatan  UCD  (User  Centered Design),” Jurnal Ilmu Komputer dan Sistem Informasi (JIKOMSI) , vol. 7, no. 1, pp. 24–36, 2024.
[4] S.  Febriani,  T.  Sutabri,  M.  Megawaty,  and  L.  A.  Abdillah,  “Perancangan  UI/UX  Aplikasi  Sistem  Informasi  Layanan Administrasi dalam Perspektif Psikologi Menggunakan Metode Prototype,” Jurnal Teknologi Informatika dan Komputer , vol. 9, no. 2, pp. 1088–1103, Sep. 2023, doi: 10.37012/jtik.v9i2.1714.
[5] S. N. Oktaviani, C. Fikri Aziz, and B. M. Sulthon, “Analisa UI/UX Sistem Informasi Penjualan Berbasis Mobile Menggunakan Metode Prototype,” Media Online , vol. 2, no. 6, pp. 225–233, 2022, [Online]. Available: https://djournals.com/klik
[6] B.  Kurniawan  and  M.  Romzi,  “Perancangan  UI/Ux  Aplikasi  Manajemen  Penelitian  Dan  Pengabdian  Kepada  Masyarakat Menggunakan Aplikasi Figma,” Jurnal Sistem Informasi Mahakarya , vol. 5, pp. 1–7, Jun. 2022.
[7] D. Avriel, I. 1 ✉ , B. Huda, S. S. Hilabi, and B. Priyatna, “Penerapan Desain UI/UX Pada Sistem Penjualan Berbasis Web Dengan Metode Desain Thingking,” Journal Of Social Science Research , vol. 4, pp. 5737–5748, 2024.
[8] J. M. Dumalang, C. E. J. C. Montolalu, and D. Lapihu, “Perancangan UI/UX Aplikasi Penjualan Makanan berbasis Mobile pada UMKM di Kota Manado menggunakan metode Design Thinking,” Jurnal Ilmiah Informatika dan Ilmu Komputer (JIMA- ILKOM) , vol. 2, no. 2, pp. 41–52, Sep. 2023, doi: 10.58602/jima-ilkom.v2i2.19.
[9] F. T. Pamungkas, “Perancangan UI/UX Aplikasi Variety off Food Layanan  Penjualan Makanan Secara Online Menggunakan Aplikasi  Figma,” Purwokerto, Apr. 2023.
[10] N. Azizah, A. Sani, A. Rezki, F. Raihan, and I. Georginayuni, “PERANCANGAN PROTOTYPE INTERFACE ATAU UI PADA  LAYANAN PENJUALAN BERBASIS MOBILE MENGGUNAKAN APLIKASI FIGMA,” Medan, Oct. 2022.
[11] 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/.

## JURNAL MEDIA INFORMATIKA [JUMIN]
ISSN 2808-005X (media online) Available Online at http://ejournal.sisfokomtek.org/index.php/jumin
Submitted: 23/06/2024 ; Accepted: 25/06/2024 ; Published: 30/06/2024
[12] M.  Furqan  and  dan  Muhammad  Riyan  Ulil  Albab,  “ANALISIS  DAN  PERANCANGAN  UI/UX  E-KONVEKSI MENGGUNAKAN  METODE  PROTOTYPE  (STUDI  KASUS:  BRAND  LOKAL  PROBOLINGGO  GHAZLAN.CO),” 2022.
[13] W. Muslimin and E. Zuraidah, “Desain UI/UX Prototype SPP Metode Human Centered Design,” Media Online) , vol. 4, no. 2, pp. 746–756, 2023, doi: 10.30865/klik.v4i2.1081.
[14] A. Pita Sari, S. Aisyah, A. Fauzi, N. Afifah Gustini, and M. Randa Syuhada, “PERANCANGAN APLIKASI PORTAL UI/UX PADA SISWA SEKOLAH MENENGAH KEJURUAN (SMK),” 2022.
[15] S. Tazkiyah and A. Arifin, “PERANCANGAN UI/UXPADA WEBSITE LABORATORIUM ENERGY MENGGUNAKAN APLIKASI FIGMA,” Jurnal Teknologi Terpadu , vol. 8, pp. 72–78, Dec. 2022.