YatingZ.


Real Estate Visualization

Information visualization


︎
An information visualization that helps first-time homebuyers who are interested in buying a home in Washington or California to be able to obtain useful information in an efficient way. 






TIMELINEJanuary, 2020 - March 2020 (10 weeks)
METHODS & TOOLS USED Human-centered design;
Tableau, Photoshop
MY ROLEInfographic designer, visual designer, user researcher
TEAM
Clara Wang
Huiqin Gao
Sophie Nop






Overview

We noticed that first-time homebuyers who usually have little knowledge in their head about the real estate market are having a difficult time getting a first step in understanding it.

Our project goal is to help first-time homebuyers who are interested in buying a home in Washington or California to be able to obtain useful information in an efficient way so that they can make informed decisions on where and when to buy. In order to achieve that, we came up with an information visualization that consist of four main graphs; a heat map and scatter plot to give an overview of the real estate market, a trend graph that provides the market trend of regions in both states, an area graph that gives audiences insights on the peak seasons of the market, and finally, a bar graph that illustrates the supply and demand in users’ selected regions.





Final interactive prototype

Here is the Link to our final interactive prototype created with the visualization software Tableau. The original data retrived from Redfin data center










Process

Discover, define, design, and deliver

As we were doing this project, we followed User-Centered Design process (process as shown below). Throughout the process, we mostly worked collaboratively as a team. I took the lead on creating persona, storyboarding, concept drawing, and creating the interactive prototype.








︎



Research Goal

After we settled with the real estate topic, we then encountered another question:

    • What kind of information users want to see on the infographic?
    • What we can learn from existing works? 

To solve these two problems, we decided to conduct user research. We leveraged surveys to get an overall picture of our user group’s opinions on the factors they care about. We conducted literature review to study existing solutions to find out potential opportunities.





Survey & Interview

What are the factors that first-time homybuyers care about?

With the intention of hearing more and getting a deeper understanding of the first-time homebuyers, we got a chance to send out surveys and talk to two potential users.



Insight #1:
People think buyer vs. seller market is the biggest factor that can influence price.
In the survey, we asked about what would be the factors they think that could influence the price of real estate. All of the participants said they may be influenced by the factors buyer vs. seller market.



Insight #2:
Price is the biggest attribute for them to make a decision.
One of the interviewees said, “I want to buy a house that is inside my budget and I want to make the best use of that money, which means I do not want to overpay for a home.” People seem to value a lot to make the best use of their money, and they want to use less money to buy a better house.



Insight #3:
People usually have a specific type of house or size of the house they want to look for when they start to look for homes.
Depending on their personal situation people usually are clear on what type of property they want to purchase. For example, one of the participants is a male who is in a long-term relationship and wants to have a dog in the future, so he wants to have a big house with a garden.






Literature review

What we can learn from previous works?

To broaden our knowledge in this topic as well as understanding existing works, we decided to conduct literature review of existing works.


Insight #1:
The existing visualizations are at a surface level and users cannot dive in to see more data and get a deeper meaning out of it.
In our research, we noticed that very few previous studies had been found focusing particularly on Seattle or Washington State, mostly national-wide.



Insight #2:
Existing infographics on real estate market does not provide higher level comparison capability.
We noticed that current graphs are simply X-axis and Y-axis graphs that show limited data dimensions per graph. It does not provide higher level comparison capability. 




Insight #3:
The terminologies used in the current graphics are not very user friendly, which makes it harder for various users to gain useful insight that can help them with decision making.
We studied the infographic from Redfin, Data provided by organizations like Redfin is powerful and contains lots of details, however, their current visualization can be very hard for first-time homebuyers who do not have any knowledge in real estate market to understand, because a lot of professional real estate terminologies being used.

<Redfin data center visualization>






Persona

We created a persona based on the results we got from the initial research to help us on building empathy with the target audiences and being more effective during the design process.






Research questions

Based on the results from the survey and interviews, we came up with seven research questions that are listed below.

Across Washington and California
    1. What is the range of real estate prices across WA and CA?
    2. Which cities have the highest real estate prices?
    3. Which cities have the most significant price drops?
    4. What is the peak season in WA and CA respectively?
    5. Is the real estate market growing faster in CA or WA?
    6. Which type of property is the most worth buying in both states?
    7. What is the relationship between demand and supply?










︎

Design Challenge

How might we help first-time homebuyers who are interested in buying a home in Washington or California to be able to obtain useful information in an efficient way?










Data Profile

Finding detail level data on Redfin data center

Considering the information we want to display in our visualization, we need data with rich detail and large amount of rows. The original data set from Redfin contains 9,373,487 rows of data, 9.71 GB with 66 Variables. In order to increase our productivity and to avoid false conclusions in the end, we did data clean up. The steps I did includes get rid of the missing data and null data, converting string data into numerical data, and remove outliers.




Brainstorming

