Real Estate Interactive 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. 


January, 2020 - March 2020 (10 weeks)


Human-centered design method; Tableau


Infographic designer, visual designer, user researcher


Clara Wang
Huiqin Gao
Sophie Nop
Yating Zhang


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.

My Contributions

As a team project, we worked together throughout the entire process. I took the lead on sense making the research result, storyboarding, infographic design, conducting user testings, and delivering the final interactive prototype.

Additionally, during brainstorm session, I provided ideas and input on how we can narrow down from a broad scope to a do-able scope within the time constraint.

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


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

What are the factors that first-time homebuyers 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>


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

Questions we want to answer through our information visualization design.

Across Washington and California

  • What is the range of real estate prices across WA and CA?
  • Which cities have the highest real estate prices?
  • Which cities have the most significant price drops?
  • What is the peak season in WA and CA respectively?
  • Is the real estate market growing faster in CA or WA?
  • Which type of property is the most worth buying in both states?
  • What is the relationship between demand and supply?

My teammates led the development of the 3D submarine with Adafruit Feather Bluefruit LE, and game development in Unity 3D. We leveraged the Bluetooth to connect the joystick to the 3D underwater world.

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 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.


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.

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.


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


  • 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. 


  • 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.
  • The titles of filters are not clear.We worked on all the filter and legend to keep them in the same format through out all four dashboards.
  • 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


  • 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. 


  • We added an annotation on the graph to explain the calculation for the forecast.
  • 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.
  • We worked on all the filter and legend to keep them in the same format through out all four dashboards.

Peak Season Dashboard


  • 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.


  • 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.
  • Linked the region filter between the Trend , Peak Season, and Buyer’s Market and Seller’s Market graphs.
  • Unify the visual style with other dashboards.

Buyer's Market vs. Seller’s Market Dashboard


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


  • 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.
  • 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

Pushing for betteI combined all the graphs together and created the final user interface and visual style by using Tableau. 
Click here to experience the interactive prototype.


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 beginning.

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.

Other Projects

Wyze App Shop

Re-imagining the Wyze app shop shopping experience.

Wyze Ecom Buy Section

Re-designing the product page hero section to create consistency & scalability.

Bytedance Lark

Design the user permission system of the shared folder.


Helping parents of children with Trichotillomania maintain their condition.

Explore Current

An interactive game designed for children.