## Perancangan UI/UX Webinar Booking Terhadap Kepuasan Pengguna Menggunakan Metode Design Thinking
Rachma Wukir Purwitasari, Purnama Dileon Yamora Nainggolan, Novi Rahmawati, Faisal Dharma Adhinata * , Nur Ghaniaviyanto Ramadhan
Program Studi Rekayasa Perangkat Lunak, Fakultas Informatika, Institut Teknologi Telkom Purwokerto, Banyumas, Indonesia Email: 1 19104065@ittelkom-pwt.ac.id, 2 19104066@ittelkom-pwt.ac.id, 3 19104079@ittelkom-pwt.ac.id,
4,* faisal@ittelkom-pwt.ac.id, 5 ghani@ittelkom-pwt.ac.id Email Penulis Korespondensi: faisal@ittelkom-pwt.ac.id Submitted 20-11-2021 ; Accepted 19-12-2021 ; Published 30-12-2021

## Abstrak
Untuk  memenuhi kebutuhan  pengguna,  merancang  antarmuka  pengguna yang  baik  tidak  hanya  membutuhkan  pengetahuan  mendalam tentang prinsip dan pedoman desain, tetapi juga pemahaman tentang ruang desain multi-komponen. Multi komponen yaitu bagian gambar yang  dapat digunakan, opsi tata letaknya, dan opsi efek visual. Penelitian ini dilakukan untuk memenuhi kebutuhan user. Dengan metode Design Thinking, kita dapat mengetahui kebutuhan user serta mampu menyesuaikan dengan ketertarikan user. Dengan adanya aplikasi Webinar Booking ini diharapkan mampu menjadi solusi untuk kehidupan saat ini.
Kata Kunci: Antarmuka pengguna, Webinar booking, Design Thinking

## Abstract
In order to meet user needs, designing an exemplary user interface requires in-depth knowledge of design principles and guidelines and an understanding of  the  multi-component  design  space.  Multi-components  are  the  image  parts  that  can  be used,  their  layout options,  and visual effects options. This research was conducted to meet user needs. With the Design Thinking method, we can find out the user's needs and adjust to the user's interests. With the Webinar Booking application, it is hoped to be a solution for today's life.
Keywords : User Interface; Webinar Booking; Design Thinking

