Sales main flow architecture
Design and visual standardization of the interface
Interactive hi-fi prototype
Development of a functional prototype that improves user flow and increases the number of tickets sold.
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.
Improving user’s experience to enhance the sales flow in their mobile app.
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.
User flow architecture
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.
Interface design and interactions:
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
Search engine and flight schedule
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.
Selection of flights and packages
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.
- The flight results would be arranged from top to bottom, showing outbound flights first and return flights second, neatly divided.
- We show at first glance the most relevant information for each flight, adding actions to see more details.
- 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.