go back
Company
Side projects
Year
2026
my role
Design engineer
Tools
Claude code
Cursor
Conductor
project overview
Building an Interactive train tracking experience
As a product designer interested in transitioning toward a design-engineer role, I wanted to move beyond static interfaces and start building interactive experiences. While learning the fundamentals of JavaScript, architecture, and modern styling tools like TailwindCSS, I wanted to apply what I learned by building a real product.
After discovering the RailRadar API, which provides real-time Indian railway tracking data, I decided to build a train tracking application focused on interactivity and visual storytelling. The goal was not just to display train information, but to create a more engaging experience using motion, sound effects, and real-time updates while deepening my understanding of frontend architecture, API integration, and product development.
early exploration
icon explorations
train
design explorations
Shaping the interaction and visual language
With the API ready, the next step was translating the concept into an engaging visual experience. Instead of following a traditional linear tracking interface, I explored alternative layouts that could make train movement and station progression more interactive and visually clear. Multiple variations were tested to understand how elements such as station markers, distance indicators, platform details, and journey progress could be represented effectively
After experimenting with several directions, the U-shaped layout emerged as the most expressive and intuitive approach. Even though I wasn’t initially sure if the interaction would be technically feasible to build.
I designed custom train icons inspired by Indian Railways, ensuring the visuals felt authentic and recognizable. Instead of relying on AI-generated assets, I created the train illustrations manually and introduced meaningful visual details such as headlight states, color indicators for train status.
mobile
ipad
craft & quality
From concept to code
One of the most challenging parts of the project was making the train realistically rotate along the curved U-shaped track. To achieve this, the train graphic was divided into multiple parts and animated along an SVG path, allowing it to follow the arc smoothly as real-time API data updated the train’s position.
Some of highlighting details such as horn-triggered light blinking, movement indicators, and ambient sound effects were added to create a more immersive and playful experience while keeping the interface minimal and responsive across devices.
wall of love
This project was more than just a UI experiment—it became a hands-on way to deepen my understanding of design engineering. Building the tracker from scratch helped me connect design decisions with real technical constraints such as animation performance, real-time data updates, and responsive layouts across devices.
