JURIKOM (Jurnal Riset Komputer), Vol. 8 No. 6, Desember 2021 e-ISSN 2715-7393 (Media Online), p-ISSN 2407-389X (Media Cetak) DOI 10.30865/jurikom.v8i6.3700 Hal 350−359
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: 119104065@ittelkom-pwt.ac.id, 219104066@ittelkom-pwt.ac.id, 319104079@ittelkom-pwt.ac.id,
4,*faisal@ittelkom-pwt.ac.id, 5ghani@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
JURIKOM (Jurnal Riset Komputer), Vol. 8 No. 6, Desember 2021 e-ISSN 2715-7393 (Media Online), p-ISSN 2407-389X (Media Cetak) DOI 10.30865/jurikom.v8i6.3700 Hal 350−359
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 3. Use Case Diagram Webinar Booking
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.
Gambar 5. Class Diagram Webinar Booking
JURIKOM (Jurnal Riset Komputer), Vol. 8 No. 6, Desember 2021 e-ISSN 2715-7393 (Media Online), p-ISSN 2407-389X (Media Cetak) DOI 10.30865/jurikom.v8i6.3700 Hal 350−359
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.
Gambar 8. Tampilan Signed Up Sukses
JURIKOM (Jurnal Riset Komputer), Vol. 8 No. 6, Desember 2021 e-ISSN 2715-7393 (Media Online), p-ISSN 2407-389X (Media Cetak) DOI 10.30865/jurikom.v8i6.3700 Hal 350−359 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.
Gambar 11. Tampilan Informasi Webinar
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.
Gambar 14. Tampilan Info Pesanan
JURIKOM (Jurnal Riset Komputer), Vol. 8 No. 6, Desember 2021 e-ISSN 2715-7393 (Media Online), p-ISSN 2407-389X (Media Cetak) DOI 10.30865/jurikom.v8i6.3700 Hal 350−359
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.
