## DESAIN ANTAR MUKA WEBSITE OEMAH DJARI DENGAN PENDEKATAN USER CENTERED DESIGN
I Wayan Marfilianto Prayuda Tunas* 1 , Peni Pratiwi 2 , Jasson Prestiliano 3 , Michael Bezaleel 4
Desain Komunikasi Visual, Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga *Correspondence author: I Wayan Marfilianto Prayuda Tunas, 692016067@student.uksw, Salatiga, Indonesia
Abstrak. Oemah Djari adalah jenis usaha yang bergerak di sektor akomodasi dan restoran namun mengalami  kendala  pada  saat  pandemi  covid-19  yang  masih  berlangsung,  sehingga  berdampak pada  penyebaran  informasi  secara  konvensional.  Menurut  data  dari  badan  pusat  statistik menyebutkan  perusahaan  yang  bergerak  pada  bidang  akomodasi  dan  restoran  mengalami kenaikan  7,10  persen  saat  pandemi  dalam  menggunakan  teknologi  dan  internet.  Oemah  Djari membutuhkan sebuah media alternatif yang dapat diakses secara daring, salah satu media yang menjadi media alternatif adalah website. Fokus penelitian adalah merancang tampilan antar muka website dengan  melihat  kebutuhan  pengguna.  Penelitian  ini  menggunakan  metode  campuran dengan strategi pendekatan User centered design (UCD). Tahapan UCD yaitu understand context of  use,  specifying  user  requirements,  design  solution,  evaluate  against  requirements .  Data diperoleh dari hasil wawancara, kuesioner, observasi, studi literatur, internet, dan dokumentasi. Hasil  penelitian  adalah  perancangan  antar  muka website dengan  pendekatan  UCD  dapat membantu  menemukan  solusi  sesuai  kebutuhan  target  pengguna.  Berdasarkan  hasil  pengujian menunjukkan bahwa dengan pendekatan UCD website sudah berhasil membuat tampilan website secara informatif, komunikatif dan interaktif sesuai kebutuhan target pengguna.
Kata kunci : Website, User centered design, User interface, User experience
Abstract. Oemah Djari is a type of business engaged in the accommodation and restaurant sector but  experienced  obstacles  during  the  ongoing  Covid-19  pandemic,  which  has  an  impact  on  the dissemination of information conventionally. According to data from the central statistics agency, companies engaged in accommodation and restaurants experienced an increase of 7.10 percent during the pandemic in using technology and the internet. Oemah Djari needs an alternative media that can be accessed online, one of the media that becomes an alternative media is a website.  The focus of the research is to design the appearance of the website interface by looking at user needs. The research method used is a mixed method with a User centered design (UCD) approach strategy. The  stages  consist  of  understanding  the  context  of  use,  specifying  user  requirements,  designing solutions,  evaluating  against  requirements.    Data  are  obtained  from  the  results  of  interviews, questionnaires, observations, literature studies, the Internet, and documentation. The result of the research  is  that  the  design  of  a  website  interface  with  a  UCD  approach  can  help  find  solutions according to the needs of the target user. Based on the test results, it shows that with the UCD approach,  the  website  has  succeeded  in  making  the  appearance  of  the  website  informative, communicative and interactive according to the needs of the target user.
Keywords : Website, User centered design, User interface, User experience

## Pendahuluan

## Latar Belakang
Oemah  Djari  adalah  usaha  yang  bergerak  di  sektor  akomodasi  dan  restoran.  Sebagai akibat  dari  pandemi  yang  masih  berlangsung,  menyebabkan  penyampaian  informasi  secara konvensional seperti pembagian brosur dan sponsor acara tidak berjalan secara maksimal, yang berimbas pada kunjungan konsumen ke Oemah Djari dan bahan produksi yang memiliki batas waktu terbuang sia-sia. Sehingga dibutuhkan sebuah media alternatif agar Oemah Djari tetap dapat  menyampaikan  informasi  secara  lengkap  dengan  membuat  sebuah  media  yang  dapat diakses secara daring. Hal ini dibuktikan dari data dari badan pusat statistik mengenai perilaku usaha  pada  masa  pandemi  Covid-19  menyebutkan  perusahaan  yang  bergerak  pada  bidang akomodasi  dan  restoran  mengalami  kenaikan  7,10  persen  dalam  menggunakan  internet  dan teknologi,  sehingga  cara  ini  diakui  berpengaruh  pada  penjualan  produk  dan  jasa  yang ditawarkan.  Aturan  dalam  mencegah  penyebaran  virus  covid  hal  ini  berakibat  terbatasnya pemasaran secara konvensional, sehingga pemanfaatan internet dan teknologi menjadi salah satu  cara  bagi  pelaku  usaha  untuk  mempertahankan  dan  meningkatkan  pendapatan  (Badan Pusat Statistik 2020).
Website merupakan  media  yang  dapat  diakses  secara  daring  yang  memuat  informasi tertentu dan berguna bagi pengaksesannya (Sa’ad 2020) Manfaat memakai website yaitu akses cepat  melalui  browser  pada  perangkat  elektronik  seperti  komputer  dan  laptop,  serta  dapat digunakan  untuk  berbagai  tugas  seperti,  memberi  informasi  suatu  instansi  atau  perusahaan. Dalam  merancang  sebuah website ,  pembuatan user  interface dan user  experience sangat penting dilakukan karena dapat memberikan pengalaman dan kenyamanan antara website dan pengguna (Chandra et al 2019) Maka dari itu perlu dilakukan pendekatan untuk menyesuaikan kebutuhan target pengguna pada perancangan desain website . Dalam merancang sebuah UI dan UX diperlukan sebuah strategi perancangan, salah satu strategi yang dapat digunakan adalah user centered design (UCD). Pendekatan UCD adalah strategi pendekatan yang berfokus kepada kebutuhan  end- user (target),  pendekatan  ini  digunakan  karena  dapat  mengidentifikasi  dan menemukan  solusi  dengan  cepat  berdasarkan  kebutuhan  dan  keinginan  target  yang  disasar (Putra  and  Setyawan  2019).  Pendekatan  ini  dilakukan  untuk  mengetahui  kebutuhan  target konsumen Oemah Djari yang berusia dewasa (25-45 tahun) dengan standar ekonomi menengah dan menengah atas.
Sesuai  permasalahan  yang  dijelaskan  paragraf-paragraf  sebelumnya,  akan  dirancang sebuah desain antar muka website Oemah Djari sebagai media informasi dengan menggunakan pendekatan user centered design . Perancangan website dilakukan untuk menampilkan informasi mengenai Oemah Djari serta mempermudah target pengguna melakukan pesanan. Diharapkan dengan menggunakan pendekatan UCD, designe r dapat mengidentifikasi dan menemukan solusi sesuai  dengan  kebutuhan  target  Oemah  Djari,  sehingga website dapat  dibuat  informatif, komunikatif dan interaktif sesuai dengan selera visual target pengguna.

