Walisongo Journal of Information Technology , Vol. 4 No. 1 (2022) 43-52 DOI : http://dx.doi.org/10.21580/wjit.2022.4.1.12079 Copyright © 2022 WJIT : Walisongo Journal of Information Technology

## PERANCANGAN UI/UX SEMARANG VIRTUAL TOURISM DENGAN FIGMA
Muhammad Naufal Muhadzib Al-Faruq, Siti Nur’aini, Muhammad Haikal Aufan Universitas Islam Negeri Walisongo naufalfaruq082@gmail.com, siti_nuraini@walisongo.ac.id

## Abstract
The city of Semarang is one of the big cities in Indonesia and has many cultural heritages. The Semarang City Government has made efforts to restore several cultural heritages to make them more worthy of being tourist destinations. This is done in an effort to improve the local economy. The Semarang City government's efforts do not stop at restoring cultural heritage, but also  by  carrying  out  various  promotions  so  that  the  City  of  Semarang  is  widely  known  as  a tourist  destination.  To  support  the  government's  efforts,  an  idea  is  needed  in  the  form  of designing  a  prototype  for  the  Semarang  Virtual  Tourism  Application.  prototype  design  using Figma  and  to  measure  the  application  using  blackbox  testing  method  with  equivalence partitioning technique. The results of testing the UI/UX Semarang Virtual Tourism application design  with  equivalence  partitioning  are  75  valid,  1  is  invalid  and  there  are  2  defects,  in percentage there are 96.15% valid, 1.28% invalid and 2.56% there are defects.

## Keywords : Semarang City, prototype, figma

## Abstrak
Kota  Semarang merupakan  salah satu  kota  besar yang  ada  di  Indonesia  dan  memiliki  banyak cagar  budaya.  Pemerintah  Kota  Semarang  telah  berupaya  melakukan  pemugaran  beberapa cagar budaya agar lebih layak menjadi tujuan wisata. Hal tersebut dilakukan dalam upaya untuk meningkatkan  ekonomi  lokal.    Usaha  pemerintah  Kota  Semarang  tidak  berhenti  sampai  pada pemugaran cagar budaya, tetapi juga dengan melakukan berbagai promosi agar Kota Semarang dikenal  lebih  luas  sebagai  kota  tujuan  wisata.  Untuk  mendukung  upaya  pemerintah  tersebut, perlu gagasan berupa perancangan prototype Aplikasi Semarang Virtual Tourism. perancangan prototype  menggunakan  Figma  dan  untuk  mengukuran  Aplikasi  menggunakan  menggunakan metode blackbox testing dengan teknik equivalence partitioning. Hasil pengujian desain Aplikasi UI/UX  Semarang  Virtual  Tourism dengan equivalence  partitioning terdapat  75  valid,  1  tidak valid  dan  terdapat  2  Defect,  dalam  presentase  terdapat  96.15%  valid,  1,28%  tidak  valid  dan sebesar 2,56% terdapat defect.
Kata Kunci: Semarang City, prototype, figma

## 1. PENDAHULUAN
Di  era  sekarang,  teknologi  tidak bisa  dipisahkan  dalam  kehidupan manusia.  Teknologi  sudah  menjadi kebutuhan  yang  vital.  Dengan  adanya teknologi  kita  dapat  mengetahui berbagai  informasi  yang  ada.  Adanya berbagai  teknologi  baru  dari  waktu  ke waktu dapat memudahkan penyampaian  informasi,  kemudahan komunikasi jarak jauh, serta terciptanya berbagai  alat  optimasi  yang  canggih (Jungherr,  2019).  Hal  ini  juga  dapat berpengaruh  ke  kemajuan  pendidikan dengan  menciptakan  inovasi-inovasi tentang  metode  pembelajaran.  Inovasi pembelajaran  memberikan  dampak positif,  seperti  kemudahan  dalam belajar,  serta  sebagai  cara  baru  dalam melakukan aktifitas manusia (Nurdyansyah, 2017) ,
Kota  Semarang  merupakan  kota yang  termasuk  dalam  kategori    kota besar sekaligus menjadi
ibukota Provinsi  Jawa  Tengah.  Kota  Semarang memiliki tiga aspek utama pengembangan  kota  berkelanjutan, yaitu  pengembangan  kota  dengan mengedepankan  keseimbangan  antara aspek  ekonomi,  lingkungan  hidup,  dan perlindungan cagar budaya yang ada  di dalamnya (Hendro, 2015).
Pemerintah  Kota  Semarang  telah berupaya melakukan pemugaran beberapa cagar budaya agar lebih layak menjadi  tujuan  wisata.  Hal  tersebut dilakukan dalam upaya untuk meningkatkan  ekonomi  lokal.    Usaha pemerintah  Kota  Semarang  tidak berhenti sampai pada pemugaran cagar budaya,  tetapi  juga  dengan  melakukan berbagai  promosi  agar  Kota  Semarang dikenal  lebih  luas  sebagai  kota  tujuan wisata.    Aplikasi  ini  bertujuan  untuk memberikan  wawasan  mengenai  cagar budaya  yang  ada  di  Kota  Semarang. Dengan adanya aplikasi ini, masyarakat,
dapat mengetahui tentang cagar budaya dan kuliner yang ada di Kota Semarang melalui fitur-fitur yang disediakan.

