Full screen booking, one decision at a time

Take the tour of the new website. It’s a wonderful experience and flags up the major new bits.


The mission statement is why shouldn’t booking be fun, easy and on any device?

responsive virgin america website


The end of the tour sums up the sheer inventiveness of the website. A Vine is embedded showing how the new boarding passes print ready for your back pocket (though they are mobile optimised, too).

Bold copywriting


Look at this copywriting. ‘Fly like a boss’ advertises the ‘Elevate’ corporate rewards program. ‘Feel the upgrade’ pushes you to go for a better seat. ‘Swipe for the sky’ sits atop the Virgin America Visa Signature Card. The explanatory copy is similarly fun and on brand. It really improves the often dull experience of booking a flight.

Click to enlarge.

bold copywriting on vrigin america website



Look how clearly everything stands out.

contrast on virginamerica.com 


Contrast is used below to give clear messaging on products that are not available, in this case an upgrade to Main Cabin Select standard.

contrast for sold out


When just text is used, it’s big and clear.

clear text on virgin america

Big juicy cards 

This is just design beauty. First I’m shown the most popular destinations I can fly to from San Francisco, then below is the view I get after clicking ‘All Cities’. If I hover over a card, its border turns purple.

This is great not just because it’s pleasing to use. The design will likely reduce customer mistakes as I’m not selecting from a dropdown or a puny list. Cards are the here and now of web design and it’s great that Virgin America has employed them here. The cards have a slight shadow, too, a concession to the skeuopmorphic?

You’ll see plenty more cards throughout booking as each option has the same style of interface, for destination, guests and dates.


virgin america flight picker


More lovely cards when looking at upgrades.

upgrade cards on virgin america


Cards are even used in a NetFlix style when showcasing the entertainment available on board.

entertainment on board virgin america

Sharp and often fun imagery


Pop-over information on each cabin type is full of quality imagery and colourful symbols.

cabin info


Icons showing flight destinations at sale prices.

virgin america deals


Stay connected.

virgin america cabin info


Club lounge at JFK.

club lounge at JFK.


For the most fun, head to this page showing every destination the airline flies to.

virgin america destinations


Continuing on a light-hearted note. They only ‘rotate’ once on loading (as should be the case below) and then they keep their peace, so as not to be too distracting.

But they really draw the eye to two important brand features on the page – a tour of the new site and an overview of the Virgin America flying experience.

virgin america home


virgin america new site gif



Some of these work very well indeed. Here are a few examples. Forgive the quality of my Vines.

This micro-interaction is great. The phone field isn’t marked as mandatory, but if I don’t fill it in the ‘continue’ button changes message to ‘fix phone’, alerting me to a field I haven’t sorted.


fix phone cta virgin america checkout


And look at this, below. I type my first name and get a ‘Hey there’, my surname and get a ‘Nice name!’, and a ‘Good’ next to my email address. Lovely touches.

hey there microcopy virgin america


And the pièce de résistance, I get to choose a completely pointless but fun avatar.

choose an avatar on virgin america


Selecting a journey type.


Selecting a destination causes the page to roll-up to the ‘Who’s flying?’ stage. Progression of the booking is therefore emphasised.


In a lovely touch, if you select a hot destination, for example, you’ll be given a cheeky little message like below when I clicked LAX.

micro-interactions on virgin america website


On the ‘Who’s flying?’ page, selecting a number of adults and children updates the top menu dynamically (your cart).


Again, the ordering process automatically rolls down to date selection.


Another friendly piece of micro-copywriting reinforces how many guests I have selected. Again, this guards against errors.

micro-copy virgin america


More micro-copywriting when I select a couple of dates. ‘Looks good.’

micro-copy virgin america


And ‘Nice. Now pick your returning flight.’

microcopy virgin america'


And finally, ‘9.15am in the main cabin’.

main cabin virgin america microcopy



The cart can be popped down at any stage. It sits, nested and clear at the top of the screen until you need it.

cart in top menu


As you can see here…

popdown cart on virgin america 

There’s plenty more I haven’t discovered and I haven’t included mobile shots here, which are equally impressive. Take a look at the site yourself and marvel at a responsive, playful beast that redefines airline websites.