Abstrak—Potensi besar sektor pariwisata di Indonesia mengakibatkan  ketatnya  persaingan  usaha  di  bidang  tour  dan travel.  Hal  ini  menyulitkan  bagi  pemilik  usaha  skala  UMKM karena sebagian besar pangsa pasar dikuasai oleh tour dan travel skala  besar.  Di  sisi  lain  potensi  pasar  yang  ada  memungkinkan media  berbasis  digital  agar  dapat  bersaing  dalam  kondisi tersebut.  Pemilik  usaha  tour  dan  travel  skala  UMKM membutuhkan  desain  media  yang  tepat  untuk  memperkenalkan kualitas jasa  yang  dimiliki  kepada  wisatawan  sebagai penggunanya. Metode deep interview dan customer journey map dilakukan untuk memetakan kebutuhan pengguna. Selain itu juga dilakukan  studi  literatur  tentang  media  user  interface,  promosi digital  dan  e-commerce,  aplikasi  mobile  eksisting,  dan karakteristik wisatawan yang didapat dari penelitian sebelumnya,  buku,  jurnal,  dan  artikel.  Keseluruhan  proses perancangan  menggunakan  metode desain kontekstual kemudian hasilnya  dirangkum,  diolah  secara  keseluruhan  dan  disintesis menjadi  sebuah  konsep  desain  interface  aplikasi  mobile  sebagai dasar  dari  perancangan  ini.  Aplikasi  mobile  ini  menggunakan sistem operasi android. Desain yang dihasilkan meliputi pemetaan kebutuhan  pengguna,  dan  desain  user  interface  yang  dirancang berdasarkan  riset.  Selain  itu,  UMKM  tour  dan  travel  juga mendapatkan  perencanaan  strategi  promosi  yang  terintegrasi dengan  konten  di  dalam  aplikasi.  Konsep  user  interface  aplikasi mobile dapat diterapkan dan dikembangkan ke berbagai daerah. Adanya  desain  user  interface  aplikasi  mobile  ini  diharapkan dapat  menyampaikan  informasi  kualitas  jasa  yang  dimiliki  oleh UMKM  tour  dan  travel  dapat  kepada  wisatawan  sebagai pengguna dari aplikasi mobile.
Kata  Kunci—user  interface,  aplikasi  mobile,  marketplace,  tour and travel, UMKM.

## I. PENDAHULUAN
ARIWISATA  salah  satu  sektor  industri  yang  berpotensi besar  di  Indonesia.  Hal  ini  dibuktikan  dengan  jumlah wisatawan  mancanegara  ke  Indonesia  pada  tahun  2017 mencapai  14  juta  lebih  [1],  sedangkan  wisatawan  domestik pada  bulan  Januari-Oktober  2017  sudah  mencapai  lebih  dari 252  juta  wisatawan  [2].  Jumlah  ini  diprekdisikan  akan  terus meningkat seiring perubahan perilaku masyarakat saat ini yang menjadikan  berwisata sebagai bagian dari gaya hidup. Hal ini kemudian  juga  menyebabkan  permintaan  dan  kebutuhan  yang beragam  dari  masyarakat,  terutama  yang  berkaitan  dengan sektor pariwisata.
Meningkatnya  antusiasme  masyarakat  juga  menjadi  alasan munculnya  banyak  biro tour dan travel baru.  Disamping  itu ternyata 70% dari pasar yang ada sudah dikuasai oleh pemilik usaha  skala  besar  [3].  Hal  ini  membuat  persaingan  yang  ada semakin ketat bagi pemilik usaha tour dan travel skala UMKM sehingga  masing-masing  biro tour dan travel saling  berlomba mendapatkan  konsumen  menggunakan  berbagai  jenis  media promosi.
Pasar Indonesia memiliki potensi yang bagus untuk kegiatan promosi digital .  Hal  ini  didukung  oleh  data  dari  Kominfo tahun 2017 yang menyatakan bahwa jumlah pengguna internet di Indonesia menduduki peringkat 6 di dunia dan 70% adalah pengguna  ponsel  yang  sebagian  besar  dapat  dengan  mudah terhubung  ke  internet  [4].  Ini  adalah  peluang  bagi  aplikasi mobile sebagai pilihan media promosi digital yang tepat untuk memperkenalkan  kualitas  UMKM tour dan travel kepada masyarakat.
Perancangan  aplikasi mobile sendiri  meliputi  beberapa  hal seperti  perancangan  sistem  teknis  dan  manajemen  aplikasi, user  experience,  user  interface, hingga  pengembangan promosi.  Dari  beberapa  hal  tersebut, user  interface adalah salah  satu  yang  aspek  yang  penting  karena  berhubungan langsung  dengan  wisatawan  sebagai  pengguna.  Kemudahan dan  keberhasilan  pengguna  menggunakan  aplikasi  dan menjalankan  tugasnya  di  dalam  aplikasi  dengan  baik  akan berdampak pada kepuasan pengguna hingga brand positioning aplikasi  di  tengah  media  yang  sejenis.  Fungsinya  sebagai media yang menyampaikan informasi aplikasi dan pengalaman pengguna  adalah  faktor  penentu  keberhasilan  sebuah  aplikasi mobile yang harus dirancang dengan baik.

