04
/04
NTC Digital
The Background
A comprehensive booking and management platform for a maritime training center foundation, designed to streamline scheduling, optimize training operations, and efficiently manage multiple organizations and their training crews.
This project was developed to modernize an existing full-stack booking application for a maritime training center foundation. As the system grew, its traditional CodeIgniter-based server-side rendering architecture became increasingly complex, leading to slower page performance and a less responsive user experience. The project focused on addressing these limitations through a more modern frontend architecture while improving usability, maintainability, and overall performance.
The Palette
Since the parent company already had established branding guidelines and a defined color palette, the focus was on strategically applying these colors throughout the interface while maintaining the foundation’s distinct aesthetic and visual identity.
Dark Teal
004052
Aqua Blue
69c9cf
Deep Teal
065268
Coral
CF7769
The Process
1
Data Gathering
Researched how the existing application works and what are the challenges the user is currently experiencing.
2
Tools Research
Since it was traditional CodeIgniter-based application, researching what is the best option of tools is necessary to provide better user experience and scalability for future feature that is lined up for the application. Using Next.js for frontend and Laravel for API was the decision that the team came up.
3
UI Design
After deciding that Next.js with the use Mantine framework is the frontend of the application, redesigning the entire application with the knowledge of these tools was very helpful. The goal for the redesign was to improve process flow of the major task the admin users have, to provide them with ease.
4
Development
For this phase, I am the sole owner of the Frontend application and was the only to build the Ui from the ground up, translating my own designs to real world application. While developing the frontend, I discovered the tool Responsive Viewer to have a better view among different screen sizes at the same time.
The Gallery
