JPIn: Jurnal Pendidik Indonesia p- ISSN 2722-8134 , e-ISSN 2620-8466 Volume 6, No. 1, Tahun 2023
Perancangan  UI/UX  Aplikasi  Variety  off  Food  Layanan Penjualan  Makanan  Secara  Online  Menggunakan  Aplikasi Figma

## Febrian Trio Pamungkas
Jurusan  Teknik  Informatika,  Institut  Teknologi  Telkom  Purwokerto,  Indonesia; 121102140@ittelkom.pwt.ac.id
*Coresponding Author Info Artikel: Dikirim: 1 Maret 2023 ; Direvisi: 15 April 2023; Diterima: 30 April 2023
Cara sitasi: Pamungkas, T. F. (2023). Perancangan UI/UX Aplikasi Variety off Food Layanan Penjualan  Makanan  Secara  Online  Menggunakan  Aplikasi  Figma. JPIn:  Jurnal  Pendidik Indonesia , 6(1), 165-183.
Abstrak .  Aplikasi  Variety  Off  Food  adalah  sebuah  platform  yang  menyediakan transaksi  jual  beli  makanan  dan  minuman  secara  online  yang  dirancang  untuk memudahkan pengguna dalam mencari dan membeli berbagai jenis makanan dari berbagai  restoran  dan  penjual  yang  terdaftar  di  dalam  aplikasi.  Aplikasi  ini  juga akan  menyediakan  fitur-fitur  seperti  penilaian  dan  ulasan,  pemilihan  menu berdasarkan  preferensi  pengguna,  serta  pilihan  pembayaran  yang  aman  dan nyaman. Pembuatan desain UI/UX prototype aplikasi Variety Off Food ini penulis memberikan  solusi  untuk  merancang  desain  sebuah  aplikasi  Variety  Off  Food dengan  UI/UX  yang  menarik,  elegan  dan  minimalis  dan  serta  kekinian  sehingga menciptakan  pengalaman  pengguna  yang  menyenangkan,  intuitif,  dan  efisien sangat  penting  untuk  meningkatkan  adopsi  pengguna  dan  mempertahankan kepuasan  mereka.  Dalam  merancang  prototype  tampilan  aplikasi  perancangan prototype  menggunakan  software  editing  Figma  dan  untuk  melakukan  pengujian terhadap  prototype  yang  telah  dibuat  menggunakan  metode  blackbox  testing. Berdasarkan  hasil  pengujian  menggunakan  metode  blackbox  testing,  aplikasi Variety  Off  Food  berjalan  dengan  baik  100  %  valid  sesuai  harapan  dan  tidak  ada cacat.
Kata Kunci : UI/UX, Desain, Prototype, Aplikasi, Teknologi
Abstract. The Variety Off Food application is a platform that provides online food and beverage buying and selling transactions designed to make it easier for users to search  for  and  buy  various  types  of  food  from  various  restaurants  and  sellers registered  in  the  application.  This  application  will  also  provide  features  such  as ratings and reviews, menu selection based on user preferences, as well as safe and convenient  payment  options.  In designing  the  UI/UX  prototype  of  the Variety  Off Food  application,  the  authors  provide  a  solution  for  designing  the  design  of  a Variety Off Food application with an attractive, elegant and minimalistic and up-to- date user interface and user experience so as to create a fun, intuitive and efficient user experience. efficiency is essential to increase user adoption and maintain their
satisfaction. In designing a prototype display, the prototype design application uses the Figma editing software and to test the prototypes that have been made using the blackbox  testing  method.  Based  on  the  test  results  using  the  blackbox  testing method,  the  Variety  Off  Food  application  runs  well  100%  valid  as  expected  and there are no defects.
Keywords : UI/UX, Design, Prototype, Application, Technology

