Come l'hanno fatto il nuovo Storefront di Virgin America

Virgin America ha lanciato un nuovo servizio di prenotazione ed è molto divertente!

Il concetto di esperienza di prenotazione di un volo divertimento sembra quasi impossibile. Per anni, prenotare un volo online è stata un'impresa relativamente fredda e punta esclusivamente agli obiettivi di business.

Virgin ha creato un'esperienza diversa. Oggi parleremo di come hanno cambiato l'esperienza di prenotazione media e l'hanno reso più accessibile e piacevole.

Hello World, il sito Meta

Una delle prime cose che potresti notare è che Virgin introduce il loro nuovo sito con un sito Hello World, fornito con una brillante animazione SVG. Questo vuole essere una panoramica di base della nuova esperienza di prenotazione, spiegandone le caratteristiche e gli obiettivi principali. 

Il nuovo sito di Virgin è in volo

Questo sito è stato creato utilizzando jQuery One Page Scroll di Pete R., un plug-in ispirato al sito delle caratteristiche del prodotto iPhone 5S di Apple. Con animazioni create da Swiffy, un video Vine, così come alcune animazioni CSS / JS, l'introduzione sottolinea anche i nuovi elementi di design stravaganti come una caratteristica del rilancio.

Questa è una mossa di marketing particolarmente interessante, poiché pone davvero le basi per la nuova esperienza di prenotazione. Oltre a spiegare semplicemente le funzioni del nuovo sito, il meta-sito dà credibilità alla nuova rivelazione e costruisce la tensione positiva di provare la nuova esperienza.

C'è molto da disfare in questo sito, quindi per completezza, salteremo alcuni dei dettagli tecnici che appartengono a tutorial più specifici. Invece, parleremo di alcuni degli aspetti principali della strategia di progettazione e riassumeremo parte della strategia generale di implementazione tecnica.

Prenotazione UX: progettazione di moduli a schermo intero

L'esperienza di prenotazione può essere descritta più accuratamente come un'esperienza form altamente progettata. Il modulo ti guida attraverso il seguente processo:

1. Scegli la tua destinazione e i punti di partenza, così come il tipo di viaggio (multi-città, ecc.)
2. Scegli i dettagli dell'occupante (conteggio e tipo di occupante)
3. Seleziona le date dei voli
4. Seleziona ciascun tempo di volo e il biglietto 4a. Seleziona gli aggiornamenti che desideri applicare
5. Scegli il tuo posto
6. Completa i dettagli e paga

Scegli la tua destinazione

Invece di farlo attraverso una forma tradizionale, Virgin ha scelto di rendere questa esperienza modale focalizzata su decisioni singolari. Ma invece di usare solo metodi di input tradizionali, Virgin si basa principalmente sul clic anziché sulla digitazione. Questo permette all'utente di concentrarsi su decisioni visive piuttosto che decisioni logiche.

Il controllo principale è un contorno di casella cliccabile con testo al centro, che viene ripetuto durante il processo di prenotazione. I controlli secondari includono semplici +, -, e X pulsanti, o frecce su / giù cliccabili.

Controlli primari e secondari

Il modulo a schermo intero utilizza Angular per gestire l'associazione dei dati dell'applicazione e non sembra utilizzare alcun particolare framework UI. Il file CSS supera 16,800 linee.

“Sblocco” sezioni

Una delle decisioni prese da Virgin è di sbloccare diverse sezioni del modulo una volta completate e lasciarle accessibili durante il resto del processo di prenotazione. Una volta completata una parte del modulo, viene visualizzata la parte successiva e la pagina scorre automaticamente nella posizione di quella sezione.

Linguaggio delizioso

Virgin è nota per le sue strategie di branding e il suo audace copywriting, e la nuova esperienza di prenotazione non fa eccezione. Ad esempio, quando scegli Portland come destinazione, l'app ti ricorda di "impacchettare il tuo plaid" e ti chiede se stai andando a "Hahvahd" (Harvard) se scegli Boston come destinazione. Questo tipo di linguaggio ricco va in diretta opposizione all'esperienza di prenotazione tradizionale.

Indovina dove sto andando ...

pushState per Snappiness

L'app mantiene lo stato vero dell'URL, e lo fa usando pushState. Ad esempio, scegliendo il "check-in" dal menu si aggiorna l'URL e si visualizza senza ricaricare la pagina.

L'URL dice tutto

Arrivederci, IE8

Virgin ha anche smesso di supportare IE8, usando i commenti condizionali per includere un modale e classi sull'elemento HTML.

Carrello vista

Il carrello sembra molto simile a una carta d'imbarco, ma mostra un massiccio Continua pulsante, oltre al prezzo delle opzioni attualmente selezionate. Puoi anche modificare le opzioni da questa vista.

La forma dei dettagli finali

La forma finale fornisce fantastici messaggi di convalida che si adattano perfettamente alla ricca copia trovata altrove nel sito.

Virgin ha anche incluso una funzionalità completamente inaspettata, la possibilità di aggiungere un avatar alla tua persona.

Il resto del processo di checkout è relativamente semplice, anche se progettato in modo molto semplice, allineandosi a una griglia.

Cosa rende così efficace questo nuovo processo di prenotazione?

A parte il fatto che il sito stesso è molto veloce e fornisce CSS reattivi, Virgin ha creato un nuovo formato che ridefinisce un'esperienza utente notoriamente terribile. Rifacendo la voce per essere più accessibile e amichevole, e concentrandosi su esteticamente piacevole e piacevole interazione, quello che una volta era un compito temuto è ora diventato un divertimento compito.