## 1. PENDAHULUAN
Pandemi COVID19 di seluruh dunia selama periode 2020-2021 telah berdampak pada berbagai aspek kehidupan. Menurut APJII  (Asosiasi  Penyelenggara  Jasa  Internet  Indonesia),  konsumsi  Internet  di  Indonesia  telah  meningkat  0%,  dengan Generasi Z mendominasi penggunaan Internet di antara kelompok usia 10 hingga 25 tahun selama dekade sebelum pandemi [1].  Internet    telah  digunakan  di  banyak  industri  yang  berbeda  termasuk  bisnis,  pendidikan,  pemasaran,  pariwisata  dan banyak lainnya. Penggunaan internet semakin meningkat, terutama di kalangan anak muda. Mereka  memanfaatkan internet dan teknologi informasi untuk  produktif dan belajar tanpa  keluar rumah [2]. Pandemi COVID-19 telah menciptakan berbagai perilaku baru di berbagai aspek masyarakat, termasuk membatasi sejumlah besar orang di suatu daerah sehingga konferensi tidak dapat berlangsung. Ini adalah salah satu alasan mengapa webinar sangat populer.
Di tengah pandemi, salah satu inovasi dalam kegiatan pendidikan adalah penyelenggaraan seminar virtual (webinar). Webinar  adalah  sumber  materi  pembelajaran  yang  tersedia  secara  luas  untuk  mahasiswa,  mahasiswa,  akademisi,  dan masyarakat  umum  [3].  Tentunya    webinar  dari  berbagai  bidang  sangat  membantu  dalam  menambah  pengetahuan  dan pemahaman materi webinar. Mengingat generasi  sekarang masih terkoneksi dengan internet dan perangkat, webinar bisa menjadi  teknik pembelajaran yang efektif bagi mereka. Karena ada banyak webinar baru yang secara kreatif mendorong pertumbuhan pembelajaran jarak jauh [4].
Desain antarmuka pengguna adalah dasar dari aplikasi seluler, bersama dengan desain pengalaman pengguna ( UX ). Pengalaman yang didapat audiens setelah menggunakan aplikasi seluler dikenal sebagai desain UX . Sementara itu, antarmuka visual yang dilihat audiens saat berinteraksi dengan aplikasi seluler dikenal sebagai desain UI .. Menurut Galitz dalam Faizal, dkk, Perancangan antarmuka pengguna adalah bagian terpenting dari sistem komputer atau aplikasi seluler yang dapat dilihat, didengar, dan disentuh. Tujuan dari perancangan antarmuka pengguna adalah untuk membuat semua aktivitas media digital ini menjadi lebih efisien dan menyenangkan. Peran yang sangat penting dari desain antarmuka pengguna membuat interaksi antara audiens dan aplikasi seluler menjadi sangat rentan. Visual memainkan peran penting dalam meningkatkan keterlibatan, karena audiens tidak akan kembali mengunjungi atau menggunakan aplikasi yang mereka anggap buruk [5].
Untuk  memenuhi  kebutuhan  pengguna,  merancang  antarmuka  pengguna  yang  baik  tidak  hanya  membutuhkan pengetahuan mendalam tentang prinsip dan pedoman desain, tetapi juga pemahaman tentang ruang desain multi-komponen. Bagian gambar yang  dapat digunakan, opsi tata letaknya, dan opsi efek visual [6]. Penelitian ini dilakukan untuk memenuhi kebutuhan user ,  karena  kita  menginginkan  aplikasi  yang  dimana  kita  dapat  mengetahui user itu  suka  atau  tidak  dengan tampilan UI/UX yang dibuat dan dapat disesuaikan juga dengan kebutuhan di masa sekarang.

## 2. METODOLOGI PENELITIAN
Untuk memenuhi kebutuhan pengguna, merancang antarmuka pengguna yang baik tidak hanya membutuhkan pengetahuan mendalam  tentang  prinsip  dan  pedoman  desain,  tetapi  juga  pemahaman  tentang  ruang  desain  multi-komponen.  Bagian gambar yang  dapat digunakan, opsi tata letaknya, dan opsi efek visual. Diagram alir sistem Perancangan UI/UX Webinar Booking ditunjukkan pada Gambar 1.
Gambar 1 . Diagram alir sistem Perancangan UI/UX Webinar Booking
2.1 Pengumpulan Data
Tabel 1 . Data Kuesioner Nama Apakah webinar penting? Mengapa? Apakah tertarik? Lukman Nur Hidayat Penting mendapat sertifikat webinar Ya Nisrina Eka Salsabila Sangat penting tau banyak hal Ya Ainun Gensa Sunardi Sangat penting belajar hal baru Ya Almasyifa Grasianti Penting menambah relasi Ya Reyhan Amanuloh Sangat penting menerima bayak informasi Ya
Pengumpulan data  ini menggunakan kuesioner yang diperoleh dari Google Form . Hal ini bertujuan agar tampilan UI/UX yang dibangun dapat sesuai dengan kebutuhan pengguna di masa pandemi.

## 2.2 Preprocessing Data
Preprocessing ini merupakan langkah awal yang perlu dilakukan dalam pengolahan data agar metode dapat bekerja dengan baik.

## 2.3 Penerapan Design Thinking
Design  Thinking  Design  Thinking  adalah  metode  yang  digunakan  untuk  menemukan  solusi  masalah  melalui  proses kolaboratif dengan pengguna, menciptakan layanan inovatif yang memenuhi kebutuhan pengguna dan memecahkan masalah mereka [7]. Terdapat lima langkah yang ada didalam design thinking yang terdapat pada Gambar 2.
Gambar 2 . Metode Design Thinking