Brainstorming solutions for research questions

With the accumulation of our research, we ideated on graphs that could answer each of our research question. After the brainstorming meeting, we settled down with the following ideas that could each solve the research questions and I did hand-drawn graphs to help us documenting the process and building interactive prototype.

<Sketches>





Solution

An interactive dashboard combines information including overview, trend, peak Season, and buyer's market vs. seller’s market.

In order to help first-time homebuyers effectively gather different types of housing information, we wanted to build an interactive dashboard to communicate the original data in various views that can benefit our users.

Our final graph contains an Overview for both Washington and California state; A trend view for users to compare regions they are interested in; A Peak Season view to help learn when do people buy; and a Buyer's Market vs. Seller’s Market view to learn about the relationship between supply and demand of the real estate market. Users can freely toggle between these 4 views to obtain different type insights from the data. All graphs are produced using Tableau Desktop.

<Overview of four dashboards>






Usability Studies

We conducted usability testings to validate our design and to gather feedback. We leveraged 2 different types of testing strategies.

We provided specific tasks based on our graphs for our user to see if they can find the correct answer using the visualized data we provided.


In order to avoid bias, we decided to make our second round of testing more exploratory -oriented in nature.









Iteration

We tested our final graphs with 10 users. 7 female and 3 male. We gathered many insightful feedback, and we incorporated them into our final iteration.



Overview Dashboard

Insights:
  • Users want more interaction between two graphs.
  • The titles of filters are not clear.
  • It was not very clear to the user that the visual can represent data from different years, many users think the data is representing 2019 as that’s the closest complete year. 

Improvements:
  1. Based on users’ feedback and inspired by sneiderman’s principle, we connected two graphs together. If you select one city or region on the graph, you will be able to see how’s the price compare to other regions, and how’s the homes sold compare to other regions.
  2. We worked on all the filter and legend to keep them in the same format through out all four dashboards.
  3. We added a year slider on the top and set it by default to be in 2019. Users can now slide the year to see a particular year they are interested in and also see how the color on the heat map changes year to year.





Trend Dashboard

Insights:
  • Users would like to know how the forecast was calculated.
  • Users expect to see more detailed information in the crosstab in addition to the information that’s available in the tooltips. 
Improvements:
  1. We added an annotation on the graph to explain the calculation for the forecast.
  2. We would like to show more details that can impact the housing decisions, however, our dataset has limitations and we have yet to be able to find data around crime rate, accessibility to public transit, etc.
  3. We worked on all the filter and legend to keep them in the same format through out all four dashboards.






Peak Season Dashboard

Insights:
  • When multi-cities are displayed, the fine line in the area graph that represents each city can be hard to read.
  • Users reported that they do not want to select the regions that they are interested in again in the graph when it was previously selected in the trend graph.


Improvements:
  1. We recognize that it might be better to user a line chart rather than area chat for this graph, and will include this in future iterations.
  2. Linked the region filter between the Trend , Peak Season, and Buyer’s Market and Seller’s Market graphs.
  3. Unify the visual style with other dashboards.







Buyer's Market vs. Seller’s Market Dashboard


Insights:
  • Many users are curious to know what makes it favor buyer vs. seller.
  • Negative number displayed in the graph was confusing.

Improvements:
  1. We improved on caption for the graph to make it more easy to understand; updated the title and legends to be buyer’s market vs. seller’s market, and added label to the x-axis to indicate “month of supply” was what determines buyer’s market vs. seller’s market in this graph.
  2. The negative data was caused by the fact that we used the original “month of supply” data minus five. According to the Greater Chattanooga Realtors website (4.Mark Hite, 2017), when “Month of supply” is lower than 5 months, it is considered a seller's market. If the market can be considered to be an equal number of buyers and sellers. We want to set the baseline to be zero, so it’s easier for users to see if the bar is above the line, then it's the buyer's market, below the line is the seller's market. However, we do understand that the negative number is not very intuitive. We are still trying to find a way to resolve that.










Final solution

I combined all the graphs together and created the final user interface and visual style by using Tableau. 

Click here to experience the interactive prototype.









Takeaways


Design consistency

We each were responsible for two visualizations during the process. We did the first two rounds of usability testings individually. This led to a problem that our design did not share the same design language. We use different types and appearance of the legend, use different colors to color-coding two states, etc. When I combined all the graphs, I spent a long time fixing all the problems and kept everything in the same style. We could save a lot of time if we create a design system or design specification in the begining.




Future Vision

Visualize the real estate market of the whole U.S.

At the beginning of the project, we were thinking to visualize the U.S. housing market. However, due to the technical difficulty, which Tableau only can process one million rows of data, and our dataset has about 9 million rows of data, we were only able to focus on two states. We were considering leveraging HTML and D5 to make improvements and make it more inclusive in the future. On the other hand, it would also be interesting to add factors that can influence housing price like education, job opportunities, etc.