top of page
PageHero.png

Client
Quicken Loans

Summary
Research and design an online mortgage education center.

My Role
UX Research

UX Design

Problem Statement

Quicken Loans (QL) was very good at getting clients in the door and delivering them a mortgage solution. However, a mortgage is the largest and most confusing purchase we make as humans. To reach more users, QL needed to target self-guided education clients in order increase their overall closed loans.

Project Goals

Portfolio_Icons_Number 1.png

Build a loyal client base for all mortgage needs.

Portfolio_Icons_Number 2.png

Create self-guided and accessible mortgage content.

Portfolio_Icons_Number 3.png

Develop a new code base using the new content management system and new design system.

Portfolio_Icons_Number 4.png

Rethink the goals of quickenloans.com as a whole.

Research Methods

Portfolio_Icons_Journey Map.png

Journey Mapping

Portfolio_Icons_Sprints.png

Design Sprint

Portfolio_Icons_Personas.png

Persona Development

Portfolio_Icons_Prototype.png

Prototyping

Portfolio_Icons_Client Interviews.png

Client Interviews

PageHero.png

Design Sprint

How Might We (HMW)?

In this exercise, we identified the four ways a user would hear about Quicken Loans; organically visiting through search, being a current Quicken Loans client, a Quicken Loans team member, and a mortgage referrer. We chose to focus more on visitors to the site and QL Clients since our mortgage knowledge both traveled well with Team Members and referrers. What Quicken Loans was really missing was self-obtainable web knowledge.

These two users shared a need to get answers to a fairly linear process based on any mortgage knowledge level. That lead us to ask further:

HMW be more transparent, set expectations, and then fulfill. Rather than bait and switch (the current process)?

HMW filter content based on an established goal?

HMW provide multiple ways to display and consume information and in what format?

HMW allow people to explore hypothetical future scenarios with committing to an actual request?

0b9b72ef-2fc7-48e9-bf03-9db9f2a8bbda_rw_
e624cd2b-9265-4914-b2ef-7d0f9a88ee9a_rw_
264cbced-21d0-4a59-bcc3-75ff908ae997_rw_

Benchmarking

This is personally one of my favorite steps because it gives the group a first hand look at how the group participants feel about live solutions. The group was tasked with gathering website experiences of those doing it well and sharing it to the group. This caused the group to start to visualize and talk through why certain components and styles that may or may not work. 

These ideas were then drawn on this large sheet of paper and left up for the participants to reference when we went into sketching steps in the mortgage process.

Information Architecture

 

After determining the user path and with fresh benchmarked ideas in our head, it was time to present that user with the right information for their situation. Our team broke off into groups to sketch out steps in the mortgage process. This exercise achieved getting everyone's ideas on the table, exposing what steps in the process we missed or could combine, and got immediate feedback on what format was the most comprehendible amongst the group. 

Sketches

The next step was to take the learnings from the HMW and the information architecture to build out the ideal mortgage learning experience and vote on it.

Three of the participants sketched out a step-by-step web learning center that would surface multiple tools, checklists, benefits, search, and feedback sections to make this high level mortgage information much more consumable.

We had our design sprint solution. My team was going to build a Home Buying and Refinance guide for Quickenloans.com. We had another team working on the new CMS and another team building a design system for the company. Since the learning center was a fresh build, it allowed us to work within the handful of components that were already built in the design system, but also implement the learning center on the new CMS. So if this went well, a lot of wins for three teams.

Navigation Testing

First up, this guide needed a navigation to be able to jump from topic to topic and guide to guide. With the majority of our users seeking information on home buying and refinance as opposed to types of loans, it presented an opportunity to test a version of the navigation bringing those guides to the surface in few unique ways.

9d596e5d-1555-4c4f-99f2-3f4fa99818d3_rw_
7c8c1174-a2dd-4a28-a3ef-ebb446e25440_rw_

Test One

Using the guide as a title in the page, as navigation for the guide, and as navigation to the other guides. One dropdown to rule them all! The thought behind it was to try something new, to not build a navigation that would interfere with the primary navigation when they did merge in the future, to condense content, and increase usability.

The result was that users had a very hard time finding it. Although, it was on the top of the page, it was not a form of navigation users were used to. Once they found it, it made sense and they liked that they had access to all the topics in one space.

