Comment ils l'ont fait la nouvelle devanture de Virgin America

Virgin America a lancé un nouveau service de réservation très amusant!

Le concept d’une expérience de réservation de vol étant amusement Cela semble presque impossible. Pendant des années, réserver un vol en ligne a été une entreprise relativement froide et orientée uniquement vers des objectifs commerciaux..

Virgin a créé une expérience différente. Aujourd'hui, nous allons parler de la façon dont ils ont changé l'expérience de réservation moyenne pour la rendre plus accessible et agréable..

Hello World, le méta-site

Une des premières choses que vous remarquerez peut-être, c'est que Virgin présente son nouveau site avec un site Hello World, doté de quelques animations SVG brillantes. Ceci est destiné à être un aperçu de base de la nouvelle expérience de réservation, en expliquant ses caractéristiques et objectifs les plus importants.. 

Le nouveau site de Virgin est fly

Ce méta-site a été créé à l'aide de jQuery One Page Scroll de Pete R., un plugin inspiré du site des fonctionnalités du produit iPhone 5S d'Apple. Présentant des animations créées par Swiffy, une vidéo de Vine, ainsi que quelques animations utilisant CSS / JS, l’introduction souligne même les nouveaux éléments de conception fantaisistes comme une caractéristique du relancement..

Cette démarche marketing est particulièrement intéressante car elle ouvre la voie à la nouvelle expérience de réservation. Au-delà de la simple explication des fonctions du nouveau site, le méta-site donne de la crédibilité à la nouvelle révélation et renforce la tension positive inhérente à la nouvelle expérience..

Il y a beaucoup de choses à décompresser sur ce site. Par souci d'exhaustivité, nous allons donc ignorer certains détails techniques qui appartiennent à des tutoriels plus spécifiques. Au lieu de cela, nous parlerons de certains des principaux aspects de la stratégie de conception et résumerons une partie de la stratégie globale de mise en œuvre technique..

Booking UX: Conception de formulaire plein écran

L’expérience de réservation peut très bien être décrite comme une expérience de formulaire très élaborée. Le formulaire vous guide tout au long du processus suivant:

1. Choisissez votre destination et vos points de départ, ainsi que le type de voyage (multi-villes, etc.)
2. Choisissez les détails de l'occupant (nombre et type d'occupant)
3. Sélectionnez les dates des vols
4. Sélectionnez chaque heure de vol et billet 4a. Sélectionnez les mises à niveau que vous souhaitez appliquer
5. Choisissez votre siège
6. Finaliser les détails et payer

Choisissez votre destination

Au lieu de le faire via une forme traditionnelle, Virgin a choisi d’en faire une expérience modale centrée sur des décisions singulières. Mais au lieu d'utiliser uniquement les méthodes de saisie traditionnelles, Virgin s'appuie principalement sur un clic plutôt que sur la frappe. Cela permet à l'utilisateur de se concentrer sur décisions visuelles plutôt que décisions logiques.

Le contrôle principal est un contour de boîte cliquable avec du texte au centre, qui est répété tout au long du processus de réservation. Les contrôles secondaires incluent simple +, -, et X boutons, ou flèches haut / bas cliquables.

Contrôles primaires et secondaires

Le formulaire plein écran utilise Angular pour gérer la liaison de données d'application et ne semble utiliser aucun cadre d'interface utilisateur particulier. Le fichier CSS contient plus de 16 800 lignes non minées..

«Déverrouillage» des sections

L'une des décisions prises par Virgin est de débloquer différentes sections du formulaire une fois remplies et de les laisser accessibles tout au long du processus de réservation. Une fois que vous avez rempli une partie du formulaire, la partie suivante s'affiche et la page défile automatiquement jusqu'à la position de cette section..

Langue délicieuse

Virgin est connue pour ses stratégies de marque enjouées et sa rédaction audacieuse, et la nouvelle expérience de réservation ne fait pas exception. Par exemple, lorsque vous choisissez Portland comme destination, l'application vous rappelle de "préparer votre plaid" et vous demande si vous vous dirigez vers "Hahvahd" (Harvard) si vous choisissez Boston comme destination. Ce genre de langage riche va à l’encontre de la traditionnelle expérience de réservation.

Devinez où je vais…

pushState pour Snappiness

L’application conserve le véritable état de l’URL, et ce, à l’aide de pushState. Par exemple, choisir "archiver" dans le menu met à jour l'URL et la vue sans recharger la page.

L'URL dit tout

Au revoir, IE8

Virgin a également décidé d'arrêter de prendre en charge IE8 en utilisant des commentaires conditionnels pour inclure un modal et des classes sur l'élément HTML..

Panier Voir

Le panier ressemble beaucoup à une carte d’embarquement, mais montre un énorme Continuer bouton, ainsi que le prix des options actuellement sélectionnées. Vous pouvez également modifier les options à partir de cette vue..

Le formulaire de détail final

La forme finale fournit des messages de validation fantastiques qui correspondent parfaitement à la copie riche trouvée ailleurs sur le site..

Virgin a également inclus une fonctionnalité totalement inattendue, la possibilité d'ajouter un avatar à votre personne..

Le reste du processus de paiement est relativement simple, bien que très simple, et s’aligne sur une grille..

Ce qui rend ce nouveau processus de réservation si efficace?

Outre le fait que le site lui-même est très rapide et fournit des CSS réactifs, Virgin a mis au point un nouveau format qui redéfinit une expérience utilisateur notoirement terrible. En recadrant la voix pour qu'elle soit plus accessible et conviviale, et en mettant l'accent sur une interaction esthétique et agréable, ce qui était une tâche redoutée est maintenant devenu une amusement tâche.