## 2. METODE
Metode  yang  digunakan  dalam penelitian  ini  adalah metode  prototype. Menurut  Yanuarti  (2017)  (didalam Wijayanti  &  Haryadi,  2020),  “ Prototype adalah  salah  satu  pendekatan  dalam rekayasa  perangkat  lunak  yang  secara langsung mendemonstrasikan bagaimana sebuah perangkat lunak atau komponen-komponen  perangkat  lunak akan  bekerja  dalam  lingkungannya sebelum  tahapan  konstruksi  aktual dilakukan.  Model prototype digunakan sebagai  indikator  dari  gambaran  yang akan  dibuat  pada  masa  yang  akan datang  dan  membedakan  dua  fungsi eksplorasi  dan  demonstrasi”.  Berikut merupakan langkah-langkah atau tahapan dalam metode prototype :
1. Communication atau  komunikasi dan  pengumpulan  data  awal,  yaitu analisis terhadap kebutuhan pengguna.
2. Quick plan , yaitu tahapan perencanaan kebutuhan.
3. Modelling  Quick  Design ,  tahapan pembuatan design.
4. Pembentukan prototype , yaitu pembuatan  perangkat prototype termasuk pengujian dan penyempurnaan.
5. Deployement  Delivery  &  Feedback , yaitu  mengevaluasi prototype dan memperhalus  analisis  terhadap kebutuhan  pengguna.  Perbaikan prototype ,  yaitu  pembuatan  tipe yang  sebenernya  berdasarkan  hasil dari evaluasi prototype dan selanjutnya  produksi  akhir,  yaitu memproduksi  perangkat  secara benar  sehingga  dapat  digunakan oleh pengguna.

## 3. KERANGKA TEORI
3.1. Figma
Figma adalah salah satu design tool
yang biasanya digunakan untuk membuat  tampilan  aplikasi  mobile, desktop,  website  dan  lain-lain.  Figma bisa  digunakan  di  sistem  operasi windows,  linux  ataupun  mac  dengan terhubung  ke  internet.  Figma  memiliki keunggulan  yaitu untuk pekerjaan yang sama  dapat  dikerjakan  oleh  lebih  dari satu  orang  secara  bersama-sama walaupun  ditempat  yang  berbeda.  Hal tersebut bisa dikatakan kerja kelompok dan  karena  kemampuan  aplikasi  figma tersebut  lah  yang  membuat  aplikasi  ini menjadi  pilihan  banyak UI/UX  designer untuk  membuat prototype website  atau aplikasi  dengan  waktu  yang  cepat  dan efektif.

## 3.2. UI/UX
User Interface dan User Experience (UI/UX)  memiliki  peranan  penting dalam  pembuatan  sebuah  aplikasi, karena  desain  pada  sebuah  aplikasi harus  rapi  dan  terorganisir  sehingga pengguna dapat dengan mudah memakai fitur-fitur yang telah disediakan  oleh sebuah  aplikasi.  Desain User  Interface dan User  Experience (UI/UX)  juga  harus  sesuai  dengan kebutuhan  pengguna  dari  aplikasi  yang akan  dibangun  mulai  dari  desain tampilan,  fitur-fitur,  dan  berbagai kebutuhan lainnya. (Solikin et al., 2022)

