What is redBus?

redBus is a renowned online bus ticketing platform that provides ticket booking facility and helps the users in booking the seats of their choice.

Why the Redesign?

Once, I was trying to book a bus ticket on redBus for the very first time. Although, being a tech-savvy person, I was able to book the tickets successfully. But since redBus has a wide variety of users who might not be tech-savvy, I felt the design could be a lot more easy to understand and straight forward.

Here are some of my observations, and in this case study I’m going to elaborate on them.

• Visual clutter makes it difficult to comprehend the important information.
• Lack of visual hierarchy results in overlooking of important data such as bus type, change of date, sorting options, etc.
• Sorting options don’t look like they are clickable. There isn’t enough emphasis on them to make sorting options stand out.
• The newly introduced filters look like product cards/pop-up ads rather than filters. I asked some users to use the website. I observed that they didn’t even click on those filters because they confused them as ads.
• The transition between booking flows is not flexible. When I reached the payment options page while booking the seats, it didn’t allow me to go one step back and change my boarding point without loosing my current selections. I was directed all the way back to the search results page where I had to select the bus and seats all over again. It became a frustrating task.

Also, the UI looked pretty outdated. It surely needed a makeover. So I decided to revamp the interface and simplify the ticket booking flow.

Let’s get started!

Competitive Analysis

Before starting the project, I did competitive analysis to identify existing design patterns. I studied user flow of all kinds of booking websites, be it bus/ flight ticketing, hotel booking, e-commerce, etc. to understand the decision making factors of a user, in a better way. Some of the websites were

Although, these platforms share similarities in terms of functionality, but they still differ in the way they shape search and booking experience.

User Research

In order to gain some perspective, I asked some of my friends (existing users as well as the ones who had never used redBus before) to use the website and these are the common pain points that they shared :

1. There is an over-abundance of content on the Search Results Page which is distracting them while making a decision.

2. The information placement was scattered and not one particular thing was catching their attention.

3. They found the UI outdated as compared to the other ticketing websites they had been using all along and most of them voted in favour of a UI makeover.

After ascertaining that other users had similar pain points as mine, I started working on possible solutions for the booking flow and an aesthetically pleasing UI.

Wire-frames and Iterations

When I started approaching the design problem, I sketched out some options of how I could improve the existing design and resolve the above mentioned problems.

Once I finalised the user flow and IA, I proceeded to UI design and iterated a lot more on the visual language of the website. I have iterated every component and screen several times. I have attached a link to my Figma file here.

Search Results Page

The purpose of the search results page :

• To let the users scan through the list of buses and related data points (Bus type, timings, price, etc.)
• To let the users make a decision while giving them options to filter the results according to their preference.

Being a content heavy page, the search results need to be structurally organised with the right amount of emphasis for different pieces of information.

Problem 1 : Lack of hierarchy and the scattered placement of information

This increases cognitive load on the user. They might find it difficult to scan through different sections of the screen at a glance and find a particular result they were looking for. This makes the decision making process a little longer for the user.

Solution

• Fixed width layout
  The existing design has a full width layout which doesn’t allow a more structured format of information. This means that the user has to look from the extreme left side of the screen to the extreme right.
  Instead, I made it a centre aligned fixed-width layout so that it’s easy for the user to scan through options, irrespective of the screen size.

Problem 2 : Inability to quickly change search parameters

The search bar isn’t given enough prominence. In the current design state, the search input fields are not in an active state unless you click on “modify”. This increases the number of clicks and makes the process over complicated.

Solution

• I placed the search input fields in a separate bar that’s fixed to the top of the screen to give it more hierarchy.
• Also, I added an input field for “Number of Passengers” in the search bar. The results will show buses only with the required or more seat availability. In the current state, the search results page shows total number of seats available in the bus, on every card. This data is not relevant to the users and should be filtered out before showing the search results themselves.

Problem 3 : Lack of affordance in the filters

RedBus has introduced new filters for users’ benefit but do users even click on them?

In the original redBus design, the cards on top look like pop-up ads/banners, which users refrain from using, but in actuality they are filters.

Also, it is not possible to select more than one of these new filters at a time, yet the results show most of the buses with more than one of these features, which leads to conflict between user action and results.

