Share
Virgin America ha lanzado un nuevo servicio de reserva, y es muy divertido!
El concepto de una experiencia de reserva de vuelo siendo divertido Suena casi imposible. Durante años, reservar un vuelo en línea ha sido una empresa relativamente fría y apuntó exclusivamente a objetivos comerciales.
Virgin ha creado una experiencia diferente. Hoy vamos a hablar sobre cómo cambiaron la experiencia de reserva promedio y la hicieron más accesible y encantadora..
Una de las primeras cosas que podría notar es que Virgin presenta su nuevo sitio con un sitio Hello World, equipado con una brillante animación SVG. Está pensado para ser una descripción básica de la nueva experiencia de reserva, explicando sus características y objetivos más destacados.
El nuevo sitio de Virgin es Fly.Este meta-sitio fue creado usando jQuery One Page Scroll por Pete R., un complemento inspirado en el sitio de características del producto Apple iPhone 5S. Con animaciones creadas por Swiffy, un video de Vine, así como algunas animaciones impulsadas por CSS / JS, la introducción señala incluso los nuevos elementos de diseño caprichoso como una característica del relanzamiento..
Este es un movimiento de marketing particularmente interesante, ya que realmente prepara el escenario para la nueva experiencia de reserva. Más allá de simplemente explicar las funciones del nuevo sitio, el meta-sitio le da credibilidad a la nueva revelación y crea la tensión positiva de probar la nueva experiencia..
Hay mucho que desempaquetar en este sitio, por lo que, para completar, omitiremos algunos de los detalles técnicos que pertenecen a tutoriales más específicos. En su lugar, hablaremos sobre algunos de los aspectos principales de la estrategia de diseño y resumiremos algunas de las estrategias generales de implementación técnica..
La experiencia de reserva puede describirse con mayor precisión como una experiencia de formulario altamente diseñada. El formulario lo guía a través del siguiente proceso:
Elige tu destinoEn lugar de hacerlo a través de una forma tradicional, Virgin ha optado por hacer de esta una experiencia modal que se centre en decisiones singulares. Pero en lugar de utilizar métodos de entrada tradicionales, Virgin se basa principalmente en hacer clic en lugar de escribir. Esto permite al usuario centrarse en decisiones visuales más bien que decisiones lógicas.
El control principal es un esquema de cuadro en el que se puede hacer clic con texto en el centro, que se repite a lo largo del proceso de reserva. Los controles secundarios incluyen simples +, -, y X Botones, o flechas arriba / abajo pulsables.
Controles primarios y secundariosEl formulario de pantalla completa utiliza Angular para manejar el enlace de datos de la aplicación y no parece utilizar ningún marco de IU en particular. El archivo CSS es de 16.800+ líneas sin minificar..
Una de las decisiones tomadas por Virgin es desbloquear diferentes secciones del formulario una vez que se hayan completado, y dejarlas accesibles durante el resto del proceso de reserva. Una vez que haya completado una parte del formulario, la siguiente parte se muestra y la página se desplaza automáticamente a la posición de esa sección.
Virgin es conocida por sus estrategias de marca alegres y su redacción audaz, y la nueva experiencia de reserva no es una excepción. Por ejemplo, cuando elige Portland como su destino, la aplicación le recuerda que debe "empacar su plaid" y le pregunta si se dirige a "Hahvahd" (Harvard) si elige Boston como su destino. Este tipo de lenguaje rico va en oposición directa a la experiencia de reserva tradicional..
Adivina a dónde voy ... 
Accentsconagua
pushState para SnappinessLa aplicación mantiene un verdadero estado de URL, y lo hace usando pushState. Por ejemplo, al elegir el "registro" en el menú se actualiza la URL y la vista sin volver a cargar la página.
La URL lo dice todo.Virgin también hizo el movimiento para dejar de admitir IE8, usando comentarios condicionales para incluir un modal y clases en el elemento HTML.
El carro se parece mucho a una tarjeta de embarque, pero muestra una Continuar botón, así como el precio de las opciones seleccionadas actualmente. También puede cambiar las opciones desde esta vista..
La forma final proporciona fantásticos mensajes de validación que se adaptan perfectamente a la copia enriquecida que se encuentra en otra parte del sitio..
Virgin también ha incluido una característica completamente inesperada, la opción de agregar un avatar a tu persona.
El resto del proceso de compra es relativamente simple, aunque de diseño muy simple, se alinea con una cuadrícula.
Aparte del hecho de que el sitio en sí es muy rápido y proporciona CSS responsivo, Virgin ha creado un nuevo formato que redefine una experiencia de usuario notoriamente terrible. Al volver a encuadrar la voz para que sea más accesible y amigable, y centrarse en una interacción estéticamente agradable y agradable, lo que antes era una tarea temida ahora se ha convertido en una divertido tarea.
