My Challenge
Reinventing a household name through refreshed accessible UX/UI, modernized features, and extensive research to rediscover who Quicken Loans is today.
My Roles
-
Lead designer in developing an improved online experience through modernized navigation, a retention-focused account experience, engaging AI chat, and core monetization channels.
Worked closely with DEV engineers and Product managers to create a unified partnership among teams.
-
Orchestrated and organized research projects of all sizes and varying durations for the Quicken Loans brand. This included moderated and unmoderated user interviews, user behavior recordings, competitive analysis, personas, market research, and more.
Also participated and led a number of design thinking workshops, design sprints, and cross-functional collaboration in research synthesis.
-
Led strategy for our Home Purchase, Refinance, and personal loan products with the goal of transforming historical lead forms. This was accomplished through CRO, leading design thinking workshops, and mentored junior designers to refine and grow their design skills geared towards our monetization platforms.
Overview
Quicken Loans, founded in 1985, quickly became a well known name in the mortgage space. As a brand, Quicken Loans has been known for revolutionizing the mortgage space through technology that simplifies the lives of future or current home owners. As the years went on, Quicken Loans launched the first online home mortgage and refinance application in 2016: Rocket Mortgage. As of 2021 Quicken Loans and Rocket Mortgage became two separate brands, both with unique offerings and their own identity.
I began work on the Quicken Loans brand in 2020, which allowed me to have a direct hand in seeing the brand through this transition while also uncovering who Quicken Loans was almost 40 years after it was imagined.
Enhanced “Mega-Menu” Navigation
The Problem:
Quicken Loans’ legacy navigation created a gap in experiences between the authenticated and non-authenticated experiences. There was no clear way to “sign in” as this call to action was nestled under a drop down. Once a user was signed in, there was no clear path back to the core site, creating a frustrating experience for all. As it stood, users were being offered two completely different navigation menus based on their authenticated status.
The legacy navigation menu also contained long and clunky titles that limited our ability to grow our site offerings, as well as was not accessible to all users due to the sub navigation drop downs activating on hover.
Understanding User Needs
A combination of market research, user flows, competitive analysis, and usability testing was conducted to uncover opportunities of improvement. This helped reveal the following truths:
An “ecommerce” shopping experience was less threatening when looking for lending providers.
We could only unlock the true potential of our accounts experience by unifying both authenticated and non-authenticated experiences.
Robust organization was needed to organize our “Learning Center” knowledge library, which a mega-menu experience would complete.
We were missing opportunities to monetize consumers since the header only spoke to users with the goal of refinance.
The current menu was inaccessible to users using screen recorders and other assistive devices due to sub navigation only expanding on “hover”.
The Solution:
After extensive research into leading mega-menus (Nerdwallet, Ford, Nordstrom, Best Buy, etc), I designed a menu that would address the areas that the legacy menu had fallen short on:
A unified navigation experience between authenticated and non-authenticated session.
An always visible "Sign In/ Join” CTA to help improve retention and acquisition.
Sub-navigation drop-down menus that activate “on-click” instead of hover.
Optimized navigation categories and pages with clear names to better “future-proof” our navigation ribbon. This also made our desktop header shorter in height, which allowed us to pull more content above the fold.
Introduction of animation to improve interaction as well as give directional context clues.
This menu was executed across two agile teams and was launched December 2024.
Clear Definition Means Smooth Development
As with any feature, clean and concise definition helps teams move quickly. The Global Navigation project introduced functionality new to our navigation, an updated grid system to help align this new menu to the content on the page, fully functional Figma prototypes, and a centralized component library within our Quicken Loans design system.
AI-Powered Chat
My Challenge:
Not only did Quicken Loans need a modernized look and feel, but also modernized technology as well. As it currently stands, visitors to Quickenloans.com can only get assistance by emailing our customer service team and then waiting for reply over the next 2 business days. This is resulting in unnecessary friction, lost monetization opportunities, and users leaving the site to find assistance elsewhere.
The Solution:
The first ever Quicken Loans AI digital assistant was born. Through this tool we could assist our users at all business hours and immediately. We also saw these key benefits early on after launch:
Consumers were more easily able to reach any of our monetization funnels through AI chat, leading to an uptick of organic lead form traffic.
Data was able to be collected on what most asked question were, which allowed us to design better solutions to resolve points of friction or better inform our users.
Engagement and interaction on our site increased.
Users were more easily able to navigate our vast knowledge library instead of manually.
Optimizations and testing:
As with any new technology or feature, you must first teach your visitors how to interact with it. Post launch user recordings showed behavior that may indicate that users simply were unaware of what the FAB on the screen is. In response to these findings, I tested a new FAB (“mini FAB”) with a clearer call to action and icon. This led to a 9% increase in interaction.
