top of page
IMG_8859_edited.jpg

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

Portfolio_Icons_Number 1.png
Build a loyal client base for all mortgage needs.
Portfolio_Icons_Number 2.png
Create new tools to increase mortgage confidence.
Portfolio_Icons_Number 3.png
Learn the best process to test content quicker.
Portfolio_Icons_Number 4.png
Decrease bounce rate from high traffic pages.

Research Methods

Portfolio_Icons_Journey Map.png
Journey Mapping
Portfolio_Icons_Personas.png
Persona Development
Portfolio_Icons_Sprints.png
Design Sprint
Portfolio_Icons_Prototype.png
Prototyping
Portfolio_Icons_Client Interviews.png
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.

A smartphone displaying the Rocket Mortgage by Quicken Loans app is centered between two text sections.
Home_2.png

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.

Guides.png
Guides.png

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.

Calculators.png
Calculators.png

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.png
Rates.png

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.png
Apply.png

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

Screen Shot 2019-11-19 at 7.28.55 PM.png

Navigation

Tested the previous navigation with dropdown arrows vs this option relying on negative space to visually separate it from the marketing content.

Screen Shot 2019-11-19 at 7.40.37 PM.png

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.

Screen Shot 2019-11-19 at 7.36.29 PM.png

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.

Screen Shot 2019-11-19 at 7.39.47 PM.png

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.

Screen Shot 2019-11-19 at 9.20.33 PM.png

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.

03fdd2df-33a6-4141-929f-c44ba6d29ad9_rw_

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.

966c6a2f-6b1e-42a8-967f-b1d2d5a8c360_rw_

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.

8c5950de-51cd-477d-b775-c39d60ab40e6_rw_

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

Screen Shot 2019-11-19 at 8.51.48 PM.png

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.

Screen Shot 2019-11-19 at 8.52.06 PM.png

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. 

7dfec598-dd53-408a-bcbf-f5ac29ddbc55_rw_

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. 

Screen Shot 2019-11-19 at 8.52.25 PM.png

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. 

d338f6a3-9c50-4fc0-a51f-1326a402aed1_rw_
d338f6a3-9c50-4fc0-a51f-1326a402aed1_rw_
d338f6a3-9c50-4fc0-a51f-1326a402aed1_rw_

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

Mortgage_Calculator.png
Refinance_Calculator.png

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.

But wait! There is more UX Work.

Screen%20Shot%202020-05-29%20at%201.30_e
Honeywell
Website Merge
PageHero.png
Confidence
Center
Screenshot 2023-07-24 at 10.32.59 AM.png
StoryJam
Website
Hero.jpg
Chevrolet
MyLink
bottom of page