## Pendahuluan
Pada  zaman  sekarang, Teknologi  telah  menjadi  bagian  tak  terpisahkan  bagi peradaban manusia. Teknologi telah menjadi suatu kebutuhan yang sangat penting. Dengan  hadirnya  teknologi,  manusia  memiliki  kemampuan  untuk  memperoleh beragam  informasi  yang  tersedia.  Perkembangan  teknologi  yang  terus-menerus juga  mempermudah  penyebaran  informasi,  komunikasi  jarak  jauh  yang  lebih mudah, dan penciptaan berbagai perangkat optimasi yang canggih (Jungherr, 2019).
Pembuatan  user  interface  dilakukan  dengan  tujuan  mempermudah  penggunaan teknologi  tersebut  oleh  pengguna,  yang  sering  disebut  dengan  istilah  yang  ramah pengguna.  (Nurlifa,  2014).  Penampilan  UI/UX  yang  baik  adalah  faktor  penting dalam  keberhasilan  sebuah  aplikasi.  Menciptakan  pengalaman  pengguna  yang menyenangkan,  intuitif,  dan  efisien  sangat  penting  untuk  meningkatkan  adopsi pengguna  dan  mempertahankan  kepuasan  mereka.  Oleh  karena  itu,  perancangan UI/UX aplikasi penjualan makanan online menjadi hal yang sangat penting.
Dalam  konteks  ini,  penelitian  ini  bertujuan  untuk  merancang  UI/UX  aplikasi Variety  Off  Food  menggunakan  Figma.  Variety  Off  Food  adalah  sebuah  platform yang  menyediakan  transaksi  jual  beli  makanan  dan  minuman  secara  online  yang dirancang  untuk  memudahkan  pengguna  dalam  mencari  dan  membeli  berbagai jenis makanan dari berbagai restoran dan penjual yang terdaftar di dalam aplikasi. Aplikasi  ini  juga  akan  menyediakan  fitur-fitur  seperti  penilaian  dan  ulasan, pemilihan menu berdasarkan preferensi pengguna, serta pilihan pembayaran yang aman dan nyaman.
Figma,  sebagai  salah  satu  platform  desain  grafis  yang  populer,  menyediakan berbagai  fitur  yang  memungkinkan  desainer  untuk  merancang  antarmuka pengguna  dengan  lebih  efisien  (Suryaningsih,  2020 ) .  Dalam  penelitian  ini,  Figma akan  digunakan  sebagai  alat  utama  untuk  merancang  UI/UX  aplikasi  Variety  Off Food.
Melalui  penelitian  ini,  diharapkan  dapat  dihasilkan  perancangan  UI/UX  yang menarik,  intuitif,  dan  efisien  untuk  aplikasi  Variety  Off  Food.  Perancangan  ini diharapkan  mampu  meningkatkan  pengalaman  pengguna  dalam  berbelanja makanan  secara  online  dan  mengoptimalkan  proses  transaksi.  Selain  itu,  dengan adanya  penelitian  ini  diharapkan  bisa  memberikan  wawasan  serta  referensi  untuk desainer UI/UX yang ingin merancang aplikasi serupa dimasa depan.

## Kajian Pustaka

## 1.1. Figma
Figma merupakan  perangkat desain yang umumnya dipakai untuk mendesain antarmuka  aplikasi  mobile,  desktop,  dan  website.  Figma  dapat  dijalankan  pada sistem  operasi  Windows,  Linux,  dan  macOS  menggunakan  koneksi  internet. Keunggulan  Figma  terletak  pada  kemampuannya  untuk memungkinkan  beberapa orang bekerja bersama secara bersamaan, meskipun berada di lokasi yang berbeda. Ini  memungkinkan  kerja  kelompok  dan efisiensi  waktu  dalam membuat  prototipe website atau aplikasi. Karena alasan tersebut, Figma menjadi pilihan yang populer bagi  para  desainer  UI/UX  dalam  membuat  prototipe  dengan  efisien,  cepat  dan efektif.
1.2. UI/UX
Pemanfaatan  UI/UX  berperan  penting  dalam  pembuatan  aplikasi.  Ini  karena konfigurasi  aplikasi  harus  sangat  teratur  dan  terkoordinasi,  sehingga  user  bisa dengan  mudah  mengakses  dan  menggunakan  fitur-fitur  yang  diberikan  oleh aplikasi.  Desain  UI/UX  juga  harus  disesuaikan  dengan  kebutuhan  pengguna aplikasi  yang  akan  dibuat,  termasuk  bagian  konfigurasi  tampilan,  highlight,  dan kebutuhan lainnya.
1.3. User Interface
Suatu  sistem  yang  dipakai  oleh  user  dan  dapat  dilihat,  didengar,  dan  bahkan dijelajahi  secara  fisik  dikenal  sebagai  antarmuka  pengguna  (Galitz,  2002).  Dengan cara ini, cenderung dikatakan bahwa UI adalah kerangka kerja yang berhubungan dengan  pengenalan  titik  koneksi  dan  bekerja  dengan  kolaborasi  klien  dengan kerangka kerja tersebut.
1.4. User Experience
Istilah  User  Experience  mengacu  pada  sistem  yang  mengelola  bagaimana  user berinteraksi  dengan  software  dengan menilai  tingkat  keterampilan  serta  kepuasan mereka terhadap fitur-fiturnya (Utama, 2020).