## Tinjauan Pustaka
Pada penelitian terdahulu berjudul “Perancangan User interface dan User experience pada Place Plus menggunakan pendekatan User centered design ” oleh Multazam, M. pada tahun 2020 yang  membahas  tentang  perancangan website Place  Plus  dengan  menggunakan  pendekatan UCD untuk mencari tahu masalah yang dirasakan oleh pengguna dalam melakukan reservasi. Pada  penelitian  ini  pengumpulan  data  menggunakan  metode  kualitatif  dengan  wawancara kepada  pemilik  dan  pengunjung Place  plus ,  dari  hasil  penelitian  menyimpulkan  bahwa pendekatan UCD terhadap rancangan UI/UX website mendapatkan hasil yang baik dari pihak Place Plus dan target pengguna (Multazam, Paputungan, and Suranto, 2020).
Pada penelitian terdahulu berjudul “Perancangan Website UIN Syarif Hidayatullah Jakarta Menggunakan  Metode  User  Centered  Design  Dengan  Standard  ISO  9126”  oleh  Muhammad Dirga Dzulfiqar pada tahun 2017 dengan latar belakang kurang menariknya website yang dimiliki UIN Syarif Hidayatullah Jakarta yang mempengaruhi kenyamanan pengunjung yang membuka website ,  yang  dibuktikan  dari  hasil  kuesioner  terhadap  80  responden  mahasiswa  UIN  Syarif Hidayatullah  Jakarta,  56%  responden  mengatakan  bahwa website UIN  Syarif  Hidayatullah Jakarta  masih  memiliki  tampilan  yang  biasa  saja  dan  tidak  menarik  sama  sekali.  Sehingga dibutuhkan perancangan website yang dapat memenuhi kebutuhan pengguna dengan metode UCD.  Proses  pengumpulan  data  menggunakan  kuantitatif  terhadap  mahasiswa  UIN  Syarif Hidayatullah Jakarta, Hasil dari penelitian ini yaitu website yang dirancang mendapatkan nilai usability sebesar 81, 9% yang sebelumnya 56% sehingga perancangan website dapat dikatakan berhasil dan menghasilkan website yang sesuai kebutuhan pengguna (DzulfIqar 2017). Penelitian-penelitian di atas memiliki persamaan dengan penelitian yang dilakukan yaitu penggunaan  pendekatan  UCD  sebagai  acuan  membuat  rancangan website dengan  melihat kebutuhan  perusahaan  dan  target  pengguna  agar  dapat  menciptakan  rasa  nyaman  pada pengakses.  Pendekatan  ini  dinilai  dapat  berhasil  jika diterapkan  pada  penelitian  yang  sedang dilakukan, selain persamaan ada juga perbedaan, pada penelitian yang dilakukan pencarian data dilakukan dengan beberapa tahap yaitu hasil wawancara terhadap ahli dan pihak Oemah Djari, lalu penggunaan kuesioner yang dibagikan kepada target pengguna untuk mengukur kepuasan pengguna. Selain itu penelitian yang dirancang memiliki tujuan yang berbeda, pada penelitian pertama website bertujuan agar pengguna dengan mudah melakukan reservasi, lalu penelitian kedua  bertujuan  meningkatkan  nilai  usability  dari website .  Sedangkan  penelitian  ini website akan  menjadi  akses  informasi  target  pengguna  tentang  Oemah  Djari.  Hasil  dari  perancangan website ini berupa prototype dan diharapkan dapat menjadi acuan Oemah Djari dalam membuat website . Website didefinisikan suatu cara untuk menampilkan informasi melalui jaringan internet. Informasi  tersebut  dapat  berupa  gambar, teks ,  suara,  ataupun video interaktif  yang  diakses melalui  mesin  pencarian  (Yuhefizar,  2018).  Maka website dapat  berguna  untuk  membuat informasi pengumuman atau pemberitahuan serta update pembaruan informasi secara cepat User experience (UX) adalah pengalaman yang terkait dengan reaksi, persepsi, perilaku, emosi dan pikiran pengguna saat menggunakan aplikasi atau website (Garret 2011). Dengan kata lain UX  design adalah  bagaimana  pengguna  dapat  mengakses  sebuah website ,  mendapatkan pengalaman  seperti  melihat  tampilan  dan  melakukan  prosedur  sesuai  alurnya  dari website tersebut.
User  interface (UI)  berhubungan  dengan  selera  pengguna  terhadap  visual  website.  UI desain  berfokus  pada  keindahan  dari  sebuah  tampilan,  seperti  warna ,  font,  layout dan  hal lainnya  yang  membuat  visual  website  lebih  nyaman  dan  mudah  dipahami  oleh  pengguna (Pambajeng and Ardiansyah 2019). Sehingga dalam merancang sebuah desain user interface dan user experience harus selaras dengan kebutuhan pengguna.
Media  informasi  adalah  suatu  sarana  yang  dapat  digunakan  untuk  menyampaikan informasi  kepada  target  audience.  Media  berasal  dari  bahasa  Latin  dan  merupakan  bentuk jamak dari kata medium yang secara harfiah berarti perantara yaitu perantara sumber pesan dengan penerima pesan (Djaslim and Oesman 2002). Dapat disimpulkan media informasi adalah alat untuk mengumpulkan dan menyusun kembali sebuah data atau fakta dari sumber informasi kepada penerima agar informasi dapat tersampaikan dengan baik. Dalam perancangan ini akan dibuat sebuah media informasi secara lengkap yang berhubungan dengan Oemah Djari sehingga dapat dipahami dengan baik oleh audience.

