Viva Aero­bus

¿Qué hicimos?

Arquitectura de flujo principal de venta

Rediseño y estandarización visual de la interfaz

Prototipo de alta fidelidad interactivo

Desarrollo de prototipo funcional que mejora el flujo del usuario y permite aumentar la cantidad de boletos vendidos.

Sobre el cliente

Viva Aerobus es una aerolínea mexicana con base de operaciones en el Aeropuerto Internacional de Monterrey, opera un total de 164 rutas a 58 destinos ofreciendo servicio en 41 ciudades nacionales y 11 ciudades en Estados Unidos.

Retos

Mejorar la experiencia de usuario para el flujo de venta en su app móvil.

Para reforzar su posición como una de las principales aerolíneas en México nuestra propuesta fue mejorar de manera clara la experiencia de usuario con el objetivo de incrementar la venta de vuelos desde la aplicación para móviles.

Esto llevó consigo retos algunos los cuales describimos a continuación:

  • Diseñar un flujo para el usuario que le permitiera saber en todo momento en qué parte del proceso de venta se encontraba.
  • Diseñar y estandarizar la propuesta visual para dar cohesión y sentido a la información presentada.
  • Desarrollar la propuesta en un prototipo usable con información lo más real posible.

Arquitectura de flujo de usuario

Uno de los objetivos primordiales de nuestra propuesta fue re-organizar el flujo de usuario en el proceso de compra. Esto nos permitió definir de manera temprana qué información se mostraría y sentaba las bases para la propuesta visual.

Tomamos como base el flujo de compra actual y lo re-organizamos de tal forma que permitiera al usuario saber en todo momento en qué etapa del proceso se encontraba.

Una vez resuelto este problema diseñamos dos componentes que estarían presentes en casi todo el flujo y servirían como un hilo que guía al usuario en el camino a su objetivo.

Diseño de interfaz e interacciones:

Una vez que definimos la estructura del flujo principal podíamos proponer el detalle de las pantallas. Elegimos 3 partes del proceso que consideramos fundamentales para la experiencia general del usuario.

  • Buscador y calendario de vuelos
  • Selección de vuelos y paquetes
  • Selección de asientos

Buscador y calendario de vuelos

Propusimos un diseño de calendario que ayude al usuario a reducir la incertidumbre de saber el costo de un vuelo, al seleccionar las fechas de salida y regreso. En un vistazo logramos dar a entender las fechas con vuelos disponibles con sus precios más económicos. En la misma pantalla dimos claridad en la selección de fechas usando colores y contrastes para los vuelos de ida y vuelta, que estarían presentes desde este paso en adelante.

Selección de vuelos y paquetes

Una de las pantallas más importantes es la de selección de horarios de vuelos y paquetes, el reto principal fue permitir al usuario explorar de manera clara y en una sola pantalla una gran cantidad de información relacionada a los resultados de vuelos, con sus fechas y detalles.

Para lograr esto definimos la disposición de elementos que tendría el layout para mostrar toda la información de manera clara y conveniente para el usuario.

  1. Los resultados de los vuelos se acomodarían de arriba hacia abajo, mostrando los vuelos de salida primero y después los de regreso, claramente divididos.
  2. Mostramos a primera vista la información más relevante para cada vuelo, añadiendo acciones para ver más detalles.
  3. Diseñamos la información de paquetes y precios de forma que se navegara horizontalmente, dando contexto sobre qué vuelo se explora y las características de cada paquete.

De esta forma logramos que una pantalla muy condensada de información fuera comprensible y con sentido para el usuario.

Selección de asientos

En la pantalla de selección de asientos nuestro objetivo fue diseñar los componentes de forma que el usuario tuviera presente el asiento que seleccionaba, para qué pasajero y sobre qué vuelo se encontraba. Este diseño permitía que el usuario pudiera modificar cualquier selección previa si así lo deseaba.

Desarrollo del prototipo

Debido a las limitantes con el tiempo de entrega, el desarrollo del prototipo se realizó casi al mismo tiempo que el diseño de la interfaz. Aprovechamos este flujo de trabajo tan estrecho para que el equipo diera feedback interno bajo etapas muy cortas y se tomarán decisiones rápidas, esto permitió hacer cambios oportunos en algunos componentes. Sin embargo hubo decisiones que se tomaron antes de iniciar el proyecto y que guiaron el desarrollo de inicio a fin:

  • Desarrollar el prototipo en React Native bajo Expo
  • Usar MirageJS para desarrollar un API falso que permitiera simular llamadas a un servidor.
React Native + Expo

Usar React Native nos permitió un desarrollo ultra rápido y asíncrono, cada miembro del equipo sabía qué componentes desarrollar y encontramos la manera de hacerlo al mismo tiempo. Al ser un prototipo de alta fidelidad podíamos obviar ciertas características nativas y centrarnos única y exclusivamente en la experiencia de usuario. Por último, Expo nos permitió desplegar la app sin subirla a AppStore o Google Play Store ni exportar un ejecutable, solo es necesario leer un QR para instalarla.

Datos y API en tiempo real

Si queríamos proponer una experiencia real era necesario que los datos que se mostraban en el prototipo no parecieran ficticios. Esta fue una de las razones por las que optamos por usar MirageJS para simular la mayor parte de la información que la app desplegaría. Algunos datos que simulamos fueron los siguientes:

El calendario de vuelos y precios se genera al construir la app tomando en cuenta la fecha actual. Los resultados de vuelos con sus horarios y detalles se generan 100% “al momento” Los asientos con su numeración y categorización también se generan “al momento”

Esta librería nos permitió construir un API sin escribir código backend ni una base de datos completa, esto nos ahorró días de trabajo y abrió las puertas para un workflow más dinámico.

Conclusiones

Realizando este proyecto, pudimos demostrar la viabilidad y eficiencia del nuestro modo de trabajar en proyectos de desarrollo a medida.

Obtuvimos un prototipo funcional en 4 semanas que puede ser instalado en cualquier dispositivo iOS o Android, y que puede ser utilizado para demostrar a accionistas o directivos, las áreas de oportunidad que el prototipo puede resolver y convencerlos de invertir en el proyecto.

Loading Viva Aerobus

Descarga el prototipo

Ingresa tu correo electrónico y obtén las instrucciones para poder descargar y probar el prototipo funcional en cualquier dispositivo.

Acepto recibir un correo electrónico una vez al mes