## 1.5. Elemen – Elemen Desain
Aryo  Sunaryo  (2002)  menjelaskan  bahwa  dalam  proses  menciptakan  bentuk, melibatkan  pemilihan  unsur-unsur  rupa,  penggabungan,  dan  penataan  untuk mencapai  wujud  atau  bentuk  yang  menarik,  memuaskan,  atau  menimbulkan experience  visual.  Tujuan  dari  pengorganisasian  unsur-unsur  rupa  adalah  untuk mencapai nilai estetis. Beberapa unsur rupa yang terkait dengan hal ini antara lain:
1.5.1. Titik (Point)
Titik  merupakan  unit  terkecil  yang  menandai  posisi  tunggal  dalam  karya. Meskipun kecil, titik dapat menarik perhatian, menjadi fokus, atau bagian dari pola. Titik  juga  digunakan  untuk  membangun  struktur,  menunjukkan  posisi,  atau hubungan antara elemen lain dalam desain.
1.5.2. Garis (Line)
Garis  salah  satu  komponen  visual  yang  berperan  penting  dalam  penataan suatu  objek.  Garis  lebih  dari  sekadar  coretan.  Garis  juga  berfungsi  sebagai  batas antara  bidang  atau  warna.  Garis  bisa  lurus,  melengkung,  bergelombang,  zigzag, atau sejumlah variasi lainnya.

## 1.5.3. Bidang (Field)
Bidang adalah area yang memuat elemen-elemen visual dan menjadi ruang bagi  interaksi  antara  mereka,  menciptakan  komposisi  harmonis  dan  pengalaman estetika yang unik.
1.5.4. Ruang (Space)
Ruang  adalah  konsep  yang  melampaui  batas  fisik  dan  memungkinkan imajinasi  untuk  mengeksplorasi  dimensi  yang  tak  terbatas.  Ia  menciptakan perasaan  kedalaman,  pergerakan,  dan  keteraturan,  melewati  persepsi  manusia. Ruang  menggabungkan  kosong  dan  isi,  membebaskan  pikiran  untuk  menjelajahi wilayah  abstrak.  Ia  adalah  tempat  di  mana  dunia  nyata  dan  konseptual  bertemu, memungkinkan  kita  memahami  hubungan  antara  objek  dan  eksistensi  kita  dalam alam semesta yang luas.
1.5.5. Ukuran (Size)
Ukuran (size) adalah elemen desain yang memberikan dimensi pada objek. Ia  mempengaruhi  tampilan  visual,  menonjolkan  objek,  dan  menciptakan  kontras dalam  desain.  Dengan  mengatur  ukuran,  kita  dapat  menciptakan  efek  yang menarik dan mengomunikasikan pesan yang diinginkan dalam desain.
1.5.6. Warna (Color)
Warna adalah  atribut  visual  yang  mempengaruhi  tampilan  estetika  dan emosi  dalam  desain.  ia  tercipta  melalui  interaksi  cahaya  dengan  objek  dan diterjemahkan  oleh  mata  manusia.  Warna  memiliki  karakteristik  seperti  spektrum warna  (hue),  kepekatan  (saturation),  dan  kecerahan  (lightness). Setiap  warna memiliki  makna  dan  asosiasi  tertentu,  yang  dapat  digunakan  untuk mengkomunikasikan pesan dan menciptakan suasana dalam desain.
1.5.7. Tekstur (Texture)
Tekstur mengacu pada karakteristik taktil dari permukaan suatu benda. Dari segi  fisik,  tekstur  dapat  dibedakan  menjadi  kasar  dan  halus,  serta  memiliki  efek pantulan  yang  bisa  mengkilap  atau  kusam.  Dalam  konteks  visual,  tekstur  dapat diklasifikasikan  sebagai  tekstur  nyata  dan  tekstur  semu.  Tekstur  dikatakan  nyata jika terdapat kemiripan antara apa yang terlihat dan diraba.
1.5.8. Huruf (Typography)
Dalam  konteks  desain  grafis,  tipografi  merujuk  pada  seni  penyusunan materi  publikasi  menggunakan  huruf  cetak.  Ini  melibatkan  perancangan  bentuk huruf  cetak  serta  pengaturannya  dalam  suatu  perpaduan  yang  tepat  untuk mencapai efek tampilan yang diinginkan. Dengan demikian, tipografi adalah proses seni dalam mengatur huruf-huruf cetak dalam desain grafis .

