UX Marvels:

Virgin America


UX Marvels: Virgin America

With the ever-increasing amount of people browsing from tablets and smartphones, responsive and mobile first design are just some of the latest buzzwords being fired around the digital world. Yet great examples of software that utilises this approach are far and few between. This is no doubt due to the recentness of this phenomenon, with companies trying to keep up and agencies grappling to get to grips with this latest movement.

Whilst there have been some honourable solutions created, one website jumps to mind that is particularly exceptional. The brand is Virgin America and the agency that created this marvellous responsive web solution is Work & Co.

This article explores why Virgin America’s new website has been such a triumph, with higher conversion rates, faster bookings times and a fun user experience, which all culminated to first prize at the 2014 UX Awards. It is split into two parts, the first showcases Work & Co’s flawless strategy, whilst the second takes a closer look at the user experience of the new site.

Part I: The Strategy

Fundamentally, the reason why this was such a huge success is underpinned by Work & Co’s approach. They executed the perfect UX strategy, delivering a solution with the user at the centre that revolutionised the flight booking procedure.

Having outlined a set of goals to strive towards, Work & Co embarked on their quest to radicalise Virgin America’s website. In the same way a wedding planner organises a wedding around the bride, Work & Co began their creation with the target audience: travellers. They conducted qualitative research across a broad demographic of travellers, which revealed the types of people using the software, as well as when, where and how they would do so. This was a technique pioneered by Alan Cooper in the 1980’s so he could identify and understand the thought process of the people who would ultimately be using his software. Similarly, this allowed Work & Co to redesign Virgin America’s website from the customer’s perspective, placing them at the centre of the strategy from the ground up. The outcome gave way to insights and opportunities for Work & Co to improve the journeys and UX for Virgin America’s customers.

Despite the deep insights and rich wealth of information that Work & Co had accumulated, the following process wasn’t quite as simple as diving straight into designing and developing the new site. The trick to creating the best digital products, which Work & Co would have been all too aware of, is iteration, iteration, and iteration.

In the knowledge that there are many different solutions to a challenge, Work & Co adopted a multi-pronged approach and created several different prototype designs. Through testing and iteration, the suitability of each idea would have been assessed, thus teasing out potential problems whilst incubating the best concepts. With the development and refining of each design the prototypes became more detailed and of higher fidelity until an optimum solution was achieved. Now they were ready to build the final site.

One last safety check was needed, beta testing. Instead of brazenly launching the new site, it was first tested in parallel against the old system to ensure it really would perform as planned. By comparing the analytics of the old and new websites Work & Co were able to demonstrate that their hard work had paid off. The new site outperformed the old site against all criteria, including time to book and, most crucially for Virgin America, conversion rate.

Part II: A Closer Look at the User Experience

So what had Work & Co created that was so extraordinary? In regards to the user experience, the devil is in the detail.

To help manage user expectations and not confuse them with this radically new experience, Work & Co created a handy introductory guide to facilitate the transition from old to new. This would have been especially relevant for frequent Virgin America travellers who were likely to have been very familiar with the old system.

Introductory video guide

The next noticeable change was the refined homepage, with a substantial reduction in clutter, which significantly improves focus on the key user tasks and made it much easier and quicker for users to begin their path to purchase. This is also reflected in the header navigation with the three main tasks (book, check in and manage) featuring at the top of the hierarchy and given extra prominence with a larger capitalised font.

The new refined homepage

The focused attention of key user tasks doesn’t just stop on the homepage. The booking procedure focuses on one simple step at a time and utilises the whole screen to do so, unlike other airlines that bombard users with annoying hotel and car rental deals. This enhances attention at each stage, as users are not distracted by any other content, making it much easier and quicker to move through the process. It is a common misconception that less clicks makes for a better user experience. Research has actually shown that the type of progressive disclosure that Virgin America utilises is much more manageable and pleasurable than presenting everything upfront. What’s more a user can easily change a previous decision by simply scrolling back up the page, which avoids broken back buttons.

The refined stripped back feel would have arisen from Virgin America’s key objective of a more accessible mobile experience. This is likely to have led Work & Co to design from a mobile first perspective so the responsive site looks and feels incredible on any device. This also led Work & Co to favour illustrations over rich photos, making for faster load times no matter what connection the user is browsing from.

Full screen calendar for choosing your dates

The functionality of components has been carefully considered too. Take a second to think about when you chose the dates for the last flight you booked. What’s easier: remembering and inputting your desired dates of travel or using the simple fly out calendar to choose your dates? Frequently it is the calendar that comes out on top as it allows users to easily visualise the days and length of their trip. So why isn’t this the default option instead of those annoying drop down menus? Something Work & Co must have realised with their elegant full-page calendar, making incorrect date entries a thing of the past. This careful consideration is continuously consistent throughout the entire site, such as saving payment details and giving comprehensive user feedback within each form field. All of this is aimed at saving the user time and effort, which will ultimately result in a higher conversion rate and an increase in profits for Virgin America.

Characterful avatars

Whilst a refined and simple approach was adopted, Work & Co did not forget about Virgin America’s brand identity with their bold choice of colours and characterful lines of copy. Selecting a flight to Las Vegas for example displays the cheeky message “Repent before you land in Sin City”. Users are also required to choose a cartoon avatar to represent themselves. All of these elements combine to create a uniquely fun experience that elevates the perception of Virgin America as the awesome likeable brand.

Cheeky lines of copy

Go Virgin America! Now the precedent has been set, one can only hope that the other airlines will follow suit and reinvigorate their booking procedure from a blank canvas perspective.

Written by

Charlie Lewis

Digital Strategist at Winston-Wolf

Additional reading and resources:

Download a PDF summary of Work & Co’s approach:

http://www.work.co/uxaward/WorkAndCo_VirginAmerica2014.pdf

Bored of reading? Watch the UX Awards 2014 case study video for Virgin America’s redesign by Work & Co:

http://www.work.co/uxaward/

Wired’s review of the responsive site:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.