Perancangan User Interface dan User Experience Website KosIN dengan Pendekatan Design Thinking
on
JNATIA Volume 2, Nomor 2, Februari 2024
Jurnal Nasional Teknologi Informasi dan Aplikasinya
p-ISSN: 2986-3929
Perancangan User Interface dan User Experience Website KosIN dengan Pendekatan Design Thinking
Ida Bagus Ari Widhianaa1 dan Luh Gede Astutia2
aProgram Studi Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Udayana, Bali
Jln. Raya Kampus UNUD, Bukit Jimbaran, Kuta Selatan, Badung, 08261, Bali, Indonesia 1ibariwidhiana@student.unud.ac.id 2lg.astuti@unud.ac.id
Abstract
The need for education or employment drives people to move to other areas that offer greater access to education or job opportunities. Individuals who move to a new area for higher education or job search often face challenges in finding accommodations that meet their needs. The increasing number of newcomers has led to a growing demand for housing. The main constraint is that individuals must physically go to the location to search for accommodations like boarding houses ("kos" in Indonesian). Therefore, innovation is needed by leveraging technology that can provide a solution to the challenges faced. The solution to this problem is to create a boarding house search application. The method used in this research is Design Thinking. Design Thinking aims to understand the problems and user needs, so that the developed application is truly beneficial for the users. For its testing, the Usability Testing method is used to assess to what extent a product can be used by specific users based on effectiveness, efficiency, and user satisfaction.
Keywords: Design Thinking, Usability Testing, Education, Employment
Kebutuhan akan pendidikan atau pekerjaan mendorong masyarakat dari berbagai daerah untuk pergi ke daerah lainnya yang memiliki akses pendidikan atau pekerjaan yang lebih banyak [1]. Masyarakat yang datang ke daerah yang baru untuk menempuh pendidikan tinggi atau mencari pekerjaan seringkali menghadapi tantangan dalam mencari tempat tinggal yang memenuhi kebutuhan mereka. Dalam hal pendidikan, memiliki tempat tinggal yang nyaman dan teratur akan memberikan lingkungan yang mendukung belajar, istirahat, dan relaksasi. Sebaliknya, dalam konteks pekerjaan, memiliki tempat tinggal yang dekat dengan tempat kerja atau transportasi umum dapat menghemat waktu dan energi yang berharga. Banyaknya pendatang baru membuat kebutuhan akan tempat tinggal semakin meningkat, yang menjadi kendala adalah masyarakat harus datang langsung ke tempat tersebut untuk mencari tempat tinggal seperti kos, sedangkan pencarian informasi kos tidak selalu dalam waktu yang cepat.
Pada umumnya pencarian kos masih dilakukan secara manual dengan mendatangi langsung kos atau melalui iklan poster yang ada di sekitaran jalan. Dengan adanya teknologi yang sudah berkembang diperlukan sistem pencarian kos yang memanfaatkan internet. Berdasarkan permasalahan tersebut, penulis memiliki ide untuk membuat sebuah perancangan desain UI/UX untuk website KosIN sebagai website informasi pencarian kos yang didesain khusus untuk memudahkan pengguna dalam mencari dan memilih kos sesuai dengan kebutuhan. Website ini juga memberikan informasi detail mengenai fasilitas, harga dan lokasi sesuai yang dicari oleh pengguna. Hasil dari penelitian ini adalah memberikan rekomendasi desain UI/UX pada website KosIN dengan mengidentifikasi permasalahan dan kebutuhan dari pengguna dalam hal ini berupa para pencari kos.
Pada penelitian ini metode yang digunakan dalam perancangan desain UI/UX adalah metode design thinking. Design thinking memiliki beberapa tahapan seperti emphatize, define, ideate,
prototype dan test. Pada tahap test atau pengujian dilakukan dengan metode usability testing untuk menguji usability dari desain UI/UX yang telah dirancang. Dari tahap pengujian akan didapatkan hasil apakah desain layak dikembangkan lebih lanjut atau tidak.
Design Thinking adalah suatu metode pendekatan yang digunakan untuk memecahkan permasalahan dan mengembangkan solusi inovatif. Design thinking tidak hanya berfokus pada apa yang dilihat dan dirasakan, namun juga berfokus pada pengalaman pengguna (user). Design thinking digunakan untuk mencari solusi yang paling efektif dan efesien untuk memecahkan suatu masalah yang kompleks [2]. Terdapat 5 tahapan dalam pendekatan metode design thinking, yaitu sebagai berikut:
Gambar 1. Tahapan Proses Design Thinking (Teo Yu Siang and the Interaction Design Foundation).
-
a. Empathize
Empathize merupakan tahapan pertama yang sangat penting untuk dilakukan. Tahapan ini bertujuan untuk memahami permasalahan yang dialami pengguna agar kita dapat merasakan, memahami dan mencari solusi terhadap permasalahan tersebut. Pada tahapan Empathize, ada beberapa hal yang harus dilakukan yang harus dilakukan yaitu wawancara, observasi, serta menggabungkan observasi dan wawancara.
-
b. Define
Define merupakan proses menganalisis dan memahami hasil yang telah dilakukan tahapan empathize sebelumnya. Tahapan ini bertujuan menentukan pernyataan masalah sebagai point of view atau perhatian utama pada penelitian.
-
c. Ideate
Ideate merupakan tahapan untuk melakukan proses pencarian ide serta gagasan sebagai landasan dalam membuat prototype rancangan yang akan dibuat. Ide dan gagasan inilah yang akan menjadi solusi dari permasalahan yang dihadapi pengguna.
-
d. Prototype
Prototype merupakan tahapan untuk melakukan proses perancangan awal suatu produk yang akan dibuat. Perancangan awal produk bertujuan untuk mendeteksi kesalahan sejak awal dan memperoleh kemungkinan baru. Rancangan awal yang telah dibuat akan diuji coba kepada pengguna untuk memperoleh respon atau feedback yang sesuai untuk menyempurnakan rancangan aplikasi.
-
e. Test
Test merupakan tahapan akhir dari design thinking. Tahapan ini melakukan pengujian untuk mengumpulkan respon atau feedback pengguna dari berbagai rancangan akhir prototype. Respon atau feedback akan menjadi acuan untuk menyempurnakan rancangan atau prototype yang dibuat. Tahapan ini bersifat life cycle sehingga memungkinkan perulangan dan kembali pada tahap perancangan sebelumnya apabila terdapat kesalahan.
Usability didefinisikan sebagai sejauh mana suatu produk dapat digunakan oleh pengguna tertentu berdasarkan efektivitas, efisiensi dan kepuasan dalam konteks penggunaan guna mencapai tujuan yang ditentukan [3]. Dengan demikian, usability testing merupakan sebuah metode evaluasi yang digunakan untuk mengukur sejauh mana suatu sistem atau produk dapat digunakan dengan baik oleh pengguna berdasarkan aspek efektvitas, efisiensi dan kepuasan. Sebelum melakukan evaluasi, perlu dipersiapkan pertanyaan dan tugas yang akan diberikan kepada pengguna. Tugas tersebut akan memberikan jawaban terhadap tujuan utama dari evaluasi sistem. Metode usability testing perlu mencakup lima hal yaitu [4]:
Gambar 2. Metode Usability Testing (enlabsoftware.com)
-
a. Learnability
Sistem harus mudah dipelajari sehingga pengguna dapat secepatnya menyelesaikan tugas dengan menggunakan sistem.
-
b. Efficiency
Sistem hendaknya efisien sehingga pengguna yang telah mempelajari sistem dapat mencapai tingkat produktivitas yang tinggi.
-
c. Memorability
Sistem harus mudah diingat sehingga setelah meninggalkan sistem untuk beberapa waktu pengguna yang telah biasa menggunakannya tetap dapat menggunakannya tanpa harus mempelajari dari awal.
-
d. Errors
Sistem harusnya memiliki kesalahan yang rendah sehingga pengguna akan sedikit melakukan kesalahan ketika menggunakan sistem dan apabila pengguna melakukan kesalahan maka dapat memperbaikinya dengan mudah.
-
e. Satisfaction,
Sistem harus nyaman untuk digunakan sehingga memuaskan pengguna.
Implementasi metode Design Thinking pada pembuatan prototype website KosIN berhasil dilakukan dengan menggunakan kelima tahapan pada Design Thinking. Detail dari masing – masing tahapan adalah sebagai berikut.
Pada tahapan ini dilakukan dengan mengobservasi kepada pengguna dengan survei menggunakan media Google Form. Pengguna diberikan beberapa pertanyaan yang berkaitan dengan website pencari kos yang akan dikembangkan. Survei dilakukan kepada 10 orang
responden dengan usia 18-22 tahun dan seluruhnya merupakan mahasiswa di Bali yang pernah melakukan sewa kos. Untuk pertanyaan akan dijabarkan sebagai berikut.
Gambar 3. Jawaban responden untuk pertanyaan alasan mencari kos
Pada gambar 3 di atas merupakan jawaban dari pertanyaan alasan responden mencari kos. Jawaban yang dipilih paling banyak adalah mencari tempat tinggal yang dekat dengan tempat studi atau tempat kerja.
Informasi kos seperti apa yang ingin anda cari?
10 responses
Gambar 4. Jawaban responden untuk pertanyaan informasi kos yang ingin dicari
Pada gambar 4 di atas merupakan jawaban dari pertanyaan informasi kos yang ingin dicari. Jawaban yang dipilih paling banyak adalah informasi seperti harga kos serta fasilitas kos yang ingin dicari ketika melakukan pencarian kos.
Kendala yang anda alami selama melakukan pencarian kos?
10 responses
Gambar 5. Jawaban responden untuk pertanyaan kendala yang dialami selama mencari kos
Pada gambar di atas merupakan jawaban dari pertanyaan kendala yang dialami selama mencari kos. Jawaban yang dipilih paling banyak adalah harga kos yang cukup mahal. Selain itu juga, kendala yang dialami responden seperti sulit menghubungi pemilik kos dan terbatasnya fasilitas kos.
Setelah dilakukan proses emphatize yang bertujuan untuk mengetahui permasalahan yang dihadapi oleh pengguna, selanjutnya akan masuk ke dalam tahapan define. Berdasarkan hasil survei yang telah dilakukan pada tahap emphatize, didapatkan pernyataan permasalahan bahwa diperlukan sebuah website pencari kos yang didalamnya memuat informasi seperti harga sewa, lokasi, kontak pemilik kos dan lain sebagainya. Selain itu, website ini juga menyediakan pembayaran sewa kos.
Dari tahap sebelumnya yaitu define, ide dan gagasan yang telah didapat akan menjadi solusi dari permasalahan yang ada yaitu membuat sebuah website pencarian kos yang memuat informasi lengkap di dalamnya. Website dipilih agar semakin memudahkan pengguna dalam mengakses tanpa perlu menginstal terlebih dahulu. Untuk mewujudkan ide dan gagasan ini maka untuk langkah pertama dibuat rancangan awal berupa sketsa tampilan antarmuka website dalam bentuk wireframe.
Gambar 6. Wireframe website
Setelah mewujudkan ide dan gagasan ke dalam bentuk wireframe, selanjutnya masuk ke dalam tahapan pembuatan desain prototype. Prototype ini terdiri dari kumpulan desain high-fidelity yang nantinya akan dihubungkan satu sama lain sehingga menjadi prototype utuh yang dapat dijalankan.
a.
Desain tampilan antarmuka halaman beranda
Beranda merupakan halaman pertama yang akan terlihat ketika pengguna mengakses website kosIN. Pada bagian navigation bar terdapat beberapa menu, seperti pencarian, daftar kos, artikel dan tentang kami. Terdapat juga button atau tombol masuk di pojok kanan atas yang digunakan untuk login jika sudah memiliki akun atau register pada website.
Cari Kos Kosan Nyaman Dengan Harga Yang Terbaik
Ayo cari kos dengan harga yang kualitas yang terbaik
Gambar 7. Halaman beranda
-
b. Desain tampilan antarmuka halaman pencarian
Halaman pencarian digunakan pengguna untuk melakukan pencarian kos berdasarkan lokasi pengguna. Pada halaman ini terdapat search bar yang digunakan untuk mencari kos sesuai keinginan pengguna. Selain itu, terdapat berbagai pilihan kos yang dibuat dalam bentuk card yang berisi informasi kos seperti nama kos, alamat kos, harga sewa kos dan lain sebagainya.
Gambar 8. Halaman pencarian
-
c. Desain tampilan antarmuka halaman login dan register
Halaman login digunakan pengguna untuk masuk ke website dengan akun yang telah didaftarkan sebelumnya. Pengguna dapat memasukkan username dan password yang
telah dibuat untuk masuk ke website. Halaman register digunakan
pengguna untuk Pengguna dapat dan juga nomor
mendaftarkan mendaftarkan telepon.
akun agar pengguna dapat menggunakan website. akunnya dengan memasukkan username, password
Gambar 9. Halaman login
Gambar 10. Halaman register
-
d. Desain tampilan antarmuka halaman penyewaan kos
Halaman ini berisi detail informasi dari kos yang ingin disewa. Pengguna dapat melakukan pengajuan sewa kos dengan klik button atau tombol ajukan sewa. Setelah pengguna melakukan pengajuan sewa kos, maka akan menampilkan halaman pembayaran untuk sewa kos yang telah diajukan. Halaman pembayaran berisi detail pembayaran sewa kos dan juga metode pembayaran yang akan digunakan oleh pengguna.
Gambar 11. Halaman detail kos
Gambar 12. Halaman pembayaran kos
-
e. Desain tampilan antarmuka halaman profil
Halaman ini berisi profil dari pengguna dan juga detail informasi kos yang telah disewa sebelumnya. Pada halaman ini pengguna dapat melakukan logout atau keluar dari website kosIN
Gambar 13. Halaman profil
Tahapan terakhir dari metode design thinking adalah test atau pengujian terhadap produk yang telah dibuat. Pada proses pengujian ini dilakukan 2 tahap, yaitu tahap pertama pengguna akan diminta mengerjakan beberapa task atau tugas yang telah ditentukan. Task atau tugas yang diberikan bertujuan untuk mengetahui pemahaman pengguna terhadap prototype website yang telah dibuat. Selanjutnya, pada tahap kedua pengguna akan mengisi kuesioner USE. Kuesioner ini berisi 16 pertanyaan yang dikategorikan dalam 4 kategori yakni Usefulness, Satisfaction, Ease of Use, Ease for Learning. Kuesioner ini menggunakan skala likert sebagai pengukuran data dengan rentang 1-5 dimana 1 berarti sangat tidak setuju dan 5 berarti sangat setuju.
Task atau tugas diberikan kepada pengguna untuk menguji prototype yang dibuat. Pengujian dilakukan oleh pengguna melalui platform MAZE. Task atau tugas yang akan diberikan kepada pengguna adalah sebagai berikut:
Tabel 1. Task Pengujian Prototype
Task Penjelasan Task
Task 1 Melakukan register pada website
Task 2 Melakukan login pada website
Task 3 Melakukan pencarian kos pada website
Task 4 Melakukan pembayaran sewa kos pada website
Task 5 Melakukan logout pada website
Selanjutnya, pengguna akan melakukan pengukuran usability dengan pengisian kuesioner USE. Pertanyaan yang diberikan pada kuesioner USE adalah sebagai berikut:
Tabel 2. Kuesioner USE
Aspek Usability Pertanyaan
|
Usefulness |
Apakah aplikasi berguna untuk pengguna? Apakah aplikasi memiliki kemampuan dan fungsi sesuai dengan ekspetasi? Apakah aplikasi sesuai dengan kebutuhan pengguna? Apakah aplikasi membantumu menjadi lebih efektif? Apakah aplikasi membantumu menjadi lebih produktif? Apakah aplikasi membantumu menghemat waktu saat digunakan? |
|
Satisfaction |
Apakah aplikasi sesuai dengan yang diekspetasikan? Apakah aplikasi nyaman untuk digunakan? Apakah aplikasi menyenangkan untuk digunakan? |
|
Ease of Use |
Apakah aplikasi mudah digunakan? Apakah aplikasi mudah dimengerti? Apakah aplikasi user friendly? Apakah User menemukan inkonsistensi disaat menggunakan aplikasi? Apakah tampilan menu dalam aplikasi mudah dikenali? |
Ease of Learning Apakah aplikasi mudah untuk dipelajari cara penggunaannya?
|
Apakah aplikasi mudah diingat tentang cara penggunaannya? |
Responden yang terlibat dalam pengukuran usability testing ini adalah terdiri atas 10 orang dengan rentang usia 18-22 tahun dan merupakan mahasiswa di Bali yang pernah melakukan sewa kos. Selanjutnya akan menghitung feedback yang telah diberikan oleh responden. Perhitungan tersebut dapat dihitung menggunakan persentase kelayakan dengan rumus sebagai berikut:
n . lx i i Skor yang diobservasi 4
Persentase Kelayakan =----—--------- × 100
Skor maksimum
Berikut hasil perhitungan persentase kelayakan yang diperoleh untuk prototype desain dari website KosIN:
Tabel 3. Perhitungan Persentase Kelayakan
|
Aspek Usability |
Skor Responden |
Skor Maksimal |
Nilai (%) |
|
Usefulness |
235 |
300 |
78.33 |
|
Satisfaction |
115 |
150 |
76.66 |
|
Ease of Use |
189 |
250 |
75.6 |
|
Ease of Learning |
80 |
100 |
80 |
|
Total |
619 |
800 |
77.37 |
Selanjutnya, mencari kategori kelayakan dengan menghitung interval menggunakan rumus sebagai berikut:
Interval (I) =
100
Jumlah skor (Hkert)
100
5
= 20
Tabel 4. Kategori Kelayakan
Kategori Kelayakan Nilai (%)
Sangat tidak bermanfaat < 21
Tidak bermanfaat 21 - 40
Kategori Kelayakan Nilai (%)
Berdasarkan hasil penelitian yang telah dilakukan, dapat disimpulkan bahwa metode pendekatan Design Thinking berhasil diimplementasikan dalam proses perancangan desain UI/UX website KosIN. Dengan menggunakan metode Design Thinking, produk yang dihasilkan adalah desain prototype website yang berfokus pada kebutuhan pengguna.
Melalui 5 tahapan Design Thinking, peneliti dapat mengidentifikasi permasalahan yang dihadapi oleh pengguna dan memahami kebutuhan mereka. Selanjutnya, ide dan gagasan dikembangkan sebagai solusi untuk permasalahan tersebut. Pengujian dilakukan menggunakan metode kuesioner USE (Usefulness, Satisfaction, Ease of Use, dan Ease of Learning). Hasil pengujian menunjukkan bahwa aplikasi KosIN memiliki nilai 78.33% pada aspek usefulness, 76.66% pada aspek satisfaction, 75.6% pada aspek ease of use, dan 80% pada aspek ease of learning. Dengan total nilai 77.37% dari kuesioner USE, prototype desain UI/UX dari website KosIN dinilai "Bermanfaat" berdasarkan kategori tabel kelayakan.
Hal ini menunjukkan bahwa desain prototype UI/UX website KosIN memiliki tingkat learnability, memorability, efficiency, errors, dan satisfaction. Dengan demikian, dapat disimpulkan bahwa pendekatan Design Thinking dalam perancangan website KosIN telah berhasil menghasilkan desain yang sesuai dengan kebutuhan pengguna dan memberikan pengalaman pengguna yang positif.
Daftar Pustaka
-
[1] Yusmaida, Y., Neneng, N., & Ambarwari, A. (2020). Sistem Informasi Pencarian Kos Berbasis Web Dengan Menggunakan Metode Hill Climbing. Jurnal Teknologi Dan Sistem Informasi, 1(1), 68–74. https://doi.org/10.33365/jtsi.v1i1.212
-
[2] Sari, I. P., Kartina, A. H., Pratiwi, A. M., Oktariana, F., Nasrulloh, M. F., & Zain, S. A. (2020). Implementasi Metode Pendekatan Design Thinking dalam Pembuatan Aplikasi Happy Class Di Kampus UPI Cibiru. Edsence: Jurnal Pendidikan Multimedia, 2(1), 45–55. https://doi.org/10.17509/edsence.v2i1.25131
-
[3] Joo, S., Lin, S., & Lu, K. (2011). A Usability Evaluation Model for Academic Library Websites: Efficiency, Effectiveness and Learnability. Journal of Library and Information Studies, 2(December 2011), 11–26. Retrieved from http://jlis.lis.ntu.edu.tw/article/v9-2-
2.pdf
-
[4] Huda, N. (2019). Implementasi Metode Usability Testing Dengan System Usability Scale Dalam Penilaian Website RS Siloam Palembang. Kumpulan Jurnal Ilmu Komputer, 6(1), 36-48.
-
[5] Putra, I M. P. D., & I Wayan S. (2022). Perancangan Desain UI/UX Untuk Aplikasi Loyalty Point Agent Menggunakan Metode Design Thinking. Jurnal Nasional Teknologi Informasi dan Aplikasinya, 1(1), 243-254.
Halaman ini sengaja dibiarkan kosong
404
Discussion and feedback