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
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.
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.
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.
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.
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.
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.
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.
To broaden our knowledge in this topic as well as understanding existing works, we decided to conduct literature review of existing works.
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.
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.
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.
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.
Across Washington and California
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.
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.
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.
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.
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.
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.
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.
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.
Re-imagining the Wyze app shop shopping experience.
Re-designing the product page hero section to create consistency & scalability.
Design the user permission system of the shared folder.
Helping parents of children with Trichotillomania maintain their condition.
An interactive game designed for children.