## 3.3. User Interface
User  Interface merupakan  sistem yang  digunakan  oleh  pengguna  yang bisa  didengar,  dilihat  bahkan  disentuh (Galitz,  2002).  Maka  dapat  disimpulkan bahwa User  Interface adalah  sebuah sistem yang mengatur tamplian antarmuka sekaligus memfasilitasi pengguna  untuk  berinteraksi  dengan sistem.

## 3.4. User Experience
User  Experience adalah  sistem yang  mengatur  pengalaman  yang dirasakan pengguna terhadap penggunaan  perangkat  lunak  yang menilai tentang tingkat kemudahan dan kenyamanan  terhadap  fungsionalitas dari  sebuah  perangkat  lunak  (Utama, 2020) .

## 3.5. Elemen Dalam Desain
Elemen  desain  memiliki  4  elemen formal,  yaitu  garis,  bentuk,  warna,  dan tekstur (Landa, 2012).

## A. Garis
Titik  merupakan  bagian  terkecil dari sebuah garis, dimana titik biasanya dikenali  dengan  bentuknya  yang  bulat. Garis  dibentuk  dari  banyak  titik,  atau dapat  juga  dilihat  sebagai  titik  yang memanjang.  Garis  memiliki  banyak fungsi  pada  komposisi  dan  komunikasi, seperti mengarahkan pandangan pembaca.  Garis  dapat  berbentuk  lurus, melengkung, atau bersudut.

## B. Bentuk
Bentuk merupakan bangun dasar dua  dimensi  yang  dibuat  secara sebagian atau keseluruhan dengan garis, warna,  atau  tekstur.  Segala  bentuk memiliki  tiga  dasar,  yaitu  kotak, segitiga,  dan  lingkaran,  dengan  masing- masing  memiliki  bentuk  bervolume yaitu kubus/balok, limas, dan bola.

## C. Warna
Warna merupakan elemen desain  yang  kuat  dan  provokatif.  Pada dasarnya,  warna  merupakan  cahaya yang  terpantulkan  oleh  sebuah  benda. Jenis  media  mempengaruhi  sistem warna yang digunakan. Media layar/digital menggunakan warna primer merah, hijau, dan biru ( additive ).
Media  cetak/cat  menggunakan  warna primer  biru,  merah,  dan  kuning ( subtractive ).

## D. Tekstur
Tekstur  merupakan  kualitas sebuah  permukaan.  Tekstur  memiliki dua  jenis,  yaitu  tekstur  taktil  dan tekstur visual. Tekstur taktil merupakan tekstur  nyata  yang  dapat  diraba, sedangkan  tekstur  visual  merupakan ilusi tekstur yang hanya dapat dilihat
3.6. Pengujian Sistem Pengujian sistem merupakan proses mengeksekusi system perangkat lunak  untuk  menentukan  apakah system  perangkat  lunak  tersebut  cocok dengan  spesifikasi  sistem  dan  berjalan sesuai dengan
lingkungan
yang diinginkan.  Pengujian  sistem  sering diasosiasikan dengan pencarian bug, ketidaksempurnaan program,
kesalahan  pada  baris  program  yang menyebabkan  kegagalan  pada  eksekusi sistem perangkat lunak (Al Fatta, 2007).
Pengujian  dilakukan  dengan  metode Black  Box  Testing.  Pengujian blackbox adalah metode pengujian yang berfokus  pada  apakah  unit  program memenuhi kebutuhan (requipment) yang disebutkan  dengan  spesifikasi.  Pada blackbox  testing ,  cara  pengujian  hanya dilakukan  dengan  menjalankan  atau mengeksekusi unit atau modul, kemudian diamati apakah hasil dari unit itu sesuai dengan  proses  bisnis  yang  diinginkan (Al Fatta, 2007). Tahap pengujian objek yaitu  melakukan  pengujian  dengan menggunakan  metode  blackbox  testing dengan  teknik equivalence  partitioning, hasil  pengujian  dengan  mencari  nilai presentase seluruh tabel dengan rumus:
Keterangan:
F = Frekuensi pengujian
J = Jumlah pengujian Y = Nilai presentase

## 4. PEMBAHASAN
Proses ini merupakan tahap awal proses  editing,  mulai  dari  mengakses website  figma  dan  menentukan  aset yang dibutuhkan.
Mulai dari memasukkan  gambar,  logo,  text,  hingga menentukan posisi tombol yang akan di gunakan dalam aplikasi ini.