## II. URAIAN PENELITIAN

## A. User Interface
ISO  menetapkan  standar  definisi  untuk user  interface (UI) yaitu  semua  komponen  sistem  interaktif  ( software amaupun hardware )  yang  meyediakan  informasi  dan  kontrol  kepada pengguna  untuk  menyelesaikan  tugas  tertentu  dengan  sistem interaktif.  Beberapa  elemen  yang  termasuk  dalam  UI  adalah window, icon, menu, pointer .
Selain aspek estetika yang tampak secara visual, desain user interface harus dapat menyampaikan fungsinya. Menurut studi Nielsen, usability adalah  tujuan  akhir  dari  desain user

## Perancangan User Interface Aplikasi Mobile

## Sebagai Media Promosi Digital UMKM Tour dan Travel
Atnis Kurnia Rianingtyas dan Kartika Kusuma Wardani Departemen Desain Produk, Fakultas Arsitektur Desain dan Perencanaan, Institut Teknologi Sepuluh Nopember (ITS) e-mail : kartikawardani.its@gmail.com; atniskr@gmail.com
P
interface .  Komponen  yang  menentukan usability sebuah desain  adalah  kemudahan  untuk  dipelajari,  efisiensi,  ingatan pengguna  terkait  fungsi  aplikasi  setelah  beberapa  kali menggunakan,  kesalahan  yang  dilakukan  pengguna,  dan kepuasan pengguna.

## B. Aplikasi Mobile
Untuk  menentukan  jenis  aplikasi  yang  akan  dibuat diperlukan  informasi  mengenai  jenis  aplikasi mobile yaitu aplikasi native , aplikasi web , dan aplikasi hybrid . Dari analisis tentang kelebihan, kekurangan, dan kesesuaian dengan konsep perancangan  sehingga  aplikasi native adalah  yang  akan dikembangkan.  Salah  satu  kelebihannya  adalah  optimalisasi pengalaman  yang  akan  didapatkan  oleh  pengguna  melalui grafis, gambar, skrip dan data aplikasi.[5]

## C. Digital Marketplace
Sebagai pengembangan dari e-commerce, beberapa komponen  utama  digital  marketplace  adalah  memfasilitasi transaksi antara penjual dan pembeli secara online, membantu mempromosikan barang dari penjual dan menyediakan tempat berjualan,  dan  pembeli  dapat  melakukan  pembelian  langsung saat  itu  juga  dengan  menekan  tombol  “beli”  kemudian mentransfer  sejumlah  uang.  Marketplace  menjadi  sebuah media yang memfasilitasi banyak pedagang untuk berjualan.

## D. Promosi Digital
Promosi  digital  adalah  bentuk  kegiatan  promosi  dengan menggunakan  media  interaktif  dan  media  internet  untuk menghubungkan  penjual  dengan  pembeli  yang  sudah teridentifikasi  [6].  Kelebihannya  adalah  profil  pembeli  yang sudah  spesifik  sehingga  dapat  mengoptimalkan  konten  dan desain sesuai dengan karakter pembeli.

