Viva Aero­bus

VivaAerobus is a Mexican airline based in Monterrey International Airport, it operates a total of 164 routes to 58 destinations, offering service in 41 national cities and 11 cities in the United States.

To strengthen their position as one of the main airlines in Mexico, our proposal was to clearly improve the user’s experience with the aim of increasing the sale of flights from the mobile app, which brought with it challenges, some of which we describe below:

• Designing a flow for users that would allow them to know at all times in which part of the sales process they were.
• Designing and standardizing the visual proposal to give cohesion and meaning to the information presented.
• Developing the proposal into a usable prototype with information as real as possible.

One of the main aims of our proposal was to reorganize the user flow in the purchase process. This allowed us to define early what information would be displayed and laid the foundation for the visual proposal.

We took the current purchase flow as a basis and reorganized it in such a way that it would allow the user to know at all times what stage of the process they were in.

Once this problem was solved, we designed two components that would be present in almost the entire flow and would serve as a thread that guides the user on the path to their goal.

Once we defined the structure of the main flow, we could propose the details of the screens. We chose 3 parts of the process that we consider critical to the overall user experience:

• Search engine and flight calendar
• Selection of flights and extras
• Seat selection

We proposed a calendar design that helps the user reducing the uncertainty of knowing the cost of a flight, when selecting the departure and return dates. At a glance we managed to give the dates with available flights and their cheapest prices.In the same screen we gave clarity in the selection of dates using colors and contrasts for round trip flights, which would be present from this step onwards.

One of the most important screens is the selection of flight schedules and packages, the main challenge was to allow the user to explore in a clear way and on a single screen a large amount of information related to flight results, with their dates and details.

To achieve this, we defined the arrangement of elements that the layout would have to show all the information in a clear and convenient way for the user.

1. The flight results would be arranged from top to bottom, showing outbound flights first and return flights second, neatly divided.
2. We show at first glance the most relevant information for each flight, adding actions to see more details.
3. We designed package and pricing information to navigate horizontally, giving context to which flight is explored and the features of each package.

This way we managed to make a very condensed screen of information understandable and meaningful to the user.

In the seat selection screen, our goal was to design the components in such a way that the user was aware of the seat they were selecting, for which passenger and on which flight they were on. This design allowed the user to modify any previous selection if they wished.

Due to limitations with the delivery time, the development of the prototype was carried out almost at the same time as the design of the interface. We took advantage of this very tight workflow so that the team gave internal feedback under very short stages and quick decisions were made, this allowed timely changes to be made to some components. However, there were decisions that were made before starting the project and that guided the development from start to finish:

• Develop the prototype in React Native under Expo
• Using MirageJS to develop a fake API to simulate calls to a server.

React Native + Expo

Using React Native allowed us ultra fast and asynchronous development, each team member knew which components to build and we found a way to do it at the same time. Being a high-fidelity prototype, we were able to skip certain native features and focus solely on the user experience.

Data and API in real time

If we wanted to propose a real experience, it was necessary that the data that was shown in the prototype did not seem fictitious. This was one of the reasons we chose to use MirageJS to simulate most of the information that the app would display. Some data that was simulated is the following:

The schedule of flights and prices is generated when building the app taking into account the current date. The results of flights with their schedules and details are generated 100% "at the moment" as well as the seats with their numbering and categorization.

This library allowed us to build an API without writing backend code or a complete database, this saved us days of work and opened the doors for a more dynamic workflow.

By carrying out this project, we were able to demonstrate the viability and efficiency of our way of working on custom development projects.

We obtained a functional prototype in 4 weeks that can be installed on any iOS or Android device, and that can be used to demonstrate to shareholders or managers the areas of opportunity that the prototype can solve and convince them to invest in the project.