Webdesigntuts+

---

How They Did It: Virgin America’s New Storefront Posted: 28 May 2014 01:38 AM PDT Virgin America has launched a new booking service, and it's a lot of fun! The concept of a flight booking experience being fun sounds nearly impossible. For years, booking a flight online has been a relatively cold undertaking and pointed purely at business objectives. Virgin has created a different experience. Today, we're going to talk about how they've changed the average booking experience and made it more approachable and delightful. Hello World, the Meta Site One of the first things you might notice is that Virgin introduces their new site with a Hello World site, furnished with some brilliant SVG animation. This is intended to be a basic overview of the new booking experience, explaining its most prominent features and goals.  Virgin's new site is fly This meta-site was created using jQuery One Page Scroll by Pete R., a plugin inspired by Apple's iPhone 5S product feature site. Featuring Swiffy-created animations, a Vine video, as well as a few CSS/JS powered animations, the introduction even points out the new whimsical design elements as a feature of the relaunch. This is a particularly interesting marketing move, as it truly sets the stage for the new booking experience. Beyond simply explaining the functions of the new site, the meta-site gives credibility to the new reveal and builds the positive tension of trying the new experience. There's a lot to unpack in this site, so for the sake of completeness, we will be skipping some of the technical details that belong in more specific tutorials. Instead, we will talk about some of the primary aspects of the design strategy, and summarize some of the overarching technical implementation strategy. Booking UX: Full Screen Form Design The booking experience can most accurately be described as a very highly designed form experience. The form steps you through the following process: Choose your destination and departure points, as well as trip type (multi-city, etc) Choose the occupant details (count and type of occupant) Select dates of flights Select each flight time and ticket 4a. Select any upgrades you'd like to apply Choose your seat Finalize details and pay Choose your destination Instead of doing this via a traditional form, Virgin has chosen to make this a modal experience that focuses on singular decisions. But instead of just using traditional input methods, Virgin relies primarily on clicking instead of typing. This allows the user to focus on visual decisions rather than logical decisions. The primary control is a clickable box outline with text in the center, which is repeated throughout the booking process. Secondary controls include simple +, -, and X buttons, or clickable up/down arrows. Primary and secondary controls The full screen form utilizes Angular to handle the application data binding, and does not appear to utilize any particular UI framework. The CSS file is 16,800+ lines unminified. "Unlocking" Sections One of the decisions made by Virgin is to unlock different sections of the form once they are filled out, and leave them accessible throughout the rest of the booking process. Once you have completed one part of the form, the next part shows and the page automatically scrolls to that section's position. Delightful Language Virgin is known for their light-hearted branding strategies and daring copywriting, and the new booking experience is no exception. For instance, when you choose Portland as your destination, the app reminds you to "pack your plaid," and asks if you are headed to "Hahvahd" (Harvard) if you choose Boston as your destination. This kind of rich language goes in direct opposition to the traditional booking experience. Guess where I'm going.. pushState for Snappiness The app maintains true URL state, and does so using pushState. For instance, choosing the "check in" from the menu updates the URL and view without reloading the page. The URL says it all Goodbye, IE8 Virgin has also made the move to stop supporting IE8, using conditional comments to include a modal and classes on the HTML element. <!--[if lte IE 8]> <div class="modal__window--ie8"> <div class="modal__bkgd">&nbsp;</div> <div class="modal__dialog"> <div class="modal__header"> <h1 class="modal__title">Your browser is not currently supported</h1> </div> <div class="modal__content is-generic"> <p>But there's an easy fix! The Virgin America site works on a wide range of browsers. Click one of the icons below and follow the instructions. You'll be flying in no time.</p> <p>Find the latest versions of our supported browsers below:</p> <ul class="supported-browsers"> <li class="supported-browsers__chrome"> <a href="https://www.google.com/intl/en-US/chrome/browser/‎"> <span class="btn btn-normal btn-primary btn-block">Download Google Chrome</span> </a> </li> <li class="supported-browsers__firefox"> <a href="http://www.mozilla.org/en-US/firefox/new/‎"> <span class="btn btn-normal btn-primary btn-block">Download Firefox</span> </a> </li> <li class="supported-browsers__ie is-omega"> <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie"> <span class="btn btn-normal btn-primary btn-block">Download Internet Explorer</span> </a> </li> </ul> </div> </div> </div> <![endif]--> Cart View The cart looks very similar to a boarding pass, but shows a massive Continue button, as well as the price of the currently selected options. You can also change the options from this view. The Final Detail Form The final form provides fantastic validation messages that fit right in line with the rich copy found elsewhere in the site. Virgin has also included a completely unexpected feature, the option to add an avatar to your person. The rest of the checkout process is relatively simple, albeit very simply designed, aligning to a grid. What Makes This New Booking Process so Effective? Aside from the fact that the site itself is very fast and provides responsive CSS, Virgin has crafted a new format that redefines a notoriously terrible user experience. By reframing the voice to be more approachable and friendly, and focusing on aesthetically pleasing and delightful interaction, what was once a dreaded task has now become a fun task.

You are subscribed to email updates from Tuts+ Web Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610