VOLANTES MOBILE APP
THE CONCEPT
Problem Statement
Design screens as a concept for an Android mobile application. The client was a new low-cost airline that required an app that would allow their customers to book flights and make seat reservations.
Goal
To create an application that met the clients requirements as well as additional requirements that would make the app function better. The primary goal was to allow the customer to sign up to the app and become a user who would be able to book flights and make seat reservations.
My Role
This project was assigned to me as an assessment for an application for a new role at Retro Rabbit. As a result I was the only designer on the project.
User Case
A user who is looking to book a flight on Volantes airlines will open the application and make a booking through the app.
UI CONCEPT
Name and Logo
The word Volantes originates from Latin and translates to “flying”.
For the logo design, I wanted something clean and sophisticated that would incorporate the airline's identity. I made use of simple lettering and added a unique aspect with the "A" letter.
Colours
I used green as the colour for the airline as it has psychological connections to balance and harmony and gives one a feeling of security or luck due to its calming properties.
#278C44
#535352
#929292
Buttons
I made use of a conventional Android contained button as a primary button and an uncontained button as the secondary button. To navigate backward I used a back arrow as an icon so as to not overwhelm the user with multiple buttons.
Font
I made use of one font in the design, this was to keep the design as simple as possible.
Roboto
UI / UX Designer
UI / UX Designer
UX CONCEPT
.png)
FINAL DESIGN
Sign in and Register Screens
The Sign-in and Register screens are very simple and follow current design trends. Both screens are clean and straightforward. I incorporated tools to assist the user in accessing the app as quickly as possible.
I added "SIGN IN / REGISTER WITH FACEBOOK / GMAIL” buttons to assist the user.
I also added a “Don't have an account REGISTER” and a “Have an account SIGN IN” button on the respective pages to facilitate
Sign in and Register Screens
The UI and the UX is as simple as possible on this page so that the user can easily specify their search parameters. The UI is extremely simple and the primary focus is on the UX of this page. I included a switch destination button in the design to make it easier for the user to change locations if they had made an error.
​
I kept all of the data entry fields in the same design so that the user is able to easily move through it with important constraints such as “Round Trip” and “One Way” clearly visible at the top of the page to ensure users are searching for exactly what they are looking for.
Results Screen
For the search results page, I began to introduce more UI elements to bring a unique aspect to the App. My primary focus was still on the UX of the design and the information hierarchy but I wanted to combine this with the UI to give the user a holistic experience.
At the top of the page, I listed the users' search parameters so that they can quickly ensure they entered the correct information and action buttons that made it as easy as possible for them to correct any errors they may have made.
Underneath the search information I then listed the flight options, the UI of this section is very simple and I tried to make the information as easily understandable to the user as possible.
An additional feature I incorporated on this page was one I saw on Cheapflights, a filter function on the page that allows a user to look at “Popular, Cheapest, Earliest and Quickest” flight options. This decision was supported by my user research in which users said that they wanted to be able to find the best options for them.
Flight Details Screen
This page is very simple, quickly displaying the information relevant to the user. I continued with the previous page's UI design and made use of the search parameter information in the top section for the same reasons as in the results page.
I included the information I received from my user research about what information users wanted to see before booking a flight.
The cost of the flight is clearly visible as this was a very common response in the user research.
I also include additional information such as how much luggage a passenger can take on the flight.
Seat Selection Screens
The seat selection page is a very visual page and the UI plays an important role. I made use of a simple illustration of an airplane and its seating arrangements to help the user better understand the seating layout and not have to spend additional time figuring out where the seats actually are in the plane.
Bookings Details Screens
The bookings details page is again as simple as possible and follows the design of the sign In and register pages.
I included a function that allowed the information to auto-populate as per the information the user had given when registering. This would only be applicable for when the user is booking a flight for themselves and is therefore not already auto-populated. I included a save my details for future use.
Booking Summary Screens
The bookings summary page is slightly longer due to the amount of information that needed to be displayed. I wanted to ensure that all of the data the user had entered throughout the process was displayed on this page so that they could check everything was correct.
I did this for two reasons, firstly it ensures that there is no additional work for Volantes if a user needs to correct information, and secondly so that the user feels more comfortable with the process and actually making the booking.
Payments and Booking Confirmed Screens
These pages are very simple. The Payments page is an online payment layout that is in line with the rest of the Apps UI and the Booking Confirmed page is there to reassure the user that the payment was successful and that their flights have been booked.
RESEARCH OVERVIEW
User Research
The Volantes flight app was an intense UX challenge due to the requirements a user has when booking a flight. I focused my user research on understanding what a user wants and needs to see when looking at flight options as well as going through the booking process. Some of the outliers answers are not included in the graphs but were considered when creating the design.
​
My research gave me the below results:
​
I started by asking users three questions to understand the information they would consider most important. This would assist me in understanding what information to include as well as in building an information hierarchy.
For the majority of the users, the first thing they would look to do is enter the dates of their desired flights. This is a norm set by other flight booking apps and websites, as confirmed by competitor research. As a user finds it easier to follow actions that they already understand it is important that the design incorporates this. The second action that was most commonly considered was to select the location of the flight's departure and landing.
After the user had completed the initial search for flights they began to look for other information they consider important. A majority of users then wanted to see the prices of the flights which allowed them to make further decisions on the booking. The users also wanted to see departure and landing times. Other information the user considered less important was, the duration of the flight and if there are any layovers.
​
Other notable answers were that the users wanted to be able to use filters to make their search customizable and therefore easier.
