Marine Tourism Web Profile– A Case Study UI/UX

Meningkatan Daya Tarik Wisata Bahari Dengan Pembuatan Website Profil

Wiwit S.N
8 min readOct 17, 2021

Halo semuanya. Kali ini Saya mau cerita proses Saya dalam mendesain sebuah website profil wisata bahari. Project ini merupakan project Tim Doktor Mengabdi (DM) Fakultas Perikanan dan Ilmu Kelautan (FPIK) Universitas Brawijaya dalam memajukan wisata pantai Pangi Blitar melalui pengembangan sebuah website.

Sebelum masuk ke design process, Saya mau bahas dulu nih latar belakang dari project ini.

Background

Kota Blitar merupakan sebuah kota yang terletak di bagian selatan Provinsi Jawa Timur, Indonesia. Salah satu potensi yang dimiliki oleh Kota Blitar adalah pariwisata pantainya. Ada banyak pantai di kota Blitar, salah satunya ada pantai Pangi yang berlokasi di Dusun Krajan, Desa Tumpakkepuh, Kecamatan Bakung, Kabupaten Blitar Jawa Timur. Rencananya pantai Pangi ini akan dijadikan sebagai salah satu tujuan wisata unggulan di Kabupaten Blitar. Oleh karena itu, Universitas Brawijaya (UB) bersama Kelompok Masyarakat Pengawas (POKMASWAS) Sadar Bahari, pemerintahan desa setempat didukung oleh Pemerintah kabupaten Blitar dan DKP Provinsi Jawa Timur melakukan beberapa aktifitas untuk menyongsong pembangunan infrastruktur rumah wisata bahari Pantai Pangi. Salah satu aktivitasnya adalah pembuatan website profil destinasi wisata.

Member

Tentunya dalam mengerjakan project ini Saya nggak sendirian, Saya diberi kesempatan buat gabung sama Tim yang luar biasa. Ini dia Tim Kami..

  • Almira Syawli, S.Kom., M.Kom
  • Fatrah Sulaeman Hutasuhut (Data Collector)
  • Hanif Rafdhiansyah Insani (Data Collector)
  • Wiwit Susilo Ningsih (UI/UX Designer)
  • Devian Wahyu Setiyawan (Web Developer)

My Responsibility

Sebagai UI/UX Designer, Saya bertanggung jawab terhadap tampilan website yang memudahkan pengguna dalam mendapatkan informasi dan membuat mereka nyaman berada di website. Langkah-langkah yang Saya lakukan meliputi competitor analysis, research pengguna, design, dan testing.

Sebelum masuk ke design process-nya, Saya mau share sedikit gambaran dari tujuan Kami dalam membuat website profil untuk destinasi wisata pantai Pangi Blitar ini.

Goals Project

Website yang Kami buat ini nantinya akan digunakan sebagai media penyampaian informasi terkait destinasi wisata Pantai Pangi Blitar. Website profil ini Kami beri nama ‘Mantai’. Harapan Kami ke depannya nanti, website Mantai ini dapat mencover seluruh informasi pariwisata pantai yang ada di kota Blitar, sehingga masyarakat dari dalam maupun luar kota bisa mendapatkan informasi dan dapat meng-explore tempat-tempat wisata pantai di kota Blitar. Selain bermanfaat untuk para calon pengunjung, website Mantai ini juga bertujuan untuk membantu meningkatkan pendapatan masyarakat lokal di sekitar pantai dengan cara mempromosikan barang-barang kerajinan tangan yang mereka hasilkan melalui website Mantai.

Baiklah, langsung aja kita masuk ke prosesnya…

Competitive Analysis

Di tahapan ini, Saya menganalisis beberapa website kompetitor, diantaranya ada website Lamongan Tourism, Wisata Bahari Lamongan, dan Dinas Pariwisaya Yogyakarta. Tahapan competitive analysis sangat membantu Saya dalam mengetahui bagaimana website para kompetitor ini menempatkan konten-konten mereka, style komponen yang mereka gunakan, dan menu apa saja yang mereka sajikan.

Oke, langsung aja Kita bahas satu-satu..

  1. Lamongan Tourism
Competitive Analysis Website Lamongan Tourism

Disclaimer!

Gambar di atas adalah tampilan dari website Lamongan Tourism sebelum diperbarui. Saat Saya mengerjakan project ini (bulan Agustus 2021), tampilan website Lamongan Tourism masih seperti yang Saya screenshoot di atas. Sedangkan tampilan website yang sekarang sudah diperbaharui jadi lebih ciamik.

Oke, kembali ke competitive analysisnya…

About Lamongan Tourism

Lamongan Tourism merupakan situs web yang dikelola oleh Dinas Pariwisata dan Kebudayan kota Lamongan. Tujuan dari website ini adalah untuk menyajikan informasi dunia pariwisata dan kebudayaan kota Lamongan.

Analysis Result

