Rocket Mortgage
Context
Overview
At Rocket Mortgage, I led the end-to-end UX/UI design and AI training for SmartLiv—a 24/7 virtual assistant designed to simplify home and loan research.
My Role:
UIUX Designer, AI Trainer
Teammates:
Project Manager, Product Manager, Conversational Designers, Engineers, Content Designers, UX Researchers
Timeline:
3 months: Jun 2023 - Aug 2023
Status:
0-1 Project; Launch Soon
Impact
Automate 72% non-lead generation tasks
We exceeded our product goal by automating 80% of non-lead generation tasks, resulting in a potential 44% reduction in agent labor costs.
80% User Satisfaction Rate
We achieved a 80% user satisfaction rate during usability testing, with most users expressing excitement to use our new AI Chatbot.
Company & The Team
The Company
Rocket Mortgage is the largest online mortgage company in the US.
The Team
I worked at Rocket's Conversational Design team, which creates over 60% lead generation.
The Project
Design an AI-powered chatbot for Rocket Learning Center.
Rocket can reduce millions (exact figure confidential) in yearly agent labor costs.
Reduce annual agent labor costs.
A simpler, more intuitive, and effortless home research experience.
Build an AI chatbot for Rocket Learning Center that Automates 70% of home research tasks.
Target Users
The first step was to find out who are our target users. Through research, we found that our primary users are first-time homebuyers.
75% of the Learning Center’s users are first-time home buyers.
75%
First time home buyers
25%
Repetitive home buyers
First-time home buyers typically go through a five-stage journey when buying a home, and Learning Center's users are in the early stages and using it for home and loan research.
Learning Center's First Time Home Buyers are using Learning Center for home-buying research.
Among first-time homebuyers, we identified three main user personas:
Three Personas
Independent FTHB: Financially independent and prefer to research on their own.
Determined FTHB: Financially stable and have already made concrete plans to purchase their first home.
Aspiring FTHB: Eager to buy but not yet financially ready, seeking guidance and resources to improve their financial profile.
Problem I
Irena (Independent FTHBs) doesn’t know where or how to start the home-buying research.
Since these users are still in the early stage of considering buying a home, their research mainly focuses on understanding the whole process.
Most of them need to start learning the whole thing from scratch.
The problem here is that they don’t even know where to begin their learning journey.
Solutions for Problem I
We designed a feature called "Offer Estimation"
Ultimately, I discovered the most practical solution: guiding users to work backward from their loan offers.
By allowing users to preview the details of their offer upfront, they can use that information to reverse-engineer the type of research they need to focus on, making their journey more efficient and goal-oriented.
Guide users to work backward from their loan offers.
Step 1: Financial Assessment
The first step for users is to perform a financial assessment.
I added an “Estimate Offer” prompt on the chatbot’s homepage.
When users click through the prompt, they enter a guided conversation where they answer about 10–13 questions related to their financial profile.
Step 2: Estimated Offers
Once complete the questions, they'll receive a tailored estimated offer.
Iterations for user financial assessment
How can we ask our users questions more effectively? Survey or Interactive QnA?
What I’ve shown so far is just a high-level overview of our final design. In reality, we went through multiple iterations to get there.
For example, in the initial step where users answer 10–13 questions about their financial profile, we had to figure out the best approach: Should it feel like a survey, or interactive Q&A format?
The survey allows users to make direct changes to their answers
Interactive QnA aligns better with the chatbot interaction logic
User Testing
It was difficult to choose between the two, so I conducted user testing with both options.
More users preferred the interactive Q&A. So we decided to go with it.
Iterations for offer presentation
How should we present the user’s multiple offers?
Users don’t just get one loan offer. Different loan terms and types create different amounts—so we need a clear, straightforward way to display them. For example, a 20-year FHA loan can look very different from a 30-year one, and the user should be able to easily compare them.
30-year FHA Loan
20-year FHA Loan
Proposal I
List all possible options
The first proposal was to display all possible offers to the user.
However, this approach doesn’t align with one of the key principles of conversational design—progressive disclosure.
Showing too much information at once can overwhelm the user and increase cognitive load.
Does not follow progressive disclosure
Proposal II
Add a chip for users to make selections
The second design solution was to add a chip that allowed users to select different options directly.
However, the downside of this solution is that users can only see one offer at a time, making it difficult for them to compare the differences between multiple offers at a glance.
Users are unable to make comparisons
Proposal III
Combining the first 2 proposals
We displayed two offer cards while allowing users to select different options.
Users are unable to make comparisons
Users can make a selection
Problem II
Donna (Determined FTHBs) needs to learn more detailed information to help them make a decision.
For users like Donna, their research tends to focus on more specific details to help them decide. For example, they want to know how much a house they can afford and what the most cost-effective way to purchase a home is.
Users are using calculators and rate checkers.
Solutions for Problem II
We integrated Mortgage Calculators directly into the chatbot.
We decided to integrate both tools directly into the chatbot’s interface. Now I’d like to showcase our approach to designing the calculators.
User Flows for Calculators
Step 1: Select a calculator
First, when users select the calculator from the left menu, they’re taken directly to a set of four primary calculators.
Here, I’d like to focus on the most commonly used one—and the one I designed—the Home Affordability Calculator.
Step 2. Enter the necessary data for calculation
With the Home Affordability Calculator, users enter details like the home’s address, their annual income, and their planned down payment.
The calculator then provides guidance on how much home they can afford, their estimated monthly payments, and how much of their budget remains.
How does the calculator work?
The calculator works like this: it relies on the Debt-to-Income (DTI) ratio, along with other user-provided information, to determine affordability.
DTI is a user’s total debt divided by total income, expressed as a value less than 1. The higher that ratio, the more debt the user carries relative to their income.
I initially designed the Home Affordability Calculator to use a DTI of 34% as the parameter, as it's the most recommended rate for first-time home buyers.
A little problem
However, 34% is not a One-Size-Fits-All Approach
Users can adjust the DTI by moving the slider, allowing them to see the range of home prices they can afford, along with their monthly payments and remaining budget.
Different users have different acceptable DTI ranges
Iterations
I added a slider feature to address users' needs
Users can adjust the DTI by moving the slider, allowing them to see the range of home prices they can afford, along with their monthly payments and remaining budget.
Problem III
May (Aspiring FTHB) is working hard to find more reachable loan programs.
May’s biggest challenge is that her financial situation makes it tough to purchase a home.
She’s already tried applying for multiple loans, only to face rejection.
At this point, her main focus is identifying the most affordable and cost-effective loan programs available.
Solutions for Problem III
Loan Comparison Program
My solution for May is straightforward: provide them with a loan program comparison tool.
User Flows for Loan Comparison
Step 1: Click on the prompt to start the conversation.
I added a prompt at the conversation homepage, then we begin by asking users 3–5 brief questions to pinpoint their specific loan needs.
Step 2: Receive a loan program comparison
Then we present loan programs tailored to their unique financial situation.
Information Restructure
I worked with the content designer to restructure the loan program information.
I handled the layout while the content designer focused on the text. Together, we created a version that was much clearer and easier to understand than the original.
From user research, we found that users are primarily interested in three aspects: requirements, pros, and cons so we highlighted the three parts.
Before
After
AI Training
AI Risks
It doesn’t follow Rocket’s Voice and Tone
Our company has a specific voice and tone designed for our brand.
All of our agents are trained to use inclusive and encouraging tone when interacting with our customers.
We were concerned that the AI might not be able to maintain this standard.
It may generate inaccurate answers
While AI is intelligent, it can still make mistakes. Given that we’re a financial firm, it's critical to avoid providing incorrect answers.
What I did?
Train the chatbot with selected resources
Our Learning Center has a large collection of articles. I carefully selected the most relevant, professional, and accurate ones to train our AI chatbot.
Wrote prompts guidance to train AI
I wrote AI training prompts based on our voice and tone guidelines and established a guidance for how to create these prompts.
Establish Response Rules
Finally, we established Rejection Rules: the AI would only answer questions about financial, home-buying, and mortgages related topics.
Result
It achieved 95% AI precision
It passed out Voice & Tone test
SmartLiv accurately provided the minimum application requirements for Rocket’s FHA loan.
SmartLiv first offers an empathetic response before providing an answer