b364be1e-9750-4897-81e1-f0b80a885d02_rw_
bfbac6e3-02ba-452f-9056-010227aaf5aa_rw_

Test Two

Could we make it more obvious that there are more guides to increase trust and page depth? Sure. We know from small to large viewports that three tabs can fit comfortably. Let's take the two main guides and expose them to the user on page load. This was sure to let the users know that they are in an educational area. But we had already dedicated two spots to two other guides. If a user chose say the VA Guide, how would they know they are in it unless we swap content in either the purchase or the refinance tab? We did, we tested it, and it failed just to cross that idea off our list.

984fbc2d-5399-4d70-a22a-4a11185a6909_rw_

Test Three

We went back to the idea of test one. The users want to hit a navigation button and have all their options present. We learned that. Let's try that idea with icons in our navigation. We had taught the users in the table of contents and the interior pages that images were associated with each one of the steps. This idea has some merit. But what we learned is that even with icons or images, the SEO content was king in finding these pages in the first place. Jeopardizing findability for style is never good for any website you want to drive traffic to.

Taking the learnings from above of one encompassing navigation from view to view we used a hamburger menu for both small and large viewports so that the user knew they were in an experience different to that of quickenloans.com. We added an additional table of contents to not be disorienting for users that came in through the guide landing page. Lastly, we numbered the navigation steps to allow users to quickly remember what step they are on and/or if they want to pick the reading back up on a later date. A few users expressed they appreciated the numbering because it makes the process appear easier knowing they can get mortgage education in 6-steps.

Solution

After months of research, user testing, and interviews with home loan experts, the award winning guide went live. Below is a documented breakdown of the webpage by component.

Nav.png

Navigation

This component is the large viewport of the navigation solution from the testing above.

Hero.png

Hero

This component is the large viewport of the contents tiles. Worked to make sure this hero image could translate from small to large viewports seamlessly. This included using image from the table of contents page for recognition and providing a number for all steps in the process to act as chapters in a book navigation for the user. 

The main difference between that tile was labeling what guide the user was on in close proximity to the name of the step. With using a template for all the guides, we needed consistent content to specify what guide the user was on. Therefore, that label will live in that spot on all the guides.

Content_Checklist.png

Content Block

The goal of this component was to be very humanized, digestible in small chunks, and easy to reference. I worked very closely with my content team to break down the jargon into points on the page that are both easy to find and retain. 

Callout1.png

Callout

This component was specifically for our TLDR (Too Long Didn't Read) user. Utilizing it for those questions that someone might need urgently for this step in the process.

In this instance, you may have found the house and need to see it immediately before someone snatches it up from you. This component's style signifies to the user that this information is important for all steps in this guide.

Compare.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?"

ContentWithCTA.png

Checklist with Action

We wanted to indicate to users that there is lots of content to be aware of, but that there are also more learning opportunities with a content topic. 

In this component we offer digestible nuggets of knowledge and a action to take to learn more about it. It was really important that we only used this component to learn more about the topic and not send the user to a lead form prematurely in the process.

SecondaryNav.png

Navigation Variation

It is best practice to offer two ways to navigate within a page. This navigation worked best for our users that were new to the mortgage process and could keep digging further or go back a step if they needed to brush up on a topic.

This navigation was also tested numerous times with just the topic, the number and the topic, and the current version you see here. Users commented on how the Next and Previous was an immediate indicator that they would be moved back and forth one page within the experience.

FurtherReading.png

Further Reading

A common component used in the blog space, so we thought it appropriate to use here to take our user to our blog. Separating it from the content above to further indicate the the user that this is extra content related to the guide and not the actual guide.

Helpful.png

Measuring Client Feedback

This component was our solution to the, "HMW gather user feedback." The user has the option to select their preferred thumb and provide further feedback once the component expands. This was another opportunity to test some of the Qualtrics features we were looking at implementing in the other Quicken Loans domains.

c6929075405769.5c4b649093894.png

Learnings

After 90 days of being live, our page depth increased by 90%. The linear and digestible format of the guides gave clients direct paths to the information they were seeking and increased conversation by 60%. Proving that client's are more likely to purchase from a company if that company provides the right nurturing content to build their client's purchasing confidence.

But wait! There is more UX Work.

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