ABOUT THE PROJECT
IRCTC Digital Clock
I designed a digital smart clock for the Indian Railways as part of a competition hosted by the Ministry of Railways.
This design is more than just a clock. It’s a smart display tailored for modern India. It not only shows the time, but dynamically cycles through essential travel information for passengers, all presented with stunning animations while being easy to read.
DIGITAL CLOCK
Interactive Design
This design is a fully functional, ready-to-deploy software solution. The current version displays real-time information, including the current time, location, date, and day, all with smooth, fluid animations.
In addition to the clock, the display shows detailed weather, emergency messages, upcoming train timings, local transport options, and scenic routes traversed by the Indian railways.
Feel free to play with the prototype here before you scroll down to read more about the various screens and how the clock intelligently displays data contextually.
For a focused view of just the clock, click here.
CONTEXTUAL INFORMATION
A Smart Display
The display dynamically adapts to show the most relevant information for travelers. It cycles through different data at set intervals, intelligently adjusting to the needs of the audience. Critical information, such as emergencies or train arrivals, can be brought to the screen instantly when necessary.
The system is smart enough to tailor the displayed content based on the traveler context. For example, a display near the station exit won’t show train timings or arrivals, as the traveler no longer needs that information. Instead, it will focus on details relevant to their next steps, such as local weather and last-mile connectivity options for the city they’re entering.
Travelers departing from a city receive information on upcoming trains, platform details, coach locations, and suggestions for future journeys to explore more of India.
CONTEXTUAL INFORMATION
Independent screens
The display is smart and independently controllable, allowing adjacent displays to show location-specific information rather than duplicating the same data. This enables seamless augmentation across multiple screens; one display can show the location, while another can simultaneously display the current day and date.
When a train arrives at a station, only the display on that platform will show details for the arriving train, while the other displays continue to show information tailored to travelers in their vicinity.
SCREENS
A Pleothara of Details
Plenty of details to help travelers make their journey easier, friction less, and more memorable. All animated smoothly with beautiful transitions and appears exactly when the traveler needs it.
As a smart display cycling through relevant data, we save space by eliminating the need for multiple displays, while ensuring that important information is always accessible to all travelers.
MAIN SCREEN
Time
This clock tells time, but also the date, location, weather and much more.
With smooth animations, the time flows fluidly, offering a pleasant, easy-to-read layout on a bright, high-contrast background for maximum readability. The time is displayed in large text, visible even at larger distances.
Accurate to the second, the clock always keeps time front and center. When extra information is needed, the time gracefully shifts aside to make room, with gentle animations that keep the experience calm and stress-free for travelers.
SCREEN 1
Weather
A detailed panel displays live weather conditions at the current station, offering useful insights when arriving in a new city. It also provides interesting facts, like your elevation above sea level. Information shown include
1. North direction
2. Air Quality Index
3. Elevation level
4. UV Index
5. GPS Coordinates
6. Humidity Level
7. Weather Condition
8. Wind Speed
This weather screen is especially helpful at larger or underground stations, where you might be unaware of the outside conditions. It lets you prepare accordingly before exiting the station.
SCREEN 2
Train Timings
An information panel displays upcoming trains arriving at the station, showing key details such as the platform, train information, and a high-resolution icon of the train for quick identification. It also indicates any delays, ensuring travelers stay informed.
SCREEN 3
Emergency
A screen capable of displaying emergency messages on all or selected displays at any time.
These messages can include critical information such as inclement weather, train delays, or other vital updates for travelers.
SCREEN 4
Last Mile Connectivity
This screen displays local transport options available around the station for travelers arriving in a new city.
It intelligently appears only at exit points, such as when travelers disembark from a train or proceed towards the exit of a station.
SCREEN 5
Explore India
Indian Railways travels through some of the most scenic landscapes in India, and this screen showcases stunning photography of these routes to inspire travelers to explore new destinations.
It can also be used to highlight local tourist attractions and popular food to try in the city, offering a glimpse into the culture and experiences awaiting travelers.
SCREEN 6
Train Status
The train status moves between train arrival details, coach position, and departure details.
A fun 3D animation plays when the train arrives and departs, clearly highlighting the incoming train. Once the train stops, the coach positions appear in an intuitive 3D interface, with directions to other coaches. When the train departs, another 3D animation plays, smoothly transitioning to the next set of information.
The 3D visuals make it easy for travelers to understand the details at a glance, eliminating any confusion.
ENHANCED INFORMATION
Staggered Displays
By displaying different information on each screen, travelers can access a variety of details at once, accelerating the flow of information they receive.
DYNAMIC EFFECTS
Real Weather
Weather and sky are dynamic background effects with subtle animations that mirror the real sky and enhance the immersive experience across all screens. Dynamic weather shows sun rays, droplets of rain, clear skies, and so on in sync with local weather conditions.
Sunny
Rainy
ICONOGRAPHY
Rich, detailed icons
The icons are detailed and full of character, designed to bring joy.
They animate smoothly in and out, and maintain readability across all background colors and conditions. The icons have depth, possess a tactile quality, and come to life with motion.
ICONOGRAPHY
Rich, detailed icons
Detailed icons that imbibe joy. Animates in and out smoothly and works across all background colors. These icons have depth, a tactile feeling and are alive with motion.
DYNAMIC EFFECTS
Real Sky
The screen dynamically shifts from day to night. At day the screen has a bright blue background. At night the screen changes to a darker blue that retains visibility while being less harsh on travelers eyes.
The screen shifts from day to night and night to day gradually, mimicking the real sky.
Dawn
Dusk
HARMONIOUS DESIGN
Fits in any context
A sleek, minimalist design that seamlessly blends into any environment, whether it's traditional architecture, modern spaces, or busy platforms, without drawing unnecessary attention. Perfectly subtle, yet effective
ACCESSIBILITY
Regional Languages
To ensure accessibility for all travelers, the display can show regional languages alongside the English version or on the front and back of the screen.
ACCESSIBILITY
Spacing
Displays should be spaced evenly to ensure text is easily readable. A distance of 50 to 100 meters is ideal, with some details becoming harder to read beyond 100 meters.
ADDITIONS & OTHER IDEAS
What else can be added
As a digital display, information can be updated in real time. It supports 3D iconography, videos, and special themes for events like major festivals, enhancing the experience dynamically.
Festival theming - QR codes for more information - Trivia -
Sound cues - Celebrations - Special backgrounds -
Local food options - Sightseeing suggestions - 3D icons -
HOW THE CLOCK RUNS
A peek into the engine
The clock is fully designed in Rive and operates independently. Custom code runs a mini clock on your device, transmitting real-time information to Rive. This custom code periodically syncs, and retrieves current location, day, and other data at launch. For testing, a separate menu was created in another Rive file and linked through code, allowing users to interact and explore the clock’s features.
The Rive file itself consists of multiple nested artboards, each with its own state machines that handle the logic. Here's a video showing some of the various state machines working in parallel to control the clock.
HOW IT WAS MADE
Software & Skills
Although the clock may appear simple, bringing it to life required a range of tools and skills across design, motion, 3d, modeling, rendering, coding, and UI/UX. Here's a list of the software used to create it.
FINAL WORDS
Thankyou for making it so far
This design concept was created in just two weeks for the IRCTC competition, with some additional time dedicated to refining the presentation for publication here. Rive played a crucial role in enabling a fully functional version within such a short time frame.
A big thanks to my brother Dan for his help with the coding to bring the Rive file online, my friend Achu for always being there to discuss ideas, and my mother for letting me know about this competition. This was a lot of fun to build.