Pertama kali yang Saya lihat ketika membuka website Lamongan Tourism (waktu itu) adalah konten event dan artikel mereka. Dinas Pariwisata dan Kebudayaan kota Lamongan lebih menekankan kepada informasi aktivitas yang mereka lakukan.

2. Wisata Bahari Lamongan

Competitive Analysis Website Wisata Bahari Lamongan

About Wisata Bahari Lamongan

Wisata Bahari Lamongan adalah situs web tempat wisata bahari yang terletak di Kecamatan Paciran, Kabupaten Lamongan, Jawa Timur yang dikelola oleh PT Bumi Lamongan Sejati.

Analysis Result

Berbeda dengan website Lamongan Tourism, website Wisata Bahari Lamongan menempatkan informasi tentang destinasi wisatanya di awal halaman mereka.

3. Dinas Pariwisata Kota Yogyakarta

Competitive Analysis Website Dinas Pariwisata Kota Yogyakarta

About Dinas Pariwisata Kota Yogyakarta

Website ini merupakan website resmi dari Dinas Pariwisata Kota Yogyakarta yang hadir sebagai pengaplikasian misi mereka, yakni memberikan pelayanan prima dan menyiapkan system informasi pariwisata yang memadai.

Analysis Result

Sama seperti website Lamongan Tourism, website Dinas Pariwisata Kota Yogyakarta ini juga menekankan pada informasi event dan berita di awal halaman mereka.

Setelah mendapatkan gambaran dari konten maupun style user interface dari para website kompetitor, saya langsung masuk ke tahapan user research untuk mendapatkan berbagai insight (motivasi, ekspektasi, kebutuhan pengguna, pain points, hingga memahami perilaku) dari user.

User Research

Selanjutnya adalah tahapan user research. Disini Saya melakukan survei dengan menggunakan google form yang bertujuan untuk mengetahui pendapat responden tentang pentingnya penyebaran informasi destinasi wisata pantai dan pengalaman mereka pada saat berwisata di pantai. Responden dari survei ini terbatas hanya kepada orang-orang yang pernah mengunjungi pantai yang ada di Jawa Timur saja. Terdapat 36 orang dari berbagai profesi yang berpartisipasi dalam survei ini.

Profesi para responden Kami

Problem

Sebanyak 91,7% responden ingin merekomendasikan pantai yang sudah dikunjungi ke orang lain. Hal ini menjadi salah satu bukti bahwa promosi wisata bahari di Jawa Timur masih dilakukan by word of mouth (dari mulut ke mulut).

Merekomendasikan destinasi ke orang lain

Kegiatan promosi wisata bahari bertujuan untuk menggait wisatawan dan wisatawan tersebut memiliki keinginan untuk mengunjungi destinasi tertentu disebabkan oleh adanya informasi yang dia terima. Sebanyak 52,8% dari responden kami juga menilai bahwa informasi terkait destinasi wisata bahari penting untuk diketahui oleh khalayak umum (baik dari dalam maupun luar kota).

Pentingnya untuk mendapatkan informasi tentang destinasi pantai

Terdapat beberapa media yang dapat digunakan sebagai penyampaian informasi terkait destinasi wisata bahari, diantaranya ada website, aplikasi, dan media sosial. Dan sebanyak 97,2% dari responden Kami merekomendasikan untuk menggunakan media sosial. Adapun yang merekomendasikan untuk menggunakan website sebagai media penyampaian informasi yaitu 44,4% dan sebanyak 36,1% merekomendasikan untuk menggunakan aplikasi.

Media untuk penyampaian informasi wisata bahari

Solution

Oleh karena itu, Saya meminta pendapat responden terkait setuju atau tidak jika disediakan sebuah sistem informasi (website) yang menyajikan informasi wisata bahari di Jawa Timur. Dan seluruh responden dengan pengadaan website tersebut.

Pembuatan sistem informasi

Mari Kita lihat beberapa alasan responden Kami yang setuju akan pengadaan sistem informasi (website) wisata bahari ini.

Beberapa alasan responden Kami yang menyetujui pengadaan website wisata bahari

User Needs

Selanjutnya Saya melakukan analisis kebutuhan pengguna melaui kuesioner survei. Hal ini bertujuan untuk mengetahui informasi apa saja yang dibutuhkan oleh target user. Untuk mengantisipasi jika target user tidak mengetahui apa yang mereka butuhkan, maka Saya membuat beberapa pilihan fitur yang kemungkinan dibutuhkan oleh user.

Kebutuhan Pengguna

Mari kita simpulkan daftar kebutuhan pengguna untuk website Mantai.

Daftar Kebutuhan Fungsional

Design

Langkah selanjutnya adalah pembuatan design. Dalam pembuatan design, pertama kali yang Saya lakukan adalah membuat style guide. Style guide adalah panduan yang mengatur semua komponen pembentuk user interface. Tujuan pembuatan style guide ini adalah untuk menyeragamkan desain supaya konsisten di keseluruhan halamannya sehingga bisa menciptakan user experience yang bagus.

