Flight Booking App
Fly With
Us
UI Design -Case Study
Industry: Travel
User Interface/User Experience
Design Concept
Overview
For this project, my role was to design the user flow and user interface of a flight booking app. The main objective was to create a user-friendly app that simplifies the flight booking process for users. The app needed to provide an easy-to-use interface that allows users to search for flights, compare prices, and make bookings without any hassle. In this case study, I want to explain in detail my thought process when designing the UI.
User Flow: Purchasing a plane ticket
Below is the step-by-step user flow to purchasing a plane ticket using the app.
-
Search
-
Select from list
-
View and select listing
-
Input card details
-
Checkout
-
Confirmation of purchase
​
From the final screen, the user will be redirected to the homepage which will have their boarding pass ticket displayed for easy viewing and access.
My Design Thinking
Here are some reasons why I designed the app in a certain way to enhance the user experience, in addition to its aesthetic appeal.
Active State
To make the active state of the navigation buttons more obvious, I made the following design decisions:
​
-
Added a colored background behind the button icon to make it stand out
-
Changed the color of the icon to white to create a strong contrast with the dark background.
By doing so, users can easily identify which button is currently active and navigate through the app with ease. This design element also enhances the app's overall visual appeal and provides a more polished look and feel.
Drop Down Selection
To enhance the usability of the search function and avoid obstructing the page with the keyboard on mobile devices, I decided to use a dropdown bar for the passenger selection instead of a manual entry field. This design decision enables users to easily select the number of passengers without having to type anything, streamlining the search process and improving the overall user experience.
Toggle Switch
I decided to use a toggle switch for the one-way/round-trip option, rather than including it with the rest of the form. This design decision is based on the fact that this field only has two options, compared to the others, which have multiple options.
By using a toggle switch, users can quickly and easily select the desired option without having to sift through other options or clutter the page unnecessarily. This design element also adds an aesthetic appeal to the interface.
Blended colors
Initially, I designed the list of available flights using solid colors, but it didn't harmonize with the app's overall theme. By incorporating blended colors, I introduced a dynamic feel and added a sense of depth, enhancing the visual appeal and cohesion of the design.
Information Architect
To maintain a simple and hassle-free booking process, I focused on displaying only the essential information for each potential plane ticket. I incorporated a button for accessing full details if users wish to view additional information. This approach allows me to present all relevant information on a single page, eliminating the need for users to scroll down for further details.
Maintaining the Design Aesthetic
To maintain a simple and hassle-free booking process, I focused on displaying only the essential information for each potential plane ticket. I incorporated a button for accessing full details if users wish to view additional information. This approach allows me to present all relevant information on a single page, eliminating the need for users to scroll down for further details.
Emphasize Key Details
Buying a plane ticket can be daunting, as it often involves a significant financial commitment. To alleviate user overwhelm during the purchasing process, I incorporated yellow highlights in the text, providing a more reassuring and user-friendly experience.
Thanks for checking out my case study! I highly recommend to check out my other UI/UX Designs. Click here to view how I designed a restaurant's first website.