ROLE & TEAM
I worked as a UX Designer alongside a cross-functional team consisting of a Product manager, a Sr. UX designer, a UX Researcher, a UX Writer, and a team of 4 developers.
TOOLS USED
Figma
TIMELINE
May - Aug 2023
WHAT I DID
I brainstormed and ideated on implementing a question wizard to help make first-time loan purchases easier. I worked on the Buy a Home, Refinance, and Learning Center Pages. I redesigned the Navigation Experience for the .com's landing page.
RESULTS
The wizard tool would help first-time loan buyers purchase loans easily. The learning center helped increase loan conversion rates by 18%. Implemented a new graphical navigation for the landing page that would increase conversion rates.
LIVE SHIPPED DESIGNS
"Buy a Home," "Refinance," and "Learning Center Pages."
TLDR
Home loan searches were overwhelming for first-time users. Users did not know what loans would be best suited for them. There was a purchase drop due to low conversions and challenging navigation. Upon initial exploration, it became apparent that the options hindered discoverability despite high conversion rates. To counter this, a redesigned graphical navigation was crafted. The wizard feature aimed to aid first-time buyers by posing simple questions and facilitating loan option selection for a smoother process.
OVERVIEW
This case study is divided into four projects I did during my internship at Rocketmortage.
Project 1 - Home Loan Wizard
The Home Loans page is one of the highest-viewed pages at Rocket Mortgages, with ~100k views in a month. This project focused on how could we improve the user experience for first-time loan buyers and increase Home Loan purchases.
FINAL SOLUTION OVERVIEW
Improved user experience
The new designs follows the new design system, with link cards and clear distinction of " Best For" labels.
Personalized home loans
Home loan searches were overwhelming for first-time users. A wizard feature was introduced with four basic questions.
Distinction between homebuyers and homeowners
Introduction of a toggle to help distinguish between homebuyers and homeowners.
Optimized user journeys
A section consisting of all home loans for informed home buyers and home owners.
Existing Design
Old Home Loan Page
Existing Problem
First-time homebuyers struggled to identify the best loan option for their needs. User research revealed confusion while navigating through multiple loans. Without guidance, users felt overwhelmed and unable to determine which product matched their situation.
Old screenshot of the home loans page
Research
Major Findings &
Insights
Based on the usability tests and follow-up interviews carried out by the user research team, these were the most pressing issues that needed to be addressed
01
Difficulty discovering relevant loans
User interviews and research showed that many first-time buyers struggled to locate loans suited to their situation among the vast options.
02
Overwhelmed by too many choices
Feedback indicated an intimidating number of loan products presented simultaneously. This information overload left users more uncertain about what would fit their needs
03
Limited guidance for loan fit
buyers wanted more personalized assistance in understanding loans. Many expressed frustration around a lack of guidance to find the best match for their financial profile.
04
No clear pathway to loan selection
Site analytics revealed high drop-off rates on loan option pages. Without predefined next steps or recommended flows, users struggled to know how to evaluate loans.
New Design
The Wizard Feature
Personalized loans
The Wizard feature guides users to personalized loan recommendations using four simple questions. This aids first-time homebuyers and existing homeowners in identifying the best product match for their financial situation and goals
Insights
Usability Test
Results & Findings
A/B tests were carried out with 10 participants who were in the process of buying home loans. The wizard feature had a few wins, and some aspects were not working out.
The Wins
01
"This approach was more comprehensive and personal.
02
"I liked the Apply Now and Learn More feature it would help me learn more about the loan I like in detail"
03
"Felt like a handheld process and I was comfortable seeing a range for credit scores."
The Things That Did Not Work Well
01
"How do I check the selections I make? Do I start over all again?"
02
" I would want to filter and see other loan options just to explore what Rocket offers"
Project 2 - Learning Center
Problem
The Rocket Mortgage Learning Center had the most website traffic, with 80% of first-time home buyers reading the articles. However, a substantial gap between article views and leads generated needed improvement.
Outcome
Introducing a right-hand rail and CTA between articles prompted users to actively check loan rates and qualifications, considerably increasing visit-to-lead rates by 18.22%. In one week of the MVP implementation, leads increased by 200.
Insights
Major Findings &
Uncovered Insights
01
How to engage users
Despite 50K article views, lead rates were only 2.12%. Analysis showed users not taking action post-reading. High traffic presented a major opportunity to optimize flows and maximize conversion potential.
Based on the data, there was a drop in visit-to-lead rates. It was found that users read the articles and don't sign up for loans or take action to check loan eligibility, rates, calculators,etc.
02
How to provide quick resources
User interviews revealed the need for quick resources within articles to enable immediate action rather than losing engagement searching elsewhere. With heavy mobile traffic, users wanted readily available actions.
03
How to incorporate existing lead generation forms
Feedback showed demand for quick lead conversion within articles to capture motivated users. Strategically embedding streamlined lead generation taps engagement, converting potential.
Existing Design
Old Learning Center
Problem
What was Wrong?
Problem Overview
Analysis revealed that users were consuming content but not taking key actions like signing up for loan information, checking rates, using mortgage calculators, or pre-qualifying.
The pages consisted of text content without clear calls-to-action or lead-gen integration beyond small links at the bottom. Users had to navigate away from the article and hunt for information on the next steps. This failed to capture user intent when motivation peaked during reading.
Impact
Data & Metrics
Impact through design
1K+
increase in article visits after the new design
To test the new concept, visit-to-lead rates were calculated over 1-week post-deployment using the most popular article. This contained approach provided actionable data on the impact of changes in a controlled experiment.
200+
increase in leads for loan purchases and registrations
18.22%
lift in visit-to-lead rates after implementation
Project 3 - Navigation Redesign
Problem
Despite being among the most viewed and transactional revenue-driving pages, key sections like calculators and loan options were buried in the footer and learning center, hidden from the main navigation. This made it difficult for users to find these highly engaged pages.
Outcome
The redesigned MVP launched September 2023, driving appreciable lead growth projected to increase 15.8% monthly through enhanced conversion. Early testing showed positive traction across key metrics. With continuous optimization, gains are expected to increase over the coming months.
Scenario
Problem
Let's go through a scenario
After auditing the landing page for both mobile and desktop, a critical navigation issue became evident. To effectively communicate this problem to our key stakeholders, I've developed a storyboard focusing on resolving this key concern.
Problem
Major Findings &
Deep dive into the problem
Insights revealed that users dropped off before checking loan options and calculators. Users had to put much effort into finding these options and were generally frustrated. There was a massive drop in click rates.
Solution
New Navigation
Reimagining the navigation
Following successful tests, a new icon navigation for mobile and desktop was launched as an MVP on the home page this September. The loan and calculator options were added, and this increased conversion rates for loans
Icons were incorporated to provide visual clarity, utilizing the same icon set used site-wide to maintain a consistent visual language and improve usability.
Solution
Mobile Navigation
Reimaging the navigation
Insights revealed that users dropped off before checking loan options and calculators. Users had to put much effort into finding these options and were generally frustrated. There was a massive drop in click rates.
Enhanched mobile experience
Icon nav optimized for taps on small screens. A simplified visual menu improves usability on mobile devices.
Streamlined navigation
Concise icon-based main menu pares down choices for simpler navigation. Prioritizes key pages and removes clutter to optimize user flows
Improved findability
Icons allow faster scanning to find pages needed. Users can spot icons for pages like Calculators and Talk To Us.
Aligned visual language
Cohesive experience with unified iconography used throughout. Consistent icons establish a clear site-wide visual language.
Impact
Data & Metrics
Impact through design
7K+
increase in traffic rates for loan options and calculators page
The redesigned navigation system was implemented in early September. While actual metrics are still incoming, predictive models indicate that the new navigation should yield improved user engagement and conversion
15.8%
increase in organic vist-to-leads per month
70%
projected annual growth increase
Design
Mobile Design
Redesigning the mobile flow
The dead clicks and broken navigation at some places were the reasons for redesigning the entire mobile flow by changing the navigation and important screens since data showed 80% of the traffic was through mobile phones.
Project 3 - Home Page Redesign
Home Page Redesign
Shipped Designs
I redesigned the "Buy a Home," "Refinance," "Talk to Us," and "Unsupported Browser" webpages, which were not aligned with the Rocket Mortgage Design System. I completely redesigned the home pages for consistency and compliance with the established Design System.
REFLECTION
Things I learned.
Working with the Design System
I learned the importance of adhering to the company's Design System. I maintained visual consistency and enhanced the user experience by ensuring new designs aligned with established guidelines.
Driving Impact through Design
By redesigning key site pages to achieve product and conversion goals, this internship let me directly see how design impacts business success. Improved metrics post-launch demonstrated that focusing on user experience and data conversations drives tangible impact.
Embracing Ambiguity and Collaboration
I strengthened my comfort with ambiguity by proactively seeking input from others. Discussing tentative ideas with content strategists and researchers enabled me to advance designs despite unknowns. I learned the power of collaboration. Asking questions and thinking aloud with partners led to stronger solutions.
Aligning Business Goals and Design
I now better understand how to bridge business goals with user-focused design. I could identify pain points and opportunities by gathering requirements from multiple stakeholders. My designs aimed to address objectives while solving customer needs. These projects sharpened my skills in synthesizing complex needs into intuitive experiences.
Let's work together.