## 2.3.1 Emphatize
Pendekatan  design thinking menekankan pada aspek desain yang berpusat pada pengguna, dimana proses berpikir berfokus pada nilai orang sebagai pengguna dan orang itu sendiri. Tidak mengherankan bahwa empati adalah proses  pertama dalam
menciptakan inovasi. Biasanya hal ini dilakukan dengan melakukan survei, observasi dan kegiatan lain yang memungkinkan untuk mendapatkan data yang akurat dari pengguna [8].

## 2.3.2 Define
Define digunakan untuk mengumpulkan semua informasi yang dikumpulkan pada langkah pertama, empati. Saat informasi dikumpulkan, masalahnya diperluas dan data dianalisis untuk menciptakan lingkungan yang stabil. Proses menganalisis suatu masalah membantu menghasilkan ide-ide yang akan digunakan untuk memecahkan masalah secara efektif.

## 2.3.3 Ideate
Pada fase ini, informasi  sebelumnya akan digunakan untuk menghasilkan ide. Selama fase brainstorming, ide-ide dihasilkan untuk menemukan solusi dari masalah yang dipecahkan pengguna. Ide-ide tersebut kemudian dibuang untuk menentukan mana yang terbaik dan dapat digunakan untuk memecahkan masalah, sehingga menghasilkan diagram afinitas[9].

## 2.3.4 Prototype
Langkah prototipe berguna untuk mengimplementasikan ide-ide yang diperoleh dalam langkah ini ke dalam  aplikasi/produk uji. Prototipe juga dapat digunakan untuk brainstorming oleh anggota tim, memungkinkan mereka untuk meningkatkan dan mengevaluasi  kembali  ide-ide  baru.  Ini  juga  memungkinkan  tim  untuk  mengidentifikasi  kekurangan  di  setiap  prototipe, memungkinkan mereka untuk meningkatkan dan menciptakan produk yang lebih baik[10].

## 2.3.5 Test
Prototipe yang dibuat pada langkah sebelumnya akan diuji untuk menilai seberapa baik ia mengatasi/mengelola tantangan yang diidentifikasi pada langkah satu dan dua. [10]. Setelah dilakukan pengujian prototype yang merupakan prototype, bagi calon pengguna hasil yang ada selanjutnya dapat dimodifikasi dan dikembangkan untuk memenuhi kebutuhan.

## 2.4 Validasi Hasil
Perancangan ini dicapai dengan menggunakan pengujian usability dan pengujian pada pengguna yang  menggunakan situs pemesanan webinar  dengan kuesioner online melalui Google Form .

## 3. HASIL DAN PEMBAHASAN
Use case diagram dari Webinar Booking meliputi 2 aktor yaitu Pemesan dan Admin. Selain itu, terdapat juga Registrasi, Login, Memilih Webinar yang akan Diikuti, Mendaftar Webinar yang akan Diikuti, Pembayaran, dan Logout.
Gambar 4 . Flowchart Webinar Booking
Pada gambar 4 di atas merupakan contoh cara kerja sistem Webinar Booking yang diharapkan user sudah memiliki akun dan langsung dilanjutkan ke tahap login . Namun, jika user belum memiliki akun, maka diharapkan untuk membuat akun terlebih dahulu atau registrasi akun. Setelah itu, user dapat login dan dapat memesan webinar, lalu mengkonfirmasi pemesanan webinar. Jika sudah yakin akan mengikuti webinar tersebut, maka user akan disuruh langsung membayar harga webinar. Namun, jika user tidak yakin dalam memilih webinar, user akan ditampilkan pada halaman memesan webinar lagi dan mengulang hingga selesai.
Pada  gambar  5  yang  merupakan  class  diagram  webinar  booking  yang  pertama  ada  login  yang  menghasilkan  data berupa email , username , password , dan phone number . Dari data itu akan masuk ke pengguna yang terdiri dari nama, no. telp, email , dan alamat. Pengguna akan mendapatkan harga dan keterangan yang tertera pada pembayaran dan kode booking . Kemudian  pelanggan  melakukan  pemesanan  yang  meliputi  data  dan  tanggal  pelaksanaan  webinar.  Pada  proses booking terdapat harga dan waktu untuk keterangan pada tiketnya yang berasal dari tiket info. Sedangkan tiket info berasal dari event , sehingga pada saat selesai memesan akan langsung masuk ke nota booking . Pada  perancangan  tampilan UI/UX webinar  booking  ini  dilakukan  menggunakan  metode design  thinking yang meliputi 5 tahap :

