Pengembangan Interface AI-Course Melalui Perancangan Desain UI/UX Menggunakan Figma dan Pengkodean Menggunakan Next.js di PT XYZ

Abstract

Artificial intelligence-based learning platforms are increasingly emerging as adaptive and personalized digital training solutions. However, the success of such platforms is not solely determined by their underlying technology, but also by the quality of the user interface (UI) and user experience (UX) design presented to users. This study aims to design and implement the interface of PT XYZ's AI-Course platform, which previously lacked a defined UI/UX concept. The method employed is Design Thinking, consisting of five stages: empathize, define, ideate, prototype, and test. Interface design was carried out using Figma to produce high fidelity designs, which were subsequently implemented into program code using the Next.js framework with a component-based and file-based routing approach. Evaluation results by the Chief Technology Officer (CTO) indicated that the interface structure was aligned with the back end functional flow, navigation was assessed as clear and intuitive, and visual consistency was maintained throughout all pages. The implementation produced a structured and responsive interface serving as a foundation for further development. Nevertheless, several limitations were identified, including color inconsistencies between the Figma design and the Next.js implementation, as well as a number of pages and components that were not yet fully functional.