Frontend Design of Spatial Working Memory Test Application for Junior and Vocational High School Students Using the Waterfall Method

Spatial Working Memory (SWM) is an essential cognitive function that supports learning processes, reasoning, mathematical abilities, and academic achievement among students. Despite its importance, accessible and digital-based tools for assessing spatial working memory remain limited, particularly for junior and vocational high school students. This study focuses on designing and developing the frontend of a web-based SWMT application, guided by the Waterfall development approach involving literature studies, interviews with psychology experts, observations, questionnaires, interface design using Figma, implementation with Laravel, HTML, and CSS, and usability and accessibility evaluations. Accessibility testing was conducted using the WebAIM Contrast Checker based on Web Content Accessibility Guidelines (WCAG), while usability assessment was carried out through the SUS instrument with 72 participants from junior and vocational high school levels. The results indicate that seven out of eleven evaluated interface elements successfully met WCAG 2.0 Level AA accessibility standards, with contrast ratios exceeding the minimum requirement of 4.5:1. Four elements, namely the login form and login button, the independent test start button, the test score display, and the PDF download button, require further improvement due to insufficient contrast levels. Usability evaluation produced an average SUS score of 66.15, categorized as "OK" with marginal acceptance, indicating that the application can be used independently while still requiring improvements in navigation consistency, instruction clarity, and overall user experience. This study offers a meaningful contribution toward building an open and inclusive digital tool for cognitive assessment in Indonesian educational settings and provides a foundation for future integration of backend functionality and psychometric validation.

Keywords: Spatial Working Memory, Cognitive Assessment, Frontend Development, WCAG Accessibility, System Usability Scale

Copyright (c) 2026 Journal of Software Engineering and Multimedia (JASMED)

This work is licensed under a Creative Commons Attribution 4.0 International License.

[1] Badan Pusat Statistik. (2025). Statistik Telekomunikasi Indonesia 2024. https://www.bps.go.id/id/publication/2025/08/29/beaa2be400eda6ce6c636ef8/statistik-telekomunikasi-indonesia-2024.html

[2] Badan Pusat Statistik. (2024). Potret Penyandang Disabilitas di Indonesia: Hasil Long Form SP2020. https://www.bps.go.id/id/publication/2024/12/20/43880dc0f8be5ab92199f8b9/portrait-of-persons-with-disabilities-in-indonesia-long-form-pc2020-results.html

[3] Karolina, N. W., Pharmawati, M., & Setyawati, I. (2019). Prevalensi dan frekuensi gen buta warna siswa sekolah dasar di Kabupaten Badung, Bali, Indonesia. https://doaj.org/article/c3973042926742938b78d3fe0306dd7f

[4] World Wide Web Consortium. (n.d.). WCAG 2 Overview. https://www.w3.org/WAI/standards-guidelines/wcag/

[5] Centre for Accessibility Australia. (n.d.). What is the WCAG Standard? https://www.accessibility.org.au/guides/what-is-the-wcag-standard/

[6] Esteban, L., Vivas, A. B., Fuentes, L. J., & Estévez, A. F. (2015). Spatial working memory is enhanced in children by differential outcomes. Scientific Reports, 5, 17112. https://doi.org/10.1038/srep17112

[7] Fanari, R., Meloni, C., & Massidda, D. (2023). Visuospatial working memory abilities in children analyzed by the bricks game task (BGT). Psychological Research. https://doi.org/10.1007/s00426-023-01803-1

[8] Goldsmiths, University of London. (2022). New working memory test aids teaching and research. https://www.gold.ac.uk/news/jack-and-jill-working-memory-test-aids-teaching-and-research/

[9] Hafiz, P., & Bardram, J. E. (2020). The Ubiquitous Cognitive Assessment Tool for Smartwatches: Design, Implementation, and Evaluation Study. JMIR mHealth and uHealth. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7296405/

[10] Fariza, A., & Mulyono., H. (2020). Analisis Dan Perancangan Sistem Informasi Layanan Penerimaan Tamu Pada Sekretariat Daerah Kantor Gubernur Provinsi Jambi. Manajemen Sistem Informasi, 5, (4), 489–499.

[11] Ependi, U., Putra, A., & Panjaitan, F. (2019). Evaluasi tingkat kebergunaan aplikasi administrasi penduduk menggunakan teknik System Usability Scale. Register: Jurnal Ilmiah Teknologi Sistem Informasi, 5(1), 63–76. https://doi.org/10.26594/register.v5i1.1412

[12] Cowan, N. (2017). The many faces of working memory and short-term storage. Psychonomic Bulletin & Review, 24(4), 1158–1170. https://doi.org/10.3758/s13423-016-1191-6

[13] Lewis, J. R. (2018). The System Usability Scale: Past, Present, and Future. International Journal of Human–Computer Interaction, 34(7), 577–590. https://doi.org/10.1080/10447318.2018.1455307

[14] Acosta-Vargas, P., Salvador-Ullauri, L., & Luján-Mora, S. (2021). A Heuristic Method to Evaluate Web Accessibility for Users with Disabilities. IEEE Access, 9, 125633–125649. https://doi.org/10.1109/ACCESS.2021.3111474

[15] Hertzum, M. (2026). System Usability Scale: A Meta-Analysis of How SUS Relates to Workload, Task Time, and Error Rate. International Journal of Human–Computer Interaction. https://doi.org/10.1080/10447318.2026.2625260

[16] Creswell, J. W., & Creswell, J. D. (2018). Research Design: Qualitative, Quantitative, and Mixed Methods Approaches (5th ed.). SAGE Publications.

[17] Sugiyono. (2019). Metode Penelitian Kuantitatif, Kualitatif, dan R&D. Alfabeta.

[18] Sommerville, I. (2016). Software Engineering (10th ed.). Pearson Education.

[19] Lazar, J., Feng, J. H., & Hochheiser, H. (2017). Research Methods in Human-Computer Interaction (2nd ed.). Morgan Kaufmann.

[20] R. G. Guntur Alam and P. R. Kurniasih, "Penggunaan Metode System Usability Scale (SUS) pada Aplikasi SIMAMURAT," JSAI : Journal Scientific and Applied Informatics, vol. 7, no. 2, pp. 189–197, 2024, doi: 10.36085.