## 1.6. Pengujian sistem
Pengujian  sistem  melibatkan  proses  pelaksanaan  software  untuk mengevaluasi kecocokannya dengan spesifikasi sistem dan memastikan kinerjanya sesuai dengan apa  yang  diharapkan.  Pengujian  sistem  umumnya  berfokus  pada  identifikasi  bug, kekurangan  program,  serta  kesalahan  dalam  kode  program  yang  dapat menyebabkan  kegagalan  dalam  eksekusi  software.  Metode  pengujian  yang  pakai
adalah Black Box Testing, yang befokus pada pemenuhan kebutuhan (requipment) unit program sesuai dengan spesifikasi yang telah tetapkan.

## Metode Penelitian
Penelitian  ini  menerapkan  metode  prototipe, merupakan  praktik  dalam  rekayasa perangkat  lunak  yang  menunjukkan  secara  eksplisit  bagaimana  software  dan komponen  nya  akan  berfungsi  dalam  konteksnya  sebelum  tahap  pengembangan yang  sebenarnya  dilakukan.  Model  prototipe  melayani  dua  tujuan  berbeda,  yaitu eksplorasi  dan  pameran,  dan  digunakan  sebagai  representasi  visual  untuk pengembangan  di  masa  mendatang.  (Yanuarti,  2017).  Berikut  ini  adalah  langkah- langkah yang terdapat dalam metode prototype:
1. komunikasi  dan  pengumpulan  data  awal,  merupakan  proses  analisis  terhadap kebutuhan pengguna.
2. Perencanaan kebutuhan (Quick plan)
3. Pembuatan design (Modelling Quick Design)
4. Pembentukan  prototype,  proses  pembuatan  perangkat  prototype,  yang mencakup pengujian serta penyempurnaan.
5. Evaluasi  prototype  dan  analisis  ulang  terhadap  kebutuhan  pengguna.  Setelah itu, dilakukan perbaikan prototipe dan pembuatan versi final berdasarkan hasil evaluasi. Tahap terakhir adalah produksi akhir, di mana perangkat diproduksi dengan  benar  untuk  digunakan  oleh  pengguna.  (Deployement  Delivery  & Feedback).
© 2023 JPIn: Jurnal Pendidik Indonesia

## Hasil dan Pembahasan
Tahap  Pada  tahap  ini,  langkah  pertama  dalam  proses  pengeditan  dimulai dengan  mengakses  platform  Figma  dan  mengidentifikasi  aset  yang  dibutuhkan. Aset  tersebut  meliputi  penggunaan  gambar,  logo,  teks,  serta  menentukan  posisi tombol yang akan digunakan dalam aplikasi ini.

