An interactive data visualization tool that helps travelers make an informed decision when booking a room in Los Angeles through Airbnb
Type | Course Project for HCDE Information Visualization, Oct -Dec 2017
My Roles | UX Research, Interaction Design, Prototyping, Usability Testing,
Team | Minjun Chen, Suwei Yang, Yi Tang
Airbnb in Los Angeles
With so many listings across Los Angeles, it is difficult for travelers to visualize the data and see the overall distribution of all listings when using Airbnb.
Airbnb provides alternative accommodation choices for domestic and international travelers. During our initial research, travelers’ largest concerns when booking an Airbnb was whether they picked the right place to stay or not, depending on their personal preferences, such as price and location. According to Inside Airbnb, an open-source data tool for Airbnb, there were more than 39000 listings across Los Angeles in 2017. On the Airbnb website, listings are only usually segregated by price and location, but this does not include other variables, such as accessibility to tourist destinations, suitability for family or work trips and safety and crime levels in each local neighborhood. In terms of a price comparison, it’s difficult to evaluate whether a location is over-priced, under-priced or is a good deal for a particular neighborhood.
Why we chose Los Angeles specifically?
We created a web app through which people can access data visualizations of Airbnb’s listings in Los Angeles.
This fully interactive data visualization tool in Tableau helps travelers who plan a trip to Los Angeles make an informed decision when booking a room in Airbnb. It also enables travelers to explore trends of listings regarding Airbnb rentals in Los Angeles and have a better understanding of Airbnb sharing economy.
How would this visualization be used in tandem with Airbnb’s website while booking?
In the beginning of their booking process, tourists would go to our site, and filter the listings by the appropriate variables we have gathered data on. Tourists can use our tool to get an overview of which areas they might like to stay in, and they can view and filter all Airbnb listings based on their needs and preferences to determine which neighborhood and type of room offers the most affordable accommodation, or for their most pertinent preferences. In addition, our final design enables travelers to explore trends of listings regarding Airbnb rentals in Los Angeles and have a better understanding of Airbnb sharing economy.
The User flow
We encountered our first problem after cleaning the null value in both datasets: what are the key variables we should use in our visualization?
Two datasets come we used from the Inside Airbnb, which is sourced from publicly available information from the Airbnb Site. These datasets provide the following information:
I quickly coded the responses from the interviews and found four reasons for choosing Airbnb to help us determine key variables we would show in our visualization.
Several visualizations, including a map, a circle and a line graph, were created to visualize the geographic information of all listings and “networking” between different types of room in Los Angeles.
Ideation & Sketching
The sketches helped us figure out potentially the most important visualizations for travelers. With this in mind, we created our initial paper prototype that used different graph types:
a map to show geographic distributions of all listings
a line graph to illustrate the comparison of sale prices and Airbnb price by neighborhood
a radial graph to demonstrate the distributions of different room types by neighborhood
Round 1: Paper Prototype
At this round of user testing, we mainly asked task-oriented questions to such as, “What will you do to see the geographical distribution of private room listings?”. Generally, users thought that the map effectively showed the geographic information of all listing in this region. Insights from testing this paper prototype resulted in these design recommendations:
Reduce the number of filters to control all the visualizations
Choose a right color palette for the representation of different variables
Remove the radial graph since it is pretty confusing
Consider a proper visualization to highlight the comparison and distribution of listings by neighborhood
User Testing Results
We created a clickable medium fidelity prototype in Tableau, using the one-page layout.
This workable prototype allowed us to get helpful feedback from users because users were able to filter out their options and zoom in/out the map during the testing. Based on the user feedback from first paper prototype, people were confused by the line and radial graphs, so we kept the design of map while creating two new graphs.
Round 2: Medium Fidelity Prototype
At this round of user testing, we gave participants a contextual scenario and asked them to think aloud while they were completing tasks such as “ What will you do to see the listings of Santa Monica and Hollywood? ” In general, the map was straight-forward and visually appealing. However, the other two graphs were very confusing. Four important design considerations we made were:
Remove parallel coordinates because they provide too detailed information about listings
Provide captions, titles and annotations to help users understand the use case of each graph
Reduce the number of colors in each graph
Rearrange all filtering options in the dashboard
User Testing Results
We built multiple iterations of our high fidelity prototype in Tableau to accommodate all of the design recommendations from the user testing.
We replaced the bar chart with scatter plots to indicate the positive correlation between airbnb prices and monthly rental prices.
We removed the parallel coordinates and added the bar chart to show average Airbnb price and the number of listings among most popular neighborhoods.
We added short captions and annotations to explain the purpose of each graph.
Compared to previous prototypes, we reduced the color complexity.
We moved the filtering options to the middle of this dashboard and put the slider on the map, allowing users to easily change the price.
Round 3: High Fidelity Prototype
Several important design recommendations for our final design:
Provide tooltip of each listing when clicking on each dot on the map
Place all filtering options in the central location of the dashboard
Remove the colorful dots showing in the bar chart which cause confusion
Reduce the number of colors in each graph
Add interactions and highlight connections between the map and other graphs—this was the most difficult challenge of the six recommendations.
Revise the captions and annotations of each graph
User Testing Results
What we changed
In this phase, I challenged myself a little bit by finding the right way to improve interactions and connections between different graphs.
After getting suck in Tableau, I successfully made this visualization more interactive by adding the hover effect:
1) Hovering for similarity: when users hover over a graph, the relevant information in the other graph would be highlighted if they share the same variable, such as neighborhood, room type.
2) Hovering for listing details: when users hover over a dot on the map, additional information about a listing is displayed.
We also made several changes informed by last round of user testing:
We placed the filters and put the annotation of color encoding different types of room at the central place of the visualization.
We used the colors in response to Airbnb visual language and avoided using other redundant colors.
We gave each graph a clear caption and legend.
Default screen shows the overview of Airbnb Listings in Los Angeles.
One Datapoint Highlighted
The map and other graphs are interacting with one another through hovering or filtering. When users hover over any listing, neighborhood name, or any type of room on one visualization, all the corresponding data in the other three visualizations will be highlighted at the same time.
Key Variables Comparison
Users can compare price, room types, all listings across different neighborhoods in this dashboard. The two scatter plots allow users to explore the correlation between the rental prices and Airbnb prices. The pie charts show the percentages to total numbers of reviews and listings by room type. The overall dashboard enables users to compare the popularity of each type of room in Los Angeles.
Our visualization shows that the majority of listings in Los Angeles are entire homes rather than shared rooms with local hosts.
The majority of travelers to Los Angeles want to rent an entire home rather than a shared room with the host. This breakdown is different from what we may expect when thinking about a “sharing economy” service like Airbnb.
In general, travelers who travel to Los Angeles pay a fair price when using Airbnb.
From the first stacked bar graph, the downward sloping trend shows that most airbnb availabilities are around Venice and Hollywood areas, which corresponds with the fact that most touristy sites are around these two areas.
Ultimately, the goal of the visualization is to help the user book an Airbnb. By tying points on the visualization to actual listings, we can make the visualization actionable. When travelers find a place that the location and price is good for them, they are able to quickly visit the site to book.
I would like to build a graph to predict the potential Airbnb prices as well as rental prices for the near future. I would like to see the dataset in a larger time range because it becomes meaningful for travelers to see how the price changes over time.