Jakarta Airport Train

Personal Project

HTML5, CSS3, JavaScript, AngularJS, Figma

Visit live website

This project was created for the Web Design 2 subject in my Diploma. The task was to use AngularJS to create a website that contains schedule information. AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. For most commuters, the airport train has become one of their main mode of transportation. Through this site, they can easily check the train schedule and routes between Soekarno-Hatta Airport and Manggarai Station (Jakarta). It is designed only for mobile since users mostly always have their phone and they can access this anytime.

CHALLENGE

This website was my first project with AngularJS, and it was quite challenging to figure out the technicalities.

SOLUTIONS

With the help of my lecturers, tutorial videos, and articles online, I managed to get the website working.

DESIGN PROCESS

1. Designing the website on Figma

Due to a limited time in creating the website, I decided to start with the High Fidelity design immediately. I used the color palette from PT KAI's logo (Indonesian public railways organization). The feature of this website are straight forward, such as choosing the direction of the train as well as checking the train route and the train schedule.

2. Coding the website (Mobile)

Based on the design, the website is coded only for mobile screen sizes using HTML and AngularJS for the content, CSS for the styling, and JavaScript for interactivity. Then, it is published online using github.

DESIGN SYSTEM

LIKE WHAT YOU SEE?