INTUITIVE UI DESIGN FOR MANGROVE TREE DETECTION APP
Abstract
Abstract: The rapid degradation of mangrove ecosystems threatens coastal biodiversity, shoreline stability, and carbon sequestration capacity, particularly in areas experiencing intense human activity. However, community-based participatory mangrove monitoring remains limited due to the lack of accessible and user-friendly digital tools. This study aims to design an intuitive mobile application for mangrove tree detection and participatory ecological monitoring using a User-Centered Design (UCD) approach. The research was conducted iteratively through user needs analysis, prototype development, and usability evaluation involving local governments, conservation practitioners, and non-expert users. The proposed application integrates machine learning for automated mangrove recognition with geospatial visualization and real-time feedback to support field-based monitoring. Usability evaluation using the System Usability Scale (SUS) yielded an overall score of 82.3, categorized as excellent usability, indicating high user satisfaction and intuitive interaction. The results demonstrate that integrating UCD and machine learning enhances usability, user engagement, and the accuracy of mangrove documentation under real field conditions. Overall, this study presents a field-ready, user-centered mobile solution that bridges usability engineering and participatory mangrove monitoring as a replicable model for inclusive ecological application development.
Keywords: Carbon sequestration; mangrove monitoring; mobile application; user-centered design; usability evaluation
Abstrak: Degradasi ekosistem mangrove yang semakin cepat mengancam keanekaragaman hayati pesisir, stabilitas garis pantai, dan kapasitas sekuestrasi karbon, terutama di wilayah dengan aktivitas manusia yang intens. Namun, pemantauan mangrove secara partisipatif berbasis komunitas masih terbatas akibat kurangnya perangkat digital yang mudah diakses dan ramah pengguna. Penelitian ini bertujuan merancang aplikasi mobile yang intuitif untuk deteksi pohon mangrove dan pemantauan ekologi partisipatif dengan menggunakan pendekatan User-Centered Design (UCD). Penelitian dilakukan secara iteratif melalui analisis kebutuhan pengguna, pengembangan prototipe, dan evaluasi kegunaan dengan melibatkan pemerintah daerah, praktisi konservasi, serta pengguna non-ahli. Aplikasi yang diusulkan mengintegrasikan pembelajaran mesin untuk pengenalan mangrove secara otomatis dengan visualisasi geospasial dan umpan balik waktu nyata guna mendukung pemantauan di lapangan. Evaluasi kegunaan menggunakan System Usability Scale (SUS) menghasilkan skor keseluruhan sebesar 82,3 yang termasuk dalam kategori kegunaan sangat baik, menunjukkan tingkat kepuasan pengguna yang tinggi dan interaksi yang intuitif. Hasil penelitian menunjukkan bahwa integrasi UCD dan pembelajaran mesin meningkatkan kegunaan, keterlibatan pengguna, serta akurasi dokumentasi mangrove dalam kondisi lapangan. Secara keseluruhan, penelitian ini menyajikan solusi mobile berbasis UCD yang siap digunakan di lapangan dan menjembatani rekayasa kegunaan dengan pemantauan mangrove partisipatif sebagai model replikatif bagi pengembangan aplikasi ekologi yang inklusif.
Kata kunci: Carbon sequestration; mangrove monitoring; mobile application; user-centered design; usability evaluation
References
[2] G. Augusto, R. P. Duarte, and C. Cunha, “Enhancing Quality of Life: Human-Centered Design of Mobile and Smartwatch Applications for Assisted Ambient Living,” J. Auton. Intell., vol. 7, no. 1, 2023, doi: 10.32629/jai.v7i1.762.
[3] B. T. Ariyanto, Y. Ruldeviyani, G. S. B. Dharmawan, and M. I. Bahar, “Optimizing User Satisfaction: A Comprehensive Evaluation of the Info BMKG App Using UEQ+ and IPA Methods,” Int. J. Eng. Contin., vol. 3, no. 1, pp. 139–156, 2024, doi: 10.58291/ijec.v3i1.242.
[4] S. Supiyandi, C. Rizal, H. Hermansyah, and ..., “Desain Ui/Ux Sistem Informasi Hutan Mangrove Menggunakan Metode Rapid Application Development (Rad),” Escaf, pp. 1294–1300, 2024, [Online]. Available: https://semnas.univbinainsan.ac.id/index.php/escaf/article/view/699%0Ahttps://semnas.univbinainsan.ac.id/index.php/escaf/article/download/699/379
[5] J. Farao, B. Malila, N. Conrad, T. Mutsvangwa, M. X. Rangaka, and T. S. Douglas, “A User-Centred Design Framework for mHealth,” PLoS One, vol. 15, no. 8, p. e0237910, 2020, doi: 10.1371/journal.pone.0237910.
[6] E. Veas, “Mobile augmented reality for environmental monitoring,” ResearchGate, 2012, [Online]. Available: [insert URL or PDF here]
[7] S. Lee, “Designing for sustainability through user-centered innovation,” 2025. [Online]. Available: [insert URL here]
[8] N. Yingta, P. Saadati, J. Abdelnour-Nocera, O. Brew, T. Clemmensen, and I. U. Rehman, “Measuring UX at Work: A Diary Study of Healthcare Workers Ordinary Experiences With mHealth Apps,” 2023, doi: 10.14236/ewic/bcshci2023.7.
[9] K. Kuusinen and T. Mikkonen, “On Designing UX for Mobile Enterprise Apps,” pp. 221–228, 2014, doi: 10.1109/seaa.2014.17.
[10] M. N. Islam, H. Bouwman, and A. K. M. N. Islam, “Evaluating Web and Mobile User Interfaces With Semiotics: An Empirical Study,” Ieee Access, vol. 8, pp. 84396–84414, 2020, doi: 10.1109/access.2020.2991840.
[11] M. N. Islam and F. Tétard, “Integrating Semiotics Perception in Usability Testing to Improve Usability Evaluation,” pp. 145–169, 2013, doi: 10.4018/978-1-4666-4046-7.ch007.
[12] M. N. Islam and F. Tétard, “Exploring the Impact of Interface Signs’ Interpretation Accuracy, Design, and Evaluation on Web Usability,” J. Syst. Inf. Technol., vol. 16, no. 4, pp. 250–276, 2014, doi: 10.1108/jsit-03-2014-0019.
[13] S. Supiyandi, C. Rizal, H. Hermansyah, and S. Khodijah, “Implementation of Rapid Application Development Methodology in UI/UX Design of Mangrove Forest Information System,” J. Inf. Syst. Res., vol. 6, no. 1, pp. 125–133, 2024, doi: 10.47065/josh.v6i1.5941.
[14] P. Baviskar and R. Dhiman, “Advancing the Spatiotemporal Assessment of Mangrove Ecosystem Using Machine Learning Approaches – Case Study of a Coastal Megacity, Mumbai, India,” 2022, doi: 10.1002/essoar.10510134.1.
[15] S. C. Decena, C. Avorque, A. Arribado, and D. Macasait, “Aboveground and Belowground Carbon Stocks in Mangrove Ecosystems Along Carigara Bay in Leyte, Philippines,” 2023, doi: 10.21203/rs.3.rs-2910104/v1.
[16] G. R. Gaffara, M. R. Pratama, S. Kurniawan, and W. O. Nurhaidar, “The Mangrove Distribution Detection of National Capital Region (Case Study: Balikpapan Bay),” Iop Conf. Ser. Earth Environ. Sci., vol. 1447, no. 1, p. 12003, 2025, doi: 10.1088/1755-1315/1447/1/012003.
[17] I. Y. Kurniawan, M. U. H. Al Rasyid, and S. Sukaridhoto, “Mangrove Tree Density Detector Using YOLO Based on Darknet Framework Using RGB Drone Imagery,” Int. J. Comput. Digit. Syst., vol. 15, no. 1, pp. 661–672, 2024, doi: 10.12785/ijcds/160149.
[18] J. Sui et al., “Diversity and Structure of the Root-Associated Bacterial Microbiomes of Four Mangrove Tree Species, Revealed by High-Throughput Sequencing,” PeerJ, vol. 11, p. e16156, 2023, doi: 10.7717/peerj.16156.
[19] D. Kamthonkiat, C. Rodfai, A. Saiwanrungkul, S. Koshimura, and M. Matsuoka, “Geoinformatics in Mangrove Monitoring: Damage and Recovery After the 2004 Indian Ocean Tsunami in Phang Nga, Thailand,” Nat. Hazards Earth Syst. Sci., vol. 11, no. 7, pp. 1851–1862, 2011, doi: 10.5194/nhess-11-1851-2011.
[20] W. Wannasiri, M. Nagai, K. Honda, P. Santitamnont, and P. Miphokasap, “Extraction of Mangrove Biophysical Parameters Using Airborne LiDAR,” Remote Sens., vol. 5, no. 4, pp. 1787–1808, 2013, doi: 10.3390/rs5041787.
[21] M. R. Nandika et al., “How Drones and Lidar Help in Counting Mangrove Trees: A Practical Approach,” Geogr. Environ. Sustain., vol. 18, no. 3, pp. 88–98, 2025, doi: 10.24057/2071-9388-2025-3958.
[22] H. Niwa, H. Ise, and M. Kamada, “Suitable LiDAR Platform for Measuring the 3D Structure of Mangrove Forests,” Remote Sens., vol. 15, no. 4, p. 1033, 2023, doi: 10.3390/rs15041033.
[23] F. Baihaqi, “Offline-First Mobile Applications for Remote Ecological Monitoring,” in SpringerLink, 2024.
[24] A. Pekpazar, “Usability measurement of mobile applications with System Usability Scale (SUS) BT - Global Joint Conference on Industrial Engineering,” 2018. [Online]. Available: [insert PDF link here]
[25] M. Maceli and J. Yu, “Designing Mobile Interfaces for Ecological Literacy in Coastal Communities,” in Springer Chapter, 2020.
[26] S. Luna, M. Gold, and A. Albert, “Developing mobile applications for environmental and biodiversity citizen science: Considerations and recommendations BT - Multimedia Tools and Applications for Environmental & Biodiversity Informatics,” Springer, 2018, pp. 9–30. [Online]. Available: [insert URL here]
[27] D. Sutrisno, S. N. Gill, and S. Suseno, “The development of spatial decision support system tool for marine spatial planning,” Int. J. Digit. Earth, vol. 11, no. 9, pp. 863–879, 2018.
