About Cost Calculator
Based on the 809 registered users of Realtor.com surveys, we identified the lack of transparency in closing cost makes the top 10 pain points in the home buying journey. Thus, there’s a big opportunity to solve this pain point by introducing Closing Cost, along with a design uplift to improve user experience.
My role in this project was to lead the end to end experience for Website and mWeb. It included partnering with a Researcher, Product Managers, and Local Data Engineers, and Frontend Engineers.
Goals:
Help users to have clarity towards closing cost
Augment informational text along with intuitive UI
Increase in lead conversion
Research
I connected with the Research team to study users top pain points that was identified by 809 registered users of Realtor.com surveys. In addition to that, I also partnered with a Researcher to run a user testing on mortgage experience against competitors.
Problems:
Unnecessary loading animation on the pie chart
Pie chart took too much space, especially in mobile view
Editable fields did not look editable
Information on the Veteran Benefits section was repetitive
The ‘Advanced Calculator’ does not feel advanced as it lacks other input fields e.g. property tax, hoa, etc, which also caused the monthly payment price to be inconsistent.
Solutions:
Updated the design to bar chart, which allowed the calculator to load faster and minimize space in mobile view
Added due at close to improve clarity towards closing cost
Condensed veteran benefits info under one section
Grouped monthly breakdown by fields that are connected
Introduced slider for UI convention in changing numbers
Concept Explorations
Before jumping into the design, I like start a project with pen and paper. It helps me to visualize the rough ideas.
Bringing sketches to wireframes help me to build a thorough content and flow before investing time in visual design.
Collaborations
I worked with a Copywriter expert to come with the best copy for the tooltip and documented my UI designs through Zeplin to communicate with Front-End Engineers.
Design
Interactions
User Impressions
“It’s really clear that I can adjust the different type of cost on here, let’s say if I wanted to offer less on the house, I can adjust the home price and see how much that will cost me, I can also adjust how much I want to put down, to avoid the mortgage insurance”
“This closing cost helps to give me an idea of how much money I need to have if I was to buy this house
”
“I really like the way different cost is broken down, this helps me to feel like I won’t have any surprised at the end.
”