Bangalore / New York City

Redbus: Redesigning the seat layout


Redbus, part of Ibibo Group Pvt. Ltd. is the largest bus ticketing platform in India, South East Asia and Latin America and has more than 20 million users.


I was responsible for redesigning the mobile website by working in close collaboration with PMs and engineering

by analyzing user data to define the problem statement and implement the designs end-to-end.

I helped in designing 2 key features - (1) redesigning the mobile website to improve bus ticketing transaction rate;

(2) designing a framework for last mile connectivity.


- Access to limited user data as most people don’t sign in when using the mobile website.

- Legacy code


- Redesigning seat layout:

- Last mile connectivity:


Redesigning the seat layout


Annotations: #1 No difference between sleeper and seat icons. #2 Price and seat number causes legibility issues. #3 sudden appearance of boarding and dropping point is jarring. #4 No option to accommodate geo-specific requirements.

About Redbus

Redbus is part of Ibibo Group Pvt. Ltd. and is the largest online bus ticketing platform for customers across India, South East Asia And Peru and serves a user base of more than 20 million users.


I was responsible for the end-to-end design on the mobile website, which has the 2nd highest DAU after desktop. My work encompassed redesigning the entire funnel to improve ticket booking conversion rate; increasing insurance attachment rate per ticket, and designing the framework for last-minute boarding issues. The work encompassed taking ownership of the UX and UI designs along with improving the visual design from a usability standpoint.


Redesigning seat layout

The seat layout redesign was part of a larger project to improve the bus ticketing experience. The seat layout redesign was part of a larger exercise to improve the bus ticketing experience. Seat selection plays a crucial role in a transaction to be successful as it helps users determine the suitability of a bus.


The goal of this redesign was to accommodate different geo-specific requirements without compromising on usability.


- Legacy codebase


1. Map of seat-level requirements


Annotations: #1 Designing for multi-deck was the most challenging. For eg: how do you show different price ploys across decks? If only the last seat is available, do you show the whole layout or just the available seat? #2 In Latin America, bus seats are similar to airlines. People pay more for additional amenities including inclination. #3 In South East Asia, some routes don’t have the seat selection option. So we designed a modular layout that can be changed based on geo-specific requirements. #4 Different script for each region meant text rendering issues across screens, languages and loading time so we used Lato for performance.


2. Initial wireframe discussion

Screenshot: of the initial wireframe discussion using Google Draw. It was used for team wide collaboration and to understand the key challenges that needed to be addressed for a effective ticket booking flow.


3. Wireframe explorations for seat layout

Annotations: #1 Version 1 includes all pre-selected details to help user understand the context. #2. In version 2, some of the header information was reduced as it leads to reduced space to view seat layout in low-end phones. #3. Showing different prices for different seats was a challenge. So we explored this option to understand if we could show on pressing a seat. While it worked for a single seat, it failed to show the final price difference, hence it was not taken up further. #4. Exploration for Latin America. The navigation bar was reduced to accommodate more data points. Seat specific amenities show up as a slider. #5. Colour and layout is changed to comply with legacy issues. #6. In version 6, we tried adding seat price on the seat icons, but realised that for other currency like Pesos, it will be a challenge, hence rejected.


3. Final designs

Sample of a modular seat layout with multiple prices and deals


What changed during the redesign?

Most of the requirements are decided by bus operators and as a ticketing service platform, our goal is to provide a consistent experience to the users. So we introduced modular card design (#1, 3 & 5) for components that is dynamic. Due to legacy code, we couldn’t change the seat icons, so instead we added some curvature to sync with the new card design. We also tried using the whole viewport and made the icons thicker (#2) for better legibility. The existing design used a lot of red which was a major usability concern. So we restricted red only to the CTA buttons and substituted other buttons with blue.



Design rolled out in phase from June’18 onwards | Design mentor: Sahil Karkhanis | Link to site available here.