## 1.7. Prodes desain
Gambar 1 ( tampilan awal & tampilan login)
Gambar 2 ( tampilan riwayat, Chat & tampilan utama)
Gambar 3 ( Tampilan daftar menu makanan & minuman)
Gambar 4 ( Tampilan daftar menu makanan & minuman)
Gambar 5 ( Tampilan daftar menu makanan & minuman)
Gambar 6 ( Tampilan daftar menu makanan & minuman)
Gambar 7 ( Tampilan daftar menu makanan & minuman)
Gambar 8 ( Tampilan informasi restoran)
Gambar 9 ( Tampilan Add Pemesanan makanan)
Gambar 10 ( Tampilan detail Order)
Gambar 11 (Tampilan alamat & Metode pembayaran)
Gambar 12 ( Tampilan Maps & Chat)
Gambar 13 ( Tampilan Maps & Penilaian Driver)
Gambar 14 ( Tampilan Penilaian driver)
Gambar 15 ( Tampilan Penilaian Driver)
Gambar 16 ( Tampilan penilaian resturant)
Gambar 17 ( Tampilan penilaian resturant)
Gambar 18 ( Tampilan akun, propile, pengaturan dan payment Card)
Gambar 19 (Tampilan Payment card, pembayaran sukses, Pembayaran dibatalkan)

## 1.8. Hasil Tampilan Menggunakan Smartphone
Berikut  ini  adalah  hasil  desain  aplikasi  Variety  Off  Food  yang  telah  dibuat, dapat dilihat pada gambar dibawah ini
© 2023 JPIn: Jurnal Pendidik Indonesia p- ISSN 2722-8134 , e-ISSN 2620-8466
Gambar 20 ( Tampilan desain pada Smartphone)

## Pengujian Sistem
Pengujian ini dilakukan secara manual dengan menggunakan metode black box testing untuk mengevaluasi kesuksesan dan kesesuaian sistem yang dibuat. Untuk hasil pengujian terhadap halaman login bisa dilihat dibawah ini:
Tabel 1. Hasil pengujian Blackbox testing Sekenario Pengujian Hasil yang diiharapkan Hasil Pengujian status Email dan password tidak diisi, kemudian klik tombol Login Sistem akan menolak akses user dan menampilkan “ Login gagal, mohon periksa username email dan password anda”. Sesuai yang diharapkan Valid Mengisi email dan password tidak diisi, kemudian klik login Sistem akan menolak akses user dengan menampilkan “Login gagal mohon cek email dan password anda”. Sesuai yang diharapkan Valid Email tidak diisi dan password diisi, kemudian klik login Sistem akan menolak akses user dengan menampilkan “Login gagal mohon cek email dan password anda”. Sesuai yang diharapkan valid Mengisi email dan password yang salah, kemudian klik tombol Login Sistem akan menolak akses user dengan menampilkan “Login gagal mohon cek email dan password anda”. Sesuai yang diharapkan Valid Mengisi email dan password dengan data yang benar, kemudian klik login Sistem akan menerima akses login kemudian langsung menampilkan menu utama “ login sukses” Sesuai yang diharapkan valid Tabel 2 : Presentase Pengujian blackbox testing Status pengujian Frekuensi Jumlah pengujian Presentase Valid 5 5 100 Tidak Valid 0 0 0 Cacat 0 0 0
Berdasarkan  persentase  yang  tercantum  dalam  Tabel  2,  dapat  ditarik kesimpulan  bahwa  pengujian  pada  halaman  login  hasilnya  100%  valid berjalan dengan sesuai harapan.

## Kesimpulan
Berdasarkan hasil uraian diatas serta  perancangan dan impementasi desain UI/UX    pada  aplikasi  VARIETY  OFF  FOOD,  aplikasi  yang  menyediakan transaksi jual beli makanan  dan minuman secara online dapat disimpulkan bahwa  berdasarkan  hasil  pengujian  menggunakan  blackbox  testing  dalam mendapatkan  fungsionalitas  pada  aplikasi  Variety  Off  Food  serta perancangan dan implementasi  UI/UX  prototype  aplikasi  Variety  Off  Food, maka  dapat  disimpulkan  bahwa  aplikasi  Variety  Off  Food  berjalan  dengan baik  100  %  dan  tidak  ada  cacat.  Platform  Figma  untuk  pengeditan  desain website dapat dimanfaatkan untuk merancang tampilan aplikasi "Variety Off Food"  dengan  antarmuka  pengguna  yang  menarik,  elegan,  minimalis,  dan juga  kekinian.  Dari  penelitian  ini  menghasilkan  sebuah  prototype  aplikasi Variety Off Food yang kompatible dengan perangkat mobile.

