{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.


That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.


Sorry about this, there is a problem with our search at the moment.
Please try again later.

Virgin America's new website manages to turn booking a flight into a joyous process.

That tells you all you need to know about how good this website is.

Here I've picked out 30 good bits. I urge you, of course, to read this post, but go and check out the website yourself for some great design inspiration.

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.

Ben Davis

Published 24 June, 2014 by Ben Davis @ Econsultancy

Ben Davis is a senior writer at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

852 more posts from this author

Comments (6)

Save or Cancel

Finn Christo, International eCommerce Manager at Boohoo.com

The only thing that stuck in my craw was not having the mandatory field notification in the phone field.

A barrier is still a barrier no matter how pretty it looks..but...lookit...so shiny!

over 2 years ago

Pete Austin

Pete Austin, CINO at Fresh Relevance

Excellent marketing site. BTW I don't think the GIFs are really GIFs, but they are using the same trick as Twitter does to save bandwidth.

over 2 years ago


Jo, Marketing Executive at Insurance

Love the site, shame it didn't follow through to email.

over 2 years ago


Carly Barnes

Some really nice touches... I wonder what was the UX for the actual payment section was like - the form filling for address and payment is often so lengthy. Maybe my next holiday will be with Virgin so I can experience it for myself!

over 2 years ago


Andy Johnson

this is really great... less time and you will get what you want... the responsiveness of the new site is just amazing....

over 2 years ago


John Sanders, CEO at Noisebridge

So in actual practice its a big step back from the previous site. It takes a lot more scrolling to get anything done. Its difficult to get context when all of the data is spread out across a big screen. The seating chart is pretty terrible with monster avatars cluttering the screen and superfluous seat assignment data. This is the problem with doing things in the cloud... the user has no control over UI changes. How can I role back to the 'classic' booking experience?

over 1 year ago

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.