Share
Virgin America heeft een nieuwe reserveringsservice gelanceerd, en het is erg leuk!
Het concept van een vluchtboekingservaring pret klinkt bijna onmogelijk. Jarenlang was het online boeken van een vlucht een relatief koude onderneming en puur gericht op zakelijke doelstellingen.
Virgin heeft een andere ervaring gecreëerd. Vandaag gaan we praten over hoe ze de gemiddelde boekingservaring hebben veranderd en toegankelijker en leuker hebben gemaakt.
Een van de eerste dingen die je misschien opvalt is dat Virgin hun nieuwe site introduceert met een Hello World-site, voorzien van een aantal schitterende SVG-animaties. Dit is bedoeld als een basisoverzicht van de nieuwe boekingservaring, met uitleg over de meest prominente functies en doelen.
De nieuwe site van Virgin is vliegenDeze metasite is gemaakt met behulp van jQuery One Page Scroll door Pete R., een plug-in die is geïnspireerd op de iPhone 5S productfunctiesite van Apple. Met Swiffy-gemaakte animaties, een Vine-video en enkele CSS / JS-powered animaties, geeft de introductie zelfs de nieuwe grillige designelementen aan als een kenmerk van de herlancering.
Dit is een bijzonder interessante marketingbeweging, want het is echt het toneel voor de nieuwe boekingservaring. Naast het simpelweg uitleggen van de functies van de nieuwe site, geeft de metasite geloofwaardigheid aan de nieuwe onthulling en bouwt de positieve spanning op bij het uitproberen van de nieuwe ervaring.
Er is veel om uit te pakken in deze site, dus omwille van de volledigheid, zullen we enkele van de technische details overslaan die horen bij meer specifieke tutorials. In plaats daarvan zullen we het hebben over enkele van de belangrijkste aspecten van de ontwerpstrategie en een samenvatting geven van enkele van de overkoepelende technische implementatiestrategieën.
De boekingservaring kan het best worden omschreven als een zeer goed ontworpen vormervaring. Het formulier leidt u door het volgende proces:
Kies uw bestemmingIn plaats van dit via een traditionele vorm te doen, heeft Virgin ervoor gekozen om dit een modale ervaring te maken die zich richt op enkelvoudige beslissingen. Maar in plaats van alleen traditionele invoermethoden te gebruiken, vertrouwt Virgin voornamelijk op klikken in plaats van typen. Hiermee kan de gebruiker scherpstellen visuele beslissingen liever dan logische beslissingen.
Het primaire besturingselement is een klikbare rechthoek met tekst in het midden, die tijdens het boekingsproces wordt herhaald. Secundaire besturingselementen zijn eenvoudig +, -, en X knoppen of klikbare pijlen omhoog / omlaag.
Primaire en secundaire bedieningselementenHet volledige scherm maakt gebruik van Angular om de applicatiedatabinding af te handelen en lijkt geen specifiek UI-raamwerk te gebruiken. Het CSS-bestand is 16,800+ regels niet-geminimaliseerd.
Een van de beslissingen van Virgin is om verschillende delen van het formulier te ontgrendelen zodra ze zijn ingevuld en ze gedurende de rest van het boekingsproces toegankelijk te houden. Als u eenmaal een deel van het formulier hebt ingevuld, wordt het volgende gedeelte weergegeven en scrolt de pagina automatisch naar de positie van die sectie.
Virgin staat bekend om hun luchtige merkstrategieën en gedurfde copywriting, en de nieuwe boekingservaring vormt daarop geen uitzondering. Als je bijvoorbeeld Portland als je bestemming kiest, herinnert de app je eraan om 'je plaid in te pakken' en wordt je gevraagd of je naar 'Hahvahd' (Harvard) gaat als je Boston als je bestemming kiest. Dit soort rijke taal staat lijnrecht tegenover de traditionele boekingservaring.
Raad eens waar ik naartoe ga ... 
Accentsconagua
pushState voor SnappinessDe app behoudt de echte URL-status en gebruikt deze pushState. Als u bijvoorbeeld "inchecken" selecteert in het menu, wordt de URL bijgewerkt en weergegeven zonder de pagina opnieuw te laden.
De URL zegt het allemaalVirgin heeft ook de stap gezet om IE8 niet langer te ondersteunen, met conditionele opmerkingen om een modaal en klassen op het HTML-element op te nemen.
De kar lijkt erg op een instapkaart, maar toont een enorme Doorgaan met knop, evenals de prijs van de momenteel geselecteerde opties. U kunt de opties ook vanuit deze weergave wijzigen.
Het definitieve formulier biedt fantastische validatieberichten die precies passen in het rijke exemplaar dat elders op de site wordt gevonden.
Virgin heeft ook een volledig onverwachte functie toegevoegd, de optie om een avatar aan je persoon toe te voegen.
De rest van het afrekenproces is relatief eenvoudig, hoewel heel eenvoudig ontworpen, afgestemd op een raster.
Afgezien van het feit dat de site zelf erg snel is en zorgt voor responsieve CSS, heeft Virgin een nieuw formaat gecreëerd dat een notoir vreselijke gebruikerservaring herdefinieert. Door de stem opnieuw te benaderen om toegankelijker en vriendelijker te zijn en te focussen op een esthetisch aangename en heerlijke interactie, is wat eens een gevreesde taak was nu een pret taak.
