## Perancangan Ulang Tampilan Antarmuka Website Tempat Wisata Setu Babakan
Amta 1*) , Erneza Dewi Krishnasari 2 , Damar Rangga Putra 3
1,2,3 Program Studi Desain Komunikasi Visual, Fakultas Industri Kreatif dan Telematika, Universitas Trilogi email: 1 amta@mail.com, 2 erneza@trilogi.ac.id, 3 damar@trilogi.ac.id
Abstrak Perkembangan teknologi informasi telah merambah dunia pariwisata, salah satunya adalah dengan dibutuhkannya website  sebagai  media  untuk  mencari  tempat  wisata  dan  merencanakan  perjalanan.  Salah  satu  tempat  wisata  yang mempunyai  website  resmi  adalah  Perkampungan  Budaya  Betawi  Setu  Babakan,  sebuah  tempat  wisata  dimana  para pengunjung  dapat  menjumpai  hal-hal  yang  berkaitan  dengan  budaya  Betawi  seperti  rumah  adat,  kesenian,  dan  makanan. Akan  tetapi,  berdasarkan  studi  User  Acceptence  Test  kepada  pengunjung  Setu  Babakan,  website  tersebut  belum  maksimal dalam  memberikan  informasi  detail  terkait  tempat  wisata,  dan  belum  merepresentasikan  budaya  Betawi.  Untuk  itu diperlukan perancangan ulang website tersebut dengan metode usecase diagram. Hasil dari penelitian ini berupa rancangan dalam bentuk usecase diagram, wireframe dan antarmuka website.

## Kata Kunci  Perancangan Website, Wisata Setu Babakan, Usecase Diagram
Abstract – The development of information technology has penetrated the world of tourism, one of which is the need for websites as a medium for finding tourist attractions and planning trips. One tourist site that has an official website is the Betawi Cultural Village Setu Babakan, a tourist place where visitors can find things related to Betawi culture such as traditional houses, arts, and food.  based  on  a  User  Acceptence  Test  study  for  visitors  to  Setu  Babakan,  the  website  has  not  been  maximized  in  providing detailed  information  related  to  tourist  attractions,  and  does  not  yet  represent  the  Betawi  culture.  For  this  reason,  a  website redesign is required using the usecase diagram method. The results of this study are in the form of usecase diagrams, wirefra mes and website user interfaces.
Keywords – write 3-8 keywords here. Keywords separated with comma.

## I. PENDAHULUAN
Perkembangan  teknologi  informasi  yang  ada  di Indonesia  telah  menyentuh  ke  berbagai  aspek,  termasuk pariwisata.  Menurut  Fransiscus  Xaverius  Teguh,  Deputi Manajemen  Strategis  Kementrian  Pariwisata,  saat  ini calom  pengunjung  mulai  mencari  dan  menrencankan perjalanan  serta  informasi tentang tempat wisata  melalui perangkat digital [1]. Salah satu tempat wisata yang telah menggunakan  teknologi  informasi  berbentuk  website adalah  Perkampungan  Budaya  Betawi  Setu  Babakan. Tempat ini merupakan wadah bagi masyarakat yang ingin mengetahui  dan  berinteraksi  dengan  budaya  Betawi  baik fisik  maupun  non  fisik,  serta  menjadi  tempat  informasi budaya  Betawi  yang  lengkap  [2].  Website  Setu  Babakan saat ini hanya memuat informasi umum mengenai tempat tersebut,  Sedangkan  untuk  informasi  yang  lebih  detail seperti  informasi  letak,  harga  tiket,  serta  waktu  buka  dan tutup yang digunakan calon pengunjung untuk merencanakan  kunjungannya,  tidak  terdapat  di  website tersebut. Setelah melakukan User Acceptence Test kepada pengunjungtempat wisata terhadap website Setu Babakan, didapatkan  data  bahwa  pengunjung  merasa  bingung mencari informasi detail mengenai tempat wisata tersebut. Dari segi visualisasi, pengunjung juga berpendapat bahwa website  tersebut  kurang  mencerminkan  budaya  Betawi, seperti  tidak  terdapatnya  ragam  hias  maupun  ikon-ikon yang  merepresentasikan  budaya  Betawi.  Padahal,  tempat wisata  tersebut  dibuat  untuk  mempromosikan  dan
memperkenalkan  budaya  Betawi.  Oleh  karena  itu,  perlu adanya  rancang  ulang  website  Perkampungan  Budaya Betawi  Setu  Babakan  sehingga  dapat  memuat  informasi- informasi  detail  mengenai  tempat  wisata  tersebut  dan mencerminkan kebudayaan Betawi secara visual

