Wie sie es getan haben Virgin America's New Storefront

Virgin America hat einen neuen Buchungsservice eingeführt, und es macht viel Spaß!

Das Konzept einer Flugbuchungserfahrung Spaß klingt fast unmöglich Die Online-Buchung eines Fluges ist seit Jahren ein relativ kaltes Unterfangen und hat rein geschäftliche Ziele gezeigt.

Virgin hat eine andere Erfahrung geschaffen. Heute werden wir darüber sprechen, wie sie das durchschnittliche Buchungserlebnis verändert haben und es zugänglicher und erfreulicher gemacht haben.

Hallo Welt, die Meta Site

Eines der ersten Dinge, die Ihnen auffallen könnten, ist, dass Virgin ihre neue Site mit einer Hello World-Site vorstellt, die mit brillanten SVG-Animationen ausgestattet ist. Dies soll einen grundlegenden Überblick über das neue Buchungserlebnis geben und die wichtigsten Merkmale und Ziele erläutern. 

Die neue Site von Virgin ist fly

Diese Meta-Site wurde mit jQuery One Page Scroll von Pete R. erstellt, einem Plugin, das von Apples iPhone 5S-Feature-Site inspiriert wurde. Mit von Swiffy erstellten Animationen, einem Vine-Video sowie einigen CSS / JS-basierten Animationen weist die Einführung sogar auf die neuen wunderlichen Designelemente als Funktion des Relaunchs hin.

Dies ist ein besonders interessanter Marketingschritt, da er wirklich die Bühne für das neue Buchungserlebnis bildet. Neben der Erklärung der Funktionen der neuen Site gibt die Meta-Site der neuen Entdeckung Glaubwürdigkeit und baut die positive Spannung auf, die neue Erfahrung auszuprobieren.

Auf dieser Site gibt es viel zu packen. Aus Gründen der Vollständigkeit werden wir einige der technischen Details überspringen, die in spezifischeren Tutorials enthalten sind. Stattdessen werden wir über einige der wichtigsten Aspekte der Entwurfsstrategie sprechen und einige der übergeordneten technischen Implementierungsstrategien zusammenfassen.

Booking UX: Vollbild-Formularentwurf

Das Buchungserlebnis kann am genauesten als ein sehr gut gestaltetes Formularerlebnis bezeichnet werden. Das Formular führt Sie durch den folgenden Prozess:

1. Wählen Sie Ihren Ziel- und Abfahrtsort sowie die Reiseart (Multi-City usw.) aus.
2. Wählen Sie die Insassendetails (Anzahl und Art des Insassen).
3. Wählen Sie Flugdaten aus
4. Wählen Sie jede Flugzeit und Ticket 4a. Wählen Sie alle Upgrades aus, die Sie anwenden möchten
5. Wähle deinen Platz aus
6. Details abschließen und bezahlen

Wähle dein Ziel

Statt dies über eine traditionelle Form zu tun, hat Virgin beschlossen, dies zu einer modalen Erfahrung zu machen, die sich auf einzelne Entscheidungen konzentriert. Statt jedoch nur traditionelle Eingabemethoden zu verwenden, verlässt sich Virgin hauptsächlich auf das Klicken und nicht auf das Tippen. Dies ermöglicht es dem Benutzer, sich auf ihn zu konzentrieren visuelle Entscheidungen eher, als logische Entscheidungen.

Das primäre Steuerelement ist ein anklickbarer Rahmen mit Text in der Mitte, der während des gesamten Buchungsvorgangs wiederholt wird. Sekundäre Kontrollen sind einfach +, -, und X Tasten oder anklickbare Pfeile nach oben / unten.

Primär- und Sekundärkontrollen

Das Vollbild-Formular verwendet Angular zur Handhabung der Anwendungsdatenbindung und scheint kein bestimmtes UI-Framework zu verwenden. Die CSS-Datei besteht aus mehr als 16.800 Zeilen.

"Entsperren" von Abschnitten

Eine der von Virgin getroffenen Entscheidungen besteht darin, verschiedene Abschnitte des Formulars nach dem Ausfüllen freizugeben und für den Rest des Buchungsvorgangs zugänglich zu machen. Wenn Sie einen Teil des Formulars ausgefüllt haben, wird der nächste Teil angezeigt und die Seite wird automatisch an die Position dieses Abschnitts gescrollt.

Herrliche Sprache

Virgin ist bekannt für ihre unbeschwerten Markenstrategien und das mutige Copywriting. Das neue Buchungserlebnis ist dabei keine Ausnahme. Wenn Sie beispielsweise Portland als Ziel wählen, erinnert Sie die App daran, "Ihr Plaid zu packen", und fragt Sie, ob Sie zu "Hahvahd" (Harvard) gehen, wenn Sie Boston als Ziel wählen. Diese reichhaltige Sprache steht im direkten Widerspruch zum traditionellen Buchungserlebnis.

Ratet mal, wohin ich gehe ...

PushState für Snappiness

Die App behält den tatsächlichen URL-Status bei und verwendet dies PushState. Wenn Sie beispielsweise "Einchecken" aus dem Menü auswählen, werden URL und Ansicht aktualisiert, ohne die Seite erneut zu laden.

Die URL sagt alles

Auf Wiedersehen, IE8

Virgin hat auch den Schritt unternommen, IE8 nicht mehr zu unterstützen, und bedingte Kommentare verwenden, um ein Modal und Klassen in das HTML-Element aufzunehmen.

Warenkorbansicht

Der Wagen sieht einer Bordkarte sehr ähnlich, zeigt aber eine massive Fortsetzen sowie den Preis der aktuell ausgewählten Optionen. Sie können die Optionen auch in dieser Ansicht ändern.

Das letzte Detailformular

Das endgültige Formular enthält fantastische Überprüfungsnachrichten, die genau zu der an anderer Stelle der Website gefundenen Kopie passen.

Virgin hat auch eine völlig unerwartete Funktion hinzugefügt, die Option, einen Avatar zu Ihrer Person hinzuzufügen.

Der Rest der Kaufabwicklung ist relativ einfach, wenn auch sehr einfach gestaltet und an einem Raster ausgerichtet.

Was macht diesen neuen Buchungsprozess so effektiv??

Abgesehen von der Tatsache, dass die Website selbst sehr schnell ist und reaktionsschnelles CSS bietet, hat Virgin ein neues Format entwickelt, das eine fürchterliche Benutzererfahrung neu definiert. Durch die Auffrischung der Stimme in ein ansprechenderes und freundlicheres Umfeld und die Konzentration auf ästhetisch ansprechende und entzückende Interaktion ist aus einer einst gefürchteten Aufgabe eine geworden Spaß Aufgabe.