Solution :

I placed the new filters along with the other existing filters to avoid any confusion regarding their use and purpose. I also gave them a little more emphasis by separating them from the existing filters, to give them more priority.

I redesigned the way the filters look. The new visual style makes it easier for the users to comprehend information.

Problem 4: The sorting options don’t look clickable

The sorting options lack affordance. They are in the same text format as the other information and don’t look like they are clickable which might give a lot of users the impression that the function of sorting options doesn’t exist on redBus.

Solution :

• I put the sorting options into a separate bar to give them enough emphasis and attain hierarchy, so that they look clickable. This lets the users know that they can refine the results according to their preference.

• As the sorting options are to be frequently used on a booking platform, I avoided putting them in a drop-down format and used a tabs format to reduce the number of clicks and make it faster to sort between multiple options.

Problem 5: Visual clutter and lack of reading pattern in Bus Details Cards

The information on the Bus Cards is very scattered and doesn’t follow a proper reading pattern. That makes it difficult to efficiently find and focus on important data points like Bus timings, operator’s name, pricing, etc., without feeling lost in information-overload.

Solution

First of all, I decided to retain only the most essential information on the cards. To do this, I removed some irrelevant information like number of seats from the card. Instead of this, I introduced an input field for the number of passengers in the search bar itself, to refine the search results in a better way.This would filter out the number of search results and would show the buses only with required or more seat availability.

Below, you can see the original and redesigned version of the bus card. I designed the layout in a proper hierarchical manner and highlighted important information to make it easier for the users to scan through.

The key factor in designing these bus cards is Information Architecture, like designing any other feature.

Let me breakdown how I redesigned the IA to make sure that the users don’t miss out on important data points.

• I made a list of all the data points that the users need on these cards.
• I grouped the data points in different categories based on their context.
• Ranked the data groups according to priority and ranked the pointers further inside each data group.
• I replaced the tertiary information like icons for amenities (which were not self explanatory) to the drop-down text links under “Amenities and Bus photos” section.

While diving deeper into the process and trying out so many iterations, I gained an insight :

Attaining good Information Architecture and Visual Hierarchy is the most fundamental yet the trickiest part of designing a solution.
These two things play an integral role in optimising the process of conveying information to the user in an effective and efficient way.

Different states of the bus cards

Here is how the cards will look in different journey scenarios :

Drop down links on the bus detail cards

I redesigned the drop down links and arranged the information in a more structured and comprehensible manner.

Here are the original and redesigned versions of the drop down link of Boarding and Dropping points :

I followed the similar visual language for all the drop down links. Below, you can see the redesigned version of all the drop down links.

Tickets Booking Flow

After the users selects a bus, they proceed to the following steps :

Problem 1 : Inconsistency in pageview of multiple steps of the booking flow

• The seat selection has a drop down format.
• Passenger details are showed in a side sheet.
• Payment options are on a new page altogether.

This creates inconsistency in user flow and doesn’t contribute to a good experience.

Solution

De-cluttering the Seat Selection Process : In order to solve these issues, I decided to unify the all the steps of the booking flow by redirecting them to a new page with only the most essential information which is relevant to complete the booking.

Problem 2 : Complex transition between different stages of the booking flow

Let me explain this with an example :

Jane has booked 3 tickets from Chennai to Bangalore, added passenger details and proceeded to payment options to complete the booking. Before making the payment, she realises that she put wrong boarding point by mistake and the contact number has a fault too. Now, she wants to fix these two things and complete her payment quickly. What should she do?

The current design will make her click on the back button and redirect her all the way back to the search results page, where she will have to select a bus, the seats and other details all over again. This results in user frustration.

Solution

To facilitate smooth transition between different stages of the flow, I have taken the following measures :

• Integrated the booking details at every step.
  I decided to design a “Trip Details” card fixed to the right side of each screen of the booking flow which has integrated information such as number of seats, boarding/dropping points, passenger details, to ensure that the users have the summary of their selections in front of them, at all times.
• Provided CTA for every section of the Trip Details card, so that the users can go one step back and change or add to whichever information they want, without losing the ongoing progress in the booking flow.
  For instance, when a user is on payments option page, they can change the Boarding points/Dropping points or add/remove a passenger without having to click on the back button.

