Cum au făcut-o noul magazin american Virgin America

Virgin America a lansat un nou serviciu de rezervare și este foarte distractiv!

Conceptul de experiență de rezervare a zborurilor fiind distracţie suna aproape imposibil. De ani buni, rezervarea unui zbor online a fost o afacere relativ rece și a subliniat doar obiectivele de afaceri.

Virgin a creat o experiență diferită. Astăzi, vom vorbi despre modul în care au schimbat experiența medie de rezervare și au făcut-o mai accesibilă și mai plăcută.

Hello World, site-ul Meta

Unul dintre primele lucruri pe care le puteți observa este că Virgin introduce noul site cu un site Hello World, dotat cu o animație strălucitoare SVG. Aceasta este o prezentare generală a noii experiențe de rezervare, care explică cele mai importante caracteristici și obiective. 

Noul site al Virgin este de zbor

Acest meta-site a fost creat folosind jQuery One Page Scroll de Pete R., un plugin inspirat de site-ul Apple iPhone 5S. Având animații create de Swiffy, un videoclip Vine, precum și câteva animații CSS / JS, introducerea arată chiar și noile elemente de design capricioase ca o caracteristică a relansării.

Aceasta este o mișcare de marketing deosebit de interesantă, deoarece stabilește cu adevărat scenă pentru noua experiență de rezervare. Dincolo de explicarea pur și simplu a funcțiilor noului site, meta-site-ul dă credibilitate noului dezvăluit și construiește tensiunea pozitivă a încercării noii experiențe.

Există multe de despachetat în acest site, de aceea, din motive de exhaustivitate, vom trece peste unele detalii tehnice care aparțin unor tutoriale mai specifice. În schimb, vom vorbi despre unele aspecte principale ale strategiei de proiectare și vom rezuma o parte din strategia de implementare tehnică globală.

Rezervare UX: Design pe ecran complet

Experiența rezervării poate fi descrisă cu cea mai mare precizie ca o experiență de formare foarte bine concepută. Formularul vă parcurge următorul proces:

1. Alegeți destinația și punctele de plecare, precum și tipul călătoriei (multi-city, etc.)
2. Alegeți detaliile ocupantului (numărul și tipul de ocupant)
3. Selectați datele zborurilor
4. Selectați fiecare timp de zbor și bilet 4a. Selectați toate actualizările pe care doriți să le aplicați
5. Alegeți-vă locul
6. Finalizați detaliile și plătiți

Alegeți destinația

În loc să facă acest lucru printr-o formă tradițională, Virgin a ales să facă acest lucru o experiență modală care se concentrează pe decizii singulare. Dar, în loc să folosească doar metode tradiționale de introducere, Virgin se bazează în primul rând pe clic în loc să scrie. Acest lucru permite utilizatorului să se concentreze asupra deciziile vizuale Decat deciziile logice.

Controlul primar este un contur cutie cu clickuri cu text în centru, care se repetă pe parcursul procesului de rezervare. Controalele secundare includ simple +, -, și X butoane sau săgeți în sus / în jos.

Controalele primare și secundare

Forma integrală a ecranului utilizează unghiular pentru a gestiona legarea datelor de aplicație și nu pare să utilizeze un anumit cadru de interfață UI. Fișierul CSS este de 16.800 de linii sau mai multe.

Secțiuni „deblochează“

Una dintre deciziile luate de Virgin este să deblocheze diferite secțiuni ale formularului odată ce acestea sunt completate și să le lase accesibile pe tot parcursul procesului de rezervare. Odată ce ați finalizat o parte a formularului, se va afișa următoarea parte și pagina se va derula automat în poziția respectivă.

Limbă delicioasă

Virgin este cunoscut pentru strategiile lor de branding și caractere îndrăznețe, iar noua experiență de rezervare nu face excepție. De exemplu, atunci când alegeți Portland ca destinație, aplicația vă reamintește să "împachetați carul" și vă întreabă dacă vă îndreptați spre "Hahvahd" (Harvard) dacă alegeți destinația Boston. Acest tip de limbă bogată se află în opoziție directă cu experiența tradițională de rezervare.

Ghici unde mă duc ...

pushState pentru Snappiness

Aplicația menține starea reală a adresei URL și utilizează acest lucru pushState. De exemplu, alegerea meniului "check in" din meniu actualizează URL-ul și vizualizează fără reîncărcarea paginii.

URL-ul spune totul

La revedere, IE8

Virgin a făcut, de asemenea, mutarea pentru a opri sprijinirea IE8, folosind comentarii condiționate pentru a include o modalitate și clase pe elementul HTML.

Vizualizare coș

Coșul de cumpărături arată foarte asemănător cu cartea de îmbarcare, dar prezintă o masivă Continua , precum și prețul opțiunilor selectate în mod curent. De asemenea, puteți modifica opțiunile din această vizualizare.

Formularul pentru detaliile finale

Formularul final oferă mesaje de validare fantastice care se potrivesc exact cu copia bogată găsită în altă parte a site-ului.

Virgin a inclus, de asemenea, o caracteristică complet neașteptată, opțiunea de a adăuga un avatar persoanei tale.

Restul procesului de verificare este relativ simplu, deși foarte simplu proiectat, aliniind la o rețea.

Ce face acest nou proces de rezervare atât de eficient?

Pe lângă faptul că site-ul în sine este foarte rapid și oferă CSS receptiv, Virgin a creat un nou format care redefinește o experiență teribilă pentru utilizatori. Prin reînnoirea vocii pentru a fi mai accesibilă și mai prietenoasă, concentrându-se pe o interacțiune estetică și încântătoare, ceea ce a fost odată o sarcină îngrozitoare a devenit acum distracţie sarcină.