Grace
Wu

Tomo Affordability Calculator

The Affordability Calculator is an educational tool on Tomo’s public website that helps early stage home buyers understand how much home they can afford and how much to set aside for closing costs.

Intro

Problem

One of the main issues the Affordability Calculator aimed to solve was the lack of understanding early-stage home buyers had about their budget when it comes to what they can actually afford. Not knowing their price range leads to wasted efforts and time for the buyer (and buyer’s agent) in searching and touring homes that are ultimately unaffordable.


Goal

Giving early-stage customers an affordablity calculator gets them excited about homes they can qualify for and more understanding on their budget and costs associated with owning a home. This is also helpful information for the agent showing homes to the customer and builds trust for Tomo as a knowledgeable source.


My Role

On this 2-week project, I spent 2-3 days focusing on product design, information architecture, and branding. I collaborated closely with the UX designer along with a small team of a product manager, data engineer, engineers, and loan advisors.

Design

We researched, designed, and engineered swiftly in order to launch a MVP in 2 weeks. We synced daily to gather feedback from our loan advisor and pre-approval advisor whom both interact with customers on a daily basis to gain user insight. We asked them  about common questions that early-stage home buyers are most confused about, and ways we could make this tool fun and interactive.


Brainstorm

As a team, we brainstormed “How Might We”s on customer problems and priorities while keeping in mind the competitors research findings that our UX designer conducted.


Themes from competitors assessment:

• No clear calculator winner (NerdWallet, Smart Asset, Freddie Mac, Better) but all participants wanting to use calculators like this for their next move.

• Monthly payment is a key driver of understanding and building confidence in what is affordable.

• When asked what they’d want to do next after the affordability calculator, it was a split between some participants wanting to get a pre-approved, and some participants wanting to go research homes and/or find and agent.

• More guidance around affordability

• More trusted source for what’s the smart choice rather than what’s the maximum amount they can afford 

HMWs (“How Might We”s):

• HMW determine the simplest inputs required for affordability? (4)

• “HMW allow customers to easily move past the affordability calculator into their next goal?” (6)
  

• “HMW provide the minimum viable value that they need for a calculator so that we can ship something in a few days?” (8)
  
  
• “HMW make this feel like a fun exercise in possibility instead of a homework assignment?” (5)
  
  
• “HMW learn how much a customer is comfortable putting down?” (4)

• “HMW show a breakdown of costs in a quick view / low-confusion way?” (4)

• “HMW avoid under/over promising so that there’s confidence in the ranges output?” (3)

Sketches & Wireframes

^{Early sketches + wireframes from UX designer}

Visual Design

For our price range calculator, we wanted to give customers a breakdown of their estimated closing costs, monthly payment, and rate by entering household income, down payment, monthly debt payments, and credit score.

After discussing with the team which key pieces to keep, evolve, or ditch from the initial wireframes, I finalized the design for MVP while keeping in mind:

• Monthly obligations: We need to ask for monthly debts, but how do we make it clear to home buyers what to input?
• “Default” inputs: Can we move credit score to a “default” value to minimize lag for the customer? Will evolve this for customization in future state.
• Ranges of affordability: What are the ranges we need to define? 
• Costs + showing a rate: How can we be clear about cost estimates and how rate is an input?

Results

After launching, the Affordability Calculator quickly became a handy tool adopted by our pre-approval advisors who speak to homebuyers and use it as a visual aid for homebuyers to understand the numbers. As customers adjust the home price, they are able to see the home price decrease and monthly decrease, and vice versa. 

• This page positively impacted customers’ experience with Tomo, and we were able to demonstrate our core value of omotenashi (hospitality in service of customers).
• This page became the second highest keyword for organic SEO.
  

As an additional update we made three months later, we added the feature to be able to download a customer’s personal Affordability report from the calculator webpage, which they can then bring to open houses or home tours. Previously, the only CTA was to get pre-approved, which can feel like a big step to customers, so giving them an interim step helps us understand their goals and puts them into a nurture campaign.

Clicking on "Download report" leads to a contact capture pop-up

Downloaded personal PDF