Simplifying Financial Assessment: An Interactive DTI Calculator
Rocket Mortgage is a leading online platform that streamlines the mortgage process with user-friendly digital tools, offering a simplified experience for homebuyers. I collaborated with their Website and Design Systems team to enhance the platform, focusing on intuitive design and personalized user journeys to improve accessibility and engagement.
2 weeks
Me and 1 other Experience Design Intern, Design Mentor, Product Manager, Developer
We started off with a hypothesis "We believe that integrating a DTI Calculator into our storefront will result in increased customer satisfaction and improved conversion rates by providing an accessible tool for customers to calculate their DTI easily."
Understanding Our Users' Pain Points
Our analysis revealed that DTI calculation difficulties were a primary barrier to mortgage application completion. This section explores the fundamental problems we needed to solve.
Meet Bernie: A Tale of DTI Frustration
Through user research, we identified common patterns in how potential homebuyers interact with DTI calculations.
Understanding Market Solutions & Opportunities
We analyzed three major competitors in the mortgage space to understand different approaches to DTI calculation, identifying strengths, limitations, and opportunities for innovation.
I used the rose, bud, thorn method to identify the positives, aspects I'm unsure about and negatives respectively.
Our Solution Consists of 3 Essential Parts
3
I started off with ideating the functionality of the main part of the page i.e. calculator.
Iterations
We explored various design ideas and evaluated the pros and cons of each to refine and improve the design. Additionally, we conducted multiple team reviews for internal critique.
Final Design ✨
Calculator Design Explorations | Part 2- Results Card
The next step was to design the initial and final state of results cards.
Iterations
We explored various design ideas and evaluated the pros and cons of each to refine and improve the design. Additionally, we conducted multiple team reviews for internal critique.
Final Design ✨
Designing Content Sections to Help Users Understand DTI
These sections are meant to supplement the actual calculator interaction to educate users about DTI, things to consider and next steps.
Understanding DTI Section
I collaborated with content designers to refine and structure my ideas effectively. Initially, we had two separate sections—one explaining DTI and the other focusing on ways to lower it. However, after several iterations, we consolidated the content to create a more logical flow while reducing the overall textual load on the screen, all while preserving the core essence of the concept.
Popular Next Steps Section
We added a section to outline the next steps users could take to move forward in the mortgage process while also providing them with valuable information.
Frequently Asked Questions Section
We gathered the most common questions users were asking in the search bar and to our mortgage bankers and addressed them in our FAQs section.
Read Articles Section
Finally, we added a section linking relevant articles for users interested in learning more about DTI and the mortgage process. This also served as a way to encourage them to explore more of our content.
How does it all come together?
Testing Out the Design Ideas
A/B Test
Our first A/B test aims to determine whether Variant A (control), which has the toggle on displaying all debt input fields, resonates better with users compared to Variant B, where the toggle is off and only the total monthly debt input is shown.
HYPOTHESIS
Our assumption is that users prefer to view the itemization of debt toggled on as the main purpose of a DTI calculator is to help them understand their debts vs their income.
Our current calculators have a conversion rate of 7.8% with 665k unique visitors.