## Daftar Pustaka
Jungherr,  A.  In  “Social  Theory  after  the  Internet,”  Ralph Schroeder  provides  a theory  of  social  change  driven  by  digital  media  extending  across  politics, culture, and the economy. He.
Landa, R. (2012). Essential graphic design solutions . Cengage Learning.
Muhyidin, M. A., Sulhan, M. A., & Sevtiana, A. (2020). Perancangan UI/UX Aplikasi My  Cic  Layanan  Informasi  Akademik  Mahasiswa  Menggunakan  Aplikasi Figma. Jurnal Digit , 10 (2), 208-219.
Nurdyansyah,  N.  (2017).  Sumber  daya  dalam  teknologi  pendidikan. Universitas Muhammadiyah Sidoarjo .
Suryaningsih,  S.,  Riandika,  Y.  A.,  Hasanah,  A.  N., &  Anggraito,  S.  (2020).  Aplikasi
Wakaf Indonesia Berbasis
Blockchain. Edumatic: Jurnal Pendidikan Informatika , 4 (2), 20-29.
Nasution, W. S. L., & Nusa, P. (2021). UI/UX design web-based learning application using design thinking method. ARRUS Journal of Engineering and Technology , 1 (1), 18-27.
Nurlifa,  A.,  &  Kusumadewi,  S.  (2014).  Analisis  Pengaruh  User  Interface  Terhadap Kemudahan Penggunaan
Sistem Pendukung Keputusan Seorang Dokter. Prosiding Snatif , 333-340.
Yanuarti,  E.  (2017).  PrototypeSistem  Informasi  Seleksi  Penerimaan  Pegawai  Tugas Belajar, 3(2), 36 – 41.
Utama,  B.  S.  (2020).  Perancangan  Ulang  User  Interface  Dan  User  Experience  Pada Website  Cosmic  Clothes.  Doctoral  Dissertation,  Universitas  Komputer Indonesia, 7 – 18.
Galitz,  W.  O.  (2002).  The  Essential  Guide  to  User  Interface  (R.  Elliot  (ed.)).  Robert Ipsen.
Anggara,  D.  A.,  Harianto,  W.,  &  Aziz,  A.  (2021).  Prototipe  Desain  User  Interface Aplikasi  Ibu  Siaga  Menggunakan  Lean  Ux. Kurawal-Jurnal  Teknologi,  Informasi dan Industri , 4 (1), 58-74.
Pramudita,  R.,  Arifin,  R.  W.,  Alfian,  A.  N.,  Safitri,  N.,  &  Anwariya,  S.  D.  (2021). Penggunaan  Aplikasi  Figma  Dalam  Membangun  Ui/Ux  Yang  Interaktif  Pada Program  Studi  Teknik  Informatika  Stmik  Tasikmalaya. Jurnal  Buana Pengabdian , 3 (1), 149-154.
Susilo,  E.,  Wijaya,  F.  D.,  &  Hartanto,  R.  (2018).  Perancangan  dan  evaluasi  user interface  aplikasi  smart  grid  berbasis  mobile  application. Jurnal  Nasional  Teknik Elektro dan Teknologi Informasi , 7 (2), 150-157. Puspita, R. (2020). Pengembangan prototipe aplikasi community aggregator beskem dengan pendekatan ucd menggunakan balsamiq mockup dan  FIGMA (studi kasus: PT Mozaik Bintang  Persada) (Bachelor's  thesis,  Fakultas  Sains  dan  Teknologi  Universitas Islam Negeri Syarif Hidayatullah Jakarta).
Syafi'i,  M.  (2021). TA:  Perancangan  Desain  UI/UX  Aplikasi  Pemesanan  Dekorasi Pernikahan  pada  UKM  MNDecoration  Menggunakan  Metode  LEAN  UX (Doctoral dissertation, Universitas Dinamika).
Valentino,  D.  E.  (2019).  Pengantar  Tipografi. Tematik:  Jurnal  Teknologi  Informasi Komunikasi (e-Journal) , 6 (2), 152-173.
Nisah, A. K., & Ajie, H. (2021).  Perancangan berbasis User Experience pada Modul Admin  Sistem  Informasi  Akademik  Universitas  Negeri  Jakarta. PINTER:  Jurnal Pendidikan Teknik Informatika dan Komputer , 5 (2), 56-64.