## E. UMKM Tour dan Travel
Menurut  Undang-undang  Nomor  20  Pasal  1  Tahun  2008, UMKM  yang  dimaksud  dengan  usaha  mikro,  usaha  kecil  dan usaha menengah adalah usaha ekonomi produktif yang berdiri sendiri,  yang  dilakukan  oleh  orang  perorangan  atau  badan usaha  yang  bukan  merupakan  anak  perusahaan  atau  bukan cabang  perusahaan  yang  dimiliki,  dikuasai,  atau  menjadi bagian  baik  langsung  maupun  tidak  langsung  dari  Usaha Menengah  atau  Usaha  Besar  yang  memenuhi  kriteria  sesuai dengan  jenis  usahanya  (usaha  mikro,  usaha  kecil,  atau  usaha menengah).

## III. METODOLOGI PERANCANGAN

## A. Alur Penelitian
Penelitian  keseluruhan  untuk  merancang  aplikasi mobile menggunakan metode desain kontekstual yang terdiri dari dua tahap  yaitu  tahap  kebutuhan  dan  solusi,  dan  tahap  validasi konsep.  Tahap  kebutuhan  dan  solusi  bertujuan  untuk mengumpulkan  data  kemudian  merancang  konsep  aplikasi. Alur penelitian dapat dilihat lebih lengkap pada gambar 1.
Pada tahapan desain kontekstual, perancangan UI masuk ke dalam  tahapan  validasi  konsep  yang  ekseukusi  dengan mempertimbangkan  hasil  riset  pada  tahap  kebutuhan  dan solusi.
Gambar 1.  Alur perancangan.

## B. Deep Interview
Hal  pertama  yang  dilakukan  untuk  memetakan  kebutuhan pengguna  adalah deep  interview. Metode deep  interview bertujuan  untuk  mengumpulkan  data  tentang  karakter, kebiasaan,  dan  kebutuhan  pengguna.  Hal  ini  nantinya menentukan gaya desain user interface yang akan dirancang. Beberapa  narasumber  dipilih  sebagai sample  user dengan tiga  kriteria  yaitu:  belum  menikah  dan  belum  bekerja,  belum menikah dan sudah bekerja, sudah menikah dan sudah bekerja.

## C. Costumer Journey Map
Data  kebutuhan  pengguna  didapatkan  dengan  mempelajari costumer  journey dari  produk  eksisting.  Hasil  dari  penelitian ini  kemudian  dicari insight dan  dilakukan  evaluasi  peluang. Pada  penelitian  ini  eksisting  yang  digunakan    adalah  aplikasi mobile Ezy  Travel. Sample  user yang  diambil  datanya memiliki  kriteria  yang  sama  dengan  narasumber deep interview .

## D. Studi Literatur
Studi  literatur  bertujuan  untuk  menambah  wawasan  penulis tentang  dasar  perancangan,  teori-teori,  dan  perkembangan yang  berguna  untuk  proses  pembuatan  desain  dan  iterasi prototip.  Studi  ini  dapat  dilihat  pada  bab  sebelumnya  tentang studi acuan.

## E. Studi Eksisting
Studi  eksisting  bertujuan  untuk  mempelajari  produk  serupa atau  yang  terkait  untuk  kemudian  dievaluasi  dan  dijadikan bahan  pertimbangan  dalam  melalukan.  Beberapa  eksisting yang dipelajari adalah yang berhubungan dengan marketplace atau  pariwisata  yaitu  Traveloka,  Trip  Advisor,  Kkday,  dan Tokopedia.

## F. User Persona
Persona  sangat  bermanfaat  untuk  efektifitas  penelitian terhadap  pelanggan  dengan  membuat  profil  fiksi  pengguna. Data  untuk  membuat  persona  pengguna  didapatkan  dari rangkuman metode sebelumnya dari mulai studi literatur, deep interview hingga customer  journey  map .  Detail  persona aplikasi mobile dapat dilihat pada gambar 2.
Gambar 2. User Persona.