## II. TINJAUAN PUSTAKA
Berdasarkan  hasil  uji usability pada  penggunaan website  pariwisata  di  Asia  Tenggara,    masalah usability pada website pariwisata di Indonesia lebhi besar daripada negara Singapura, Malaysia, dan Thailand sehingga perlu pengembangan  fungsional  pada konten dan  stimulus  bagi pengguna  agar  tertarik  berkunjung  ke  tempat  wisata  [3]. Sebuah  website  pariwisata  harus  mampu  memenuhi kebutuhan  user  yang  berasal  dari  lokasi,  budaya,  serta kebiasaan yang berbeda. Berdasarkan penelitian sebelumnya  [4][5][6],  terdapat  beberapa  kebutuhan  fitur fungsional  yang  perlu  ditampilkan  dalam  website, diantaranya:
a. Hal-hal yang dapat dilakukan dan dilihat di tempat wisata tersebut
b. Foto-foto terbaru
c. Informasi  tentang  transportasi  menuju  tempat wisata
d. Informasi tempat makan
e. Informasi tentang penyedia akomodasi
Berdasarkan penelitian sebelumnya [7][8][9].
pengembangan sebuah system informasi melalui beberapa tahapan, yaitu:
JISA (Jurnal Informatika dan Sains) (e-ISSN: 2614-8404) is published by Program Studi Teknik Informatika, Universitas Trilogi under Creative Commons Attribution-ShareAlike 4.0 International License
a. Analisis  Kebutuhan,  yaitu  dengan  melakukan wawancara kepada user
b. Perancangan sistem, yaitu menerjemahkan kebutuhan    dengan  menggunakan usecase diagram.
Untuk  perancangan  visualisasi,  terdapat  beberapa tahapan yang harus dibuat [10], yaitu:
a. Pembuatan Wireframe , yaitu kerangka desain tata letak sederhana  yang  menjadi acuan penempatan user interface .
b. Perancangan User Interface
c. Pengaplikasian,  yaitu  menggabungkan  hasil  dari proses  analisis  kebutuhan  dan  perancangan system  dengan  perancagan wureframe dan user interface
Dalam  pengembangan  sebuah  sistem  informasi, diperlukan  analisis  kebutuhan  agar  kebutuhan  fungsional yang  diinginkan  oleh user dapat  terpenuhi.  Analisis kebutuhan ini dapat ditentukan dengan membuat Use Case Diagram dari user.

## III. METODOLOGI PENELITIAN

## A. Analisis Kebutuhan
Pada  tahapan  ini  akan  dilakukan  analisis  kebutuhan dari    percancangan  desain  antarmuka  website  tempat wisata Setu Babakan. Adapun hal-hal yang akan dianalisis antara  lain  halaman  yang  akan  menampilkan  informasi mengenai  potensi  wisata,  analisis  komposisi  warna  dan tata  letak  komponen  pada  website.  Selain  itu  akan dianalisis fungsi-fungsi yang tersedia pada setiap halaman website menggunakan usecase diagram .

## B. Perancangan Antarmuka Website
Pada  tahapan  ini  akan  dilakukan  perancangan antarmuka website yang berbasis kepada usecase diagram yang  telah  dihasilkan  pada  tahapan  pertama  yang  akan disajikan menggunakan wireframe.

## C. Penerapan Hasil Rancangan
Pada  tahapan  ini  akan  direalisasikan  hasil  rancangan pada  tahapan  kedua  menjadi  antarmuka  website.  Adapun tools yang digunakan adalah Adobe XD.

