User Experience for Choosing Flight Dates - Re-Design Exploration: Expedia's Mobile Website - Squarespace
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
User Experience for Choosing Flight Dates
Re-Design Exploration: Expedia’s Mobile Website
Samantha Tu
Bachelor of Interaction Design, Graduation Date: October 2018
samanthamtu@gmail.com / samanthamtu.com
Design Process
The Elements of User Experience 5
Surface
4
Skeleton Sensory Design
3
Structure Interface Design
Navigation Design
2 Information Design
Scope Interaction Design
Information Architecture
1
Functional Specifications
Content Requirements
Strategy
Product Objective
User Needs
01. Strategy Product Objectives, User Needs Usability and User Research • Conducted quick user research study to consider additional perspectives • Able to grasp a better understanding of both Expedia’s product objectives and their user needs
Design Process Strategy Product Objective What needs to be accomplished? Expedia offers the ability to book flights around the world through a mobile website but the user experience of this website needs to be improved User Needs What do we want the user to accomplish? Ease of use in choosing the best dates possible when booking a flight for a trip
Design Process
Strategy
Usability and User Research
In order to understand specific aspects of user behaviour and interactions within the Expedia
mobile website user testing was conducted
Important to consider additional point of views and not just my own
Task analysis was focused on choosing best dates possible when booking a flight for a trip
User Test 3 Pictured: Expedia mobile website was tested on desktop in
order for me to view the screen interactions more effectively
Design Process
Strategy
USER NEEDS ASSUMPTIONS
Choosing flight dates for a trip People may have flexibility in
their schedule
USER GOALS CONSTRAINTS
Choosing the best flight date Clicks to completion
Environment the user is viewing in
02. Scope Functional Specifications, Content Requirements Functionality and Content Structuring • Narrowing scope and creating specific requirements of the content and functionality the Expedia mobile website will provide for users
Design Process
Scope
Functional Requirements
Specific to process of choosing flight dates
• The mobile website view should include multiple flight type options for a user
to select from such as roundtrip, one way or multiple destination
• The options for number of travellers should also include the ability to select if
the traveller is an adult or child — in addition, adult age and child age should
be considered
• Booking flight dates should also consider ease of viewing month by month and
have less repetition in the number of clicks
Content Requirements
Text content is informative and relevant to the user
• Frequency of updated text as an action is being performed, ensuring all
information is filled out before proceeding
• Relevant symbols may be used to assist text/actions that need to be
performed
• Language of text is appropriate to target audience03. Structure Interaction Design, Information Architecture Development of conceptual structure • Comparison and re-iteration of existing desktop website structure
Design Process
Structure
Expedia Web vs. Mobile Experience - Feature Parity Comparison
• Comparisons of Expedia’s website and mobile flight booking user experience differed among options of features available for travellers to select
• Website UX included advanced options to choose from (Nonstop, refundable flight, preferred airline, add a hotel, etc.)
• Differed in word choice, mobile did not include specific wording and had limited options (No differentiation in traveller type for mobile; adult, children - just specified as traveller)
Website Features Mobile Features Mobile Wording Change (Less specific)
✅ Roundtrip / One Way / Multiple Destinations ❌ Roundtrip / One Way / Multiple Destinations
✅ Flying From ✅ Flying From From
[ City or airport ] [ City or airport ] [ Departing ]
✅ Flying To ✅ Flying To To
[ City or airport ] [ City or airport ] [ Arriving ]
Travel Dates
✅ Departing ✅ Departing
Depart
[ mm/ dd / yyyy ] [ mm/ dd / yyyy ] Choose Departure
✅ Returning ✅ Returning mm / dd - One Way
[ mm / dd / yyyy ] [ mm / dd / yyyy ] Select Return Date
✅ Adults (18+) ✅ Adults (18+) Traveler(s)
[ 1- 6 ] [ 1- 6 ] [ 1- 6 ]
✅ Children (0-17) ❌ Children (0-17)
[ 0-6 ] [ 0-6 ]
✅ Advanced Options ❌ Advanced Options
✅ Nonstop ❌ Nonstop
✅ Refundable Flight ❌ Refundable Flight
✅ Preferred Airline ❌ Preferred Airline
✅ Preferred Class ❌ Preferred Class
✅ Add a hotel ❌ Add a hotel
✅ Add a car ❌ Add a car04. Skeleton Interface Design, Navigation Design, Information Design Medium Fidelity Prototypes
Design Process
Skeleton
Comparison of the differences found on Expedia’s desktop web experience and mobileDesign Process
These design changes maximize efficiency when selecting travel dates as users are able
Skeleton
to preview information quicker and receive confirmation cues immediately
Selecting Travel Dates
Existing Re-Design
• Tedious action of number of clicks when • Month navigation changed to vertical scroll
navigating through months • Ability to preview into the next month
• No ability to preview next month dates • Confirmed travel dates will be included at the top of the calendar
• Unnecessary inclusion of “2/14 - 2/16” add on to • As a user must complete an action, top bar will cue action that needs to be taken
confirmation of roundtrip when the travel dates • Confirmation button will be included once travel date information is completed
are specified at the top again • Considerations to dates with best pricing should be differentiatedDesign Process
Skeleton These design changes aim to not overwhelm the user with too much congested text and
provides ease of use when selecting from a number of options, considerations to previous
Choosing Origin and Destination browsing history has been made by including a previously viewed record
Existing
Re-Design
• Spacing of information content leaves for more breathing room and appropriate text
hierarchy
• Spacing of information content could be better • Icon symbols for search and location are considered to better communication the
structured and less congested information that needs to be inputted
• Selection prompt for nearby airport listings could • Airport and casual conversation language is considered for departure and arrival title and
be included action wordingDesign Process
Skeleton
Search Base-State
Existing Re-Design
• Type of flight options selected at the beginning
• Arrows should be considered for better navigating purposes when redirected to another
page for information
• Type of flights has not been clarified • Spacing of flight detail options are less cluttered
• Buttons could have clearer action cues and • Types of passengers and cabin type are considered
language for a user to input information • Advanced options are included
• Advanced options have not been made availableDesign Process
Skeleton
Selections Made, Ready to Search
Existing Re-Design
• Scroll down option selection considered in order to view all options opposed to
• Adding an additional traveller one by one could clicking on by one
be tedious, unnecessary amount of clicks
• Age differences noted opposed to the assumption that each traveller is an adult
• No option to select type of traveller
• Cabin preference selection is included
• No option to select cabin preference05. Surface Sensory Design Medium Fidelity Prototypes
User Flow
Surface
Search Base-State
Existing Re-Design
Vanessa is wants to book the best round trip flight she can from Toronto to San Fransisco with her
boyfriend Mark. They are flexible in flying within the months of March to April. [Selects ‘Round Trip’ ]
She doesn’t have access to a laptop at the moment and has no more storage on her phone to
download any applications, so she resorts to Expedia’s mobile website.User Flow
Surface
Choose Origin City
Existing Re-Design
Vanessa types in Toronto and then selects the YYZ option. After selecting, she then realizes after
that her phone had automatically selected the nearest airports based on her location through
allowing location services on her phone.
She also then notices a green confirmation button appears after she selects her option and realizes
it’s a prompt for her to confirm and continue.User Flow
Surface
Choose Destination City
Existing Re-Design
She then clicks on the ‘Going To’ (Arrival) button and searches for ‘San Fransisco’, search results appear
and she then selects the ‘SFO’ option and is prompted to confirm at the bottom.User Flow
Surface
Choosing Departure Date
Existing Re-Design
Cheaper price to fly back
than other dates
Vanessa decides on travel dates and selects the 21st on the calendar, the section turns green and then
prompts her to select a return date. Vanessa also notices her information is updated above the calendar that
shows the airport location as well.
Green circles on certain dates now appear and there is an indication that these dates are cheaper than other
dates to fly back. Since Vanessa’s schedule if flexible, she doesn’t have a particular date of preference and
opts for the 31st of March to save money.User Flow
Surface
Choosing Return Date
Existing Re-Design
Cheaper price to fly back
than other dates
Her travel date details are communicated at the top of her screen and button to confirm the chosen dates appears
in green now.User Flow
Surface
Selections Made, Ready to Search
Existing Re-Design
She is then prompted to indicate the type of travellers her and her boyfriend fall under. She books for
two adults.
Vanessa chooses the first class cabin option because she figures she’s saved a little from booking her
return ticket at a cheaper price. The confirmation button is then prompted for her to continue.User Flow
Surface
Selections Made, Ready to Search
Existing Re-Design
All Vanessa’s flight details are completed and
now she is able find flights.Take a step into Vanessa’s Shoes Link to Working Prototype: https://xd.adobe.com/view/3b2f13b9-c395-456f-bb9b-647cb4ec5587/ * Functionality focuses on booking round trip flight from Toronto (YYZ) to San Fransisco (SFO) - two adult travellers, first class - flying March 21 - March 31
Conclusion and Reflection Re-Design Exploration: Expedia’s Mobile Website • Through some quick qualitative analysis and user testing I was able to make design decisions on what might define choosing “best dates” for flying and generally found price, time of flight, layover stops, etc. are all considerations towards designing for travel dates • Due to the time frame, I decided to focus on price as a big factor in determining a best selection of flight date, but along my design exploration I also wanted to focus on improvement of Expedia’s mobile website user flow and made some slight UI changes to assist with the UX of choosing flight dates for overall ease of use • Overall, this design exercise allowed me to propose my design changes based on my previous design knowledge, user testing results and personal flight booking experiences • I gained more exploration in using prototyping programs to better communicate my UX thoughts • The exercise began as a focus on a specific UX feature of choosing flight dates, but eventually I ended up making a lot of design decisions around the bigger flight search interface and finding more of an interest in challenging myself to design the UI Samantha Tu Bachelor of Interaction Design, Graduation Date: October 2018 samanthamtu@gmail.com / samanthamtu.com
You can also read