## 3.1 Emphatize
Emphatize  adalah  proses  pertama  dalam  menciptakan  inovasi.  Biasanya  hal  ini  dilakukan  dengan  melakukan  survei, observasi dan kegiatan lain yang memungkinkan untuk mendapatkan data yang akurat dari pengguna. Tahap emphatize ini sangat penting, karena berhubungan erat dengan masalah yang dihadapi oleh user ketika mengakses sebuah website. Peneliti wajib  mengetahui  hal  apa  saja  yang  menjadi  masalah user agar  nantinya  website  yang  dibuat  dapat  mempermudah user dalam  mengaksesnya.  Adapun  kesimpulan  dari  data  kuesioner  online  mengenai  masalah  dan  keinginan user yang  sudah terkumpul seperti Tabel 2.
Tabel 2 . Data kuesioner online mengenai masalah dan keinginan user Keinginan Masalah
User menginginkan  tampilan UI/UX yang  mudah, sederhana, informatif, dan user friendly
Tampilan UI/UX kurang user friendly
User mengingkan  tampilan UI/UX yang  tidak  penuh dengan distraksi.
Tampilan UI/UX yang  terlalu  banyak  meletakkan iklan-iklan tidak penting.
User menginginkan  tampilan  pewarnaan UI/UX yang nyaman dipandang.
Pewarnaan  dan  font  size  suatu  tampilan UI/UX tidak memiliki suatu kesatuan.
Hasil dari data di atas dapat digunakan sebagai tujuan dalam membuat UI/UX sesuai dengan apa yang diinginkan oleh user.

## 3.2 Define
Define digunakan untuk mengumpulkan semua informasi yang dikumpulkan pada langkah pertama, empati. Saat informasi dikumpulkan, masalahnya diperluas dan data dianalisis untuk menciptakan lingkungan yang stabil. Proses menganalisis suatu masalah membantu menghasilkan ide-ide yang akan digunakan untuk memecahkan masalah secara efektif.

## 3.3 Ideate
Pada fase ini, informasi  sebelumnya akan digunakan untuk menghasilkan ide. Selama fase brainstorming, ide-ide dihasilkan untuk menemukan solusi dari masalah yang dipecahkan pengguna. Ide-ide tersebut kemudian dibuang untuk menentukan mana yang terbaik dan dapat digunakan untuk memecahkan masalah, sehingga menghasilkan solusi yang terbaik[9].
Tabel 3 . Hasil solusi Permasalahan Solusi Tampilan UI/UX kurang user friendly. Mengembangkan  tampilan UI/UX yang  lebih  mudah dipahami oleh user.
Tampilan UI/UX yang  terlalu  banyak meletakkan iklan-iklan tidak penting.
Menghilangkan atau meminimalisirkan peletakkan iklan- iklan pada suatu tampilan UI/UX.
Pewarnaan  dan  font  size  suatu  tampilan UI/UX tidak memiliki suatu kesatuan.
Mengembangkan  tampilan UI/UX yang  memiliki pewarnaan, font serta style yang nyaman dipandang  saat digunakan oleh user.