Style Guide

Oke, disini Saya langsung ke hasil high fidelity-nya saja ya..

High Fidelity

Pembuatan Hi-Fi mengacu pada style guide yang telah dibuat. Design Hi-Fi yang Saya buat meliputi tampilan untuk halaman Home, Destinasi (Pantai, Kuliner, dan Penginapan), Tentang Kami, dan Artikel.

  1. Halaman Home

Di halaman Home ini, Saya ingin membuat user mendapatkan tujuan mereka ketika membuka website Kami, yakni mendapatkan informasi tentang destinasi wisata. Oleh karena itu Saya menampilkan informasi destinasi yang sedang populer berupa gambar, deskripsi, dan harga tiket masuk. Selanjutnya untuk menarik user agar lebih lama di dalam website Kami, Saya tampilkan informasi dalam bentuk gambar. Sehingga ketika user tertarik dengan gambar yang disajikan, mereka akan meng-klik tombol ‘Explore Destination’. Selain informasi destinasi, Saya juga menampilkan berita terbaru dari dunia pariwisata dan informasi partner (untuk memberitahu user siapa yang mengelola website Mantai ini).

High Fidelity Home

2. Halaman Destinasi

Halaman Detinasi ini memiliki tiga sub menu, yakni Pantai, Kuliner, dan Penginapan.

Dorpdown Menu Destinasi

Di halaman Destinasi Pantai terdapat search bar yang dapat memudahkan user untuk menemukan destinasi yang ia tuju dengan memasukkan kata kunci tempat atau nama pantainya. User juga dapat menggunakan kategori yang telah disediakan oleh sistem.

Disclaimer !

Halaman Destinasi Pantai hadir untuk mengcover seluruh destinasi yang ada di kota Blitar. Untuk sementara waktu, dikarenakan saat ini fokus Kita hanya ke Pantai Pangi, maka menu Destinasi Pantai disembunyikan.

High Fidelity Destinasi Pantai
High Fidelity Detail Pantai

Selain menu Destinasi Pantai, terdapat juga menu Kuliner dan Penginapan. Menu ini bertujuan untuk membantu user dalam menemukan lokasi kuliner atau tempat makan serta lokasi penginapan di sekitar pantai.

High Fidelity Destinasi Kuliner
High Fidelity Destinasi Penginapan

3. Halaman Artikel

Di halaman artikel ini user dapat mengetahui berita-berita terbaru dari dunia pariwisata dan kegiatan-kegiatan yang dilakukan oleh penduduk sekitar pesisir.

High Fidelity Artikel

Prototype-nya bisa diliat disini ya..

Testing

Di tahapan testing ini, Saya menggunakan kuesioner SUS (System Usability Scale) untuk mengukur keseluruhan usability dari website Mantai. Di tahapan pengujian usability ini, Kami hanya mengambil 5 responden, yang terdiri dari 2 orang pengunjung pantai Pangi dan 3 orang dari POKMASWAS Sadar Bahari.

Di dalam kuesioner SUS terdapat 10 pertanyaan dengan menggunakan skala likert dengan keterangan (1=Sangat Tidak Setuju, 2=Tidak Setuju, 3= Ragu-ragu, 4= Setuju, 5=Sangat Setuju).

Pertanyaan SUS

Berdasarkan hasil kuesioner dari 5 responden, setelah di kalkulasikan sesuai dengan penghitungan SUS, didapatkan skor 70,5 dengan adjective rating Good.

Kalkulasi Hasil Kuesioner

Dari beberapa referensi yang saya baca, rata-rata standar SUS Score adalah 68. SUS Score yang berada di atas rata-rata dapat diartikan bahwa secara usability (kebergunaan), sistem yang dirancang layak atau dapat diterima oleh end user. Berikut adalah interpretasi SUS Score.

Interpretasi SUS Score

Selain menggunakan kuesioner, Tim Kami juga meminta feedback langsung kepada pihak POKMASWAS Sadar Bahari. Menurut POKMASWAS, website Mantai ini:

  • Desain logo dan websitenya sangat menarik, sederhana, dan bagus
  • Untuk meningkatkan user experience, lebih baik jika disajikan informasi dalam bentuk gambar, seperti foto-foto destinasi pantainya

Berdasarkan feedback di atas, Kami akan menambahkan satu menu, yaitu menu Galeri untuk menampilkan aktivitas-aktivitas yang dilakukan oleh POKMASWAS maupun masyarakat sekitar pantai.

High Fidelity Galeri

Demikian proses design yang telah Saya lakukan, Saya menyadari bahwa design yang Saya tawarkan masih terdapat banyak kekurangan, namun oleh karena itu proses development harus selalu berlanjut, agar dapat melakukan iterasi-iterasi berikutnya, dan dapat terus mengembangkan website Mantai menjadi makin baik lagi kedepannya.

--

--

Wiwit S.N

UI/UX Designer team at Software House. Very excited to learn all about Digital Product Development, Research & System Analyst.