The booking wizard -- a trade nickname for the set of pull-down windows and calendars used by travelers to say what type of plane tickets they want -- has been a fixture on booking website homepages for at least 15 years.
But early this summer, when Virgin America officially launches its revamped website, you won't see a booking wizard. The company has opted instead for a step-by-step approach.
Each decision, such as choosing a destination or a date of travel, gets a full-screen treatment. Users "unlock" a new screen with each action they take, in a design seemingly borrowed from video games.
Virgin America's most counter-intuitive idea is that, by taking one decision at a time, the process of booking a plane ticket becomes friendlier on a mobile device.
Gene Liebel, partner at Brooklyn design shop Work & Co, which led the project, said in an interview:
The user experience on most airline websites today are weighted down with a legacy of browser mechanics and client server architecture that's 10 years old.
Basically, you submitted one big batch of data and then waited a bunch.
Today webpages can act more like apps and be dynamic, thanks to Javascript and Angular. But we're the first to completely rethink what's possible as a result of new technology.
One example: His team has (mostly) dispensed with pull-down windows and traditional web forms, as they don't work well on mobile devices, he says.
Avatars
Besides "unlocking" decision screens, Virgin America has taken another trick from video games: It has avatars, or cheeky cartoon images.
Users can pick one of about a dozen avatars for themselves when choosing a seat on the airline seat map and for their user ID image.
Besides fitting with the airline's whimsical marketing, avatars speed up load times because they require less data to download than stock photos. The avatars were created by London design shop Build.
Calvert, Virgin's CMO, says the company has a lot of ideas for making aspects of the site more shareable on social networks, and it has a lot of plans in store for its avatars toward that end.
Rebuilt from scratch
On May 22, the site's beta version appeared on the beta.virginamerica.com page. Virgin America is pushing it to members of its loyalty program, Elevate.
Prior to this, the company beta-tested in two large markets early versions of the site, as well as focus-grouped it with some employees from Google's Flight Search team.
In early results, the company says load times are faster because the page size is around half the page-weight of a normal airline website page -- helpful when a device has a spotty data connection.
Critical reviews
The mobile-first design also encourages tapping on a screen, rather than typing on a keyboard. But that may not please all travelers.
Some fliers and agents are used to typing in airport codes, like ORD for Chicago O'Hare, and may find having to visually hunt-and-pick from icons to be slower.
Tnooz spoke to a few user experience (UX) and design experts, to gauge their opinion of the beta site.
Peter Merholz, a UX and interaction designer for major brands -- most recently Groupon, comments:
Something that I like is the conversational mode the site assumes. After each step, you get a response in plain English, as if you're talking to a person. It's a nice touch.
There are some UI issues -- when selecting a city, the "All Cities" button a similar color scheme and typography as the city choices, and so doesn't stand out as something quite different than the others.
The same occurs later in the process, when you're choosing seats, where the "continue" button looks the same as the option to upgrade.
My biggest issue though was, by the time I got to the "choose a returning flight" step, this process had gone on so long, I lost sense of where I was.
The one thing this interface does a poor job of is helping you maintain your context in this many-steps process.... and how many steps you have left in the process.
That said, I like the design, and I appreciate anyone productively flouting convention.
Mike Monteiro, who owns Mule Design Studio in San Francisco, says:
It is the best airline booking site I've ever used. Game changer. Simple. Easy. Delightful.
The best thing about the site is that it makes it look like for years designers just tried making better versions of the same ticketing UI.
Whoever designed Virgin started with the understanding that old UI was broken, and went at it fresh.
Laura Klein, author of UX for Lean Startups, says she couldn't comment in detail without knowing the company's aims. But...
The goal of any design should be improved key metrics - acquisition, activation, retention, revenue, or referral.
I don't know if the design will improve those metrics, but it's certainly gotten people talking about the brand. But it's a pretty expensive way to drive word of mouth, if that's all it does.
Marketing goals
Virgin America CMO Luanne Calvert said in an interview that the company's metrics were to meet its revenue management goals, optimize load time for the home page, and reduce the number of clicks it takes to make a booking.
She said that the airline looked to e-commerce sites like Amazon for best practices.
"Our airline peers have been imitating each other for a decade and their ideas are stale. We looked outside the industry to get cutting edge designs."
Calvert added that one customer called its center in Dallas and said they could book a ticket in under four minutes, and that's their new benchmark.
Intense project
The design and engineering process started last September and involved 15 people directly. Liebel sent several designers to embed with Virgin America's engineering team in Silicon Valley:
"For this type of project you must have one team. The other option, a design team and an engineering team handing off to each other a few weeks at a time, is the opposite of how good software made.
A couple of our partners moved their families out there, and we still have war room there."
Some of the differences with typical airline sites are subtle. For instance, the site maintains a true URL state, so that when you choose an option from the menu, the page updates the web address and view without reloading the page.
Work to be done
Virgin America's site will work with the platform from global distribution system Sabre, which it adopted in autumn 2011 as a replacement for its hand-built system.
That process was filled with enough snafus that gate staff served "apology cookies" to frustrated customers.
The company says several changes are being made in response to feedback. For one thing, the seven-day calendar fare view will be restored after the new site launches.
Novelty act or trendsetter?
Virgin America claims that its beta site is the first from a US airline to fully embrace mobile-first design, with the interface aiming to appear well no matter whether the device is a phone, tablet, or a laptop.
The airline gets disproportionate social media attention for an airline of its size partly because the Silicon Valley-headquartered carrier flies the San Francisco to New York route. It's so popular with tech geeks, some call the planes "nerd birds."
Yet the airline, only seven years old and newly profitable, flies to only a small share of the cities that major US legacy carriers go to. It has less variation in plane type, too.
Those factors mean that it was relatively easy for it to simplify the choices on its website to a degree larger airlines can't.
The smallness of the airline also enabled a faster design process than is easily possible in larger corporations. Says Liebel:
You need designers and engineers that can work quickly in agile software development. You also need the whole organization to be on board.
Virgin America is a good client because it wasn't just about launching it on time or under budget. Their questions and metrics were focused on what the user needs rather than just what the company needed.
The entire team was involved, their developers, the people who have to approve the policies, the people in charge of merchandising and marketing -- everyone had buy-in. That's rare.
The booking engine's days may be numbered industry-wide, argues Mikhail Goldgaber, head of experience UK, at creative shop Possible -- who was not involved in the project but has done similar branding work.
Currently, the majority of travelers know either the precise timeframe they want to travel in, or the destination they want to travel to, not both.
Yet current user experience models, with pull-down menus on destination choice and date preferences, are only tailored towards the minority of users who have pre-planned these details.
Expect the Virgin America's overall design effort to be a foretaste of what's to come for other companies. Design shop Work & Co. recently landed user-generated giant TripAdvisor as a client.