Flight Booking UX: Virgin America’s New Site

Aug 21, 2014 | UX Testing, Case Studies, Travel, User Experience

So, are you in for something new or something totally out of the norm? Virgin America is the website you ought to give a try! You’d be surprised by the whole new booking experience.

The revamped website can be accessed anytime, anywhere, and with any mobile device. Now, doesn’t that excite you? But first, let’s have a closer look into its user experience. We cover both the desktop and mobile experience in this article, you may read on with the desktop experience, or skip to the mobile experience part.

Before we review Virgin America’s website in terms of UX design, let’s first understand the key user goals and problems.

Following are the main goals considered by users of a flight booking website:

  • Finding the best day and time
  • Finding the best prices
  • Getting direct flights
  • Finding suitable or preferred airlines within budget
  • Finding a reputed and trustworthy website
  • Finding suitable payment options

With these in mind, let us also understand the key pain points of users:

  • Apps that do not provide sufficient information for filling the form
  • Full price not depicted
  • Redirections to other websites
  • Language issues
  • Constant request to download the app when users want to search it on the website.
  • Too many interruptions with advertisements. 

Now, let’s see how Virgin America’s website fared in terms of providing a seamless UX.

?️ Tutorial – Fun and Colourful Concept 

First-time users will be brought to the tutorial page as a landing page. Users are greeted with a colourful landing page alongside a cute character.

From our usability testing, there were mixed reactions from desktop users. Some of them enjoy the fun colours while others thought they were childish and it does not represent Virgin America.

A notable finding is that most users were not aware that they were actually on Virgin America’s airline page because:

  1. The logo is small and it is located at the top left corner.
  2. Users have long associated Virgin brand with the colour red.
  3. The tutorial landing page is not clear that it is an airline website. This is also due to the sudden burst of colours that users DO NOT expect to see on an airline’s website.

Users impression of the newly revamped Virgin America website

Nonetheless, there were still aspects that users like where Virgin America executed pretty well – the big screen, the animation, the creativity and most importantly the user friendliness of the website. Looks like Virgin America is stepping up their game, keeping up with usability trends!

The booking experience

Generally, there was no major issue with the booking process. Users were able to go through the booking process smoothly. So, let’s have a look at what users have to say about the booking process.

Select your destination

After the tutorial, users land on the booking page. Clicking on the dropdown button reveals the cities Virgin America flies to and the cities are shown in boxes at the center of the page where it is big enough for reading and choosing.

Not to mention, they are arranged in alphabetical order so which makes choosing easier. Placing the most important function on the center of the page is good, it immediately catches users’ attention.

Number of passengers

Who’s Flying?

After selecting the destination, users are then directed to another page where they have to choose the number of people who are travelling. The page wrote, “Who’s Flying?” Users commented that the language used to communicate is very casual and friendly.

Travelers are categorized as adults, children, and lap infants. There are also the ‘+’ and ‘-‘ buttons to choose the number of passengers flying. It is very simple to choose – 3 options for you to choose from, you can’t go wrong with that.

Select departure date

The page depicts a calendar. It is not the typical small calendars that you see in any other airlines website. This calendar takes up the whole screen! You can see clearly every single day and date. After selecting departure date, a message will automatically pops up and ask users whether they are returning on the same day. If users select ‘no’, they will then have to select their returning date.

Select flight

Looks Good!

Flights are listed on the left while the on the right shows the seat sections. There are three seating sections to choose from – Main Cabin, Main Cabin Select and First Class.

Everything is shown clearly on the page, it makes choosing easy. On top of that, after clicking on preferred flight, users were then directed to a page that gives them the ‘flexibility’ option. Upon selecting flights, the amount will be displayed at the top of the page. So, that tells users the total amount of their bookings.

Also, as users go along the booking process, there are options for upgrades. Thus, by showing the amount above, users can keep track of their flight price and perhaps their budget as well. In addition to that, there are casual messages that pops up that says things like “Looks good!” or “Good Choice!” at the top of the page.

However, a notable finding is that none of the users noticed that feature. This could probably be due to the large screen size. Throughout the process, users’ main focus is on the center of the page. Thus, the top section of the page is often overlooked.

User did not notice the pop up messages after going through each section

Select seats

This page looks so interactive because the page itself is filled with avatars that represent seats that have been bought by other users. Only numbered seats can be selected. So, users commented that the page looks interactive because it portrays an airplane very well.

Furthermore, there are different seats sections in the airplane. At this stage, users can opt to choose to upgrade their seats or proceed to choose seats in their chosen section. Upgraded seats will be reflected on the total amount at the top of the page as well.

Passengers’ information

