Excursion: Expedia Redesign
DH150 User Experience Design, Priyana Patel
About the Project
The current project seeks to solve user difficulties associated with travel planning. The target community is a community of travelers that seek adventure, travel to new places, spend time with friends and family, and never feel settled in one place. These users are a group of people with long, drawn-out network ties in multiple cities, countries, and continents looking to explore.
Design Statement
How can mobile technology enhance the decision-making challenges of travel booking, while valuing ease of use and cost-effectiveness? Target users value ease of use, previous customer satisfaction, and cost-efficient travel options. Additionally, they prefer a desktop travel user experience over a mobile travel user experience.
Competitor Analysis: Heuristic Evaluation
There are many travel booking apps and available for users however the leading service in aesthetic community while providing ease of use are Expedia and Southwest. read more...
| Expedia | Southwest |
|---|---|
 |
 |
Competitor Analysis: Usability Testing
Usability testing measures, at the minimum, the effectiveness, efficiency, and satisfaction of a user experience. This process helps us understand how usable a product is. Based on the findings from the heuristic evaluation of the Expedia app, the top three main issues are overcrowding of text on the page (aesthetic and minimalistic design), too much scrolling (user freedom and control), and confusion with fine print details (help and documentation). These issues arise when a user is completing the booking process for a flight or bundle search. To test these issues, we will ask the user to complete a roundtrip flight and hotel bundle deal from Los Angeles to London. The test will be separated into three tasks of a bundle booking process: flight, hotel, and review/changes.
Overall, the participant found the Expedia app easy to use and was able to fully complete two out of the three tasks without difficulty and time constraints. The participant found the Expedia app to be calm, familiar, and trustworthy. The test identified minor problems, such as confusing flow between selecting hotels and flights, unclear directions on how to navigate back and forth and editing search fields, and narrowing search results by price ranges.
| Usability Testing Form | Screen Recording |
|---|---|
 |
 |
View the screen recording pilot test video here
User Research
The basic need involved for travel planning is self-actualization. The concept of traveling is to accomplish a goal; such as to explore a new place or visit family or friends.The current solution to book travel plans is to meet in person with a travel agent or book directly with the airline and hotel, via their phone line or website.The limitations that can possibly be improved with digital technology are the visualization of options, individualized to the user's preferences, such as price points, travel times, and relative locations. Additionally, technology can help narrow search choices based on these preferences to help the user book a trip more efficiently.
I conducted a user interview for a target user, asking them to complete several tasks on their mobile device to search for travel-related information. The interview process directs the user to search for the average price of hotel in Los Angeles and a last minute flight to San Francisco. Read more about my user research and contextual inquiry here
UX Storytelling
Based on my user research, I created three user personas, empathy maps, and user journey maps.
| Magdalena | Armani | Emma |
|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
I suggested three features to solve user difficulties associated with each persona and paired them with three scenarios
| Magdalena | Armani | Emma | |
|---|---|---|---|
| Feature | Price Tool - suggests what details of your trip to change (such as travel dates, location, airport) in order to fit a designated budget and price range | Minimized Booking Process - compares all airlines and websites and arranges flights by price visibility with personal recommendations, takes user directly to checkout after selecting flights | Recommendation Tool - Summarizes main points of customer reviews, shows highly recommended |
| Scenario | Search for cost-efficient bundle deals | Search for last-minute flight deals and book efficiently | Search for high-rated hotels in good locations |
See each user's journey through the given scenario here
Wireframe and Graphic Design Element Variation
I decided to explore Expedia's user interface and logo colors, Dark Midnight Blue (#00355F) and Deep Lemon (#EEC218). I used color.adobe.com to explore complementary, analagous, and monochromatic variations of Midgnight Blue. I also explored color palettes related to keywords such as "travel","explore" and "adventure".
See how I explored different web color schemes here
I created wireframes to support the following tasks: input search field, select an inbound flight, select an outbound flight, select a hotel, pay for and book the trip. The flow intends for the user to search for their bundle trip based on their departure and arrival city or airport, dates of travel, number of travelers, and travel budget (optional). Based on the hotel results, a user can sort or filter the list by hotel name, star rating, and amenities. After clicking on a hotel, a user can view and sort ratings based on their search query and trip purpose. After selecting the room, a user will select an inbound and outbound flight to and from their travel destination. Again, based on their search results, a user has the option to sort or filter flights by duration, stops, time, and airline. After selecting both flights, the user will be directed to a trip summary of their hotel and flight selections. The user has the option to change their selections. If they are satisfied with their selections, the user can proceed to pay for their flight. They will input their passenger and payment details and have the option to insure their trip. Clicking on "Complete Booking" signifies the completion of the travel booking process.
Low-fidelity prototype
The purpose of this low-fidelity prototype is to test the functionality and flow of these features integrated with the current process of booking a trip on a mobile travel app. I tested my wireflow to check for any confusions or unexpected interactions from the user:
| Iteration #1 | Iteration #2 |
|---|---|
 |
 |
 |
 |
