COMING SOON!
United Airlines Booking
Product Overview
Goals
-
Increase the ease of navigation in booking a flight on the United Mobile App
-
Find and fix any pain points in flight booking
-
Identify target market that there is no coverage in yet, or market that yields the most potential profit
-
Specify target market needs and address them in order to increase conversion rate
-
Learn best practices and features from competitors and evaluate where the United booking app is lacking
Details
-
Improve United App
-
Increase visibility of features
-
Market research suggest issues lied in booking flight
-
Demographic research created personas
-
Heuristic analysis of United current booking flow
-
Competitive analysis clarified problematic areas United can improve on.
-
Designed solutions to United
-
Booking user flow
-
Reiterated deigns
-
Conducted usability testing
-
Refined design based on current design systems and design issues
Process
-
Market research of current needs
-
Teardown of United App
-
Competitive Analysis
-
Demographic Surveys+Feedback
-
Identifying Personas
-
Focus persona
-
Empathy & journey mapping
-
Task Flows and Storyboard
-
Iterations
-
Usability testing
-
Design Guide
-
Refining
Tools Used
Invision
Sketch
Google Doc
Illustrator
DISCOVERY
MARKET INSIGHTS
COMPANY OVERVIEW
The first listed reviews are all very negative. Most peoples frustrations with the mobile app are in regards to flight booking
Airlines are also the top 3 most dedicated app for mobile providers
MARKET TRENDS AND NEEDS
Based on research more and more people are using mobile phones to book flights
Almost 50% of users are upset about the mobile airline app booking flows and the usability
DEMOGRAPHIC SURVEY
Difference in
User Needs
Differences helped me shape personas
Differences in flight preferences were due to:
-
Familarity with mobile booking
-
Familarity with United Airlines app
-
Occasions for flying
-
Duration of flights
-
Flying frequency
Shared Needs
-
Intuitive, familar UI systems
-
High learnability
-
High customizability
-
Saving preferences throughout the flow
-
Onboarding and signup upon checkout
Ideating
-
To convert new users who did not have automatically saved preferences needed to customize their interface to them but at the same time minimize the learning curve of how to use the app and make the interface simple and intuitive.
-
To avoid forcing signup early on and onboarding, decided to have them choose which type of travel they were taking buisness or personal this would help customize some choices without creating a long onboarding.
75% of the users had visited United Airlines mobile.
0% booked a flight on United's mobile app.
-
Frequent Flyers
-
TSA passes.
-
Flight flexibility
-
Inflight WiFi.
2. New to takeoff
-
More legroom
-
Free checked bag
-
Longer Flights
-
Comfort: Location of seat & Legroom
-
In Cabin features
-
Outlets + USB ports
-
In-Flight Entertainment
-
Upgrade options
USER JOURNEY & PERSONAS
PERSONAS
PERSONA PRIORITIES
"The Newbie"
-
Cheapest flights (no airline loyalty, less disposable income than other personas)
"Worker Bee"
-
Time of Day and fare flexibility
"Multi-Tasker"
-
Maximizing value through loyalty programs
“Busy Bee personas”
Southwest for flight flexibility
-
Quick trip: round trip within the same day
-
Flight duration: quick less likely to care about seats
-
Business and meeting with customers is more important than the comfort of the flight (if they need to stay late with a client that day they can, flight times don’t interfere with work
“ The Newbie”
-
Spends most of the time searching for flights (1 hour or more)
-
Checks multiple airlines and travel packages
PROTO PERSONAS
Focus on the user persona that would generate the most revenue based on the frequency of purchases, the potential to upgrade, and willingness to convert to United.
Since Christina selected that her flights were 8-12 hrs or longer most of the time and she travels internationally she flies a-lot and may be more apt to upgrade her seat for longer flights.
Also since she travels for work and leisure she values using her loyalty reward points so may be easier to convert her as well
EMPATHY MAP
In order to get a better understanding of our target persona “Multitasker” conducted an empathy map noting what they are saying, thinking, feeling, hearing and doing when looking for a flight
CUSTOMER JOURNEY MAP
After finding the “multitaskers” points and motivations, I analyzed how these feelings would transfer over into
the overall process of the flight booking. I noted these highs
and lows in the customer journey map
Fails to give user
feedback: No clear indication of how it was sorted for flight when results first generated
not by price
Fails to meet real-world systems: Use only initials of airports to describe which airport instead of more commonly known reference of the location of the airport or full name, too much technical jargon.
Location of the Sort and Filter Option don’t meet conventional UI patterns
SORTING & FILTERING
UNITED TEARDOWN
LANDING PAGE
A lot of redirects with several screens to input both departure and return dates.
Why is basic economy fare not
in the economy and cabin section?
Shouldn’t have auto populate location services on departure and arrival.
Use dropdown method instead of incremental stepper more visually jarring, also harder for people with larger fingers to use requires more actions to get same result (scrolling, and hovering rather than just click on input button)
No navigational arrows no way to go back or exit
Fails in consistency and perceivability: Doesn’t follow common UI patterns Word “Done” not clear here to if that means next or if user has finished all form fields for flight.
COMPETITIVE AUDIT & HEURISTIC ANALYSIS
I had 10 users review the screens of the top airlines, flight booking applications only (Hopper, Skyscanner) and booking travel packages (Kayak, Priceline) and decide which screen they liked best at each stage of the flow process.
Feature Comparison
10 users
Conducted questionnaire which users circled screens they liked the most out of all the competitors' airlines screens, had taken screenshots of each screen in the booking flow from them to choose from. Then asked for feedback onto why they chose those screens
Research Prior
Case Studies
Current booking apps (Kayak, Hotels.com, American)
Heuristic Analysis
Other airports and booking applications as well
I also did research on which apps were most successful in design and read other heuristic analysis and case studies of other airlines and flight booking applications. I then had users test the United. flight booking app and had them walk through/teardown the features they didn’t like speaking aloud as they tested the prototype.
United Usability Testing
10 users
Participated in United App
current Usability Test of their
app and did a teardown walking
through issues they faced along the way
Competitors Studied
Airports
United Airlines, Delta, Alaskan, Southwest, JetBlue, American
Flight Booking
Hopper, Hipmunk, Momondo, Skyscanner,
Travel Booking
Expedia, Priceline, Hotels.com, Kayak, Booking.com
After doing an extensive feature analysis (link to chart) I realized most of the airlines have the same features and what makes the experience stand out is how the app allows the users to have the smoothest booking experience possible. The main things I found were users love customization and saved preferences but they also want the ease of use.
This is an analysis of the best practices of the flight booking experience across all the airlines.
This shows how the survey responses from the feature analysis helped inform my design choices.
It also shows United fell short in comparison to other competitors.
Hopper
Color coordinates dates by price ranges of flights, uses a legend at the top to indicate which, this
making it easy to see which days have the best rates
Southwest
Reduced categories of price ranges
to simplify the amount of colors and therefore more easily distinguish dates you have selected
United
Customization and pricing are important to users they can see here flexible dates to see if they match the days that have the
lowest price (indicated by circles on calendar)
United Remodel
Southwest
United Remodel
Added in expanded mode of the flexible date schedule where it continues to offer options until hits a week of flexibility of schedule
Present date selection on the same calendar view uses color coordination – return date is in green and departure is in a dark blue and highlights the duration of the trip
Built on Iconography but
instead of having face on
direction tried to show one departing as one taking off and one returning as one
landing since you often think off arrivals as landing back
home
Departure selection and return selection distinct and color coordinated for easy distinction. Header clearly titled what they
are selecting and tabs of the date and the highlighted tab indicate which date was selected
PASSENGERS & CABIN
Kayak
Cabin Type: Tabs for different cabin
instead of having to use the dropdown
or enter another screen. Reduces the number of screens needed for the user but still remains visually clean in its design still allowing enough negative space for the user to easily navigate
United Remodel
Added a section for Pets to automate and changed the business class options based on Uniteds cabin types
SORTING & FILTERING
Sorting: Kayak
Information hierarchy with sorting options on top, before flight list, informing the user how the list is sorted, tab buttons allow them to change the way it is sorted without entering another screen
Filtering: Stops
United
Filtering: Stops
Kayak
Utilizes most important information to filter flight, number of stops and time of day on the top, shows different prices and how
they differ with time of day slider, and uses tabs for number of stops, clearly illustrates purpose of each filter
To reduce number of
visuals took out
iconography for the
number of stops in
the tabs sections as it is already written
Sorting: United Remodel
Filter in the Kayak app
is on the bottom of the
navigation harder to find so I moved it to the top navigation
Filtering: Time of Day Kayak
Provides clear visual showing correlation between time of day and prices and allows you to customize a bit further by checking the ranges as you go with the slider function
Filtering: Time of Day United
Utilized same slider functionality
for the time of day filter. However
separate time of day and number
of stops to allow more room for the
chart of the highs and lows in pricing
and to keep visual consistency in each separate filter function
FLIGHT RESULTS
Southwest
United
Improved Use of real-world systems by putting full
name of the location fo the airport. While Southwest does include they use initials of the airport only, not even the name of the airport itself. This is very confusing for users who only know the location of the airport and have hard enough time figuring out where the picture is based on its name alone (ex O’hare is difficult to know it is in Chicago if never been, even more, confusing if use the MDW initials).
Consistency in design:
Uses the grid system throughout the entire
booking flow. Shows in the right column the price in different color indicating it is swappable to select more information and
possibly tappable to continue. Clearly states the number of connecting flights
and length of the total flight
Important to know where layover since delays and a-lot of connecting flights were one of most common pain points for all personas. Certain airlines like Chicago have poor weather conditions in winter so to prevent issues with delays and longer layovers good to show this information. Also to show long the layover is in comparison to the flight
Chunking the information to reduce cognitive load: layover name and length listed in the see detailed v
new to allow for at first users to have an easier view of the flight results. Then when they inquire more will be progressively shown the information
CHECKOUT
Southwest
United
Shows flight summary with progress bar, to show steps left to proceed in the checkout process provides user with feedback by showing where they are at each stage of process
Show the beginning of the payment the process I decided to add a progress bar, originally had it throughout but users
said better to add just in checkout because added too much visual
weight to overall interface
COMPETITIVE COMPARISON
LANDING PAGE
Southwest
70% of participants favored the Southwest airline app because of its simplicity and familar grid
Kayak
United Remodel
Kayak, unlike Southwest,
does have cabin options
for flights and different types of travelers, therefore instead
of on the same screen
they have it open up to a separate form field to select cabin but doesn’t overwhelm the user. Consistent in the grid design system
Chunking information through form fields
that pop out instead of showing all on one screen overwhelming user. United current screen has too many options and selections all on the one landing page.
Follows UI patterns such as the grid system and boxes to choose a flight from
unlike United's current layout
CALENDAR
Through the research process, I developed guiding principles to inform my designs, and make them more human-focused
Feedback
-
Error reduction & recovery
-
Tunneling & Reinforcement
-
Reduce Uncertantity
-
Selection (Confirmation)
-
Pin for location (only on departing not arriving)
-
Feedback Loop-shows whats selected
Consistency
-
Grid System
-
UI Language
-
Copy & Language
-
Navigation
-
Patterns
-
Serial Positioning
-
Proximity, Uniform Connectedness
-
Perceivability & Predictability
Flexibility vs
Usability
-
User Control & Freedom
-
Customizability
-
Ease of Use
Learnability
-
Cognitive Overload (chunking)
-
Progressive disclosure (sequencing)
-
Recognition over recall
-
Design (spacing, white space, CTA, typography)
-
Serial positioning
-
Matching real world systems
EXPERIENCING
Guiding Principles
DEFINING
Storyboard
User Flows
SKETCHING
Sketch:
Landing Page
Lo-Fidelity:
Landing Page
Med-Fidelity:
Landing Page
Cabin & Calendar
Lo-Fidelity
Ater heuristic analysis
users expressed the need for knowing where they are
by having a progress bar,
but after usability testing found. I put the progress bar
too early on in the booking flow
Calendar Flow for Business
Here I began building the
calendar flow for business so to sort by hour before flight results was a big pain-point for those who travel frequently for work. However for the sake of the study just stuck to building out the personal user flow.
Calendar Flow for Personal
Final Calendar
Flow Personal
Switched to using the same
color as United main CTA
which is yellow. However
white on yellow to hard to
see and was told to change
verb-age from Done to more
familiar UI pattern, which I had forgotten to apply
On my Hi Fidelity Iteration 1
forgot the very thing I realized in usability principles which were to
use common language
and change a word.
Done to a more familiar
UI pattern so went back and used word Confirm
Sketches: Cabin
Med Fidelity Iteration 1
Med Fidelity Iteration 2
Hi-Fidelity
Experimented after feedback from teardown what it would be like to include the cabin options directly on the form field but found it was too crowded
I thought to reduce
number of times you need to input information to enter adult name in the passenger information so saves information
for later.
After user testing, found
to remove the passenger
information because while
only saves name still need
to enter contact information
in the billing and payment
process
After usability testing, users
requesting adding pet option for passenger type, because they have traveled with their pets and most airlines don’t offer
that feature
Form Field: Returning & Departing Location
Form Field Returning
Sketches: Location
Here I used the United current Interface and quickly sketched options of how to present departing and returning flights
Med-Fidelity: Returning Flight
(location, stops, price)
Since people don't know the name of the airport they flying too created two tabs one for search by airport name and another for the location you are flying too.
Also based on the day you leaving it could automatically show if the airport has more connecting flights to your destination. As well as it can show the prices at the airports. Removed the location pin that United Airlines
had in their returning screen
Lo-Fidelity: Returning Page
Received feedback that this view was
too busy and to have the departing and arriving pop-up out on a new screen to reduce cognitive overload
Hi-Fidelity: Return Flight
Increased size and visibility of UI navigational controls such as the exit button
Form Field: Departing Location
Sketches: Departing
Lo-Fidelity: Departing
Med-Fidelity: Departing
Hi-Fidelity: Departing
Landing Page
PROTOTYPING
ITERATING & SKETCHING
Before Starting the entire Flow I started with components. For instance
I built out the landing page trying to consider how I would also present the form fields. If I wanted them all on the same page, or if I wanted them to have separate screens and how to arrange that information. Since the landing page for flight booking requires the users the most steps so it must look aesthetically pleasing.
Prototypes: Landing Page Options
Brainstorming: Landing Page Options
Lo-Fidelity
Med-Fidelity
Finally landed on a grid-like landing page, and with some modifications, for instance, the color of the green bar to the yellow bar, I was able to have it more aligned with United’s current color systems.
United App
Lo-Fidelity
Med-Fidelity
Splash Page & Notifications
Asked 10 users which splash page they liked best and went with icon splash page since that was one they enjoyed
Vector-Based
Image-Based
Icon-Based
Checkout: Lo-Fidelity Flight Details
Checkout: Med-Fidelity Flight Details
Checkout: Med-Fidelity Flight Details
To avoid too many screens and interferences with dropdown. I built the sorting feature as tabs and instead of a dropdown. I also added a summary selection so they can use the dropdown to see
what they selected and re-edit if necessary.
Here I added feature based
on user feedback to select
seats, that way they
can go back and review in
case they are not ready to
proceed to payout in the flight
summary
Tested with users the progress
bar, they liked it but for checkout
only and therefore I reduced
the steps and removed it from the
summary and during the
flight search results
Type is too small in
relation to flight list
returning to
notice what was
previously selected
Users requested grid
system like Southwest
search result
The text here is still
very difficult to read
and too light
Flight Returning:
Seat Detailed List
Flight Returning Search
Further Detail List
Flight Returning:
Search Result List
Flight Summary
Flight Returning Detailed
Search Result List
Flight Returning
Search Result List
Flight Returning Detailed
Search Result List
Also used usability
simplicity principle
removing the extra icons make the
others have more
significance and
easier to scan, as well as to understand
the message
conveyed.
Removed iconography
went from having 5 icons in this box to 2 to make for a cleaner design allowing
for more free space.
Easier to read than
med fidelity text
box showing the
departing flight: increased spacing and font size
Went from 5 icons
to only two gives more negative
space and doesn’t
overwhelm the
user
Flight Returning Further
Detailed Result List
Here switched
to grid system
users requested
based on user
feedback
Medium Fidelity: Returning Seat Selection Flow
Returning Connecting
Flight Seats
Returning Connecting
Flight Seats
Detailed View
Returning Flight
Final Leg
Returning Flight
Final Leg
Detailed View
Hi Fidelity: Returning Seat Selection Flow
Returning Connecting
Flight Seats
Returning Connecting
Flight Seats
Detailed View
Returning Flight
Final Leg
Returning Flight
Final Leg
Detailed View
Returning Connecting
Flight Seats
Returning Connecting
Flight Seats
Detailed View
Returning Flight
Final Leg
Returning Flight
Final Leg
Detailed View
Sketches: All Filters
Lo-Fidelity: All Filters
Hi-Fidelity: All Filters
Placed sorting option, date, flexibility and time of day in the primary filter.
Initially used accordion to
contain filters, discovered
this required too much
scrolling on mobile
Based on user feedback used a grid similar to Southwest
for filtering. Condensed stops
and fare flexibility into one section.
Sketches:
Airlines & Airport Filter
Lo-Fidelity:
Airlines Filter
Hi-Fidelity:
Airlines Filter
First iteration seemed a bit vague as to where you were looking. Thought instead of separating out by airport and airlines as filters have main things you would need for each in two seperate screens.
After receiving feedback
was told to seperate the
original airlines and airports because current drop down especially tabs
were confusing.
Both the airlines and airports had the same dropdown. Users said would make sense if I divided the primary filter you see into primary information, layover, flight info and discounts and benefits. However, for this filter
Sketches: Layover Filter
Mi-Fidelity: Layover Filter
Mi-Fidelity: Airport Filter
Here I thought I would segment out
by the layover length of time and which have the layover select which part of the travel time was shortest or longest, the first leg to the destination or the second. However, users were confused by the time tab frames so I removed these
Solution: In the end users said they don’t care as much about the airlines but the layovers (connecting) flights so eliminated the airline option all together and eliminated the layover selection and just replaced it with connecting flight
Fidelity Flow
Hi-Fidelity Filters
Final-Fidelity Filters
Lo-Fidelity
Payment Options
The progress bar here should not show part of the flight booking flow needed to do separate progress bar for this
and remove the current progress bar that exists throughout the entire flow and just use in the payment option
Med-Fidelity
Payment Options
To increase ease of use
and make the checkout process quicker, added apple and Android Pay as well as PayPal. Currently United only had Visa checkout, whereas most users tend to have the other two features, as they are somewhat tech savvy since they use mobile devices to book flights, therefore, they are more likely to use Android Pay
Hi-Fidelity Payment Flow
Final-Fidelity Payment Flow
VALIDATING
TESTING & ITERATING
USABILITY TESTING
FLIGHT SEARCH RESULTS
Hi-Fidelity Flight Results Flow
Medium Fidelity Flight Results Flow
SEATS
Final Fidelity: Returning Seat Selection Flow
Filters
Payment Flow
Color Pallete & Gradients
Typography
Color Pallete
Changes to color, font size & weight from hi-fidelity to final fidelity after feedback
Hi-Fidelity
Arriving Flight
Final-Fidelity
Arriving Flight
REFINING
DESIGN SYSTEMS
United Remodel Design System
United Design System
DESIGN CHANGES
United Remodel Design System
