Airline Booking Flow
OpenJaw Technologies
This project aimed at building a white template and a design system that could be applied to any airline booking system for an online travel retail platform called OpenJaw Technologies.
Overview
This project was scoped for a 12-month timeline.
MVPs for airline booking, car rentals, hotel booking, activities, tours, and holiday package booking flows were developed in this timeline. This case study focuses on the primary MVP of the Airline Booking Flow.
Problem Statement
This project aimed to build a standard airline booking flow with car rentals, accommodations, tours, and holiday packages.
It was essential to know how and why people travel. The research involved looking at the various user groups and examining existing travel booking flows from search to checkout to managing your booking.
Objectives of the Project
The three primary objectives of this project were designing a white template for air line booking packages that involved flexible components, a style guide to regulate various UI components and a user flow that gets seamless online conversion.
1. Customisable frontend design for a travel booking flow
2. UI Style Guide to regulate the body of responsive UI components
3. Exceptional Online Conversion
1. User Research
The qualitative analysis of the responsive airline booking systems, stakeholder interviews and creating user personas to address their requirements.
1.1. User Research - Qualitative Analysis
The qualitative analysis involved examining the positives and shortcomings if any of the responsive airline booking systems, namely, Qatar Airways, Virgin America, Qantas, Cathay Pacific, Air New Zealand, Singapore Airlines, Virgin Atlantic, Thai Airlines and Air France.
UI Components Qatar Airways
1.2. User Research - Target Audience
OpenJaw’s customers were incredibly diverse, with different business models, audiences, and technical infrastructures.
They ranged from a European airline selling holiday packages to a Canadian loyalty programme that allows customers to redeem car rentals and hotel rooms against points or miles earned.
2. UX Design & Flow of Interaction
The flight booking flow was designed, beginning with the search page for inbound and outbound flights, followed by search results, a flight details page, upgrades, and the cart, concluded by checkout, payment, and booking confirmation pages.
Airline Booking Flow of Interaction
Wireframes for the Airline Booking Flow - Desktop
3. UI Design
The flight booking flow was designed, beginning with the search page for inbound and outbound flights, followed by search results, a flight details page, upgrades, and the cart, concluded by checkout, payment, and booking confirmation pages.
Airline Booking Flow - Clickable Figma Prototype.
-
Click on the Full Screen icon on the top right corner to open the prototype in Figma for better usability.
-
Once in Figma, click anywhere on the screens to see a blue prompt. Click on those prompts to view the next screen.
4. UI Style Guide
The qualitative analysis of the responsive airline booking systems, namely, Qatar Airways, Virgin America, Qantas, Cathay Pacific, Air New Zealand, Singapore Airlines, Virgin Atlantic, Thai Airlines and Air France.
4.1. Responsive UI Components
All the UI Components were responsive in nature. From the Upselling Card Designs to Search Results to Input fields and form designs.
UI Kit - OpenJaw Airline Booking Flow
4.2. Typography
One font was chosen across the entire UI, called Open Sans.
Open Sans is a Google font with many font weights, making it ideal for designing various hierarchical elements of the UI.
4.3. Customisable Colour Palette
Mood boards were created for picking the right colour palette as per the given persona of a business class traveller by the client.
Primary OpenJaw Palette Breakdown
Primary OpenJaw Palette
Example Palette 1
Example Palette 2
4.4. Iconography
The iconography used for the OpenJaw interface was kept minimal and subtle, like an outline. I designed an icon library for the airline booking system, which had around 100 icons.
OpenJaw Airline Booking - UI Mockup
The Website components were designed for Desktop versions as well as mobile versions.
And the MVP handover was in Sketch.
Key Takeways
-
The beauty and challenge of UI design is bringing different functional elements together by a congruous styling and creating harmony of components for the user.
-
The primary thing in a style guide is consistency.
-
Style guides set the rules and helps maintain a uniform look & feel.
-
The UI Library built in accordance with this project was in Sketch, it definitely needed some design system that had the flexibility to contain iterations of the design components and being able to share or collaborate on the same working file.
-
A vector graphics tool, Figma would have been much flexible to manage the constant changes in the UI components, & would give an easier access to the development team.
Next Steps
I adapted flows of interaction and UIs for Car Rentals, Hotel bookings, Activities and Holiday Packages based on the flight booking UI in the later phases of this design partnership with OpenJaw. This contract lasted for a couple years since I worked for OpenJaw on behalf of Frontend.com.
Outcome
The responsive airline booking MVP highly facilitated the OpenJaw customers and proved to be a guideline for building their own airline booking system packages, including flights, hotels, car rentals, activities, and tours.
OpenJaw extended their contract with my company for another year, with over EUR 100K in budget.
If you liked reading the case-study, check out a couple more below. 😊
