SpiceJet-Website Landing Page Redesign: Case Study

SpiceJet Final Redesign

Overview

Spicejet

“SpiceJet Limited is the second-largest airline in the country by the number of domestic passengers carried, with a market share of 13.6% as of March 2019. The airline operates 312 daily flights to 55 destinations, including 47 Indian and 7 international destinations from its hubs at Delhi, Kolkata, Mumbai and Hyderabad.”

-Wikipedia

SpiceJet Original Landing Page

Getting Started

1. Finding The Problem

1. The original website has too much going on when you first look at it. The menu and buttons were confusing and a proper Information architecture was lacking.
2. The critical part,i.e., the booking section was somewhat lost in front of the banner section. Everything looked red. It was difficult to figure out where to look first and how to do certain tasks.
3. There were also a lot of unnecessary buttons right at the top without giving an idea where they might lead the user to.
4. The important notice section right below the banner was also lost due to the colour. It seems less important where it was important for receiving flight-related updates.
5. The navigation was a bit confusing.

2.Identifying main goals:

1. Highlight booking as critical feature.
2. Focus on navigation and hierarchy of content.

Problem Statement:

“To redesign the user experience of the website and improve the overall UI of the landing page”

Getting Started

1.Research and learning:

I did a competitive analysis on other airline websites to see how they are going about the pain points. I found some common pattern among all of them which helped me properly understand the Information Architecture.

After all the observation and learning, I came up with a few wireframes

Rough ideas for the redesign

The Process

For the convenience, I am dividing the website in two halves:

1. First Half (Above the fold)

I moved the notice section from the middle section of the page to the top so that it would be the first thing that the user sees. I also changed the colour to yellow so that it would catch the attention of the user. Since this is a very important piece of information, I had to make it stand out from the rest of the content. For the menu bar, I started by de-cluttering it. I moved the menu down. It made the logo stand out and on the right side, I left the login/signup button as it was initially. In the original page, the booking section was above the banner. I moved it below the banner but kept some part of booking section on the banner in an overlapping fashion. The booking section was not very clear in the initial design and despite it being the most important feature of the website. I made a separate box with some drop shadows for it to highlight the section and make it stand out. I also decided to work on the primary and secondary buttons in this area by giving more visual weight to the primary button.

2. Second Half(Below the fold)

Below the booking section, I added an offer and discount section. It was on the original website too, but you could barely find it among other items. I decided to make it look more prominent by giving separate sections to both the offer and flight discount part. The user could check them easily this way depending on what they are looking for. So the new design has two sections, one for general offers and deals and other for flight discounts.

Comparison of original and new redesign:

Final Product

Conclusion

1. While working with the buttons there were so many of them I felt were unnecessary. I was curious to know the reasoning behind it and if it was helping the user/company in any way.

2. I managed to check the main objectives that I started with.

3. This project helped me learn significantly about airlines, and website designs in general. It was a fun experience overall.