I'm a paragraph. Click here to add your own text and edit me. It's easy.
Angela Campos
UX Designer
UX Solutions
69%
Of target users open the app for 2 prime reasons:
Book a Flight (37%)
Check prices (32%)
The home screen was redesigned & tailored for these Common Use Cases.
Uncertainty among users when the airport code and city correlation were not obvious.
User doubt eliminated by including full city names, extending Field Length.
Credit card offers annoyed customers, & did not serve the most lucrative categories: baggage & change fees. (Wall Street Journal 2017) Thus, the removal of CC offers.
App Home
Screen
Usability tests exemplified frustration, users searched the screen & menus looking to initiate a flight search.
This screen is now at the fore, Content over
Navigation.
1:4
Only 1 in 4 apps reviewed for this study auto-populated the origin field, despite 100% requesting location permission.
Origin field set to autofill, making full use of Location Service Capability.
Airline App
Case Study
Statement
This study was undertaken as part of the course work at the UX Design Institute, Dublin (2019). The goal, improve airline customer experience by leveraging the first touch point; the booking process. The exponential growth of mobile and the airline industry's interest in enhancing their digital experience, created a topical and useful framework from which to work.
An assessment of four airline booking apps (United, Delta, Aer Lingus & Eurowings) through usability testing, interviews and online surveys revealed three target areas for redesign and optimization:
Home Screen
Flight Selection
Passenger Info Entry
Process
Competitive Benchmark Analysis
Usability Tests
Customer Interviews & Surveys
Customer Journey Map
Customer Flow
Prototyping
Wireframing
UI Design
Angela Campos
UX Designer
Customer Flow
During testing, users filled out passenger info using the flow pictured below, primarily due to a lack of affordances to indicate a quicker and alternate way.
In this instance, flow could be vastly improved, benefiting user and business goals by raising customer satisfaction scores 5-10 points. (McKinsey,Capturing the digital opportunity in airlines, 2018)
My aim was to speed the process in a consistent manner, borrowed from established norms. The new flow requires less work, made possible in part, by adopting the keyboard adaptation present during search functions on IOs & Android. In this case, the return button is highlighted and rotates between Next and Go. Click play in the center model to see this in action.
Passenger
Info
UX Solutions
Return
The return button was changed to reflect appropriate next actions. Users who default to the flow of tapping done after each entry are served a one time hint overlay. Thereafter, they are free to choose their favored method for field navigation.
Name
The name field reduced to one line, as opposed to 3 (first, middle and last.)
D.O.B
Birthdate is now typed; hint text was added to facilitate format comprehension.
Highlight
Active fields highlighted and the Next button is greyed out /inactive until the current field is completed according to established rules and validation.
In
Summary
Further Improvement
I'd recommend an examination into the check-in process on airline apps, which represents the third largest set of use cases.
Along with this, an increased level of personalization would be great to drive customer loyalty. For instance, displaying the appropriate home screen for a logged-in user with an upcoming flight, i.e. show the check-in screen if within the appropriate window of upcoming travel.
Features to Consider
Biometric login
Biometric checkout
Ability to remain logged in
Auto passenger info entry
Dark theme
“What's going on here...I don't remember seeing anywhere that this is a two stop flight. I'm done with this now”- Eurowing User
Flight
Selection
Connecting Flights
Users were greatly swayed by cost, typically selecting the least expensive option, above time, date and comfort.
During testing, the budget flight option often included a layover. On select booking apps, it was unclear which flight had a connection. In fact, users did not realize there was a layover until they began seat selection. They'd completed nearly 90% of the task before realizing they'd need to go back. And by then, their faith in the process was exhausted.
These Insights helped tailor information architecture on this screen, simple adjustments led the way to a cleaner interface with little room for customer doubt.
UX Solutions
Price
Cost given priority, large text, isolated from other flight details.
Layover
Each card starts with a direct flight or connecting flight symbol, placed on the left side to facilitate quick scanning and interpretation. These changes eliminated any layover confusion; during the prototype testing phase, users immediately connected the significance of each symbol.
Low
Med
High
Prototypes