Live Bus Tracking

Harsh Gopal
3 min readNov 27, 2023


When you as a passenger are boarding a bus, it is very important for you to know where your bus currently is. It is also a feature that is relevant when you are inside the bus and would like to know where you are at the middle of night or whatever time it is. Probably you are an introvert and do not want to go to the conductor and ask him for the location. You just accept your fate and let life lead you on wherever it intends to.


The bus live tracking is a feature that is already present in the system. It gets shared to the user as a URL in an SMS before the bus departs from its starting point, along with the other details of the bus.

It was noted that the feature was hardly used as it was intended to, due to “certain reasons”.

Old screen of the bus tracking system
Old screen of the bus tracking page


Web and Mobile Web

My Role

As the sole designer on this project, I was responsible for all the design touchpoints.

Problems faced with the previous design

The earlier screen (as shown above) was intended to the web even though the link was shared to the users mobile as an SMS.
Also due to the horizontal format of the stops shown, it was difficult for the users to read through the information oscillating through either side of the line.

Due to these, there was hardly any customers using this must-have feature.

Solution — Re-Design

The page was completely redesigned keeping in mind the mobile nature of the use case as this will be predominantly used on the phone itself rather than the desktop web.

New details card

The new card now shows the relevant bus details and actionable items upfront.

Also introduced the feature where the user can upfront see where his seat with the seat layout which comes as a pop-up when tapped on “View Seat” button. This will help him/her as a guide to have an idea about their seat location in the bus before boarding.

The name of the driver/conductor is shown on the call button to add a human touch as the customer can now refer to the person at the other end by his name instead.

The tracking was made vertical as opposed to horizontal like before, making it easier to scroll through and consume the information much better way. Also hid all the secondary boarding point names that would be irrelevant to the user at the first glance.

Apart from the detailed list view, the user can also track the bus on the map with the tap of a button.

The new m-web portal

Mobile screens.
Desktop screen

And that’s about it

It is being noted that the usage of the new bus tracking pages has drastically increased thanks to the new design overhaul.



It was an interesting story to pick up and solve.

Hope you just didn’t scroll through but did some reading.

Ciao! 🤠