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
Build a loyal client base for all mortgage needs.
Create self-guided and accessible mortgage content.
Develop a new code base using the new content management system and new design system.
Rethink the goals of quickenloans.com as a whole.
Research Methods
Journey Mapping
Design Sprint
Persona Development
Prototyping
Client Interviews
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?
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.
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.
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.
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.
Navigation
This component is the large viewport of the navigation solution from the testing above.
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 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.
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
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?"
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.
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.
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.
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.
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.