## G. Prototyping
Setelah  penelitian  yang  menghasilkan  rancangan  pengguna experience dan  ditentukan  persona  dari  aplikasi mobile , tahapan  selanjutnya  adalah  pembuatan prototype aplikasi. Proses  pembuatan  dilakukan  langsung  pada software digital seperti pada gambar  3.
Proses  pembuatan prototipe dimulai  dengan  pembuatan alternatif 1 (gambar 11) yang kemudian dievaluasi dengan user test . Setelah proses perbaikan desain maka dihasilkan alternatif 2  dan  alternatif  3  (gambar  11).  Dari  kedua alternatif tersebut, kemudian didapatkan desain akhir user interface aplikasi.
Gambar 3.  Proses prototyping pembuatan wireframe aplikasi.

## H. Riset Eksperimental
Riset  eksperimental  atau Usability Testing dilakukan  pada tahap User Testing .  Metode  ini  bertujuan  untuk  mendapatkan masukan  dan  kritik  dari sample user maupun  ahli. User  test dilakukan  dua  kali,  yang  pertama  pengujian  prototip  desain user interface sebelum  dilanjutkan  ke  tahap  pengembangan selanjutnya  adalah  pengujian  desain  aplikasi  yang  sudah berfungsi.

## IV. KONSEP DESAIN

## A. Target Pengguna
Target  utama  dari  perancangan  ini  adalah  dewasa  muda yang  sudah  mempunyai  penghasilan  berusia  24-35  tahun, menyukai  kegiatan travelling ,  dan  ingin  berlibur  dengan mudah  dan  nyaman.  Target  sekundernya  adalah  tahap  usia peralihan antara remaja dan dewasa yaitu 18-23 tahun dengan asumsi  mereka  juga  menyukai  kegiatan travelling namun kemampuan finansial lebih terbatas.

## B. Keywords
Setelah  mensintesis  seluruh  proses  penelitian  mulai  dari fenomena, rumusan masalah, batasan masalah, hasil penelitian ( deep  interview , customer  journey  map ),  mendefinisikan karakter  pengguna,  maka  dirumuskan  kata  kunci  dari rancangan aplikasi yaitu travel, modern dan informative . Dari keywords tersebut,  nama  aplikasi mobile adalah “Touraway”  berasal  dari  gabungan  kata tour dan getaway . Perancangan desain user interface akan berpedoman pada kata kunci dan nama aplikasi dalam mengolah visual.
C. Arsitektur Informasi
Arsitektur  informasi  berfungsi  sebagai  pedoman  alur  kerja aplikasi mobile Touraway.  Fungsinya  juga  untuk  membatasi jumlah halaman yang harus dibuat dan membatasi perancangan sesuai dengan tujuan.
Gambar 4. Arsitektur Informasi Aplikasi Touraway.

## D. Teknis Aplikasi Mobile
Aplikasi menggunakan platform Android dengan spesifikasi minimal  OS  7.  Skema  warna  RGB  resolusi  72dpi.  Ukuran layar 1080 px X 1920 px.

## E. Wireframe
Konsep  aplikasi  ditampilkan  dalam  bentuk  bagan  visual wireframe sebagai  pedoman  dalam  mendesain interface aplikasi . Rancangan wireframe dan  jalan  cerita  dari  aplikasi Touraway yang  didapatkan  dari  penelitian user  experience . Wireframe ini  kemudian  diolah  warna  dan  visualnya  menjadi desain user inface aplikasi mobile .
Gambar 5. Wireframe Aplikasi Mobile Touraway.

## F. Warna
Warna  oranye  kekuningan  dipilih  sebagai  warna  utama aplikasi Touraway dengan  pertimbangan  perbedaan  ciri  khas visual  dari  aplikasi  eksisting  yang  didominasi  warna  biru sehingga  aplikasi  Touraway  dapat  lebih  diingat  dengan perbedaan yang dimiliki.. Warna oranye identik dengan kesan ceria  dan  bahagia  yang  diharapkan  mewakili  perasaan pengguna  aplikasi  ketika  sedang  berlibur.  Kombinasi  warna menggunakan  kombinasi  komplementer,  maka  warna  biru dipilih  sebagai  warna  sekunder.  Fungsi  warna  biru  adalah untuk  mempertegas  pembagian  fungsi  perintah.  Selain  itu warna biru menambahkan kesan terpercaya.
Gambar 6. Skema Warna Aplikasi Mobile Touraway.

