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?
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.
Contrast
4.
Look how clearly everything stands out.
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.
6.
When just text is used, it’s big and clear.
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.
8.
More lovely cards when looking at upgrades.
9.
Cards are even used in a NetFlix style when showcasing the entertainment available on board.
Sharp and often fun imagery
10.
Pop-over information on each cabin type is full of quality imagery and colourful symbols.
11.
Icons showing flight destinations at sale prices.
12.
Stay connected.
13.
Club lounge at JFK.
14.
For the most fun, head to this page showing every destination the airline flies to.
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.
15.
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.
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.
19.
And the pièce de résistance, I get to choose a completely pointless but fun avatar.
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.
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.
26.
More micro-copywriting when I select a couple of dates. ‘Looks good.’
27.
And ‘Nice. Now pick your returning flight.’
28.
And finally, ‘9.15am in the main cabin’.
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.
30.
As you can see here…
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.
Comments