Fly UX mobile
This is the mobile version of my airline booking system. This time, I created a quick sketch prototype in Marvel to analyse the user flow before creating a prototype in Figma.
Client: UX Design Institute
My role: UX/UI
Tools: Figma, Marvel
Research
Benchmarking
An analysis of rival airlines’ mobile apps were made to identify best practices, conventions in the industry, what aspects to be emulated and approaches to avoid.
The apps that stood out to me had a clean and well-spaced layout that optimised information on a small screen so that users did not have to constantly open additional windows to get more information. In addition, the flow was improved if users did not have to register to use the app and the booking process was simple and short without having to go through multiple screens of additional services.
Research
The research conducted for the desktop version was reviewed to see which issues would apply to mobile.
Usability Tests and Interviews
Three user interviews were conducted and observations of the users making a booking on rivals’ websites revealed some interesting insights:
- Efficiency versus expectations. To increase efficiency in the booking process, one airline immediately moved users to the next screen upon a selection. This confused some users as they were expecting to see more information before confirming their selection — particularly if the screens are not clearly labelled.
- Stopover information was not upfront or clearly indicated.
- Users like the option to select the same seats on the return flight as it saves them time during the booking process.
- The ability to easily compare fare options is important to users.
Design
The main decisions that I made during the design phase included:
- Whether to include a progress indicator or not. Although it was used in the desktop version, I did not include it in the mobile version due to space constraints and that users tended to have a good mental model of where they were in the process.
- Deciding the best way to enter details or select options for multiple passengers to avoid a lot of vertical scrolling.
- A small but time saving decision involved reordering the inputs for passengers and travel dates. By asking for the travel dates last, it meant that the user can be taken immediately to the flight results instead of being returned again to the home screen and initiating the search from there.
Prototyping with Marvel
Screen designs were quickly sketched and a prototype made in Marvel to analyse the flow and transitions.
I was most interested in how intuitive my design was for entering passenger details and selecting luggage for multiple travellers.
Issues found during testing
As you can see on the screenshots (right), I implemented a tabular-style form to get the users input for passenger details and luggage selection. This would in effect reduce the amount of vertical scrolling, especially if there are numerous travellers.
The issue with this method is that it is not evidently clear that you need to select the second passenger (up top) to begin entering their selection.
To help the user, I placed a button (figure 1) that clearly shows them how to move to the next passenger. This worked fine in the Passenger section because the user must fill in both passengers’ details before moving to the next section.
When I implemented this same button in the Luggage section (figure2), I realised that it has caused an unforeseen consequence. The “Next Passenger” button forces the user to go to the second passenger even if they do not intend to get checked luggage. The solution here is to provide a “Continue” button to allow the user to skip selecting luggage for the second passenger.