## IV. HASIL DAN PEMBAHASAN
Berdasarkan User Acceptance Test pada 30 responden dengan  rentang  usia  17-22  tahun  menggunakan  website Setu  Babakan  yang  sudah  ada,  Pengunjung  merasa website mempunyai tampilan yang kurang menarik karena visualisasi  website  tersebut  juga  kurang  mencerminkan budaya betawi. Tidak ada nya icon dan button search pada website  juga  membuat  pengalaman  pengguna  sulit  dalam mencari  informasi  yang  diinginkan.  Hasil  dari  analisis kebutuhan  terhadap  perancangan  website  antara  lain sebagai berikut.
a. Menyediakan  informasi  menarik  mengenai  harga tiket, waktu buka dan tutup serta berbagai atraksi, acara  dan  festival  yang  bisa  dijumpai  di Perkampungan Budaya Betawi.
b. Memuat  pengetahuan  mengenai  budaya  Betawi, mulai dari sejarah, masyarakat, berbagai kesenian, sampai dengan makanan tradisional.
c. Menyediakan  formulir  mengenai  tentang  Setu
Babakan,  Pengisian  Acara  dan  Festival,  dan Informasi lebih lanjut.
d. Memuat  peta  lokasi  menuju  Cagar  Budaya  Setu Babakan.
Berikut  adalah  hasil  dari  analisis  kebutuhan  yang disajikan dalam bentuk usecase diagram.
Gambar 4.1. Usecase Diagram Website Wisata Setu Babakan
Halaman Beranda, berisi navigasi utama. Pada website sebelumnya, navigasi yang terdapat pada header memiliki pilihan yang terlalu banyak yaitu Home, About Us, Betawi Culture,  Things  To  Do,  Events,  Editorials,  dan Merchamts. Pada  hasil  redesain,  navigasi  dibuat  lebih sederhana  dengan  menampilkan  sedikit  pilihan,  yaitu Beranda, tiket, Tentang Kami, dan Kontak.
Gambar 4.1. Wireframe Halaman Beranda
Halaman  Keterangan  Tiket  Masuk,  berisi  tentang keterangan  mengenai  harga  tiket  parker  dan  tiket  masuk wahana yang ada di Setu Babakan.
JISA (Jurnal Informatika dan Sains) (e-ISSN: 2614-8404) is published by Program Studi Teknik Informatika, Universitas Trilogi under Creative Commons Attribution-ShareAlike 4.0 International License
Gambar 4.3. Wireframe Halaman Peta Lokasi
Halaman  kontak,  merupakan  halaman  dimana usera dapat memberikan pertanyaan atau masukan kepada pihak pengelola Kawasan Budaya Betawi Setu Babakan.
Gambar 4.4. Wireframe Halaman Kontak
Halaman  Budaya  Betawi,  berisi  tentang  informasi mengenai  kebudayaan  Betawi  yang  terdapat  di  Setu Babakan.
Gambar 4.5. Wireframe Halaman Kebudayaan dan Adat Betawi
Pada  tahap  ini,  rancangan  berdasarkan  konsep  warna, huruf,  dan  ikon  yang  akan  digunakan  dalam  website. Semua  visualisasi  tersebut  dibuat  agar  mencerminkan budaya  Betawi.  Moodboard,  merupakan  panduan  dalam membuat  sebuah  karya,  sehingga  proses  kreativitas  yang dibuat tidak menyimpang dari tema yang telah ditentukan. Pada  moodboard  ini  menggunakan  keyword:  Ramah, Kehangatan  dan  Unik.  Dari  hasil  pencarian  tentang keyword tersebut, muncul gambar-gambar  yang  memiliki warna  dominan  hijau,  coklat,  merah  serta  kuning  dan ekspresi yang tidak kaku.
Gambar 4.6. Moodboard Perancangan Website
Typeface atau  jenis  huruf  yang  digunakan  dalam perancangan ini, pada bagian Header font yang digunakan
Halaman  Informasi  Peta  Lokasi,  berisi  tentang  peta tempat wahana atau merchant yang ada di dalam kawasan Setu  Babakan  sehingga  mempermudah user untuk mencari  wahana  atau merchant yang  diinginkan.  Pada halaman  ini  juga  terdapat  informasi  tentang  stasiun terdekat dari tempat wisata.
JISA (Jurnal Informatika dan Sains) (e-ISSN: 2614-8404) is published by Program Studi Teknik Informatika, Universitas Trilogi under Creative Commons Attribution-ShareAlike 4.0 International License
adalah  Source  Sans  Pro.  Sedangkan  pada  bagian  isi  atau body  menggunakan  font  Lato.  Font  ini  digunakan  untuk menampilkan  huruf  yang  minimalis,  bersih,  dan  mudah dibaca oleh user.
Gambar 4.7. Huruf Source Sans Pro
Gambar 4.8. Jenis Huruf Lato
Ikon,  dibuat  untuk  perancangan  ulang  website pariwisata Setu Babakan  ini terinspirasi  dari  ikon budaya betawi, seperti ornamen gigi balang yang disederhanakan, menggunakan dominan warna kuning dan hijau dari warna khas kebudayaan betawi.
Gambar 4.9. Proses Pembuatan Ikon
Berikut  adalah  tampilan  website  dari  halaman  awal. Pada  halaman  ini  menampilkan  informasi  mengenai  situs Setu  Babakan,  navigasi  website  dan  katalog  potensi wisata.
Gambar 4.10. Antarmuka Halaman Home
Berikut  adalah  tampilan  dari  halaman  keterangan harga tiket yang menyajikan informasi wahana wisata dan harga masuk.
Gambar 4.11. Antarmuka Halaman TIket
Halaman  Informasi  Peta  Lokasi,  pada  halaman  ini, user dapat  mengakses  informasi  dengan  cara  meng-klik gambar  pada  peta,  sehingga  dapat  muncul  informasi mengenai tempat yang diinginkan.
JISA (Jurnal Informatika dan Sains) (e-ISSN: 2614-8404) is published by Program Studi Teknik Informatika, Universitas Trilogi under Creative Commons Attribution-ShareAlike 4.0 International License
Gambar 4.11. Antarmuka Halaman Peta Lokasi
Pada  halaman  ini  terdapat  pula  panduan  transportasi untuk dapat sampai ke tempat wisata. Halaman berikutnya menyajikan halaman kontak untuk memfasilitasi pengunjung yang akan memberikan komentar.
Gambar 4.13. Antarmuka Halaman Kontak
Berikut  adalah  halaman  detil  kesenian  betawi  yang mendeskripsikan kebudayaan betawi dan memuat beberapa galeri foto.
Gambar 4. 14. Antarmuka Halaman Kesenian Betawi
V. PENUTUP
Berdasarkan hasil dari perancangan antarmuka website tempat  wisata  Setu  Babakan,  maka  dapat  disimpulkan bahwa  hasil  rancangan  ini  sudah  disesuaikan  dengan kebutuhan  untuk  mengenalkan  potensi  lokal  dan  budaya betawi yang ada pada Setu Babakan. Hasil dari rancangan ini  dapat  dijadikan  referensi  untuk  IT  Developer  dalam penyusunan kode program website wisata Setu Babakan.
DAFTAR PUSTAKA
[1] L.  Rizkinaswara,  “Pentingnya  Teknologi  dalam  Sektor Pariwisata –  Ditjen  Aptika.”  [Online].  Available: https://aptika.kominfo.go.id/2019/04/pentingnya-teknologi- dalam-sektor-pariwisata/. [Accessed: 23-Sep-2019].
[2] S.  Babakan,  “Setu  Babakan  Betawi  _  Website  Resmi Perkampungan  Budaya  Betawi  Setu  Babakan.”  [Online]. Available: http://www.setubabakanbetawi.com/. [Accessed: 23-Sep-2019].
[3] L.  D.  Farida,  “Pengukuran  User  Experience  Dengan Pendekatan  Usability  [Kasus:  Website  Pariwisata  Di  Asia Tenggara],”  Semin.  Nas.  Teknol.  Inf.  dan  Multimed.,  no. February 2016, pp. 6–7, 2016.
[4] F.  Abidi  and  N.  Ramadhani,  “Perancangan  Website Promosi  Wisata  Jawa  Timur  dengan  Konsep  the  Guide  to the  Bold  Diversity,”  J.  Tek.  POMITS,  vol.  13,  no.  13,  pp.
1–5, 2012.
[5] Supriyanta  and  K.  Nisa,  “Perancangan  Website  Desa Wisata Karangrejo Sebagai Media Informasi dan Promosi,” Bianglala Inform., vol. 3, no. 1, pp. 35–40, 2015.
[6] F. Fransisca, Y. Ceng Giap, and J. Arifin, “Aplikasi Media Informasi Website Pengenalan Tempat Pariwisata Belitung,” J. Sisfokom (Sistem Inf. dan Komputer), vol. 4, no. 1, p. 1, 2015, doi: 10.32736/sisfokom.v4i1.128.
[7] Y.  Yaddarabullah,  M.  s.  Hasbullah,  and  D.  Nugraha, “Pengembangan Sistem Informasi Pembiayaan Pada BMT- UGT Sidogiri Cabang,” Incomtech, vol. 3, no. 2, pp. 42–51, 2014.
JISA (Jurnal Informatika dan Sains) (e-ISSN: 2614-8404) is published by Program Studi Teknik Informatika, Universitas Trilogi under Creative Commons Attribution-ShareAlike 4.0 International License
[8] A. R. Yudiantika, W. W, and B. S. Hantono, “Perancangan Antarmuka  Layanan  Informasi  Wisata  dan  Kuliner  di  DIY Berbasis  Web  dan  Mobile  Web,”  Semin.  Nas.  Sci.  Eng. Technol., no. June 2014, 2012.
[9] N.  M.  Indah  Tri  Rejeki,  “Perancangan  Sistem  Informasi Pariwisata  Berbasis  Web  Di  Dinas  Kebudayaan  Dan Pariwisata  Kabupaten  Muna,”  J.  Teknol.  Inf.  dan  Komun. STMIK ProVisi Semarang, pp. 49–60, 2011.
[10] E.  D.  Krishnasari,  D.  K.  Visual,  and  U.  Trilogi,
“Perancangan  redesain  antarmuka  landing  page  web inablues  berbasis  desain  web  responsif  redesign  of  landing page  web  inablues  interface  design  based  on  responsive web design,” vol. 7, no. 1, pp. 31–37, 2018.
JISA (Jurnal Informatika dan Sains) (e-ISSN: 2614-8404) is published by Program Studi Teknik Informatika, Universitas Trilogi under Creative Commons Attribution-ShareAlike 4.0 International License