Viva Aero­bus

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.

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.

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

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.

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.

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.

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.

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.