## G. Typeface
Pemilihan  font  Open  Sans  didasarkan  aspek  keterbacaan yang  baik  oleh  font  hingga  ukuran  yang  terkecil.  Selain  itu jenis  font  san-serif  dipilih  untuk  merepresentasikan keyword modern dengan  tampilan  font  yang  tidak  dekoratif  dan memberikan kesan sederhana.
Gambar 7. Typeface Aplikasi Mobile.

## H. Foto
Pengaturan tone warna pada seluruh foto diolah agar tampak alami sehingga pengguna merasa foto tersebut seperti keadaan apa adanya dan  tanpa dibuat-buat keindahannya. Saturasi foto sedikit diturunkan, kontras sedikit diturunkan untuk membentuk sebuah foto yang terkesan lebih cinematic . Hal ini disesuaikan  dengan  hasil  wawancara sample  user yang menginginkan informasi yang jujur dan nyata.
Gambar 8. Filter Foto Aplikasi Mobile Touraway.

## I. Logo
Konsep  logo  aplikasi  yang  sudah  didesain  sebelumnya menjadi  pedoman  untuk  mengembangkan  desain  UI  pada perancangan ini.
Gambar 10. Logo Aplikasi Mobile Touraway.

## J. Ikon
Ikon  sistem  secara  spesifik  adalah  bentuk  yang  mewakili fungsi,  perintah  dan  informasi  tertentu  pada  sistem  UI  dari sebuah aplikasi. Desain ikon sistem pada aplikasi ini mengacu pada Google  Material  Design  Principle ,  perpaduan  studi eksisting, dan konsep aplikasi. Karakteristik yang ditampilkan dalam desain ikon ini adalah bentuk lengkungan yang diambil dari lengkungan logo aplikasi sehingga membentuk keselarasan desain.
Gambar 11. Ikon Aplikasi Mobile Touraway.

## K. Elemen Grafis Pendukung
Grafis  pendukung  pada  desain  UI  adalah banner ,  ilustrasi, dan card (gambar  12).  Desain banner terletak  pada  halaman home paling  atas.  Konten  dari banner adalah  promosi  dan penawaran  khusus  dari  pihak  aplikasi.  Konsep  desainnya adalah dengan menonjolkan foto sebagai obyek utama, bentuk lengkungan  sebagai  grafis  pendukung,  dengan  warna  oranye sebagai  latar  belakang.  Jika  ada  tulisan  di  dalam  desain, keterbacaan menjadi pertimbangan utama.
Desain  ilustrasi  tambahan  diletakkan  pada  beberapa halaman  yang  belum  digunakan  fungsinya.  Konsep  dari ilustrasi  adalah  obyek  utama  dengan  warna  dominan  oranye sesuai  warna  utama  aplikasi  dengan  aksen  biru.  Desain  latar belakang  obyek  utama  menggunakan  kombinasi  warna  abu-
abu.  Gambar  latar  belakangnya  adalah  perwakilan  destinasi wisata secara umum seperti gunung, pantai, pohon, dan obyek lain yang berhubungan.
Desain card mengambil elemen lengkung pada logo aplikasi sebagai  ciri  khas  visualnya.  Tulisan  yang  ada  harus mempertimbangkan aspek keterbacaan terutama karena ukuran card yang kecil.
Gambar 12. Elemen Grafis Pendukung Aplikasi Mobile Touraway.

## L. Desain User Interface
Konsep  desain  UI  didapatkan  setelah  pengembangan alternatif  desain  dengan  pertimbangan  dari user  test .  Proses pengembangan desain dijelaskan pada metode prototyping . Pada  alternatif  1  dan  alternatif  2,  desain  UI  menggunakan warna biru sebagai warna utamanya. Kemudian setelah melalui tahap  evaluasi,  dirancang  alternatif  3  dengan  warna  dominan oranye  dengan  pertimbangan  identitas  visual  yang  lebih berkarakter dan menonjol dari aplikasi eksisting.
Pada  desain  alternatif  3  dilakukan  beberapa  perubahan minor  untuk  mengoptimalkan  fungsi  aplikasi  kemudian menjadi  desain  akhir  UI  aplikasi mobile Touraway  yang dibahas pada bab V.
Gambar 13.  Alternatif desain UI Aplikasi Mobile Touraway.