After choosing departing seats, users are then directed to fill up their information. One interesting aspect about filling up user’s personal information is the avatar. Users get to choose their own respective avatar which further enhances the interactivity between Virgin America and its users.

Users even like the fact that no registration is needed for this step. Following that, users were then directed back to choosing return flight seats. The final step is where users were prompted to make payment after selecting their seats.

Verdict

Users like the newly revamped Virgin America website but there are a number of aspects that they are still skeptical:

  1. Users felt that the revamped website is totally different than any other airlines website. For instance, during the whole booking process, the way users are directed to another page opposes the conventional way of an airline website. Thus, users may need time to get used to Virgin America.
  2. Unsure of the colour scheme used. Users felt that the colours on the site do not represent Virgin America.

Despite the mixed feelings about the new Virgin America website, users actually enjoy using it – commenting that the functionality and navigation of the website is good, users like the interactivity of the website and most importantly, it is user friendly.

So, it seems like users enjoy the step-by-step booking process. In a typical airlines website, users choose their destination, departure and returning date, number of passengers and seat sections all at the homepage. Looks like Virgin America is changing users’ behavior or perhaps, shaping user behavior. What do you think? Have you checked out Virgin America’s new website? Do you think it will revolutionize airlines website?

? Wait, what about the mobile experience?

Comparing both user experiences – desktop website and mobile site, there were no major differences in user journey, neither is the user experience. However, there were still notable findings from the mobile site that we think is critical to the improvement of Virgin America’s UX. We will be discussing those issues below.

Tutorial: What users think

Users actually like the tutorial page; commenting that it is very well-designed, interactive and most importantly, it is attractive. Users also commented that the tutorial page is informative with the use of video and simple catchy words.

However, there were some glitches and bugs on the mobile site. First of all, the tutorial page swiping motion is not very responsive. There is a downward arrow button at the bottom of the page which tells users that they are required to scroll down the page. So, users have two options to scroll down – either use swiping motion or tap on the arrow.

What happened is, certain arrow button is not responsive. Thus, users were not able to reach to the bottom of the page to start booking. Secondly, the swiping motion is too fast. For instance, a user swipe down to reveal page 2. Instead, the user ends up landing on page 3.

The arrow button is not responsive

Booking Experience: The differences

Users go through the same booking process as desktop website. The main issue with Virgin America mobile site is the flight selection section. This section’s experience was not pleasant to every mobile user. Flight times are on the left side while seat types are on the right side of the page.

What confused most mobile users is the seat type. The swiping motion on that page itself is both vertical and horizontal. Some users were not aware of it initially but once they realized it, they commented that it was a bad idea for a mobile website.

There was no indication that users had to swipe horizontally to choose their preferred type of seats. It is highly likely that users will miss it! If it wasn’t for the incomplete looking page (FYI, the page looks clipped), users wouldn’t even know that they can swipe horizontally.

Got it!

Another difference between desktop and mobile site is the messages that pops up at the top of the page after every section. Messages like “Looks good!” and “Got it!” gives users a sense of interaction.  Mobile users felt that Virgin America is talking to them. However, as mentioned in Part 1 of this article, none of the desktop users noticed these features at the top of the page.

Verdict

The whole booking process is very interactive and fun. Users actually like this new concept. Not only is the booking process simple and straightforward but Virgin America actually took the effort to try to communicate with users over their website. This actually made users feel a sense of belonging.

Nonetheless, no matter how good the website is, Virgin America should do testing thoroughly across all devices because there seem to be bugs and glitches on certain devices. Bugs and glitches should be minimized to give users a fully interactive and fun experience.

Recent Articles

5 Stages of Design Thinking Process You Need to Know

Staying ahead of the curve means continually innovating and adapting. Entrepreneurs and mobile app developers often face the challenge of creating solutions that not only solve real problems— but also deliver exceptional user experiences. This is where design thinking...

10 Ways Fintechs Use Experience Design to Surpass Banking

Malaysia’s Fintech landscape is booming,  surpassing even the banking sector. Fintech companies place a lot of importance and emphasis on creating the perfect digital experience design ensuring that their customers receive the best user experience (UX) possible. Only...

Quantitative Usability Testing Tips You Should Consider

UI/UX designers aim to not only create visually appealing interfaces but also ensure that users can interact with their designs effortlessly. In this quest, quantitative usability testing is a fundamental tenet. This in-depth guide seeks to delve into the intricacies...

Qualitative Usability Testing Tips

Usability testing is a crucial part of the UX design process that helps businesses understand how users interact with their products and identify areas for improvement. One effective approach to usability testing is qualitative testing, which focuses on gathering...