Bangalore/San Francisco

Redbus: Redesigning the seat layout

ABOUT THE COMPANY

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.

ROLES AND RESPONSIBILITIES

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.

DESIGN CONSTRAINTS

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

- Legacy code

CASE STUDIES

- Redesigning seat layout: https://paulami.in/redbus-1

- Last mile connectivity: https://paulami.in/redbus-2

Redbus

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 THE COMPANY

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.

ROLES AND RESPONSIBILITIES

I was responsible for redesigning the mobile website by working in close collaboration with PMs and engineering by analysing user data to define the problem statement and implement the designs end-to-end.

DESIGN CONSTRAINTS

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

 

Redesigning seat layout

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.

GOAL:

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

User base: 20 million+ users

 

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

This is a 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.

IMPLEMENTATION STATUS:

The booking flow, including the seat layout, was rolled out in stages from August 2017 onwards.

Design mentor: Sahil Karkhanis

Link to the site available here.