## V. PEMBAHASAN DESAIN
Setelah  dilakukan user  test dan  beberapa  perbaikan  desain, berikut  ini  adalah  hasil  akhir interface aplikasi mobile Touraway  sesuai  dengan  kata  kunci travel,  modern, dan informatif sebagai acuan hasil akhir desain UI ini.

## A. Tampilan halaman dengan ilustrasi
Beberapa  halaman  dilengkapi  dengan  ilustrasi  sebagai pelengkap informasi (gambar 14).
B. Tampilan Homepage
Desain homepage aplikasi mobile Touraway  terdiri  dari tujuh  segmen yaitu pencarian, banner , special deals, trending destination, hangout, travel type, dan review (gambar 15).
C. Tampilan halaman dengan form
Beberapa  halaman  memiliki form yang  harus  diisi  seperti halaman  registrasi,  tulis review ,  tulis custom  trip ,  dan edit profile (gambar 16).

## D. Tampilan halaman informasi
Desain  halaman  lainnya  menampilkan  informasi  yang berbeda-beda  seperti  paket  wisata,  pemesanan,  dan  lain-lain (gambar 17).

## VI. KESIMPULAN/RINGKASAN
Adanya  desain  user  interface  (UI)  aplikasi  mobile  dapat membantu  pengguna  dalam  melakukan  tugas  dan  fungsi  dari aplikasi  tersebut.  Perancangan  desain  UI  yang  baik  harus didasari oleh penelitan yang berpusat pada pengguna sehingga desain  yang  dihasilkan  dapat  dikatakan  berhasil.  Pada perancangan  ini  fungsi  UI  bukan  hanya  memudahkan pengguna  tetapi  juga  mendukung  tujuan  utama  pembuatan aplikasi  mobile  yaitu  memperkenalkan  kualitas  jasa  UMKM tour  dan  travel  kepada  pengguna.  Selain  itu,  desain  UI  pada perancangan  ini  juga  berfungsi  sebagai  identitas  visual  yang membedakan  aplikasi  Touraway  dengan  aplikasi  eksisting. Semua  elemen  desain  dirancang  sesuai  dengan  kata  kunci konsep desain sebagai pedomannya, dan disesuaikan satu sama lain  agar  menghasilkan  kesatuan  desain  yang  selaras.  Adanya penelitian  ini  adalah  pelengkap  dari  penelitian  tentang  user experience aplikasi mobile Touraway dan dapat dikembangkan menjadi  perancangan  aplikasi  mobile  dengan  studi yang lebih mendalam mengenai aspek teknis dan pengembangan lainnya.
Gambar. 15.  Tampilan Homepage Aplikasi Mobile Touraway
Gambar. 16.  Halaman dengan form Aplikasi Mobile Touraway.
Gambar. 17.  Halaman dengan informasi Aplikasi Mobile Touraway

## DAFTAR PUSTAKA
[1] Badan Pusat Statistik Provinsi Bali, “Kunjungan Wisatawan Domestik ke Bali per Bulan, 2004-2017,” Bali, 2017.
[2] Badan Pusat Statistik Provinsi Bali, “Wisatawan mancanegara ke Bali Desember 2017,” Bali, 2018.
[3] A. Gunawan, “Analisis Strategi dan Taktik Pemasaran dalam Aktivitas E-commerce  untuk  Meningkatkan  Pertumbuhan  PT  Golden  Rama Express,” J. WINNERS , vol. 15, no. 1, pp. 61–71, 2014.
[4] Asosiasi  Penyelenggara  Jasa  Internet  Indonesia,  “Infografis  Hasil Survey  Penetrasi  dan  Perilaku  Pengguna  Internet  Indonesia  Tahun 2016,” 2016.
[5] International Organization for Standardization, “ISO 9241-210,” 2010.
[Online]. Available: https://www.iso.org/standard/52075.html. [Accessed: 21-Feb-2019].
[6] N.  Coviello,  R.  Milley,  and  B.  Marcolin,  “Understanding  IT-enabled interactivity  in  contemporary  marketing,” J.  Interact.  Mark. ,  vol.  15, no. 4, pp. 18–33, Jan. 2001.