Implementation Of Frontend Architecture And UI/UX Design For The ApparentlyAR Platform

Adityawarman, Faraihan Rafi (2026) Implementation Of Frontend Architecture And UI/UX Design For The ApparentlyAR Platform. Other thesis, Institut Teknologi Sepuluh Nopember.

Text 5025211074-Undergraduate_Thesis.pdf - Accepted Version Restricted to Repository staff only Download (13MB) | Request a copy

Abstract

Penggunaan teknologi Augmented Reality (AR) dalam pendidikan membutuhkan antarmuka yang tidak hanya berkinerja tinggi tetapi juga disesuaikan dengan karakteristik kognitif penggunanya. Penelitian ini berfokus pada desain UI/UX dan restrukturisasi arsitektur front-end untuk ApparentlyAR, sebuah platform literasi data interaktif yang ditujukan untuk siswa Australia kelas 8 hingga 10 yang menggunakan perangkat yang dikeluarkan sekolah seperti Chromebook. Tantangan utama yang diatasi dalam pengembangan ini adalah mengatasi kerangka kerja basis kode yang sangat tidak terorganisir sambil merancang pengalaman pengguna yang sangat intuitif untuk remaja. Metodologi yang digunakan melibatkan perencanaan alur pengguna yang komprehensif, pembuatan prototipe berulang, dan perombakan antarmuka lengkap yang didorong oleh umpan balik dari para ahli industri. Desain akhir menerapkan psikologi UI remaja, menggunakan warna-warna cerah untuk meningkatkan keterlibatan visual dan ukuran tata letak yang konsisten untuk menumbuhkan memori otot, memastikan bahwa interaksi data terasa alami dan mudah. Secara arsitektur, optimasi kinerja dicapai dengan secara teratur memigrasikan komponen basis kode dari JSX ke JavaScript (JS) murni untuk menyederhanakan sistem dan meminimalkan waktu pemuatan secara drastis. Selain itu, pipeline data yang mulus diimplementasikan untuk memetakan impor CSV Blockly secara visual langsung ke panel data dan grafik interaktif. Hasil penelitian menunjukkan bahwa transformasi arsitektur ke JavaScript murni berhasil menyelesaikan konflik kerangka kerja dan menstabilkan kinerja platform. Kesimpulannya, menggabungkan prinsip-prinsip desain yang berpusat pada siswa dengan refactoring front-end yang strategis menghasilkan ekosistem pembelajaran AR yang responsif dan terorganisir dengan baik, yang selaras sempurna dengan target demografisnya.
=====================================================================================================================================
The use of Augmented Reality (AR) technology in education requires interfaces that are not only performant but also tailored to the cognitive characteristics of their users. This research focuses on the UI/UX design and front-end architectural restructuring for ApparentlyAR, an interactive data literacy platform targeted at Australian students in grades 8 to 10 using school-issued devices like Chromebooks. The primary challenge addressed in this development was overcoming a highly disorganised codebase framework while designing a highly intuitive user experience for adolescents. The methodology involved comprehensive user flow planning, iterative prototyping, and a complete interface overhaul driven by industry expert feedback. The final design applies adolescent UI psychology, utilising vibrant colors to boost visual engagement and consistent layout sizing to foster muscle memory, ensuring that data interactions feel natural and effortless. Architecturally, performance optimisation was achieved by systematically migrating codebase components from JSX to pure JavaScript (JS) to streamline the system and drastically minimise loading times. Furthermore, a seamless data pipeline was implemented to visually map Blockly CSV imports directly to data panels and interactive charts. The results demonstrate that the architectural transformation to pure JS successfully resolved framework conflicts and stabilised platform performance. In conclusion, bridging student-centered design principles with strategic front-end refactoring yields a responsive, well-organised AR learning ecosystem perfectly aligned with its target demographic.

Item Type:	Thesis (Other)
Uncontrolled Keywords:	Augmented Reality, Front-end, JavaScript, Pengalaman Pengguna, Antarmuka Pengguna, Augmented Reality, Front-end, JavaScript, User Experience, User Interface
Subjects:	L Education > LB Theory and practice of education > LB1603 Secondary Education. High schools T Technology > T Technology (General) > T385 Visualization--Technique T Technology > T Technology (General) > T57.62 Simulation
Divisions:	Faculty of Intelligent Electrical and Informatics Technology (ELECTICS) > Informatics Engineering > 55201-(S1) Undergraduate Thesis
Depositing User:	Faraihan Rafi Adityawarman
Date Deposited:	26 Jul 2026 02:13
Last Modified:	26 Jul 2026 02:13
URI:	http://repository.its.ac.id/id/eprint/137420

Actions (login required)

View Item