## 3.4 Prototype
Langkah prototipe berguna untuk mengimplementasikan ide-ide yang diperoleh dalam langkah ini ke dalam  aplikasi/produk uji. Prototipe juga dapat digunakan untuk brainstorming oleh anggota tim, memungkinkan mereka untuk meningkatkan dan mengevaluasi  kembali  ide-ide  baru.  Ini  juga  memungkinkan  tim  untuk  mengidentifikasi  kekurangan  di  setiap  prototipe, memungkinkan  mereka  untuk  meningkatkan  dan  menciptakan  produk  yang  lebih  baik  [10].  Adapun  tabel  4  yang menampilkan fungsi menu.
Tabel 4 . Fungsi Menu No. Nama Fungsi Kebutuhan Fungsionalitas 1. Home Menampilkan informasi mengenai webinar secara keseluruhan 2. Event Menampilkan daftar webinar yang tersedia 3. Account Menampilkan profil user 4. Keranjang
Menampilkan daftar harga dan daftar pemesanan webinar
Dari  Tabel  4  menjelaskan  tentang  kebutuhan  pengguna  yang  sering  dibutuhkan  untuk  sekarang  ini,  selain  itu pemilihan warna merah pada tampilan UI/UX agar terlihat fresh dan strong bagi para pengguna. Di bawah ini merupakan hasil dari design UI/UX kami.
Gambar 6 . Tampilan Landing Page
Gambar 6. Memperlihatkan tampilan awal saat pengsguna membuka aplikasi Live Webinar.
Gambar 7 . Tampilan Sign Up
Gambar  7.  Memperlihatkan  tampilan  sign  up  untuk  mendaftar  akun  ketika  para  pengguna  baru  saja  mengunduh aplikasi Live Webinar.
Pada gambar 8. Merupakan tampilan ketika pengguna telah berhasil melakukan sign up.
Gambar 9 . Tampilan Login
Pada gambar 9. Merupakan tampilan saat pengguna telah memiliki akun dan hendak melakukan login .
Gambar 10 . Tampilan Profile
Pada gambar 10 merupakan tampilan profile pengguna aplikasi Live Webinar yang meliputi nama, username , email , no.telp, dan alamat.
Pada gambar 11 memperlihatkan halaman Event yang berisi tentang info webinar yang akan berlangsung.
Gambar 12 . Tampilan WebinarYang Dipilih
Pada gambar 12 merupakan tampilan webinar yang telah dipilih oleh pengguna. Pada tampilan ini, terdapat beberapa informasi tentang webinar yang dipilih dan fitur untuk menambah atau mengurangi jumlah tiket yang dibeli.
Gambar 13 . Tampilan WebinarYang Dipilih
Pada gambar 13 merupakan tampilan webinar yang telah dipilih oleh pengguna. Pada tampilan ini, terdapat beberapa informasi tentang webinar yang dipilih dan fitur untuk menambah atau mengurangi jumlah tiket yang dibeli.
Pada  Gambar  14  merupakan  tampilan  ketika  pengguna  hendak  melakukan  checkout,  yaitu  dengan  menambahkan acara webinar mana yang hendak dilakukan checkout oleh pengguna. Dimana nanti akan terlihat acara webinar apa saja yang ada didalam keranjang, dan juga menampilkan jumlah yang harus dibayar.
Gambar 15 . Metode Pembayaran
Pada  gambar  15  pengguna  diharapkan  untuk  membayar  tiket  webinar  yang  telah  dipilih  dengan  memilih  metode pembayaran seperti card , bank account , atau paypal .

## Gambar 16. Tampilan Checkout
Pada gambar 16 adalah tampilan checkout yang terdiri dari tanggal pemesanan, status pemesanan, email , no. telp, dan info webinar.

## 3.5 Test
Pada tahap test ini nantinya akan dilakukan uji coba online tampilan UI/UX apakah sudah memenuhi kebutuhan user atau belum. Test ini kami lakukan dengan membagikan kuesioner dari google form ke para responden. Terkumpul sebanyak 12 responden yang menjawab pertanyaan yang diajukan dari kami. Rata-rata dari mereka menyukai desain UI/UX yang kami buat dan ada juga yang memberi saran jika tombol checkout dan bayar seharusnya warnanya lebih baik agak berbeda dari background agar user dapat membedakan tombolnya dangan warna background .