## Metode
Metode  penelitian  yang  dipakai  menggunakan User  centered  design, metode  ini merupakan  sebuah  pendekatan  dalam  pengembangan  dan  merancang  sebuah  desain  yang berfokus pada pengguna sesuai aspek-aspek kebutuhan dan kebiasaan (Ariawan, Triayudi, and Sholihati 2020). Dengan kata lain user centered design adalah sebuah filosofi perancangan yang menempatkan kebutuhan pengguna sebagai pusat dalam membuat website , sehingga masalah yang sering dihadapi oleh pengguna dapat diselesaikan menggunakan metode UCD. Kelebihan memakai tahapan ini ialah dapat identifikasi serta solusi masalah akan lebih cepat ditemukan dan  apabila  terdapat  kekeliruan  pada  saat  perancangan  dapat  kembali  merombak  sampai mendapatkan hasil yang sesuai  (Multazam, Paputungan, and Suranto 2020)  Tahapan metode penelitian dapat dilihat pada gambar 1.
Gambar 1. Tahapan user centered design
Understand context of use adalah proses mengidentifikasi dan menganalisis masalah yang sedang  dihadapi  pada  tahapan  ini  akan  dilakukan  wawancara,  observasi  dan  dokumentasi. Setelah itu lanjut pada specifying requirements, tahap ini desainer mulai menentukan kebutuhan user terhadap website .  Selanjutnya  adalah design  solution dimana  desainer  memulai perancangan  atau  gambaran  kasar website sesuai  kebutuhan  pengguna  serta  mewujudkan dalam desain dan prototype, tahap berikutnya adalah evaluate against requirements pada tahap ini    perancangan  desain  yang  telah  dibuat  akan  diujikan  dengan  pembagian link  website dan kuesioner  pada  target  pengguna  untuk  menentukan  hasil  dan  kesimpulan,  jika  berhasil memenuhi  kebutuhan user , website dianggap  berhasil  tapi  jika  mengalami  kegagalan  maka desainer dapat kembali memperbaiki hal yang dianggap bermasalah (Wijaya 2019).

## Hasil dan Pembahasan

