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.

1.

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

responsive virgin america website

2.

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

3.

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

Contrast

4.

Look how clearly everything stands out.

contrast on virginamerica.com 

5.

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

6.

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.

7.

virgin america flight picker

8.

More lovely cards when looking at upgrades.

upgrade cards on virgin america

9.

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

10.

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

cabin info

11.

Icons showing flight destinations at sale prices.

virgin america deals

12.

Stay connected.

virgin america cabin info

13.

Club lounge at JFK.

club lounge at JFK.

14.

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

virgin america destinations

GIFs

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

15.

virgin america new site gif

16.

Micro-interactions

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.

17.

fix phone cta virgin america checkout

18.

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

19.

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

choose an avatar on virgin america

20.

Selecting a journey type.

21.

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

22.

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

23.

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

24.

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

25.

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

micro-copy virgin america

26.

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

micro-copy virgin america

27.

And ‘Nice. Now pick your returning flight.’

microcopy virgin america'

28.

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

main cabin virgin america microcopy

Cart

29.

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

30.

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.