## 4. KESIMPULAN
Tampilan  desain UI/UX pada  suatu  produk  atau  aplikasi  memang  sangat  penting,  karena  dapat  memengaruhi  suatu keberhasilan  dari  penggunaan user .  Pembuatan  desain UI/UX dengan  menggunakan  metode Design  Thinking dapat memudahkan user untuk berinteraksi dengan desain yang sudah dibuat dan memenuhi kebutuhan user serta meminimalisir terjadinya kekecewaan user dengan tampilan UI/UX yang dibuat. Dengan adanya aplikasi Webinar Booking ini diharapkan mampu menjadi solusi atau kemudahan terutama kehidupan saat ini.

## REFERENCES
[1] J. Akuntansi, D. Pranitasari, and A. N. Sidqi, “Analisis Kepuasan Pelanggan Elektronik Shopee Menggunakan Metode E-Service Quality dan Kartesius,” vol. 18, no. 02, pp. 12–31, 2021.
[2] D. A. Anggara, W. Harianto, A. Aziz, T. Informatika, U. Kanjuruhan, and S. Malang, “Prototipe Desain User Interface Aplikasi Ibu Siaga,” J. Teknol. dan Sist. Inf. , vol. 4, pp. 58–74, 2021.
[3] E. Tirtadarma, A. E. B. Waspada, and E. F. Jasjfi, “Kajian Peranan Desain UX (Pengalaman Pengguna) - UI (Antar Muka Pengguna) Mobile Application Kategori Transportasi Online terhadap Gaya Hidup Bertransportasi Masyarakat Urban,” J. Seni dan Reka Ranc. J. Ilm. Magister Desain , vol. 1, no. 1, p. 181207, 2018, doi: 10.25105/jsrr.v1i1.4046.
[4] R. Irwandana, A. D. Herlambang, M. C. Saputra,  D. A. Fatah, A. P. Novitasari, and H. Tolle, “Evaluasi dan Perancangan User Interface  untuk  Meningkatkan  User  Experience  Menggunakan  Metode  Human-Centered  Design  dan  Heuristic  Evaluation  Pada Aplikasi Ezypos,” Rekayasa , vol. 2, no. 2, pp. 130–143, 2018.
[5] M. G. Hartadi, I. W. Swandi, and I. W. Mudra, “Warna Dan Prinsip Desain User Interface (Ui) Dalam Aplikasi Seluler ‘Bukaloka,’” J. Dimens. DKV Seni Rupa dan Desain , vol. 5, no. 1, p. 105, 2020, doi: 10.25105/jdd.v5i1.6865.
[6] R. E. Roth, “Rethinking Cartography Curriculum To Train the Contemporary Cartographer,” 6Th Int. Conf. Cartogr. Gis, Vols 1 2 , no. September, pp. 155–166, 2016.
[7] R. Madanih, M. Susandi, and A. Zhafira, “Penerapan Design Thinking Pada Usaha Pengembangan Budi Daya Ikan Lele Di Desa Pabuaran,  Kecamatan  Gunung  Sindur,  Kabupaten  Bogor,” J.  Bus.  Entrep. ,  vol.  2,  no.  1,  pp.  55–64,  2019,  doi: 10.24853/baskara.2.1.55-64.
[8] S. Amalina, F. Wahid, V. Satriadi, F. S. Farhani, and N. Setiani, “Rancang Purwarupa Aplikasi UniBook Menggunakan Metode Pendekatan Design Thinking,” Semin. Nas. Apl. Teknol. Inf. , no. Oktober, pp. 50–55, 2017.
[9] A.  A.  Razi,  I.  R.  Mutiaz,  and  P.  Setiawan,  “Penerapan  Metode  Design  Thinking  Pada  Model  Perancangan  Ui/Ux  Aplikasi Penanganan Laporan Kehilangan Dan Temuan Barang Tercecer,” Desain Komun. Vis. Manaj. Desain dan Periklanan , vol. 3, no. 02, p. 219, 2018, doi: 10.25124/demandia.v3i02.1549.
[10]  A. Azis and T. Dirgahayu, “Pengembangan Model E-Office dan Purwarupa Intitusi Perguruan Tinggi di Indonesia (Development of E-Office Model and Prototype for Colleges in Indonesia),” Juita , vol. 3, no. 3, pp. 129–142, 2015.