## Proses Perancangan
Tahap pertama adalah Understand context of use pada tahap akan dilakukan identifikasi dan  analisa  masalah,  dengan  wawancara  bersama  pihak  Oemah  Djari.  Hasil  wawancara didapatkan permasalahan yang ada adalah penyebaran informasi secara konvensional, seperti penyebaran brosur dan menjadi sponsor menjadi terganggu di masa pandemi. Kegiatan ini tidak dapat dilakukan, sehingga dibutuhkan media informasi yang efektif dan dapat diakses dengan mudah secara daring seperti website . Selain itu didapatkan data bahwa target konsumen secara demografis  yaitu  pria  dan  wanita  berusia  25-50  tahun,  bekerja  sebagai  PNS,  karyawan  dan wiraswasta dengan standar ekonomi menengah dan menengah atas. Lalu secara geografis dan psikografis adalah konsumen yang tinggal di Salatiga dan luar Salatiga, datang ke Oemah Djari untuk menikmati makan dan menginap. Selain itu konsumen sangat mementingkan berkumpul bersama keluarga/teman dalam menghabiskan waktu luang, memilih tempat yang mempunyai
layanan, fasilitas, serta view yang bagus, dan menyukai situasi yang tenang dan nyaman untuk istirahat. Dari hasil wawancara juga didapatkan data produk berupa data harga yang ditawarkan pada restoran mulai dari paling murah Rp4.500,- dan yang paling mahal Rp48.000,-. Lalu pada hotel harga kamar paling murah Rp289.000,- dan paling mahal Rp499.000,-.
Lalu didapatkan juga data kebutuhan perusahaan saat ini melalui SWOT perusahaan, yaitu Oemah  Djari  memiliki strength menawarkan  pemandangan  persawahan  dan  pegunungan, konsisten dalam mengeluarkan promo setiap bulan, fasilitas baik dengan harga murah, memiliki tempat  berfoto  yang  bagus,  serta  restoran  dan  hotel  yang  berada  dalam  satu  tempat.  Pada weakness lokasi yang agak susah dijangkau, dan belum mempunyai media untuk menyampaikan informasi  secara  lengkap  dan  detail.  Lalu opportunity yang  dipunyai  adalah  tingginya  minat masyarakat pada tempat yang mempunyai suasana menenangkan, selain itu Oemah Djari sudah dikenal  di  luar  Salatiga.  Kemudian threat yang  ada  seperti  banyak  tempat  yang  mempunyai konsep  sama,  dan  harga  pokok  yang  tidak  menentu  dapat  mempengaruhi  produk.  Dari  data tersebut didapatkan kesimpulan bahwa Oemah Djari harus menggunakan kekuatan yang dimiliki yaitu  Oemah  Djari  sebagai  restoran  dan  hotel  yang  menawarkan  pemandangan  yang  bagus, serta  konsisten  dalam  mengeluarkan  promo,  dengan  memanfaatkan  peluang  yaitu  tingginya minat masyarakat pada tempat yang menawarkan suasana menenangkan sehingga menjadikan Oemah Djari sebagai tempat liburan dan menetap sementara saat berlibur di Salatiga.
Setelah mendapatkan hasil analisis SWOT maka diperoleh juga Unique Selling Point (USP), Emotional Selling Point (ESP) Oemah Djari yaitu USP yang dimiliki adalah restoran dan hotel yang berada di tengah kota dengan suasana pedesaan, lalu ESP adalah perasan damai dari suasana tenang  pedesaan.  Tahap  selanjutnya specifying user requirements ,  tahap  ini  desainer menentukan target audience dan mencari tahu kebutuhan target pengguna serta perusahaan pada website yang akan dibuat.
1. Hasil  kebutuhan  perusahaan  terhadap website yang  akan  dibuat  adalah  perusahaan membutuhkan Website yang  bertujuan  menampilkan  informasi  Oemah  Djari,  dimana pengguna dapat dengan mudah melakukan pesanan, serta website mampu menunjukkan citra perusahaan yang telah dibangun Oemah Djari sebagai tempat untuk menikmati waktu bersama  keluarga/teman  dengan  menawarkan  pemandangan  suasana  pedesaan,  serta website yang dibuat dapat terus dipakai maupun setelah pandemi berakhir.
2. Target pengguna/ audience yaitu secara demografis adalah PNS, telah berkeluarga dengan standar pendidikan S1-S3, pria atau wanita, berumur 25-40 tahun dengan status ekonomi menengah, dan menengah atas dengan pendapatan 2-5 juta/ bulan. Lalu secara geografis adalah yang tinggal dalam dan luar Salatiga. Lalu secara psikografis adalah target pengguna yang beraktifitas depan layar komputer, praktis dan simple , menyukai berkumpul bersama keluarga  dan  teman,  suka  membaca  serta  memahami  penggunaan  teknologi  sehari-hari. Setelah  menentukan  target  pengguna  selanjutnya  adalah  menganalisa  selera  dan kebutuhan  visual  target  pengguna  melalui  pengumpulan  data  dengan  kuesioner  untuk mencari tahu kebutuhan pengguna terhadap website yang akan dibuat. Ada beberapa hal yang ditanyakan yaitu aspek kebiasaan pengguna membuka sebuah website restoran/hotel, aspek konten dan informasi yang diinginkan. Hasil analisa dari 38 responden, didapatkan hasil yaitu:
a. website diharapkan  menampilkan  informasi  Oemah  Djari  seperti  menu  -  menu,  info promo, pilihan kamar.
b. Informasi yang disajikan disertai dengan foto dengan sudut pandang yang berbeda-beda agar dapat melihat produk/jasa yang dimaksud.
c. Layout dibuat rapi dan tidak menggunakan banyak dekorasi, agar dapat mengikuti alur konten.
d. penggunaan warna bisa menggunakan warna identitas Oemah Djari, yaitu kuning dan merah.
e. Penggunaan font sebaiknya jenis font yang mudah dibaca, sederhana dan modern, serta tombol menu yang mudah ditemukan dalam memperlancar kegiatan dalam website . Tahapan  selanjutnya  adalah design  solution .  Pada  tahap  ini  adalah  membuat  ide  dan konsep  yang  disesuaikan  dengan  kebutuhan  pengguna  dengan value perusahaan, value yang dimiliki Oemah Djari adalah ketenangan di tengah kota. Setelah mendapatkan value , selanjutnya membuat  konsep  verbal  dan  visual website .  Konsep  verbal  yaitu  menyampaikan  informasi bahwa  Oemah  Djari  adalah  restoran  dan  hotel  yang  berada  di  tengah  kota  namun  dengan suasana  asri  pedesaan.  Lalu  ide  kreatif yang  dipakai adalah  keasrian Oemah Djari.  Kemudian konsep  visual  akan  dijelaskan  dalam guideline (GUI),  pembuatan guideline yang  berfungsi sebagai standar pedoman dalam membuat tampilan website (Werdikatama, 2018). Guideline website pada gambar 4.
Gambar 2. Guideline untuk Tampilan Website Oemah Djari
Pemilihan  warna  yang  digunakan  pada  perancangan website disesuaikan  dengan kebutuhan  pengguna  dengan  citra  perusahaan  yang  identik  dengan  merah  dan  kuning.  lalu Warna-warna  tersebut  akan  menjadi  dasar  untuk  membuat  warna  monokromatik,  teori monokromatik merupakan perpaduan warna dari warna dasar dengan nilai intensitas berbeda (Kusandi, 2013). Penggunaan warna ini secara teknis membantu desainer memilih warna jika suatu  waktu  desain website membutuhkan  nilai  intensitas  warna  yang  berbeda.  Setelah pemilihan  warna  selanjutnya  adalah  pemilihan font pada website Oemah  Djari  yang menggunakan font sans serif bernama Poppins. Pemilihan font ini karena memiliki sifat yang mudah  dibaca,  serta  memberi  kesan  modern  namun  tidak  kaku. Website juga  menggunakan ilustrasi  dengan  gaya flat  design gaya  desain  ini  memiliki  ciri-ciri  sederhana,  minimalis  dan efisien agar pengguna mudah mengenal dan memahami fungsi ikon atau ilustrasi yang dibuat. Lalu  penggunaan  foto  menggunakan  jenis photo  essay, foto  ini  didefinisikan  foto  yang menceritakan  suatu  situasi  atau  suasana  sebuah  foto,  foto  yang  ditampilkan  dapat  berbeda- beda  namun  masih  dalam  satu  topik  yang  sama  sehingga  teknik  pengambilan  foto  sangat dibutuhkan, dengan didukung penggunaan teks untuk menjelaskan foto (Efendi 2019) Foto yang akan ditampilkan adalah suasana Oemah Djari serta produk yang ditawarkan. Selanjutnya adalah layout,  layout yang  dipakai  dalam  perancangan  ini  adalah grid  layout ,  dengan  tata  letak  ini desainer  dapat mengatur konten pada website sesuai pembagian yang telah ditentukan oleh garis  vertikal/horisontal  (Sihombing  2003)  Pembagian  konten  akan  disusun  dalam  kolom, pembagian  ini  sangat  penting  agar  konten  tertata  rapi  dan  pengguna  dapat  menikmati  alur website . Contoh penggunaan grid layout dapat dilihat pada gambar 3.
Gambar 3. Grid Layout
Setelah  menentukan  ide  dan  konsep  pada website .  Maka  langkah  yang  dilakukan selanjutnya  adalah  membuat sitemap yang  terdapat  tujuh  menu  yaitu  beranda,  hotel, menu restoran, daftar, masuk, profile , dan keranjang. Pada beberapa menu terdapat submenu yang disesuaikan kebutuhan user agar lebih mudah melakukan kegiatan di dalam website , site map dapat dilihat pada gambar 4.
Gambar 4. site map
Selanjutnya  adalah  membuat flowchart UX  dari  awal user masuk  ke website , login /registrasi,  memberi review hingga keluar  dari website .  Alur website Oemah Djari  dapat dilihat pada gambar 5.
Saat user masuk ke dalam website , pengguna dapat langsung login jika sudah memiliki akun,  jika  belum  dapat  melakukan  registrasi,  setelah  membuat  akun  pengguna  akan  berada pada  beranda  yang  berstatus  online,  selanjutnya  pada  pemesanan  kamar  pengguna  memilih kamar  yang  diinginkan,  lalu  melakukan transfer bank  dengan  kode  pembayaran  yang  telah diberikan.  Setelah  melakukan  pembayaran  pengguna  akan  melakukan  konfirmasi  pesanan kamar, jika telah selesai maka dapat datang ke Oemah djari untuk menikmati layanan kamar. Lalu  pada  pemesanan  makanan  pengguna  memilih  menu  yang  tersedia,  setelah  itu  memilih pembayaran secara transfer . Pembayaran yang dilakukan secara transfer , user akan mendapat kode pembayaran lalu mengkonfirmasi pembayaran. Setelah mendapat layanan yang dipesan, pengguna  diberi  notifikasi  untuk  melakukan  penilaian  pesanan.  Berikutnya  pada  menu  profil pengguna dapat melakukan editing data, dan melakukan logout untuk keluar dari website .
Tahapan  selanjutnya  adalah  membuat wireframe atau  skema  halaman website ,  Setiap wireframe akan  dikembangkan  sesuai  rencana  perancangan  yang  telah  dibuat.  Ada  pun wireframe tersebut yang dapat dilihat pada gambar 6.

