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 4 Surface 3 Skeleton Sensory Design 2 Structure Interface Design Navigation Design Information Design Scope Interaction Design Information Architecture 1 Strategy Functional Specifications Content Requirements 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 audience
03. 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 Roundtrip / One Way / Multiple Destinations Mobile Features Roundtrip / One Way / Multiple Destinations Mobile Wording Change (Less specific) Flying From [ City or airport ] Flying To [ City or airport ] Departing [ mm/ dd / yyyy ] Returning [ mm / dd / yyyy ] Flying From [ City or airport ] Flying To [ City or airport ] Departing [ mm/ dd / yyyy ] Returning [ mm / dd / yyyy ] From [ Departing ] To [ Arriving ] Travel Dates Depart Choose Departure mm / dd - One Way Select Return Date Adults (18+) [ 1-6 ] Adults (18+) [ 1-6 ] Traveler(s) [ 1-6 ] Children (0-17) [ 0-6 ] Children (0-17) [ 0-6 ] Advanced Options Nonstop Refundable Flight Preferred Airline Preferred Class Add a hotel Add a car Advanced Options Nonstop Refundable Flight Preferred Airline Preferred Class Add a hotel Add a car
04. 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 mobile
Design Process Skeleton Selecting Travel Dates These design changes maximize efficiency when selecting travel dates as users are able to preview information quicker and receive confirmation cues immediately Existing Re-Design Tedious action of number of clicks when navigating through months No ability to preview next month dates Unnecessary inclusion of 2/14-2/16 add on to confirmation of roundtrip when the travel dates are specified at the top again Month navigation changed to vertical scroll Ability to preview into the next month Confirmed travel dates will be included at the top of the calendar As a user must complete an action, top bar will cue action that needs to be taken Confirmation button will be included once travel date information is completed Considerations to dates with best pricing should be differentiated
Design Process Skeleton Choosing Origin and Destination 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 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 Spacing of information content could be better structured and less congested Selection prompt for nearby airport listings could be included hierarchy Icon symbols for search and location are considered to better communication the information that needs to be inputted Airport and casual conversation language is considered for departure and arrival title and action wording
Design Process Skeleton Search Base-State Existing Re-Design Type of flights has not been clarified Buttons could have clearer action cues and language for a user to input information Advanced options have not been made available Type of flight options selected at the beginning Arrows should be considered for better navigating purposes when redirected to another page for information Spacing of flight detail options are less cluttered Types of passengers and cabin type are considered Advanced options are included
Design 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 be tedious, unnecessary amount of clicks No option to select type of traveller clicking on by one Age differences noted opposed to the assumption that each traveller is an adult Cabin preference selection is included No option to select cabin preference
05. 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