High-fidelity Prototype
The prototype was created using Figma, a browser based UI and UX application for prototyping and code-generating. I have utilized Figma for past projects for creating wireframes for mobile applications and websites. I first started by digitizing my paper wireframes while implementing graphic and interactive components. I ensured that the color scheme fits with the intention of the project: to book cost-efficient trips to various travel destinations, book last-minute flights to see loved ones, and book bundle deals for work-related purposes with high-rated accomodations in good locations. The purpose of this interactive prototype is to visualize the information for the proposed tasks and features, validate the interaction flow for the user, and explore what influences a user’s choices. All in all, it is to evaluate rather than explore the system’s design.
Test out the prototype for yourself:
Evaluation and Revisions
Cognitive Walkthrough
I conducted a cognitive walthrough with my course peers of the first version of my wireflew:
The main feedback I received was on my “progress bar”; it was unclear what “step 1, step 2, etc.” referred to. I was advised by my peers to either replace it with a visual progress bar that fills up with the completion of each step or replace the text with flight and hotel icons. My peers additionally said it would be helpful to rename my “price tool” feature. It was unclear that clicking the button navigated to the corresponding page titled “Edit to Find More Options”. The user actions and the intended feature are not consistent with each other. One user actually thought that the frame where you can use a slider to change the travel budget was the intended flow and next page. My peers told me to include the travel budget field on the same page as the search query, providing a default option of the cheapest and most expensive options as the price range. Regarding the flight filter page, my peers said that it would be helpful to clarify “morning, afternoon, evening” because it is unclear what a midnight flight would fall under. All in all, the terms I used were vague and broad, therefore, I decided to add another section called Early Morning. Lastly, they said that it was confusing and overwhelming to include both the departure and arrival flight search results on the same page. While this is an issue I tried to overcome, I decided to organize page through two carousels as opposed to two vertical scrolling sections.
Screen recording here
Accessibility Audit
I conducted an accessibility audit of Expedia's site to evaluate how well it adhered to accessibility guidelines and principles. View the accessibility test results here
Additionally, I evaluted the accessibility of my color scheme. View the results here
Pitch Video
Watch my pitch video here
Conclusion
Throughout this process, I learned how to listen to the user rather than trying to convince them of something that I thought was the solution to the problem. I learned how to let the user guide my research and design decisions, emphasizing the main lesson of user experience design: the user is always right. This follows along with the fact that if a user is not able to navigate through your design, it is not something wrong with them, it means your design is not intuitive enough for them to understand the flow on their own. In the future, I hope to conduct more extensive user research and usability testing to truly explore all possible solutions to minimize user difficulties and create the most efficient, clear, and concise design. Overall, I have enjoyed the design process and I look forward to making my design better through further usability testing.