Concept Production S ol Choi, Hua Fan, Tuyen Truong HCDE 411 Travelust is a visualization that helps travelers budget their trips. It provides information about the costs of travel to the 79 most popular destinations in the world. Link to Visualization Concept https://public.tableau.com/views/travelust/midrange?:embed=y&:display_count=yes Executive Summary We are a team of engineering students from a data visualization class in the Human Centered Design & Engineering Department at the University of Washington. Over the course of 10 weeks, we learned about key design principles and techniques used in exploring, analyzing, and visualizing large data sets. Inspired by our individual interests in travel, Travelust is a culminating concept that applies what we have learned throughout the course. As a Tableau Public data visualization, Travelust helps people make informed decisions about trips to the world s top 79 city destinations.the main goals of Travelust are to: Allow users to view travel costs in various cities depending on the user s spending preferences (budget, midrange, and luxurious). Offer cost breakdown of selected cities in U.S. Dollars. The breakdown includes lodge, food, transit, and activity. Allow users to compare destination costs so that they can make informed decisions that match their budget needs. Travelust is composed of three graphical representations with filters that allow users to select cities they want to view or compare costs for. The graphical representations include a world map, a bar graph, and a table. Each of these representations provide a different view of the same information. The map offers a geographic reference, the bar graph presents cost breakdown for selected cities to enable quick comparisons, and the table provides an overview of all travel costs associated with each of the top 79 cities in the world. This report provides a Concept Background, Process Description, and Critical Evaluation of the steps our team took in creating Travelust. The Concept Background discusses background research and data handling. The Process Description presents the project timeline and highlights findings from guerilla usability testing, problems our team encountered, modifications to our plan, and insights and breakthroughs. The Critical Evaluation outlines the success of meeting concept goals and applications of concepts from class. An appendix is included at the end of the report, which includes a detailed project timeline and iterative design sketches. 1
Concept Background User Research Before creating our database, we conducted five in-person interviews with potential users of our visualization. Each participant was asked six questions regarding the methods they used to plan their travels. Our screening criteria included individuals who have completed at least one trip in the past two years and played a pivotal role in planning the trip. We found that participants were interested in information ranging from flight costs, hotel, food, climate, safety, and transit. Due to our interviewees broad range of interests, adding all of this information to a single visualization would be excessive. Therefore, we collectively decided to reduce the scope of our project and focus primarily on travel costs around the world. Data Handling We gathered data from Budget Your Trip, which is a website where travelers can create an account and keep track of their trip spending. The website breaks down the user s spending into several categories: food, lodge, activities, transit, water, souvenirs, tips and handouts, and scams. Users can also switch between three different travel styles: budget, midrange, and luxurious. This filter allows users to see the different costs of travel depending on their preferences to be more frugal or spend lavishly during their trips. As a result of recurring themes from the user research, we used the four breakdowns that would most likely appeal to all travelers. We concluded that lodge, food, transit, and activities, are all general items travelers would spend money on. Items such as souvenirs and tips were excluded because not all travelers buy souvenirs and tips are not accepted in every country. We decided to use data from all three travel styles because we cannot assume that all travelers have the same travel budget. By adding data from the three travel styles, the visualization will be more useful to a wider audience. Furthermore, we decided to use city descriptions provided by Budget Your Trip because our interviewees mentioned that their travel interests play a big part in deciding on a destination. In some cases where the description was not available on Budget Your Trip, we used the descriptions on Wikipedia. To narrow down the scope of our project, we chose to only include the top 100 travel destinations in 2015 in our database. We fetched this information from a website called List Challenges, which listed the cities with the most international tourist arrivals. Because our visualization helps users decide on a travel destination, we believe that the top 100 popular destinations is appropriate. We created our database using Excel. We first listed the top 100 cities into a column and manually input the travel costs from Budget Your Trip. Ideally, we would have used APIs to create our database, but due to time constraints in learning how to access APIs, we decided 2
that manually inputting data would be more efficient. During this time, we encountered issues in formulating our data such as missing data, suspicious data, and recalculating total cost. Missing data While searching for travel costs in Budget Your Trip, we found that some cities in the top 100 city destination list, such as Jakarta, were not found in Budget Your Trip s database. Thus, we decided to remove those cities from our visualization. We realized that this was a shortcoming from the database we were using. Because the data is only provided by users who use this service, it is understandable that some cities do not have any cost approximations. Suspicious data Although Budget Your Trip averages the cost of travel from data manually submitted by users, we cannot disregard the possibility that the average may be unrepresentative of actual travel costs as some cities may have fewer user inputs. This will likely lead to skewed and inaccurate representations of travel costs to that city, thus resulting in suspicious data as noted below. We excluded cities in our database that had suspicious data in the four breakdowns we chose. For example, the cost of lodge in Taipei amounted to $905 for luxurious travel styles. We had the option to omit the cost of lodge under luxurious travel style, but because we did not want cities with null data, we decided to exclude these cities completely from our database. However, we decided to keep cities with suspicious data under different breakdowns we were not using, such as water. This is because the cost approximations for the breakdowns of interest to us (lodge, food, transit, and activities) were unsuspicious. After removing cities with missing or suspicious data, we ended up with a finalized list of the top 79 travel destinations rather than the initial 100 provided by List Challenges. Recalculating Total Cost Since we excluded a couple of cost breakdowns from the database, the total cost listed on Budget Your Trip for each city did not equal the cost of the four breakdowns we initially chose. To preserve the graphical integrity of our data, we used Excel s sum feature to recalculate the total cost for each city to ensure that it totaled the sum of the four breakdowns. Process Description Timeline The initial timeline can be referenced in the appendix. We generally adhered to our timeline with the exception of week 9 because the class schedule provided time to build a prototype. Hence, instead of creating the visualization, we built a prototype using Powerpoint and conducted guerilla usability testing with 6 participants. During week 10, we created a functional 3
visualization with Tableau and presented it in class. We reviewed the feedback from instructors and peers to make improvements to our final visualization. Test Results We used guerilla usability tests to determine if our prototype effectively presented the data. Three main questions we wanted to investigate were 1) What do users expect when they click on a specific city on the map, 2) How effective are the filters in helping users narrow down their search, and 3) Will users understand how the three graphs/visualizations are linked together. We categorized findings from the usability test sessions into two problem areas: labels and graphs. Issues relating to labels attributed to the lack of labeling or instruction to teach users how to navigate the visualization. Graphical issues were due to inefficient representations or interactions. Based on the feedback from the usability testing sessions, we improved our visualization by adding new features or improving existing features. New Features Add instructions at the beginning of the landing page to introduce users to the system and how to use it. Implement option for users to customize their search findings based on budget preferences for each category (lodge, food, transit, activities, etc.) rather than budget preferences for overall trip. Add checkbox capability to help users better compare cities. Improvements of Existing Features Implement a sort function for cost per category in the table. Make table larger since this is the main interface that users interact with. Make the map smaller since this is the least used. Make labeling for categories and filters more consistent and clear. Developing Visualization with Tableau Since our visualization links multiple representations of the same data set, we used Tableau for its convenient data-linking mechanism. However, given that this was the first time any of our team members used Tableau, we encountered a few problems with using the software. The first obstacle was the lack of collaborative features. Every team member needed to be present in order to participate in creating the visualization. This issue caused desynchronization in work progress because when one team member created changes, it was not reflected in another member s computer. Nevertheless, we addressed this issue by strategically assigning work to each person and having regular meetings both onsite and remotely. 4
Another challenge we encountered was the complexity of the Tableau software. Since there was a steep learning curve, we had to search for tutorials to understand how to use the values in our dataset to create an interactive graph, however, many of the tutorials we found were outdated. Although Tableau has numerous functionalities to enable powerful visualizations, it was difficult to understand how to apply those functionalities due to its complexity. However, after overcoming those issues, Tableau s data management greatly reduced our time creating our visualization. Using the built-in map, bar graph color scheme, and table, the software automatically linked our data together to create a visually appealing data visualization. Critical Evaluation We are pleased with the final product of Travelust. Considering the time constraint and unfamiliarity with Tableau, we were unable to implement everything we wanted, however, after receiving positive feedback from in-class showcase, we are content with our final product. Given more time, we would implement the following changes: Use real time data to provide the most up-to-date information for travel costs. This would require implementing APIs to the visualization. Categorize cities in the check-box list by region or country. For example, all Chinese cities should be categorized under Asia, and all countries in Germany should be categorized under Europe. Allow users to filter the bar graph so they can view specific categories (lodge, food, transit, and activities) rather than viewing all categories simultaneously. Add destination images in the details on demand in the map. Replace written instructions with a tutorial in the form of a Tableau story to demonstrate the value of Travelust and how to navigate it. Allow users to switch to color-blind mode to accommodate visually impaired individuals Application of Course Concepts We used many data visualization concepts presented in class to create Travelust. A few concepts include: Data Encoding, Advanced Interactive Techniques, and Amplifying Cognition. Data Encoding During the first week of class, we learned about achieving graphical excellence and integrity through visual encodings. Adapting what we had learned about retinal variables, our team used two encodings to represent two different types of data in the stacked bar graph. First, we encoded color to represent nominal data of the four cost breakdowns for each city. Although color is difficult to accurately perceive, it is appropriate in the context of a bar graph 5
compared to encodings such as density and shape. We also encoded length to represent cost in USD along the y-axis because it allows readers to make comparison between data points. We were able to encode position of each city on the map. This gave users an idea of the city s geographic location, which some of our users noted was important information in deciding on a city to travel to. However, the downside to this is the occlusion in certain areas on the map. This issue was eliminated to a certain degree by allowing users to zoom in and out of the map. Advanced Interactive Techniques Our team applied a few advanced interactive techniques presented in week 6 of class. In particular, we implemented details-on demand, brushing, and linking into creating Travelust. Upon hovering over cities on the map, users are presented with details-on-demand of an overview that includes overall travel costs associated with that destination. This feature not only provides feedback to the user in response to their hover, but also serves as a label. Furthermore, all three graphical representations in Travelust are connected. When a user makes a selection on the map, it is reflected in the table as well as the bar graph. This linking allows users to highlight or hide corresponding data in various views. Amplifying Cognition Brushing and linking are effective in our visualization because our graphical representations provide multiple views of the same data. We learned such technique in week 5. For our visualization, the table provides a list of all existing data with multiple variables, whereas our graph was a straightforward demonstration allowing users to compare among different cities. We also had a map as our assistant visualization. Because our data was geolocation based, we decided that the map can amplify user s cognition, especially for people with better sense of geolocation. Since our visualization also highlighted other two graphs when user select a city from one graph, three individual graphs became integrated as a whole visualization. 6
Appendix Initial Project Timeline Week 8 - Gathering Resources & Data, Ideation (Feb 22-26) Find database Create questionnaire with 5-6 questions to ask potential users about what they would like out of a Travelust. Then, each team member must interview 2 participants by February 22 Quickly draft up personas based on our own interests/desires Finalize sketches. Ask Brock/Taylor for feedback before implementing in Tableau. Week 9 - Execution, Usability Testing (Feb 27 - March 5) Parse through database Create visualization Week 10 - Finish Visualization, Final Write-Up (March 6-12) Conduct usability testing on final visualization with 2-3 participants by March 6 Finalize visualization based on user feedback by March 8 7
Design Sketches Figure 1. Sketch 1 8
Figure 2. Sketch 2 9
Figure 3. Five design sheets 2 10
Figure 4. Five design sheets 3 11
Figure 5. Five design sheets 4 12
Prototype Prototype screen: overview Figure 6. Prototype screen: multiple selection 13
Final visualization Figure 7. Final visualization screen: landing page Figure 8. Final visualization screen: multiple selection Figure 9. Final visualization screen: detail on demand 14