top of page
Affordability Calculator
An interactive financial tool created to help early-stage home buyers understand what it will take to purchase their first or next home.
Overview
DETAILS
ROLE
Lead Product Designer
TIMELINE
3 Weeks
COMPANY
Zillow
YEAR
2023
BUSINESS OBJECTIVE
Generate awareness of Zillow Home Loans (ZHL) as a competitive financing option for financially eligible homebuyers through a marketing landing page.
PROJECT OVERVIEW
BUSINESS OBJECTIVE
Improve the experience and accuracy of the existing Affordability Calculator artifact to encourage & empower homebuyers to take the next step in their financing process with Zillow Home Loans (ZHL).
~
Who is our target audience?
74% of our mortgage leads are first-time buyers and 50% of them reinforce with us that understanding personal affordability is their highest need.
What do we gain?
Making optimizations to the Affordability Calculator to learn ways to better engage more early-stage homebuyers will increase converted mortgage leads from this entry
point down funnel.
THE OPPORTUNITIES
.png)
Existing Affordability Calculator experience.
1. Improve the Accuracy.
The existing experience has a problem with accuracy: the inputs we are currently using to generate calculations for our users are often off both in range and depth.
We know from research that accuracy is an important utility and trust factor for users, and we can do better.
.png)
2. Make it Approachable.
Currently, the calculator requires the user to possess a high level of literacy around financing language as it relates to mortgages. In addition, the UI in some instances is equally unclear and confusing.
We know from research that consumers of the calculator can range from no mortgage experience to advanced mortgage experience, and we know that users of this calculator will rarely venture outside of the immediate calculator experience when they are using it to supplement their lack of knowledge.
.png)
.png)
3. Remove Dead Ends.
Calculating affordability is an important first step in navigating future homeownership, but the current experience does not offer a range of outcomes useful to our customers.
Many of our users value the ability to compare different scenarios when understanding their budgets (something they cannot do today). They also cannot readily save or share their results and have to re-calculate upon each visit. Furthermore, we currently only offer one next step which many new users are not ready for and do not venture beyond : getting prequalified.
.png)
PROJECT FRAMING
Although there were many opportunities to improve in this calculator experience, limited resourcing, competing business priorities, and assessing the highest immediate value to customers helped us to narrow the scope of this first version.
~
IN SCOPE FOR VERSION 1
Inputs
-
We will assess and appropriately refine the inputs that the user provides, adding new ones that are missing and removing those that are unnecessary.
-
We will better define inputs that are vague or non-intuitive.
Outputs
-
We will give more context & education around outputs and distill them into concepts that users can easily comprehend.
-
We will simplify the interactive elements that confuse our users, such as the purpose and function of the slider.
Next Steps
-
We will encourage users to take the recommended next steps by decreasing ambiguity around the call to action.
-
We will provide users the ability to save and share their results.
SOLUTION
We completed several rounds of ideation from low to high fidelity to explore solutions that satisfied the defined scope.
~
WIRFRAMES
I utilized wireframes to help us break down the information architecture and content hierarchy of the calculator's redesign, asking ourselves questions like which structure would lead to more conversion, which presented a clear thread of actions, and whether these things were mutually exclusive.
.png)
Option A
.png)
Option B
FEEDBACK
Due to the tight scope of this project, I organized several stakeholder feedback rounds to accept new perspectives on our direction. These rounds often saw perspective solutions organized into low-impact, medium-impact, and high-impact options to help us discuss trade-offs and priorities.
During this stage, I asked myself and my stakeholders questions like within the scope should we focus more on the overall UX, the visual design/UI, or the educational content that would ultimately drive conversion? Was there a world where a V1 solution could balance each of these priorities?
Visual of what a typical feedback session looked like.
FINAL SOLUTION & HANDOFF
In the end, I was able to deliver on each of the areas called out in our scope definition. We elevated the visual design and modernized the calculator's functionality and appearance by utilizing our existing design system and also knowing when to break the patterns provided.
I also improved the quality of the inputs by leaning on my partners in the research org to understand more about users' knowledge and expectations entering this experience.
Lastly, I was able to transform the recommended next step into an additional output of the calculator so that users engaged with it as a dynamic part of their experience versus a static and unchanging banner they viewed more as an advertisement.
Prototype
Visual of how I explained and organized the final changes to my engineering partners in Figma.
OUTCOME & EVOLUTION
Although the project was a success, company priorities changed shortly after and the definition of success on the Affordability Calculator changed.
~
We kept the changes made to the input section, however, we completely scrapped and reproduced the outputs and interactions to support not one, but dynamic, next steps for different homebuyers at different stages, even buyers whose qualifications made their budgets infeasible, in an effort to help more users navigate the Zillow product ecosystem. The new calculator is slated to launch in Q2 of 2023.
.png)
bottom of page