Since Alaska Airlines first announced its acquisition of Virgin America in 2016, I have wanted to revisit Virgin America’s revolutionary website before it disappears. The design collaboration between the design firm, Work & Co., and the Virgin America team achieved numbers of awards and praises by numerous media. According to Work & Co., the redesign resulted in a 14% increase in the general conversion rate, a 20% decrease in the web-related phone calls, and a 3x increase in the mobile conversation. I used this redesign as a case study to learn a lot about a customer-centric airlines’ web experience and applied learnings for several design proposals as well.

In the redesign project, one of the key goals for Virgin America was to increase user conversions in mobile and tablet devices. Rather than web-plus-app approach, the team invested mostly on a responsive web. The trend then was to rely on a mobile native app for usability in smartphones, but it also costed a lot to promote the app to users in order to get them to download.

In the new design, the iconic large clear buttons work seamlessly both in desktop and in mobile, and the experience is as if each page was a well designed presentation of slides. For branding, the design is illustration-heavy without using pictures, which orchestrated a fun and sleek image. Alt the same time, it also helped reduce loading time. According to Work & Co., the Virgin America website recorded a 2 seconds site-loading benchmark which was the fastest loading airlines website. This effective design system is the outcome of the unique team structure of Work & Co., where engineers and designers do not only work together but they also manage projects and client satisfaction by themselves.

Below, I would like to list some of my findings that I admire about the design.

Contextual Information to Back Travelers’ Decisions.

One of the notable bold moves in the design is to limit information displayed in each page unlike other existing airlines websites. It helps travelers to digest content better by disclosing information progressively according to the design research done by Work & Co. At the same time, it doesn’t only mean less information, but it also allows contextual information to back travelers decisions to move forward.

An effective example is when they show prices in a calendar view when a traveler needs to select dates. This is highly beneficial for budget travelers who are flexible in dates such as college students. For those, displaying options based on prices encourages them to make transactions right away as soon as they find good deals. I doubt if this information would be as effective if it is shown in a cluttered conventional website.

The desktop calendar view with prices (Left) and the mobile view (Right)

I’d Improve

I would even get bolder and colorize each box in the calendar in more granular sets of tones to reflect prices. This way, I can easily detect the discounted times to fly in the calendar. As a traveler, I like browsing airline websites simply with an inspiring city to visit in my mind. I feel extremely lucky by finding cheap dates, and it may drive me to secure the ticket without initially intending to take a trip.

The color-code example to highlight discounted times.

Travelers’ Mindsets and the Buying Experience

As the website makes it easier to make decisions with progressively disclosed information, it also makes it easy to modify their selections in the past anytime in the process. It helps ease the stress for deciding dates and times of flights with juxtaposition of prices. As travelers go deeper in steps for choosing tickets, all of their selections get organized in the top navigation bar in a desktop view. (They are hidden in the mobile view but easily accessible from the dropdown menu next to the total price.)

The desktop navigation listing selections made (Left). The mobile view which can be accessed by tapping the total price (Right)

The edit section can be also accessible by scrolling the page up, which is suggested by scrolling animations after making each selection. The elimination of a traditional Go-Back button makes the entire buying experience into a seamless process.

After scrolling up, travelers can change any of selections they made easily.

On top of the scrolling animation, the header navigation also gives conversational feedback every time travelers make decisions. These dialogues also help ease the stress in the buying process and it also helps reinforce Virgin America’s brand image.

After selecting dates and times of the tickets, the login blocker comes, similar to many other airline websites. It makes sense since finalizing pricing is the most stressful part of purchasing tickets. It’s a very small detail, but keeping the header navigation with the total price as well as keeping the login CTA the exact same look-and-feel from the previous pages makes the page look like part of the same process. It makes it obvious that all selections and the total price are in a secured place. Some other websites do it with a popup which segregates information from the previous experiences.

The experience of the login blocker is seamless from previous steps.

The advantage of keeping minimal information per page is also effective in the upsell. Additional protection and seating selections are promoted with the same design style; The box-style CTA with a description including an additional price underneath. It gives better opportunities for travelers to understand and think about these options. Also in seat selections, occupied seats are illustrated with the branded illustration of characters’ faces. It eases travelers from worrying who may be sitting next to them.

I would make the “Skip” CTA a little more prominent on mobile screens since it could frustrate budget travelers by confusing them into thinking they must select a seat and pay extra.

The up-sell pages use the same design languages.

Also, “Pay Now” under the total price at the header navigation only appears after you go through all process. It may be friendlier to display right after putting personal information and before pages with up-sells. Needing to go through up-sell pages and seat selections could be annoying for budget travelers. Instead, it could give them an option to hit “Pay Now” right away, but ask them if they really want to skip protections and seat selections in a pop-up and remind them that they can add later.

The edit page which can be accessed by scrolling the page.

I’D Improve

There is one place I would like to make a change in the process. When I think about travelers, unless they are booking flights for their company staff, the guest count and departing city won’t change constantly. Currently at the home page of the website, it displays 3 main drop-downs for a guest count, a departing city, and a destination, with equal proportions. Although it communicates the simplicity of initial steps, I believe some direct-flight destinations can be exposed in addition to the existing drop-downs. For example, those exposed destinations can be a combination of popular destinations, new destinations, and discounted destinations. This way, it will be easier and quicker for some travelers, but it also gives Virgin America an opportunity to promote direct-flight destinations from the traveler’s home city.

The current home page with 3 initial drop-downs.

Follow on medium: https://medium.com/@takuma.kakehi/travelers-mindset-and-the-buying-experience-of-the-virgin-america-site-5fb2c1896ec9

References

Work.Co: Virgin America

The Super Slick UX of Virgin America’s New Booking Site | WIRED

Virgin America Redesign | UX Design Awards

UX Marvels: Virgin America | @WinstonWolfDigi

UX Case Study: The World’s First Responsive Airline Website | UXPin

Leave a comment

Your email address will not be published. Required fields are marked *