## Gambar 6. Wireframe Daftar
Halaman  Pendaftaran  dibuat  bagi  target  pengguna  yang  ingin  menikmati  kelebihan website agar dapat memesan layanan Oemah Djari, pada bagian pendaftaran pengguna akan diminta  mengisi  nama  lengkap,  email,  nomor  telepon,  kata  sandi  dan mengulangi  kata  sandi untuk mengecek kesalahan. Bagi pengguna website Oemah Djari yang telah memiliki akun maka dapat langsung menuju pada halaman login , halaman login dapat dilihat pada gambar 7.
Gambar 7. Wireframe Login
Pada halaman untuk masuk ke akun website pengguna hanya memasukkan no. telepon, user name , atau email yang sudah terdaftar lalu memasukkan kata sandi. jika pengguna telah login , maka pengguna dapat menikmati informasi serta layanan pada website , dapat dilihat pada gambar 8.
Gambar 8. Wireframe Website Beranda Online
Pada halaman beranda yang telah online pengguna dapat menikmati akses lebih bebas yaitu dapat mengklaim voucher , memesan layanan restoran dan hotel, melakukan pembayaran, dan review , selain itu terdapat informasi singkat tentang perusahaan seperti info terkini, info singkat  restoran  dan  hotel,  serta  informasi  tentang  kegiatan  yang  dapat  dilakukan  di  Oemah Djari.

## Gambar 9. Wireframe Profile user
Pada menu profile terdapat sub menu, yaitu tombol keluar dan pengaturan yang disertai tombol menyimpan perubahan atau membatalkan perubahan data diri. Skema halaman dapat dilihat pada gambar 9.
Gambar 10. Wireframe menu restoran
Wireframe selanjutnya yang dibuat adalah menu pemesanan pada restoran, halaman ini menampilkan info promo, pilihan makanan dan minuman beserta harga pada website , skema halaman menu restoran dapat dilihat pada gambar 10.

## Gambar 11. Wireframe Kamar Hotel
Selanjutnya  dibuat wireframe untuk  pemesanan  kamar  hotel,  Skema  pada  halaman  ini memuat  info  fasilitas  hotel,  foto  dan  penjelasan  kamar,  serta  harga  setiap  kamar.  Skema halaman hotel dapat dilihat pada gambar 11.

## Gambar 12. Wireframe Keranjang
Wireframe selanjutnya adalah menu keranjang, terdapat 3 sub menu, yaitu menu pesanan untuk melihat info pesanan yang dimasukan ke dalam keranjang, lalu menu bukti pembayaran untuk melihat  info pembayaran dan menu riwayat  pemesanan untuk me review pesanan dan melihat  info  pesanan  yang  telah  dilakukan.  Skema  halaman  dapat  dilihat  pada  gambar  12. Setelah  rancangan wireframe telah  dibuat,  selanjutnya  adalah  membuat Wireflow sesuai dengan alur yang dibuat. Wireflow dapat dilihat pada gambar 14.
Gambar 13. Wireflow website Oemah Djari
Pada Wireflow dimulai  dari  halaman  beranda  lalu  pengguna  dapat  melakukan login /mendaftar  untuk  memiliki  akun,  setelah  pengguna  online  dengan  akun  yang  dimiliki pengguna dapat menikmati pilihan menu yang terdiri dari beranda, hotel, restoran, profile , serta keranjang.  Pada  menu  beranda  berisi  informasi  promo,  info  singkat  hotel  dan  restoran.  Lalu
pada  menu  hotel  terdapat  informasi  hotel  seperti  fasilitas  dan  kamar,  selanjutnya  menu restoran  terdapat  info  promo,  dan  makanan.  Pada  menu profile terdapat  info  mengenai pengguna, lalu menu keranjang yang berisi informasi pembayaran pesanan serta penilaian yang diberikan.

