Application For Booking Indian Railways’

Circular Journey Tickets

Application For Booking Indian Railways’

Circular Journey Tickets

Presented To

A Design Solution By

Brainstorming Sketches

Initial Concept

I thought of making the selection of the itinerary visual, keeping in view the proliferation of touch devices these days. But the problem with this approach is that Indian Railways (IR) has fixed routes for Circular Journeys. For example, Mumbai CST has 11 routes originating from it. It would be very confusing to the user if we show all the routes on the map. In my view, this solution would be suitable when IR allows free selection of stations.

Brainstorming Sketches

Concept #02

As shown, the user will select the originating station and 8 dropdown menus are displayed. The first menu will show the available stations from the routes from the originating station. We screen stations in the subsequent dropdowns based on the user input in the previous dropdown. The problem with this solution is that it might confuse users. I want the experience to be hassle-free and smooth.

Brainstorming Sketches

Development of the Final Concept

The above picture shows the development of the final concept that will be shown further in this presentation. I jotted down the requirements and priorities of the project

The Write-Up

A step-by-step and intuitive UI

The concept I chose presents the UI in steps to the user. He progresses a step after he takes an action. Circular Journeys are mainly used for Piligrimage and Sight-seeing and so, the application will be used by a large fraction of elderly people. Hence, I used larger font sizes for usability reasons. It also helps the user to operate the application on touch devices without any problem. A limited color palette is used to emphasize headings and buttons. The header illustration is a lineart illustration that captures the essence of circular journeys. The design is essentially typographic. I tried to keep the UI simple and took care that important elements have enough emphasis.

Application UI FlowApplication UI Flow

Initial Screen asking the user to select the Originating Station.

User selects the option.

Results are displayed and the user selects a result.

Once the route is selected, Travel Dates are asked.

User chooses his departure and return dates and the availability of tickets is displayed.

The user will be shown the stations from the selected route. He would have to select them to customize his itinerary.

Stations can be removed from the Custom Itinerary. Once a station is added, it turns gray under Available Stations.Once the user is satisfied with his itinerary, he clicks ‘Done’.

Once the user clicks ‘Done’, Traveler Information section is displayed. The user can edit his itinerary whilehe’s on this page.

In Traveler Information, we gather passenger’s details. More passengers can be added here. We ask for the name and age of the extra passengers.

In the next page, we show the journey details and price of the tickets. The user will be transferred to the Payment Gateway in order to complete the transaction.

Epilogue

That concludes this UI flow. Once the payment is complete, the tickets are mailed to the email address provided in the Traveler Information section. After that, the user can proceed to reserving tickets for each break journey in his itinerary. But that would call for another UI flow. All the screens shown in this presentation are provided as JPGs in a folder in their original resolution for reference.

All the assets and visual elements used in this presentation are handcrafted.

Thank You!Thank You!

© 2011. Saawan.