Sitemap

KSRTC mobile app redesign- A UX Design project

5 min readNov 20, 2023

--

KSRTC ie Karnataka State Road Transport Corporation has a separate fanbase in Karnataka. It is the No1 government bus service in India.
Its a part of our life and especially Kannadigas have a special connection with these buses.
As a user of KSRTC since my childhood I always had a good experience using the bus service. But the experience of using the app to book tickets, was never a pleasant one.
So here, I have decided to redesign the KSRTC mobile app interface using my experience to make it more user-friendly and simple to use.

Press enter or click to view image in full size

Before and After

Guest booking

So without wasting any time, let's get to the app and see what it looked like before, and what it looks after the redesign.

Press enter or click to view image in full size

After analysing the app I found many mistakes in the app and I am making some changes assuming this will work for the user.

  • Hamburger Menu- In before screen it is place on the right top corner and the icon is very small. Usually all the apps have hamburger menu on the left top corner so as users will have used other apps. They expect our app to work the same. So we do not want to confuse them and I’m change the position of the hamburger menu and make it a little bigger so that it can be tapped easily as shown in after screen.
  • KSRTC logo- In before screen we can see there is a title with a very bright orange background which I feel is unnecessary and grabbing too much attention. This can be removed or replaced with a simple KSRTC logo because the logo itself is very famous and people recognise it well.
  • Page title- I have added title for each page. For example, you can see KSRTC guest booking title on the top. This title is making the user aware about what page they are on.
  • Booking type- as soon as we open the app, we get a list of options (As shown above) where we can choose the type of booking and other things. I have skipped this screen and directly designed the guest booking screen where we can toggle between Guest booking, Tirumala booking and Fly bus booking. Because the User, as soon as they open, the app will be able to enter the destination and search for buses available. This reduces the one screen in the app, gets the user straight to the point and helps in completing booking faster.
  • Text field- the text field where the user has to enter the from and to destination has been increased in size because it is easier to tap on a bigger box, than smaller one. Also, the location icons have been removed as it has no importance there. The user will easily come to know that they have to enter from and to locations to search.
  • Exchange Icon- the exchange icon is placed in the same place as before, but made a little bit bigger so that the user can tap easily on a bigger icon.
  • Date entry- the field where user enters date has also been increased in size and the calendar icons have been removed as they are irrelevant and have no importance there because looking at the date in that box, the user will know that they have to enter the journey starting date. also in the next field where the user can enter the return date I have added a text Return (optional), which tells the user that this is not compulsory and can be skipped.
  • Button- the main CTA that is check availability button is much bigger and more prominent than before so that the user can tap on the button easily on a bigger button, it is more attention grabbing.
  • Bottom Navigation- it is very important to have a bottom navigation bar as most of the booking app have a bottom navigation bar to navigate through the app easily. So I have added three options that is Home, My bookings and Profile. When we open the app, we come across many options but I had skipped this page. I have sorted out these options systematically using the bottom navigation bar. In home we have guest booking, Tirumala booking and fly bus booking options. In my bookings we have other options like cancel tickets, PNR enquiry and My bookings if the user has logged in, and in profile we have other options like log in, about us, contact us and chat box.

PNR Enquiry

Here we have before and after screens of PNR enquiry page.

Press enter or click to view image in full size

As explained earlier, PNR enquiry comes under my bookings with other two options that is cancelled tickets and my bookings.

Get Sumukh M Suresh’s stories in your inbox

Join Medium for free to get updates from this writer.

Here my bookings is in inactive state because the user has not logged in to their account.

Another major change in this page is I have added horizontal tabs to toggle between PNR enquiry, transaction status and service status because the radio buttons used previously in the app are very unorganised and outdated design for mobile apps.

Press enter or click to view image in full size
Press enter or click to view image in full size

So, these are the important changes I have made for KSRTC app to improve the user experience and make it more user friendly.
I may have made mistakes as I have completed this in a very limited time and that is why I am open for feedback and comments.
I strongly believe that by combining good services like KSRTC with good software that work seamlessly we can not only make the overall experience of the service better but can also give good contribution to the Indian economy.

Below is the link to prototype👇

https://www.figma.com/proto/sntxpaOtVl49qOLVyRoOwz/KSRTC-app?page-id=0%3A1&type=design&node-id=49-176&viewport=502%2C460%2C0.46&t=zf1h4W2dryHIc8KX-1&scaling=scale-down&starting-point-node-id=49%3A176&mode=design

Thank you ☺️

Follow me on LinkedIn :https://www.linkedin.com/in/sumukh-suresh-476708244/

--

--