## Hasil Perancangan
Pada  hasil  dan  pembahasan  akan  menerapkan layout ,  warna,  dan font sesuai  dengan standar pada GUI dan wireframe yang telah dibuat dan sudah melalui tahap evaluasi dengan Sri Winarso  Martyas  Edi  sebagai  ahli  UI/UX  dan  Martin  Setyawan  sebagai  pemilik  Oemah  Djari, masukan yang diberikan oleh ahli adalah menambahkan foto suasana dalam restoran dan hotel pada bagian slider , memberi keterangan jumlah kamar saat memesan, serta memberi tag sign pada foto menu restoran yang menandakan menu tersebut menu baru atau diunggulkan. Lalu masukan yang diberikan pemilik Oemah Djari adalah menambah pemberitahuan jika pesanan sudah habis atau tersedia, hal ini telah diperbaiki sesuai dengan masukan yang diberikan. Hasil desain dapat dilihat sebagai berikut:

## Gambar 14. Halaman Login
Tampilan  login  dibuat  pada  kotak  sederhana  berwarna  putih  dengan  latar  yang  dibuat abu-abu  agar  pengguna  dapat  fokus  pada  bagian  pengisian  yang  dibutuhkan  untuk login terdapat tombol close serta tombol daftar jika belum mempunyai akun, dan tombol masuk. Pada saat memasuki website pengguna dapat login dengan memasukkan user id, email atau nomor telepon yang sudah dimasukan saat mendaftar lalu pengguna dapat mengisi kata sandi setelah itu dapat menekan tombol masuk.
Gambar 15. Halaman beranda
Pada tampilan beranda terdapat slider yang berisi ilustrasi yang menggambarkan sebuah keluarga  yang  menikmati  pemandangan  yang  berada  di  Oemah  Djari  serta  adanya  logo  dan tagline.  Warna  didominasi  warna merah  dan kuning  sebagai  corporate  identity  Oemah Djari, serta  warna  putih  agar  memberi  kesan  bersih  dan  sederhana,  Slider  akan  bergantian menampilkan foto secara otomatis. Lalu terdapat juga tombol menu pada bagian atas website yaitu beranda, hotel, menu restoran, profil dan keranjang
Gambar 16. Halaman Hotel
Halaman hotel berisikan informasi fasilitas dan pilihan kamar hotel, disertakan juga foto yang mempresentasikan hotel sebagai hotel syariah dengan model keluarga muslim yang sedang menikmati kamar hotel dan fasilitasnya. Pada halaman hotel ini juga pengguna dapat melihat ulasan  dan  memesan  kamar  dengan  mudah  dengan  pembayaran  secara  transfer  setelah melakukan  pembayaran  pengguna  dapat  datang  ke  hotel  sesuai  dengan  waktu  pemesanan kamar.
Gambar 17. Menu Restoran
Pada halaman menu restoran pengguna dapat melihat ulasan dan memesan menu yang tersedia, tampilan pada halaman ini terdapat info promo yang sedang berlangsung lalu diikuti foto serta informasi nama menu, latar halaman diberi warna putih agar pengguna dapat fokus pada  menu  yang  ditampilkan  namun  agar  tidak  terlihat  kosong  diberi  ilustrasi  makanan  dan minuman pada samping kiri dan kanan. Pembayaran pesanan dapat dilakukan dengan transfer, hal  ini  dilakukan  untuk  meminimalisir  terjadinya  kerugian.  Setelah  pengguna  melakukan pembayaran  makan  pengguna  dapat  menunggu  sampai  pesanan  diantar  ke  lokasi. Pemberitahuan pesanan akan dikabarkan oleh karyawan Oemah Djari yang mengantar pesanan ke nomor telepon yang telah didaftarkan.
Gambar 18. Keranjang
Halaman keranjang berisikan aktivitas pesanan yang dilakukan pengguna, ada beberapa tombol  yang  dapat  diakses  oleh  pengguna  yaitu  pesanan,  bukti  pemesanan,  dan  riwayat
pesanan. Pada pemesanan berisikan pesanan yang dimasukan kedalam keranjang namun belum melakukan pembayaran sehingga pengguna dapat mengedit apabila menginginkan perubahan pada pesanan. Terdapat juga tombol untuk menghapus pesanan dan bayar sekarang. Lalu pada bukti  pembayaran  berisikan  informasi  untuk  melakukan  konfirmasi  serta  dapat melihat  bukti pembayaran  yang  telah  dilakukan.  Dan  terakhir  adanya  riwayat  pesanan  dimana  pengguna dapat memberikan review pada pesanan atau melihat kembali pesanan yang sudah dilakukan.
Gambar 19. Profile
Terakhir  menu profile ,  terdapat  sub  menu,  yaitu  tombol  untuk  keluar  dan  pengaturan profile  yang  berisikan  informasi  data  pribadi  pengguna,  pada  menu  profil  pengguna  dapat melakukan perubahan data diri seperti foto profil, user name, email, no. telepon, dan kata sandi. Tersedia juga tombol untuk menyimpan perubahan dan batalkan perubahan apabila pengguna merasa ragu untuk merubah informasi data diri.
Kemudian  hasil  desain website diujikan  kembali  dengan  wawancara  pada  Sri  Winarso Martyas  Edi  sebagai  ahli  UI/UX  dan  Martin  Setyawan  sebagai  pemilik  Oemah  Djari.    Dari wawancara bersama ahli didapatkan hasil bahwa website sudah menampilkan informasi dengan jelas  serta  tampilan  visual  sudah  memuaskan.  Lalu  hasil  tes  yang  dilakukan  bersama  pemilik Oemah Djari didapatkan hasil bahwa website sudah memenuhi kebutuhan perusahaan dalam memuat informasi serta menampilkan citra Oemah Djari dengan baik.
Gambar 20. Pengujian Pada Ahli UI/UX dengan Sri Winarso Martyas Edi
Gambar 21. Pengujian Pada Pemilik Oemah Djari dengan Martin Setyawan
Selanjutnya dilakukan pengujian pada target pengguna dengan memberi link figma untuk mencoba  prototype website Oemah  Djari  setelah  itu  pengguna  dapat  menjawab  kuesioner dengan skala likert dalam bentuk google form untuk mencari tahu tingkat kepuasan pengguna dengan  melihat  domain  pertanyaan  pada  Pieces  framework.  Pieces  framework  merupakan kerangka  kerja yang digunakan untuk mengklasifikasikan suatu masalah, peluang dan arahan yang terdiri dari enam variabel yakni Performance (Keandalan), Information and Data (Data dan Informasi), Economics (Nilai Ekonomis), Control and Security (Pengendalian dan Pengamanan), Efficiency (Efisiensi), Service (Pelayanan)  (Pangri  et  al  2021)  Pertanyaan  memiliki  pilihan alternatif jawaban dimulai dari skor tertinggi sampai skor terendah, nilai skor jawaban adalah lima untuk sangat setuju, empat untuk setuju, tiga untuk netral, dua untuk tidak setuju, dan satu untuk  sangat  tidak  setuju.  Dimana  kemudian  dalam  menentukan  rata-rata  tingkat  kepuasan menurut (Nazir, 2014) metode likert dapat menggunakan rumus berikut:
Gambar 22. Rumus rata-rata kepuasan
Setelah mendapat hasil rata-rata kepuasan maka selanjutnya adalah melihat penentuan skala kepuasan menggunakan model yang didefinisikan oleh Kaplan dan Norton yang menjadi acuan (Lokapitasari Belluano et al 2019) Jika website mendapatkan hasil rata-rata dalam kategori puas  maka website dianggap  berhasil.  Interval  tingkat  kepuasan  dapat  dilihat  pada  tabel  1 sebagai berikut:
Tabel 1. Tingkat kepuasan
Skor Kategori 1- 1,79 Sangat Tidak Setuju/Sangat Tidak Puas 1,8-2,59 Sangat Tidak/Tidak Puas 2,6-3,3 Netral/Ragu-ragu 3,4-4,91 Setuju/Puas 4,92-5 3. Sangat Setuju/Sangat Puas
Hasil  pengujian  yang  didapatkan  dari  45  responden  diperoleh  hasil  rata-rata  kepuasan pengguna sebagai berikut:
1. Performance
Tabel 2 Kalkulasi Variabel Performance Performance Jawaban SS S N TS STS Skoe 5 4 3 2 1 Total Jawaban 68 189 8 3 2
𝑅𝐾 = (5 ∗ 68)   +   (4 ∗ 189)   +   (3 ∗ 8)   +   (2 ∗ 3)   +   (1 ∗ 2)
(6 ∗ 45)
𝑅𝐾 = 1128 270 = 4,17
Perhitungan  pada performance mendapatkan  hasil  4,17  dapat  ditarik  kesimpulan dengan melihat tabel 1, kepuasan pengguna termasuk kategori puas
2. Information & Data
Tabel 3 Kalkulasi Variabel Information & Data Information & Data Jawaban SS S N TS STS Skoe 5 4 3 2 1 Total Jawaban 68 104 4 2 2 𝑅𝐾 = (5 ∗ 68)   +   (4 ∗ 104)   +   (3 ∗ 4)   +   (2 ∗ 2)   +   (1 ∗ 2) (4 ∗ 45) 𝑅𝐾 = 774 180 = 4,3
Hasil  perhitungan  pada information  &  data didapatkan  hasil  4,3  dapat  ditarik kesimpulan kepuasan pengguna termasuk kategori puas.
3. Economics
Tabel 4 Kalkulasi Variabel Economics Economics Jawaban SS S N TS STS Skoe 5 4 3 2 1 Total Jawaban 23 63 3 1 0 𝑅𝐾 = (5 ∗ 23)  +   (4 ∗ 63)   +   (3 ∗ 3)   +   (2 ∗ 1)   +   (1 ∗ 0) (2 ∗ 45)
𝑅𝐾 = 378 90 = 4,2
Hasil  perhitungan  pada economic s  didapatkan  hasil  4,2.  dapat  ditarik  kesimpulan kepuasan pengguna termasuk kategori puas
4. Control & Security
Tabel 5 Kalkulasi Variabel Control & Security Control & Security Jawaban SS S N TS STS Skoe 5 4 3 2 1 Total Jawaban 39 86 7 1 2 𝑅𝐾 = (5 ∗ 39)  +   (4 ∗ 86)   +   (3 ∗ 7)   +   (2 ∗ 1)   +   (1 ∗ 2)
(3 ∗ 45)
𝑅𝐾 = 564 135 = 4,17
Hasil  perhitungan  pada control  &  security didapatkan  hasil  4,17  dapat  ditarik kesimpulan kepuasan pengguna termasuk kategori puas
5. Efficiency
Tabel 6 Kalkulasi Variabel Efficiency Efficiency Jawaban SS S N TS STS Skoe 5 4 3 2 1 Total Jawaban 31 56 3 0 0 𝑅𝐾 = (5 ∗ 31)  +   (4 ∗ 56)   +   (3 ∗ 3)   +   (2 ∗ 0)   +   (1 ∗ 0) (2 ∗ 45)
𝑅𝐾 = 388 90 = 4,31
Hasil  perhitungan  pada efficiency didapatkan  hasil  4,31  dapat  ditarik  kesimpulan kepuasan pengguna termasuk kategori puas
6. Service
Tabel 7 Kalkulasi Variabel Service Service Jawaban SS S N TS STS Skoe 5 4 3 2 1 Total Jawaban 26 59 3 0 2 𝑅𝐾 = (5 ∗ 26)  +   (4 ∗ 59)   +   (3 ∗ 3)   +   (2 ∗ 0)   +   (1 ∗ 2) (2 ∗ 45)
𝑅𝐾 = 377 90 = 4,18
Hasil  perhitungan  pada Service didapatkan  hasil  4,18  dapat  ditarik  kesimpulan kepuasan pengguna termasuk kategori puas
Berdasarkan  dari  perhitungan  di  atas  didapatkan  hasil  rata-rata  kepuasan  pengguna sebesar 4,23 poin, berdasarkan indikator tabel 1, maka secara keseluruhan responden merasa puas pada website yang dibuat sehingga perancangan desain antar muka website Oemah Djari dapat dikatakan berhasil.

