Hvordan de gjorde det Virgin America's New Storefront

Virgin America har lansert en ny booking service, og det er mye moro!

Konseptet med en flight booking erfaring er moro høres nesten umulig ut. I årevis har det vært et relativt kaldt selskap å bestille et fly online og pekte bare på forretningsmål.

Virgin har skapt en annen opplevelse. I dag skal vi snakke om hvordan de har endret den gjennomsnittlige bookingopplevelsen og gjort det mer tilnærmet og herlig.

Hei Verden, Meta Site

En av de første tingene du kanskje merker er at Virgin introduserer sitt nye nettsted med et Hello World-nettsted, innredet med noen strålende SVG-animasjoner. Dette er ment å være en grunnleggende oversikt over den nye bookingopplevelsen, og forklarer de mest fremtredende funksjonene og målene. 

Virgin's nye nettsted er fly

Denne meta-siden ble opprettet ved hjelp av jQuery One Page Scroll av Pete R., et plugin inspirert av Apples iPhone 5S produktfunksjonsside. Med Swiffy-skapte animasjoner, en Vine-video, samt noen få CSS / JS-drevne animasjoner, peker introduksjonen selv på de nye, lunefull designelementene som en funksjon av relaunchen.

Dette er et spesielt interessant markedsflyt, da det virkelig setter scenen for den nye bookingopplevelsen. Utover bare å forklare funksjonene til det nye nettstedet, gir meta-nettstedet troverdighet til den nye avsløre og bygger den positive spenningen ved å prøve den nye opplevelsen.

Det er mye å pakke ut på dette nettstedet, så for fullstendig skyld vil vi hoppe over noen av de tekniske detaljene som tilhører mer spesifikke opplæringsprogrammer. I stedet vil vi snakke om noen av de viktigste aspektene i designstrategien, og oppsummere noen av den overordnede tekniske implementeringsstrategien.

Booking UX: Fullskjermform Design

Bestillingsopplevelsen kan mest nøyaktig beskrives som en meget sterkt utformet formopplevelse. Skjemaet skrider deg gjennom følgende prosess:

1. Velg destinasjons- og avreisepunkter, samt reisetype (multi-city, etc)
2. Velg beboerens detaljer (antall og type innbygger)
3. Velg datoer for flyreiser
4. Velg hver flytid og billett 4a. Velg eventuelle oppgraderinger du vil bruke
5. Velg ditt sete
6. Fullfør detaljer og betal

Velg ditt reisemål

I stedet for å gjøre dette via en tradisjonell form, har Virgin valgt å gjøre dette til en modal opplevelse som fokuserer på enestående beslutninger. Men i stedet for bare å bruke tradisjonelle innleveringsmetoder, baserer Virgin seg først og fremst på å klikke i stedet for å skrive. Dette gjør at brukeren kan fokusere på visuelle beslutninger heller enn logiske beslutninger.

Den primære kontrollen er en klikkbar boksoversikt med tekst i sentrum, som gjentas gjennom hele bestillingsprosessen. Sekundære kontroller er enkle +, -, og X knapper eller klikkbare opp / ned piler.

Primær og sekundær kontroll

Hele skjermbildet benytter vinklet til å håndtere programdata bindingen, og ser ikke ut til å utnytte noen bestemt brukergrensesnitt. CSS-filen er 16.800 + linjer unminified.

“Låse” Seksjoner

En av avgjørelsene som Virgin har gjort, er å låse opp ulike deler av skjemaet når de er fylt ut, og la dem være tilgjengelige gjennom resten av bestillingsprosessen. Når du har fullført en del av skjemaet, viser neste del, og siden ruller automatisk til den aktuelle delen.

Herlig språk

Virgin er kjent for sine lyse strategier for branding og dristig copywriting, og den nye bookingopplevelsen er ikke noe unntak. For eksempel, når du velger Portland som reisemål, minner appen deg om å "pakke din plaid", og spør om du er på vei til "Hahvahd" (Harvard) hvis du velger Boston som destinasjon. Denne typen rikt språk går i direkte motsetning til den tradisjonelle bookingopplevelsen.

Gjett hvor jeg skal

pushstate for Snappiness

Appen opprettholder sant URL-tilstand, og gjør det slik pushstate. For eksempel, ved å velge "innsjekking" fra menyen, oppdateres nettadressen og visningen uten å laste siden på nytt.

Nettadressen sier alt

Farvel, IE8

Virgin har også flyttet til å slutte å støtte IE8, ved hjelp av betingede kommentarer for å inkludere en modal og klasser på HTML-elementet.

Kurvvisning

Vognen ser veldig ut som et boardingkort, men viser en massiv Fortsette knappen, samt prisen på de valgte alternativene. Du kan også endre alternativene fra denne visningen.

Det endelige detaljskjemaet

Det endelige skjemaet gir fantastiske valideringsmeldinger som passer rett i tråd med den rike kopien som finnes andre steder på nettstedet.

Virgin har også inkludert en helt uventet funksjon, muligheten til å legge til en avatar for din person.

Resten av betalingsprosessen er relativt enkel, om enn veldig enkelt utformet, tilpasset til et rutenett.

Hva gjør denne nye bestillingsprosessen så effektiv?

Bortsett fra at nettstedet selv er veldig fort og gir responsivt CSS, har Virgin laget et nytt format som omdefinerer en beryktet forferdelig brukeropplevelse. Ved å reframme stemmen til å være mer tilnærmet og vennlig, og fokusere på estetisk tiltalende og herlig samhandling, var det en gang en fryktet oppgave nå blitt en moro oppgave.