364
Implementasi Metode Design Thinking Untuk Merancang User Interface Dan User Experience Aplikasi BANDOL
(Banaran Ndue Darurat Online)
Implementation of The Design Thinking Method to Design The User Interface and User Experience for The BANDOL Application (Banaran Ndue Darurat Online)
Alya Khansa Dzakkiyah1, Sarmini2
1,2Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Amikom Purwokerto E-mail: 1alyakhns26@gmail.com, 2sarmini@amikompurwokerto.ac.id
Abstrak
Letak wilayah Kelurahan Pasir Kidul yang memiliki berbagai macam karakteristik seperti padat penduduk, Daerah Aliran Sungai (DAS), jalur lintas jalan propinsi dan kawasan industri menjadikan wilayah Kelurahan Pasir Kidul rawan akan kejadian bencana alam ataupun tindak kejahatan. Masih belum adanya sistem peringatan dini di wilayah tersebut menyebabkan tidak ada antisipasi warga dalam menghadapi kejadian bencana dan lambatnya penanganan dari pihak terkait bahkan timbulnya korban jiwa. Maka dari ini penelitian ini akan membuat rancangan antarmuka aplikasi BANDOL. Aplikasi BANDOL merupakan aplikasi tanggap darurat yang diharapkan dapat memantau lingkungan Kelurahan Pasir Kidul serta memberikan peringatan ketika terjadi bencana ataupun tindak kejahatan. Pada perancangan antarmuka aplikasi ini menggunakan metode design thinking yang meliputi beberapa tahapan yaitu empathize (mengumpulkan masalah), define (mendefinisikan permasalahan), ideate (menghasilkan ide dan inovasi), prototype (kerangka desain), dan testing (pengujian hasil).
Penelitian ini menghasilkan sebuah rancangan antarmuka aplikasi BANDOL, dan berdasarkan pada pengujian SUS didapatkan nilai sebesar 77,1 dengan kategori nilai adalah baik atau dapat dikatakan rancangan aplikasi telah sesuai dengan kebutuhan pengguna.
Kata kunci: aplikasi, bandol, design thinking, rancangan, UI/UX
Abstract
location of the Pasir Kidul Village area which has various characteristics such as dense population, river watersheds (DAS), provincial road routes and industrial areas makes the Pasir Kidul Village area prone to natural disasters or crime. There is still no early warning system in the area, causing residents to have no anticipation in facing disaster events and slow response from related parties and even fatalities. Therefore, this research will create a BANDOL application interface design. The BANDOL application is an emergency response application which is expected to be able to monitor the Pasir Kidul Village environment and provide warnings when a disaster or crime occurs. In designing this application interface, we use the design thinking method which includes several stages, namely empathize (collecting problems), define (defining problems), ideate (generating ideas and innovations), prototype (design framework), and testing (testing results). This research produced a BANDOL application interface design, and based on SUS testing, a score of 77.1 was obtained with the score category being good or it could be said that the application design was in accordance with user needs.
Keywords: application, bandol, design thinking, design, UI/UX
365
1. PENDAHULUAN
Kelurahan Pasir Kidul adalah salah satu kelurahan di wilayah Banyumas dengan empat karakteristik utama kondisi wilayah yaitu padat penduduk, Daerah Aliran Sungai (DAS), lintas jalan propinsi dan juga beberapa tempat pabrik industri. Karakteristik tersebut menyebabkan wilayah Pasir Kidul rawan akan kejadian bencana alam dan tindak kejahatan.
Kebakaran, banjir, kecelakaan lalu lintas, pencurian dan lain-lain adalah beberapa kemungkinan kejadian bencana dan tindak kejahatan di wilayah Pasir Kidul.
Masih belum adanya sistem yang dapat memberikan peringatan secara dini akan kejadian bencana alam dan tindak kejahatan seperti pencurian menyebabkan terlambatnya penanganan yang dilakukan oleh pihak terkait dan juga menyebabkan kerugian baik material dan non material yang cukup besar bahkan timbulnya korban jiwa.
Oleh karena itu pada penelitian ini akan dilakukan sebuah perancangan user interface dan user experience aplikasi BANDOL (Banaran Ndue Darurat Online) dengan mengimplentasikan metode design thinking [1][2]. Tujuan penelitian ini adalah menghasilkan sebuah rancangan aplikasi yang dapat memberikan peringatan dini akan terjadinya bencana alam dan juga tindak kejahatan sehingga dengan rancangan aplikasi ini dapat membantu warga masyarakat untuk melakukan antisipasi dari kemungkinan kejadian bencana, selain itu rancangan aplikasi ini dapat mempercepat penanganan kejadian oleh pihak terkait dan juga meminimalisir kerugian yang lebih besar [3][4][5].
Implementasi design thinking dalam perancangan aplikasi BANDOL bertujuan agar pada perancangan tampilan antarmuka aplikasi sesuai dan memenuhi kebutuhan pengguna.
Beberapa penelitian sebelumnya telah banyak menggunakan metode design thinking dalam perancangan aplikasi. Karnawan, et.al [6] menyebutkan bahwa perancangan antarmuka dengan metode tersebut dapat dihasilkan visualisasi aplikasi yang high fidelity design. Ikhlas & Zukhri [7] menyebutkan bahwa metode design thinking terbukti dapat membantu menghasilkan sebuah user interface yang sesuai dengan kebutuhan pengguna. Pada akhirnya dengan terpenuhinya semua prinsip UI/UX diharapkan rancangan aplikasi BANDOL dapat mudah dipahami dan semua fungsi-fungsi yang tersedia sesuai dengan kebutuhan pengguna [8][9][10].
2. METODE PENELITIAN
Konsep penelitian ditunjukkan pada Gambar 1 yang menggambarkan urutan setiap langkah dalam metode design thinking.
Gambar. Metode Design Thinking [9]
Berdasarkan gambar diatas dapat dijelaskan bahwa dalam metode design thingking terdapat beberapa langkah yang harus dikerjakan. Tahap pertama adalah tahap empathize, tahap ini dilakukan untuk mengetahui dan memahami permasalahan yang ada dengan cara menggali data dan informasi dari pengguna sesuai dengan kebutuhan mereka untuk menyelesaikan permasalahan. Tahap kedua adalah tahap define yaitu menentukan kebutuhan pengguna baik
366
kebutuhan fungsional dan non fungsional berdasarkan pada kebutuhan pengguna.
Penggambaran kebutuhan pengguna disajikan dalam bentuk use case diagram dan activity diagram. Tahap ketiga yaitu ideate merupakan kegiatan untuk menetapkan solusi terbaik dari masalah dengan menetapkan fitur dan fungsi apa saja yang akan dikerjakan berdasarkan pada kebutuhan fungsional dan non fungsional yang telah ditentukan sebelumnya. Tahap keempat adalah membuat prototype, tahapan dimana pembuatan desain antarmuka aplikasi dilakukan sesuai dengan penetapan fitur dan fungsi pada tahap sebelumnya. Dalam pembuatan prototype perlu adanya sebuah tindakan yang cepat jika terjadi kesalahan dan kelalaian atau yang disebut dengan quick drop. Dan tahap terakhir adalah tahap pengujian yang dilakukan untuk mengetahui kekurangan dari prototype yang telah dibuat, pengujian ini bertujuan untuk mengetahui gap yang ada pada prototype yang dibuat dengan kebutuhan pengguna yang sebenarnya. Pengujian diberikan ke beberapa responden yang merupakan warga dari kelurahan Pasir Kidul.
3. HASIL DAN PEMBAHASAN 3.1 Use Case Diagram
Gambar 2. Use Case Diagram
Gambar 2 diatas menjelaskan tentang pemodelan kebutuhan sistem yang dirancang dalam bentuk use case diagram, dimana pada gambar tersebut terdapat 3 aktor yang memiliki hak akses terhadap aplikasi BANDOL yaitu admin, Ketua RT dan warga masyarakat. Pada use case diagram yang disajikan juga menunjukkan masing-masing perilaku aktor pada sistem yang dirancang.
367 3.2 Activity Diagram
3.2.1 Activity Diagram Melihat Pengumuman
Gambar 3. Activity Diagram Melihat Pengumuman
Gambar 3 menjelaskan proses ketika user ingin melihat pengumuman. Proses dapat dilakukan dengan cara menekan menu pengumuman lalu akan tampil halaman pengumuman, selanjutnya user menekan pengumuman yang akan dibaca lalu akan muncul pengumuman yang dipilih.
3.2.2 Activity Diagram Melihat Info Kejadian
368
Gambar 4. Activity Diagram Melihat Info Kejadian
Gambar 4 menjelaskan proses user ketika akan melihat info kejadian. Proses dapat dilakukan dengan cara menekan menu info kejadian lalu akan tampil halaman info kejadian, selanjutnya user menekan info kejadian yang akan dibaca lalu akan muncul info kejadian yang dipilih.
3.2.3 Activity Diagram Membuat Laporan Kejadian
369
Gambar 5. Activity Diagram Membuat Laporan Kejadian
Gambar 5 menjelaskan proses user ketika akan melaporkan kejadian. Proses dapat dilakukan dengan cara menekan menu laporan kejadian lalu akan tampil form laporan kejadian, kemudian user melakukan proses pengisian hingga pelaporan selesai.
3.2.4 Activity Diagram Membuat Pengumuman
370
Gambar 6. Activity Diagram Membuat Pengumuman
Gambar 6 menjelaskan proses admin ketika akan membuat pengumuman. Proses dapat dilakukan dengan cara menekan menu pengumuman lalu akan tampil halaman pengumuman, kemudian tekan button buat pengumuman lalu tampil form pembuatan pengumuman, melakukan proses pembuatan pengumuman hingga selesai.
3.2.5 Activity Diagram Mengedit Jadwal Ronda
371
Gambar 7. Activity Diagram Mengedit Jadwal Ronda
Gambar 7 menjelaskan proses admin ketika akan mengedit jadwal ronda. Proses dapat dilakukan dengan cara menekan menu jadwal ronda akan tampil halaman jadwal ronda, kemudian tekan button edit jadwal lalu tampil form edit jadwal ronda, melakukan proses pengeditan hingga selesai.
372 3.3 Prototype
3.3.1 Tampilan Halaman Login
Gambar 8. Tampilan Halaman Login
Gambar 8 adalah tampilan halaman login pada aplikasi BANDOL. Pada halaman login, terdapat nama aplikasi yaitu BANDOL (Banaran Nduwe Darurat Online). Terdapat pula kolom username dan password, pilihan akses level serta tombol login bagi pengguna yang sudah terdaftar. Sementara tombol register digunakan untuk mengarahkan warga yang belum terdaftar ke halaman pendaftaran.
373 3.3.2 Tampilan Halaman Home
Gambar 9. Tampilan Halaman Home
Gambar 9 merupakan desain halaman home yang pada bagian header menampilkan nama aplikasi dan nama pemilik akun. Pada bagian konten berisi menu dan submenu yang terdapat pada aplikasi BANDOL yaitu menu informasi berisi submenu pengumuman yang berfungsi untuk menampilkan pengumuman yang dibuat oleh admin dan info kejadian yang berisi laporan kejadian yang dibuat oleh warga. Menu ronda berisi submenu jadwal ronda yang berfungsi menampilkan jadwal ronda masing-masing RT, laporan kejadian yang berisi form pelaporan kejadian dan peta keamanan yang berfungsi menampilkan peta wilayah Kelurahan Pasir Kidul.
Menu SOS berisi submenu kriminal, bencana alam, kebakaran dan kecelakaan yang menampilkan peringatan darurat dan menghubungkan dengan pihak berwajib.
374 3.3.3 Tampilan Halaman Laporan Kejadian
Gambar 10. Tampilan Halaman Laporan Kejadian
Gambar 10 merupakan tampilan halaman laporan kejadian. Pada tampilan halaman laporan kejadian terdapat form bagi warga untuk melaporkan kejadian yang terjadi. Form tersebut terdiri dari kolom nama pelapor yang diisi nama pelapor, kolom jenis kejadian yang diisi dengan kejadian yang terjadi dan kolom kronologi yang diisi dengan menjelaskan bagaimana kronologi kejadian terkait. Pada bagian bawah terdapat button kirim laporan yang berfungsi untuk mengirimkan laporan yang telah dibuat.
375 3.1.1 Tampilan Halaman SOS
Gambar 11. Tampilan Halaman SOS
Gambar 11 merupakan tampilan halaman SOS. Tampilan halaman SOS berisi 4 menu yaitu kriminal, bencana alam, kebakaran dan kecelakaan yang apabila diklik akan memunculkan peringatan adanya keadaan darurat yang berisi opsi lihat titik kejadian dan panggil bantuan.
Opsi titik kejadian menampilkan titik lokasi kejadian, sedangkan opsi panggil bantuan akan menghubungkan langsung dengan pihak berwajib yang terkait dengan kejadian yang terjadi.
3.4 Test
Pengujian rancangan antarmuka aplikasi BANDOL diuji menggunakan System Usability Scale (SUS). Responden pengujian merupakan warga masyarakat kelurahan Pasir Kidul.
Berdasarkan hasil pengujian dengan metode SUS didapatkan nilai sebesar 77,1 yang memiliki arti nilai tersebut masuk pada kategori baik. Atau dapat dikatakan bahwa rancangan aplikasi BANDOL dapat diterima oleh pengguna serta sesuai dan memenuhi kebutuhan pengguna.
4. KESIMPULAN DAN SARAN
Telah dihasilkan sebuah rancangan antarmuka aplikasi BANDOL (Banaran Ndue Darurat Online) dengan menggunakan metode design thingking. Dan berdasarkan hasil pengujian SUS, aplikasi tersebut mendapatkan nilai sebesar 77,1 yang artinya rancangan
376
aplikasi dapat diterima dengan baik oleh pengguna serta sesuai dan memenuhi kebutuhan pengguna. Hasil penelitian ini masih banyak kekuranganya dan pada penelitian selanjutnya rancangan aplikasi dapat dibangun menjadi sebuah aplikasi yang siap digunakan oleh pengguna.
DAFTAR PUSTAKA
[1] D. Haryuda, M. Asfi, and R. Fahrudin, “Perancangan UI/UX Menggunakan Metode Design Thinking Berbasis Web pada Laportea Company,” J. Ilm. Teknol. Infomasi Terap., Vol. 8, No. 1, pp. 111–117, 2021, doi: 10.33197/jitter.vol8.iss1.2021.730.
[2] A. M. Denasfi and E. G. Wahyuni, “Perancangan User Interface dan User Experience Situs Web Aplikasi Traveling ‘ANGLO’ Dengan Metode Design Thinking,” Automata,
Vol. 4, No. 1, 2023, [Online]. Available:
https://journal.uii.ac.id/AUTOMATA/article/download/26335/14742.
[3] F. N. Asfarisy and H. Koesyanto, “Implementasi Sistem Tanggap Darurat Berdasarkan National Fire Protection Association (NFPA) 1600 di PT. LG Electronics Indonesia,”
Indones. J. Public Heal. Nutr., Vol. 1, No. 2, pp. 223–233, 2021, [Online]. Available:
http://journal.unnes.ac.id/sju/index.php/IJPHN.
[4] G. Septyana, “Sistem Informasi Tanggap Darurat Terpadi di BPBD Kabupaten Majalengka,” IKRA-ITH Inform., Vol. 4, No. 3, pp. 120–124, 2020.
[5] Sharyanto, Suhartono, and B. G. Sudarsono, “Rancang Bangun Sistem Tanggap Darurat Berbasis Web Suku Dinas Penangulangan Kebakaran dan Penyelamatan Jakarta Utara,” J. Manaj. Inform. Jayakarta, Vol. 2, No. April, pp. 198–207, 2022.
[6] G. Karnawan, S. Andryana, and T. Komalasari, Ratih, “Implementasi User Experience Menggunakan Metode Design Thinking pada Prototype Aplikasi Cleanstic,” J.
Teknoinfo, Vol. 15, No. 1, p. 61, 2021, doi: 10.33365/jti.v15i1.540.
[7] M. I. Ikhlas and Z. Zukhri, “Implementasi Metode Design Thinking pada Perancangan UI/UX Website Tracking GPS Tiara Track,” Automata, Vol. 3, No. 2, pp. 101–110, 2022, [Online]. Available: https://journal.uii.ac.id/AUTOMATA/article/view/24213.
[8] R. A. Yudarmawan and D. M. S. Sudana, A.A Komplang Oka, Arsa, “Perancangan User Interface dan User Experience SIMRS pada Bagian Layanan,” JITTER-Jurnal Ilm.
Teknol. dan Komput., Vol. 1, No. 2, 2020.
[9] C. S. Surachman, M. R. Andriyanto, C. Rahmawati, and P. Sukmasetya, “Implementasi Metode Design Thinking pada Perancangan UI/UX Design Aplikasi Dagang.in,” TeIKa, Vol. 12, No. 2, pp. 157–169, 2022, doi: 10.36342/teika.v12i02.2922.
[10] R. P. Gani, I. A. Puspita, and W. Tripiawan, “Perancangan UI/UX Design pada Dashboard Monitoring Proyek Menggunakan Metode Design Thinking Untuk Penerapan Sistem Earned Value Management pada PT. XYZ,” e-Proceeding Eng., Vol.
8, No. 5, p. 8465, 2021.