## Simpulan
Kesimpulan yang didapatkan dalam penelitian serta pengujian ini adalah penggunaan user centered design sangat membantu dalam perancangan desain website Oemah Djari dalam hal memilih layout ,  warna  dan font sesuai  dengan  kebutuhan  pengguna.  Pendekatan  dengan metode UCD membantu desainer memahami keinginan pengguna pada perancangan website , sehingga tidak merubah perilaku pengguna dalam menggunakan website Oemah Djari. Selain itu perancangan website dengan pendekatan UCD telah berhasil menjawab masalah kebutuhan pengguna  maupun  pihak  Oemah  Djari,  hal  ini  dapat  dilihat  dari  uji  coba  yang  dilakukan  dan mendapatkan  hasil  memuaskan  dengan  4,23  poin, Website dianggap  berhasil  memberikan informasi serta tampilan yang dibutuhkan.
Saran  pengembangan  penelitian  kedepan  yang  dapat  dilakukan  adalah  merancang sebuah aplikasi mobile yang dikembangkan dari website Oemah Djari pada sisi pemesanan agar memudahkan pengguna mengakses lewat desktop maupun smartphone.

## Daftar Pustaka
Ariawan, Moh Dani, Agung Triayudi, and Ira Diana Sholihati. 2020. “Perancangan User Interfac e Design  Dan  User  Experience  Mobile  Responsive  Pada  Website  Perusahaan.” Media Informatika Budidarma 4 (1): 161. https://doi.org/10.30865/mib.v4i1.1896.
Badan Pusat Statistik. 2020. “Analisis Hasil Survei Dampak Covid - 19 Terhadap Pelaku Usaha.” Badan Pusat Statistik. 2020. https://www.bps.go.id/publication/2020/09/15/9efe2fbda7d674c09ffd0978/analisis- hasil-survei-dampak-covid-19-terhadap-pelaku-usaha.html.
Chandra, Angela, Michael Bezaleel Wenas, S Kom, M Cs, Desain Komunikasi Visual, / Universitas, and  Kri sten  Satya  Wacana.  2019.  “Perancangan  Desain  Website  Sekolah  Kristen  Pelita Nusantara  Kasih  Surakarta  Dengan  Pendekatan  User  Centered  Design.” Universitas Kristen Satya Wacana .
Djaslim,  Saladin,  and  Yevis  Marty  Oesman.  2002. Intisari  Pemasaran  Dan  Unsur-Unsur Pemasaran . Bandung: Linda Karya.
DzulfIqar,  Muhammad  Dirga.  2017.  “Perancangan  Website  UIN  Syarif  Hidayatullah  Jakarta Menggunakan  Metode  User  Centered  Design  Dengan  Standard  ISO  9126.” Universitas Islam Negeri Syarif Hidayatullah .
Efendi,  Indan  Kurnia .  2019.  “Mengenal  Foto  Story  Dan  Foto  Essay.”  Www.Kompasiana.Com. December 12, 2019.
Garret, James. 2011. The Elements Of User Experience : User -Centered Design For The Web And Beyond. United State Of America.: New Riders Publishing.
Kusandi. 2013. Dasar Desain Grafis . Tasikmalaya: Edu Publisher.
Lokapitasari  Belluano,  Poetri  Lestari,  Indrawati  Indrawati,  Harlinda  Harlinda,  Fatima  A.R Tuasamu,  and  Dirgahayu  Lantara.  2019.  “Analisis  Tingkat  Kepuasan  Pengguna  Sistem Informasi Perpustakaan Menggunakan Pieces  F ramework.” ILKOM Jurnal Ilmiah 11 (2): 118 – 28. https://doi.org/10.33096/ilkom.v11i2.398.118-128.
Multazam,  Muhammad,  Irving  v  Paputungan,  and  Beni  Suranto.  2020.  “Perancangan  User Interface Dan User Experience Pada Placeplus Menggunakan Pendekatan User Centered Design.” Universitas Islam Indonesia .
Nazir, Moh. 2014. Metode Penelitian . Jakarta : Ghalia Indonesia.
Pambajeng, Furgandini Rencang, and Ardiansyah. 2019. “Pengembangan User Interface (UI) Dan User  Experience  (UX)  Aplikasi  Cashoop  Untuk  Pengelolaan Keuangan  Pribadi.” Teknik Informatika Universitas Ahmad Dahlan .
Pangri, Muzakkir, Sunardi Sunardi, Rusydi Umar, Ahmad Dahlan, Jalan Ring Road Selatan, and Tamanan Banguntapan Bantul. 2021. “Metode Pieces Frameworks Pada Tingkat Kepuasan Pengguna  Sistem  Inf ormasi  Perpustakaan  Universitas  Muhammadiyah  Sorong.” Bina Insani ICT Journal 8 (1): 63 – 72.
Putra,  Tiara  Lisendra,  and  Martin  Setyawan.  2019.  “Perancangan  Media  Informasi  Interaktif Survival Guide Dasar.” Universitas Kristen Satya Wacana .
Sa’ad, Muhammad I bnu. 2020. Otodidak Web Programing . Jakarta: PT. Elex Media Komputindo.
Sihombing, Danton. 2003. Tipografi Dalam Desain Grafis . Jakarta: PR Gramedia Pustaka Utama.
Werdikatama,  I  Putu  Agastya.  2018.  “UI/UX  Design  Guideline.”  Medium.Com.  2018. https://medium.com/ppl-a1-iebs/ui-ux-design-guideline-c6f5f346aefd.
Wijaya,  Alvia  Shanardi.  2019.  “User  Centered  Design.”  Sis.Binus.Ac.Id.  2019. https://sis.binus.ac.id/2019/05/31/user-centered-design/.
Yuhefizar. 2018. 10 Jam Menguasai Internet . Jakarta: Elex Media Komputindo.