Enhancing user experience of the UNIMMA online course registration system through interface redesign using the Vue.js framework
Keywords:
Framework, KRS Online, UI/UX Design, User centre Design, Vue.JsAbstract
The Study Plan Card (KRS) process is an important activity for students in determining their study plans each semester. However, various digital KRS systems still face usability challenges such as unintuitive navigation, inconsistent displays, and confusing course selection processes. This study aims to optimize the interface design of the Online KRS system using a User-Centered Design (UCD) approach and a Vue.js-based prototype implementation. The UCD method is implemented through four stages: understanding the context of use, determining user needs, developing design solutions, and evaluating the resulting design. Data were collected through interviews and usability testing using the System Usability Scale (SUS). The results show an increase in usability scores to the excellent category (SUS = 81.67), as well as a decrease in user errors by ±40%. These findings are not only relevant to one institution, but reflect a common problem pattern in web-based academic systems in higher education. This study also empirically validates the combination of the UCD approach with a Vue.js-based Single Page Application architecture as a strategy for improving user experience in modern academic systems.
References
1. P. Vlachogianni and N. Tselios, “Perceived Usability Evaluation of Educational Technology Using the Post-Study System Usability Questionnaire (PSSUQ): A Systematic Review,” 2023, Multidisciplinary Digital Publishing Institute (MDPI). doi: 10.3390/su151712954.
2. E. Tuero, L. Álvarez-Blanco, I. C. Ayala-Galavis, C. Galve-González, and A. B. Bernardo, “Do Virtual Campuses Provide Quality Education? A Study on the Perception of Higher Education,” Sustainability (Switzerland), vol. 15, 2023, doi: 10.3390/su15010620.
3. M. B. Almourad, E. Bataineh, M. Hussain, and Z. Wattar, “Usability Assessment of a University Academic Portal using Eye Tracking Technology,” Elsevier B.V., 2023. doi: 10.1016/j.procs.2023.03.042.
4. L. Sanchez, J. Penarreta, and X. Soria Poma, “Learning management systems for higher education: a brief comparison,” Discover Education, vol. 3, 2024, doi: 10.1007/s44217-024-00143-5.
5. R. Weinhandl et al., “Enhancing user-centred educational design: Developing personas of mathematics school students,” Heliyon, vol. 10, Jan. 2024, doi: 10.1016/j.heliyon.2024.e24173.
6. S. G. Johnson, T. Potrebny, L. Larun, D. Ciliska, and N. R. Olsen, “Usability methods and attributes reported in usability studies of mobile apps for health care education: Protocol for a scoping review,” Aug. 2022, JMIR Publications Inc. doi: 10.2196/19072.
7. J. S. Alqurni, “Evaluating the User Interface and Usability Approaches for E-Learning Systems,” International Journal of Information Technology and Web Engineering, vol. 18, no. 1, 2023, doi: 10.4018/IJITWE.333638.
8. Shabrina Salsabila Kurniawan, Nandhita Zefania Maharani, Dana Indra Sensuse, Erisva Hakiki Purwaningsih, and Deden Sumirat Hidayat, “Applying User Centered Design and System Usability Scale to Design Knowledge Management System for Exam Proctors in Higher Education,” Scientific Journal of Informatics, vol. 11, no. 4, pp. 1043–1056, Feb. 2024, doi: 10.15294/sji.v11i4.9919.
9. W. G. Alghabban and R. Hendley, “Perceived Level of Usability as an Evaluation Metric in Adaptive E-learning: A Case Study with Dyslexic Children,” SN Comput Sci, vol. 3, 2022, doi: 10.1007/s42979-022-01138-5.
10. Y. Liu, “Frontiers in Computing and Intelligent Systems Design and Implementation of a Student Attendance Management System based on Springboot and Vue Technology,” vol. 8, 2024, doi: DOI:https://doi.org/10.54097/nv0yd129.
11. F. P. Perdana, E. Supratman, and D. R. Saputra, “Designing a Modern Web Interface with Vue.js and Tailwind for University Information System,” Brilliance: Research of Artificial Intelligence, vol. 4, no. 2, pp. 956–963, Dec. 2024, doi: 10.47709/brilliance.v4i2.5409.
12. D. Fonseca, F. J. García-Peñalvo, and J. D. Camba, “New methods and technologies for enhancing usability and accessibility of educational data,” 2020, Springer Science and Business Media Deutschland GmbH. doi: 10.1007/s10209-020-00765-0.
13. A. Derezinska and K. Kwaśnik, “Performance-based Refactoring of Web Application: A Case of Public Transport,” in Proceedings of the 15th International Conference on Evaluation of Novel Approaches to Software Engineering, SCITEPRESS - Science and Technology Publications, 2020, pp. 611–618. doi: 10.5220/0009797006110618.
14. Z. Pan, L. Biegley, A. Taylor, and H. Zheng, “A Systematic Review of Learning Analytics– Incorporated Instructional Interventions on Learning Management Systems,” Journal of Learning Analytics, vol. 11, no. 2, pp. 52–72, 2024, doi: 10.18608/jla.2023.8093.
15. R. Bastardo, J. Pavão, and N. P. Rocha, “Methodological Quality of User-Centered Usability Evaluation of Digital Applications to Promote Citizens’ Engagement and Participation in Public Governance: A Systematic Literature Review,” Sep. 01, 2024, Multidisciplinary Digital Publishing Institute (MDPI). doi: 10.3390/digital4030038.
16. H. T. Yasmine and W. T. Atmojo, “UI/UX Design for Tourism Village Website Using the User Centered Design Method,” TIERS Information Technology Journal, vol. 3, no. 2, pp. 100–114, Dec. 2022, doi: 10.38043/tiers.v3i2.3871.
17. N. Ockelberg and N. Olsson, “Performance, Modularity and Usability, a Comparison of JavaScript Frameworks,” 2020.
18. M. W. Iqbal, K. Shinan, S. R. S. Rafique, A. Alourani, M. U. Ashraf, and N. Z. A. Rahim, “Usability and optimization of online apps in user’s contex,” PeerJ Comput Sci, vol. 10, 2024, doi: 10.7717/PEERJ-CS.2561.
19. Mikita Piastou, “Comprehensive Performance and Scalability Assessment of Front-End Frameworks: React, Angular, and Vue.js,” World Journal of Advanced Engineering Technology and Sciences, vol. 9, no. 1, pp. 366–376, Jun. 2023, doi: 10.30574/wjaets.2023.9.2.0153.
20. J. Brooke, “SUS: A Retrospective,” 2013.
21. D. Rahma Fahriyah, D. Ikasari, and Widiastuti, “Implementasi Re-design Application Mobile MRT Jakarta Menggunakan Metode User Centered Design,” Journal of Applied Computer Science and Technology, vol. 5, no. 1, pp. 98–108, Jun. 2024, doi: 10.52158/jacost.v5i1.812.
Downloads
Published
Conference Proceedings Volume
Section
License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.