#DailyCommute #Transportation #MobileApp
Shuttl - Daily Bus Booking Experience
Overview
Every day more than 30,000 daily office goers rely on Shuttl for their daily commute need. Apart from the Shuttl bus ride, the app’s booking and boarding experience are very core to Shuttl. The goal is to make this experience as frictionless as possible our regular users.
Team
Me - Product Designer
Zinal Patel - Product Designer
Avish Rana - Product Manager
The state of affairs
More than 80% of our riders rely on Shuttl for both parts of their commute journey which is going to the office and then coming back home. Maximum bookings used to happen around 15 minutes before the time of the actual journey. Over time, as the demand increased, our buses started getting sold out in a matter of minutes. To avoid being stood up at the last minute, our riders started doing advance bookings for both parts of their journey. Our riders while waiting for their Shuttl in the morning will start the booking for their evening ride as well and some will also do the booking for the next morning ride. In the current app, there was no easy way for the users to see multiple bookings and easily differentiate them from the active ones to the ones which are scheduled for a later time or day.
Home screen for daily booking
Time-slots for bus booking
Active booking bus tracking
Opportunities discovered
For the visibility of multiple bookings done by a user, the home screen can serve as the place to show all the current and scheduled bookings. As currently, it is not displaying any new or actionable information for our regular user.
The time-slots screens were also showing some repeated information like origin and destination which is not required every day for a daily user.
On time-slots, we also wanted to inform the users about the booking status of the buses.
We wanted to give more controls to our users on this screen related to reschedule and cancellation. Also, just by glancing at the screen it was not very obvious as what is the primary Call To Action here.
A new home
The place to get quick information about all your bookings. Through the introduction of booking cards, we expanded the usage and relevance of the home screen. Now it is not just a place that users come for daily booking but it's serving a place they come after booking to get updates for all their upcoming bookings.
Re-book cards
These cards appear on the home screen after the end of Shuttl trips to give one-tap access to daily bookings. Rather than searching for their regular stops a user and easily use these cards to start booking for the next trips.
Next trip card
Now with next trip card our user get a snapshot of their immediate next trip. Rather than keeping the information a step further, we worked on a system to bring the most important info upfront like bus arrival time, bus number and the pickup stop where the bus will come for boarding.
In this secondary state, the trip card when on an on-going trip gets smaller and changes the colour to differentiative it from the trip card. When there is an on-going trip the next trip card becomes white and only shows the most relevant info at this moment which is the time of that next booking.
Good times
Redesigned UI for timings while selecting a bus at the time of booking. By removing the redundant information of walking distance and origin-destination (not required on a daily basis), we gave more focus to the pickup and drop. We redesigned the time cell to make it more scalable so that we can include relevant info required for the user to make a better decision while selecting a bus.
Declutter to inform better
We started by removing the information which for a regular is just redundant like origin-destination, walking distance to their stops. This gave us the space to include info like cashback available on a particular bus or just informing the occupancy status of it.
Made the UI more focused on the timeslots and included the time the bus will reach their drop stop.
As most of our users travel with a Shutt ride pass. So, we gave the visibility of how many rides are remaining in their pass.
Into the dark side
We chose to reduce info on Google Maps like the places and landmarks to improve the visibility of our Shuttl route and make it easier to track the bus on the map. Also, gave the primary CTA the main focus and made it the hero of this screen.
Redesigned Map
Use of a black and minimal map helped us visually highlighting the route, bus and the pickup stop clearly. For a user, it's just a glance and the attention gets quickly captured by the route and then finding the bus location becomes faster and easier.
Now the most important call to action here is boarding. So, it takes the centre stage and maximum attention.
Action sheet
We clubbed the options in a bottom sheet to declutter the main screen. This gave us the freedom to keep adding and trying different options and functions that are relevant to each state of the trip.
🎯 Design Impact
😼 Business side
With the introduction of a better interface for timeslots, we were able to highlight incentives like cash-backs that helped us in distributing our demands well and increase the occupancy of our buses overall.
🥺 Consumer side
By making daily bookings faster and decluttering the UI for track Shuttl. We saw a significant reduction in 2 types of complaints to our customer care -
1. Not able to book my shuttl on time.
2. Having difficulty to track and board shuttl.