Client
Quicken Loans
Summary
Find UX opportunities across quickenloans.com
My Role
UX Research
UX Design
UI Design
Problem Statement
Quicken Loans had been neglected for sometime. Using our web analytics data in tandem with our research, our team identified various pages to create robust content to lead users further down the funnel.
Project Goals
Build a loyal client base for all mortgage needs.
Create new tools to increase mortgage confidence.
Learn the best process to test content quicker.
Decrease bounce rate from high traffic pages.
Research Methods
Journey Mapping
Persona Development
Design Sprint
Prototyping
Client Interviews
Design Jam
Early Sketches
Initial sketches focusing on the sky is the limit with two main clients and the tools they would want immediate access to:
A client that has bought a house before, is familiar with the process, and wants to buy another home or refinance.
A client that has never bought or refinanced a home and is interested in learning more about the process before speaking with a banker or going doing it all online with Rocket Mortgage.
Hero Sketches
The current marketing campaign had to be present on load. This provided instant brand recognition to those users that may have seen Rocket Mortgage advertising.
The hierarchy then focused on refinance because our research showed that these clients are ready to go and only needed to be presented with our three different ways to refinance.
The home buying audience was much trickier since they needed much more nurturing. We surfaced our top home buying tools for this audience to start based on their mortgage knowledge.
Guide Sketches
Style one was an opportunity to use the existing imagery and the existing color of the guides in marriage with the the new icon style and new typeface incorporated within the component.
Style two took more of a refresh approach with the centered headers, introduction of black buttons, and how the component can evolve as more guides get added to the website.
Calculator Sketches
Style one displayed what the header can look like in a tools format. Using contrast to indicate to the user that the tabs control the information on the right.
Style two reintroducing the icon and left justification to indicate to the eye that the tabs are to be interacted with first and then the form.
Rates Sketches
Style one displayed how the business could handle showing more than just five mortgage rates throughout the site.
Style two was a way to only show five rates, but also add depth and focus on a component that drives the most traffic to our site.
Apply and Sign In Sketches
Added the rocket integration for both potential and current clients. This was huge since no where on the site did we combine an easy way to get to both. Stylistically, just change the button shape for the top version
Style one kept the buttons the same since they we part of the same component.
Style two changed the color to emphasize that one side of the component was a primary action and that the other side was secondary for the business.
After the team pitched our round of sketches, we narrowed down to a blend of new components and existing components to live test. Below is the solution that tested the best for highest page depth and conversion for users.
Solution
Navigation
Tested the previous navigation with dropdown arrows vs this option relying on negative space to visually separate it from the marketing content.
Hero Component
Space designated for the latest marketing for brand recognition. With relentless testing of static images vs static images, static images vs videos, videos vs cinemagraphs, our highest converting media component was cinemagraphs with two buttons outside of the media.
Card Component
This space was designated for our highest visited content to provide clients quick access to our tools. This was an opportunity to hint at our future brand styling that was in process during this rebuild.
Promo Board Component
Our educational content had built the trust of our users showcasing the highest page depth that lead to better leads. Knowing this, marketing produced a campaign geared towards educating clients on mortgage terms. This multi-video series served as another successful avenue to get clients to trust us with their mortgage needs.
Compare
The compare component pretty much drew itself because this entire process is about the user's situation and choices along the way. But it also allowed us to introduce content in different ways that needed to be known before the next step.
In this example, one of the very first questions that a user asks is, "What are the pros and cons of renting and owning or building or buying?"
Mortgage Rates
As our page with the highest traffic and highest bounce rate, it was really important to breakdown what we were not providing to visitors. Since the page only had a dated rates table on it. It was obvious that we needed to provide more educational content and tools for these visitors to engage with.
This page was very sketch heavy. We tested layouts, functionality, and placement of components that would also translate to mobile environments better than the everyday table.
Expander with Icons
This sketch was a play on how minimal could the style of this component be with keeping all the rates above the fold.
In testing, users did not understand the plus sign icon as an expanding element. The majority thought the icon was a decorative and were not completely sure they could interact with the icon.
Expander with Content Content
This sketch took the above component further with color to define the static and clickable areas. Swapped out the icon for a label to reveal to the user that there was more information to their preferred loan.
In testing, it still took a minute for users to reveal the information. Once the information was found, users were delighted to find more information about the loan and an action within to get a more realistic rate.
Cards with Expander
Calling this component, The Wild Card. Taking what we learned from the previous layouts, it was an opportunity to try another component with different hierarchy and humanized copy.
In testing, it held up well, but we were still hiding crucial information on a sparse page. Our minds next went to how do we reveal this information to keep users from bouncing?
After months of testing and consulting with banking and marketing on product launches driven by the rate climate we came up with the following rates page solution.
Solution
Rates Component
In this component, the cards provide a clear rate, product type, and brief description to educate our clients further about the featured product.
Tools
We also discovered that these visitors next steps would be to seek a more personalized rate, so we added a calculator action component to engage these clients further.
Content
Remember, this use to be the highest traffic page with the most amount of bounces. Not anymore. Since adding content that educates the users further on rates and our other product offerings, our page depth has increased x96.
Navigation
This component was made for another way to convert within the page. We for sure thought it would live higher on the page knowing the amount of experienced mortgage users coming to this page.
We tested this components placement throughout our higher traffic pages to gain insight on where it should live on the page. Even with higher traffic pages like this, users were likely to spend more time with the content before they were ready to pull the trigger on a mortgage.
Mortgage Calculator
At the time, the calculator only provided one function. It calculated a refinance, a purchase, a home affordability, and a amortization estimate to potential clients without a clear path of what to do next. We saw this as an opportunity to test a handful of CTA copy and CTA placement to these audiences to move them further down the process.
Calculator Sketches
At this point in our testing, we knew our pages lacked content for the next step after using all of our tools. To make sure we got the content and the location of the content correctly, we ran live tests on quickenloans.com to determine this for both purchase and refinance users.
From this test, we confirmed that refinance clients are more likely to get started with the mortgage process since they have been through it before. Whereas, our home buying clients need a little more education on what their results mean for them. Therefore, we send them to our home buying guide to make them feel more confident about the home buying process.
Solution
Learnings
These series of feature tests got our team in the habit of identifying problem areas on the site, producing prototypes faster, and getting results quicker. We were just learning faster overall. Because of this, we were able to build more tools and content that users were ultimately seeking.