The ‘tour page’ to the new-look Virgin America site
Virgin America has relaunched its website with help from studios Work & Co and Build – the result, influenced by mobile apps and video games, is a much simpler and faster experience, with some cheeky humour thrown in as well. We talked to the designers involved about the project…
Six of the avatars created by Build
For an airline website to get away with being ‘playful’, it has to work really well. The stress involved in booking tickets – looking out for a deal, a decent flight time and seat availability – all make for an online experience that needs to be as user-friendly as possible. Which is why after eight years, Virgin America’s website needed an upgrade all of its own.
“We started the project as if there had never been an airline website designed before,” says Virgin America’s creative director, Jesse McMillin, who brought in New York-based Work & Co to head up the redesign.
“How would we do it if we were just starting from the landscape of 2014, a world where responsive design and fast efficient web tools are key, where users want to be engaged and entertained as they’re sped through the flow of whatever it was they needed to do?”
Virgin America homepage
More than simply echo the Virgin ‘experience’ online, “the site also had to be responsive,” says Work & Co’s Joe Stewart, “which is an incredibly challenging technical undertaking for such a complex e-commerce system. This is the first major US airline to have a responsive site, which sounds like it should be standard in 2014, but it’s very technically complex.”
Each stage of the booking process is completed at full screen
Taking a less-is-more approach the new website has removed the clutter from its pages and clearly presents key information. The user is led through each stage of a booking one step at a time, with no distractions.
“Our idea was to leverage UI patterns from mobile apps and video games for the site,” says Stewart. “That meant figuring out the one thing the user really needs right now and moving everything else out of the way. The site only asks for the information it needs and lets users focus on each task one at a time – just like how apps and video games work.”
Choosing a seat
The website also has its fair share of amusing moments, which complement the general ease of the booking system experience and, of course, the Virgin brand itself.
“It wouldn’t be enough to just make a cold and functioning tool,” says McMillin. “We’d given ourselves a goal to keep page loading times as quick as possible, and that, combined with our desire to do something different than the same old destination and passenger photos that were common on airline sites, pushed us to take a look at a very modern and stylised illustrative approach.”
Users can select an avatar for each of the passengers booking in on a journey
For this aspect of the project, McMullin and Work & Co approached Build in London who created “a blend of strange and unique characters with a super-sharp blend of English humour and top notch graphic design,” says McMillin.
Build designed a set of unique avatars which guests can customise their profiles and seat selections with, a series of city illustrations depicting every one of VA’s destinations, and a suite of icons.
“Once we had established the style of illustration and characters we moved onto illustrating the cities the airline flies to,” adds Michael Place of Build. “We collated as much reference we could about the destinations before starting each illustration. I’m not sure if it was intentional on the client side, but it quickly became apparent that the view of an American city by an English design studio threw up the funniest results.
“Our interpretation of what we felt represented certain cities was a source of great amusement to the Virgin and Work & Co team,” he adds. “I think this is a really important point, Virgin is a ‘challenger’ brand, it thrives on being different and this project completely nails that perspective. From taco-eating pandas, a pizza munching Statue of Liberty, to Obama taking a selfie with his security detail (not to mention a windy Michael Jordan).”
City illustrations by Build
A series of animations by Animade (three shown above, one below) were also produced for the new website which introduce the new website and illustrates the frequent flyer programme, the availability of onboard wifi and power, and the music and entertainment systems.
“We had worked with Animade on the Plus Plus project and the guys at Virgin America and Work & Co were also keen to get them involved,” says Place. “We brainstormed each animation with the whole team and produced a set of storyboards for Animade to work their unique magic.”
Los Angeles (and Sir Richard?)
“The final piece of the project we worked on was a set of new icons for the new website. Whilst these were not as wild as the illustration aspect of the project they are an important part of the finished site providing visual markers for important content.”
A selection from the set of new icons designed by Build
To complete the overhaul, Work & Co also redesigned the humble print-at-home boarding pass, having noticed that it was frequently folded into quarters by customers.
“Why not design it to be folded from the start?” says Stewart. “On one side is all the things the TSA needs to see, on the other side we have free reign to put the info users really want with large, legible type. Since we have more space, we can have the type choices be well considered, even pretty – every detail counts, and this is no exception. It’s all about figuring out what the user really needs at this exact moment and giving it to them in a well designed manner.”
The new Virgin America site is at virginamerica.com.