Passenger Details and Payments Options page :

There was nothing wrong with the “passenger details” and “payment details” steps, so I retained the original Information Architecture there. But, I changed the visuals to match the new visual language that I have created.

Designing Trip Details Card

I came across a challenge while designing the trip details card. There was a lot of information that had to be fixed on the right side of the screen, which increased the height of the card. At the same time, I had to make sure that the card is fixed and not being cut, irrespective of the height of the browser.

To resolve this, I reduced the height of the card to make sure that it is always in the viewport of the screen. And, to avoid any chances of the card content being cut, I provided internal scrolling.

Now, the card will adapt to all the screen sizes and heights because of internal scrolling.

redBus Phone App

I have tried to resolve the same pain points in redBus App. There was no major flaw that stood out while using the app, however, there are some things that could be improved. Further, I will talk about few of the such things in detail.

And, I revamped the interface of the app as well. I followed the same visual language for redBus app that I did for the website.

Search Results Page

1. Sort and Filter

I observed that the filters and sorting options could be simplified.
As sorting options are used very frequently, I wanted to provide that function on the screen upfront so that the users don’t have to leave the search results page while switching between preferences. So, I again provided tabs for sorting.

The flaw with filter cards on app remains the same as those on website. They look like banners/ads. The bus cards (search results) are supposed to be the primary feature on search results page but the filter cards are getting too much emphasis and are overshadowing the bus cards.

2. Iterations for Navigation Bar :

3. Bus Details Cards

For bus detail cards, I tried to follow the same structure that I have designed for those on the website but it didn’t work out considering the screen size and scanning pattern.

The price was not getting enough emphasis, so I tried different iterations with reduced font sizes, different colours and dividers. At last, I came up with a new layout that follows the similar reading pattern but makes the price stand out in a better way.

Booking Flow

In the below image, you can see the redesigned screens of the booking flow. I followed the same flow on app as I did on the website while tweaking some things considering the space limits.

The navigation bar clearly indicates the next step as the users proceed with the booking flow.

The Seats Selection Page

I wanted to show price breakdown based on the seats selected. And, considering the different screen sizes of phones, I didn’t show all the information on the same page because I didn’t want to compromise on the size and placement of seats layout. So, I provided modal sheets for showing the seat indicators and price breakdown.

Payment Screen

I have redesigned the way payment breakdown and trip details look. This structure makes it easier for the users to quickly review all the details before checkout.

And last but not the least..

Introducing Dark Mode for redBus

Users falling into younger age bracket are inclining more towards Dark UI’s because of its elegant and contemporary visual style that embraces luxury.

Some benefits of introducing dark mode for redBus are :

• It’s easier on the eyes of users when they are using the app in dimly lit rooms.
• It might actually be an add-on for redBus in increasing the user engagement.

Another common advantage of Dark Mode is the reduced energy consumption on devices with OLED and AMOLED displays.

So, here you go!

That’s it, folks! Hope you enjoyed this detailed case study.

Reflection and Key Takeaways

This project was a golden opportunity for me to dive deeper into Information Architecture and work on my Visual Design skills simultaneously.

Learning :

• In-depth analysis of the design decisions is really important to make sure that you’re fulfilling user requirements through empathy.
• Each data point holds a different rank in hierarchy and needs to be identified and conveyed accordingly.
• I understood the common UI and UX paradigms that exist.
• I learnt how to design for both, an app and a website, for the same product.
• Small changes in design can make a huge impact on the whole user experience.
• I understood how to design interfaces applying the dark mode human interface guidelines by Apple.

Challenges :

• I worked on a lot of iterations to arrive at the right solution. During this process, I realised that iteration is the key to any optimum design solution. There’s no other way around.
• While working on design solutions for a problem, I came across some micro challenges, which made the whole project even more interesting. I learned how to resolve those challenges without compromising on the primary design solution.
• Does “working on an outdated windows laptop with frequent power cuts” count? :P

I’m currently looking for job opportunities as a Product Designer. If you’re hiring, I’d love to have a conversation with you.
You can message me on LinkedIn and Twitter. :)