The wrong seat can turn an otherwise comfortable bus journey into a nightmare. In fact, research shows that reserving a specific seat on any journey gives us the extra control and the certainty our brain craves. Given that Indian buses carry roughly 70 million people per day, providing last-mile connectivity to far-flung locations, better seat selection can have a disproportionate impact on travellers within the country.
Selecting a Seat
The bus booking flow on the MakeMyTrip platform has a standard flow:
- Search: A user searches for their trip criteria
- Select from results: Available bus options are displayed and the user picks one
- Seat selection: A seat map is displayed to allow the user to select a seat
- Complete booking: The user enters details, makes the payment and completes the booking
Data suggested that the seat map had the lowest conversion rates of all steps a user had to perform: In fact, most users were leaving their bookings mid-way when they reached the seat map.
Dropping off could be attributed to various reasons: The user needed to consult others about available seats, they wanted to explore other bus options or would just come back at a later date to book.
However the team at MakeMyTrip started with the hypothesis that at least some of the drop-offs could be attributed to the design of the seat map and selection process – which meant that there was room to improve the experience as well as the final journey.
Time for A Fresh View
The design team’s hypothesis was that users were getting confused when they saw the seat map. They were finding it difficult to review selected seats because the current tab view didn’t allow for seats on lower and upper berths to be seen at a single glance. This hypothesis was strengthened through a qualitative usability test, which also revealed other insights.
Unlike say trains or planes, buses come in multiple shapes and sizes and the challenge was to design a seat map that would adapt to all configurations, without compromising system design guidelines around the touch target area and interaction space.
The team carried out four major design interventions:
1. Move from a tab-view to a unified display
Research showed that users spent considerable time going back and forth between tabs to select their seats. Frequently, they selected seats in the other berth and forgot about them. The biggest change in design was to bring the seat map to a single view and thus help users easily see available seats in both berths.
2. Enhancing the visual appearance of the seat map
In a deeper attempt to visualise the seat map from the user’s point of view, the MakeMyTrip team experimented with iconography, bus outlines, and imagery. The seat icons were changed to differentiate between a seat and a sleeper. The colour palette was modified and outlines replaced with solid blocks of colour. Instead of displaying seat numbers upfront, the legends were changed to on-demand information.
An outline of a bus with headlights and steering wheel were superimposed on the screen, to help users put the seat map in context.
3. Removing the progress bar
Research revealed that users did not notice or attach importance to the progress bar. After a few iterations, the bar was discarded completely.
4. Adding price filters
Price differences amongst seats are common in buses and the earlier seat map did not provide the capability to filter via price. This meant that users could potentially see an increase in price after choosing a bus from search results – an experience that was extremely dissatisfying. Price filters were added to the seat map, thus allowing users to know exactly what they were booking, without surprises at checkout.
Put it to Test
The new design for the seat map was A/B tested in November 2019. It performed well by 2% and was ultimately taken at a 100% uptake in December 2019. In a qualitative usability test, the team found that users were now able to select a group of seats more efficiently and proceed with their booking.
The conversion spiked initially, marking a 12% increase by January 2019 compared to October 2019 but started to flatten thereafter. At this point, the team says, they went back and optimised each component again. The price filters, for instance, initially showed no traction with very low click-throughs. The team visually enhanced the filters and seat prices and this has yielded results.
The usage of price filters while selecting a seat rose from an average of 1.23% in December 2019 to 6.27% in April 2019 and stands at 13.65% in August 2020.
Careful attention to detail and optimisation of all components has created a more satisfactory seat selection experience for MakeMyTrip’s customers. While they can not control many aspects of the final journey, the team is confident that travellers now have a much better chance of making the journey in the seat of their choice.
The icon change reminds me of redbus and clear trip. Price filter was an interesting idea.
I have always found the iconography of the two beds on the right side of the bus misleading. Specially for lots of foreigners. They are actually just one sharing bed, but its always shown as two single beds. Which is a horrifying experience for some. It shall be not overlooked and shall be corrected.
THC Team, this doesnt have information on the stated. objective which was to decrease customer drop offs. Any data on how much booking completion went up by?
Such a small visual change in price filters led to such a. big increase in usage. Only shows that there is no such thing as a finished product in the digital world
This is v interesting because it shows the difference between how we think as designers vs how users actually think. Most designers wd consider tab view to be an elegant uncluttered solution but that’s not what user needs. Many examples like this in commonly used products