## 4.1. Proses desain
Gambar 1.  Tampilan Login
Gambar  2.  Tampilan  Login  Menu Utama

## Gambar  3.  Menu  Utama  Cagar
Budaya
Gambar  4.  Tampilan  Informasi Candi Tugu
Gambar  5.  Tampilan  Cagar  Budaya Candi Tugu
Gambar 6. Menu Utama Kuliner
Gambar  7.  Menu  Tampilan  Kuliner Soto Semarang
Gambar 8. Tampilan Informasi Soto Semarang
Gambar  9.  Tampilan  Rekomendasi Tempat Soto Semarang
Gambar  10  .  Tampilan  Lokasi  Soto Semarang
Gambar 11. Menu Utama Penginapan
Gambar 12. Menu Tampilan Rekomendasi Penginapan
Gambar  13.  Tampilan  Lokasi Penginapan
Gambar 14. Menu Utama Profil
Gambar  15.  Tampilan  Aplikasi Semarang Virtual Tourism
Hasil  tampilan  menggunakan smartphone Hasil desain Aplikasi Semarang Virtual Tourism telah dihasilkan diperlihatkan pada gambar 11
Gambat  11.  Tampilan  desain  pada smartphone

## 5. Analisis Desain
Pada  Tahap  pengujian equivalence partitioning dilakukan dengan menganalisis  semua  tampilan  desain Aplikasi  UI/UX  Semarang  Virtual
Tourism.  Jumlah  semua  tampilan aplikasi  ada  15  tampilan,  setiap tampilan  aplikasi  diberikan  kode, sehingga kode tampilan mulai dari kode A  sampai  kode  O,  dibawah  ini merupakan  tabel  pengujian  halaman login admin dengan kode A.
Tabel 1: Skenario Pengujian Halaman Login
Kode Skenario Pengujian Hasil yang diharapkan Hasil pengujian Status A01 Username dan password tidak diisi, klik tombol Login Sistem akan Menolak dan menampilkan pesan “Username cannot be blank Password cannot be blank” Sesuai yang diharapkan Valid A02 Mengisi username = test dan password = (kosong), kemudian klik tombol Login Sistem akan menolak dan menampilkan pesan “ Password cannot be blank” Sesuai yang diharapkan
Valid
A03 Username = (kosong), dan mengisi password= test , kemudian klik tombol Login
Sistem akan menolak dan menampilkan pesan “Username cannot be blank Sesuai yang diharapkan Valid A04 Mengisi username dan/atau password yang  salah,  lalu klik tombol Login Sistem akan menolak dan menampilkan pesan “ Incorrect username and password” Sesuai yang diharapkan
Valid
A05 Mengisi username = test dan password = test yang sesuai, kemudian, klik tombol Login Sistem menerima akses login dan kemudian menampilkan halaman utama admin Sesuai yang diharapkan Valid Tabel 2 : Presentase Pengujian Halaman Login Status Pengujian Frekuensi Jumlah Pengujian Presentase (%) Valid 5 5 100 Tidak Valid 0 0 0 Defect 0 0 0
Berdasarkan  hasil  presentase  pada Tabel 2 maka dapat disimpulkan bahwa pengujian pada kode A yang berisikan 5 pengujian  hasilnya  100%  valid  atau sesuai.  Berdasarkan  hasil semua pengujian  tampilan  desain  Aplikasi mulai  dari  kode  A  sampai  Kode  O berdasarkan kategori sebagai berikut :
Tabel 3 :  Pengujian semua tampilan Desain Aplikasi
No Status Jumlah Kode Ketetangan 1 Valid 75 Semua kode tidak mendapatkan hasil sesuai yang diharapkan dan semua fungsi berjalan dengan baik 2 Tidak Valid 1 Pada kode pengujian V001 terdapat pesan error Page Not Found (#404). Jenis tidak valid : Fungsi tidak benar 3 Defect 2 Pada kode pengujian AB001 dan AC001 tampilan pada halaman tidak rapih, tidak ada menu pencarian dan tidak ada tombol kembali atau menu Home pada menu bar. Jenis defect : Fungsi – fungsi yang hilang
Jumlah Pengujian 78
Dari  hasil  pengujian  yang  telah dilakukan  yakni  dengan  pengujian perhitungan presentase berdasarkan  status  pengujian  dari tabel  3  diketahui  bahwa  dari  78 pengujian  dengan  total  pengujian 75  valid,  1  tidak valid  dan  terdapat 2  Defect,  sehingga  dapat  diperoleh presentase  senilai  96.15%  valid,
1,28%  tidak  valid  dan    sebesar 2,56% terdapat defect.

## 6. KESIMPULAN
Berdasarkan  hasil  observasi dalam  mendapatkan  informasi  seputar
pariwisata,  cagar  budaya,  kuliner,  dan penyedia  layanan  penginapan  yang  ada di  Semarang,  serta  perancangan  dan implementasi desain User Interface (UI) dan  User  Experience  (UX) aplikasi Semarang  Virtual  Tourism  dapat disimpulan sebagai berikut:
1. Hasil  pengujian  desain  Aplikasi UI/UX  Semarang  Virtual  Tourism dengan equivalence partitioning terdapat 75  valid,  1  tidak  valid  dan terdapat  2  Defect,  dalam  presentase terdapat  96.15%  valid,  1,28%  tidak valid  dan    sebesar  2,56%  terdapat defect.
2. Platfrom  Figma  dapat  digunakan untuk  mendesain  tampilan  aplikasi Semarang  Virtual  Tourism  dengan user  interface  yang  minimalis,
modern dan elegan,
3. Hasil  dari  penelitian  ini  berupa prototype aplikasi  Semarang  Virtual Tourism  yang  kompatible  dengan mobile device.

## References
Al Fatta ,  Hanif. Analisis  dan  Perancangan  Sistem  Informasi .  Yogyakarta:  Andi. 2007
Galitz, W. O. (2002). The Essential Guide to User Interface (R. Elliot (ed.)). Robert Ipsen.
Hendro, E. P. (2015). Pelestarian Kawasan Konservasi di Kota Semarang. Jurnal Konservasi Cagar Budaya , 9 (1), 17–28. https://doi.org/10.33374/jurnalkonservasicagarbudaya.v9i1.159
Jungherr, A. (2019). Book Review: Social Theory after the Internet: Media, Technology and Globalization.  In The  International  Journal  of  Press/Politics (Vol.  24,  Issue  1). https://doi.org/10.1177/1940161218808373
Landa, R. (2012). Essential Graphic Design Solutions . Cengage Learning.
Muhyidin,  M.  A.,  Sulhan,  M.  A.,  Sevtiana,  A.,  Catur,  U.,  Cendekia,  I.,  &  Cirebon,  K.  (2020).
PERANCANGAN UI / UX APLIKASI MY CIC LAYANAN INFORMASI AKADEMIK MAHASISWA . 10 (2), 208–219.
Nurdyansyah.  (2017).  Sumber  Daya  dalam  Teknologi  Pendidikan. Sumber  Daya  Dalam Teknologi  Pendidikan ,  1–22.  http://eprints.umsida.ac.id/1625/1/Sumber  Daya  dalam Teknologi Pendidikan.pdf
Solikin,  I.,  Mukti,  A.  R.,  Huda,  N.,  Ansori,  A.,  &  Dharmawan,  P.  (2022).  KOMMAS :  Jurnal Pengabdian  Kepada  Masyarakat  Universitas  Pamulang  PELATIHAN  DESAIN  USER INTERFACE  (  UI  )  PADA  SEKOLAH  AZHARYAH  KOMMAS :  Jurnal  Pengabdian  Kepada Masyarakat  Universitas  Pamulang. Jurnal  Pengabdian  Kepada  Masyarakat  Universitas Pamulang , 3 , 102–106.
Utama, B. S. (2020). Perancangan Ulang User Interface Dan User Experience Pada Website Cosmic Clothes. Doctoral Dissertation, Universitas Komputer Indonesia , 7–18.
Wijayanti,  D.,  &  Haryadi,  E.  (2020).  Sistem  Informasi  Penyewaan  Rumah  Kontrakan Berbasis Web Dengan Menggunakan Metode Prototype. Jurnal Interkom: Jurnal Publikasi Ilmiah Bidang Teknologi Informasi Dan Komunikasi , 15 , 16–23.