Design by Lizz | Quicken Loans

My Role:

Lead Product Designer, UX Researcher, and Strategist

My Team:

Additional Product Designers (3- 5), DEV agile teams (4), Product Managers (3)

Timeframe:

2023 - 2025

My Challenge:

I was tasked with contributing to the brand’s modern visual refresh across all touch points, and helping in the establishment of first ever Quicken Loans. I was also charged with imagining, designing, and prototyping new and exciting features that added value to the brand while improving SEO, conversion, and revenue.

Two mobile phones showing the Quicken Loan website. The mobile device in the foreground is showing the Quicken Loans AI chat experience, which the device in the back ground is showing the Quicken Loans website navigation.

Creating and evolving a design system

KPI Result Primary:

65% improvement in time-to-market

Secondary Result:

Brand/UI/UX consistency

My Role:

Product Designer (contributor), working in a team of 4 other designers and one Design System lead.

The problem: The bespoke variance in designs added scope and time to overall production efforts—slowing down development and speed of prototyping, all while creating a disjoined brand experience.

Enter “Nest”: Quicken Loans’ first design system.

To modernize and align Quicken Loans, my team created Nest—the brand’s inaugural design system. This atomic system delivered:

De-cluttered atomics: After a brand audit, we built our documentation only around the components currently in-use, keeping the design system lean and uncomplicated.

Design Efficiency: Enabled rapid, high-quality design creation without compromising standards.

Brand Evolution: Strategically incorporated signature "brand red" while avoiding negative "danger/warning" associations.

Cross-Team Alignment: Improved designer-engineer collaboration through comprehensive documentation and shared Storybook component libraries across all agile teams.

Nest established the foundation for scalable, consistent user experiences while streamlining internal workflows.

Caption: Brand color primitives and tokens.

Caption: Variants, sizing, and placement for “floating action button” (FAB)

Caption: Complete documentation for “Global Navigation” feature: Variants, usage, atomics, and animation.

an example of the Quicken Loans design system showing the documentation for the website navigation component.

AI “Quicken Loans Assistant” chat

KPI Result Primary:

+16% lead quality

Secondary Result:

+300% engagement

My Role:

Lead Product Designer, within one cross-functional engineering team from August 2024 to December 2024.

The problem: Engagement on the Quicken Loans website needed to be improved in-addition to growing organic lead form traffic. Research shows user had questions preventing them from monetizing, and we needed provide them answers in low friction manner.

Rapid prototyping with an SDK.

An open-source SDK to accelerate development, preventing our design and engineering teams from building from scratch. After removing irrelevant components, I created a lean, focused library specifically for AI interactions—customized to align with Quicken Loans' brand identity and Nest design system standards.

Caption: Nest documentation for the “Global Navigation” feature, motion behavior, & atomics.

An example of the modified "software development kit" showing the chat window as well as theme colors.

Establishing the user flows and prompt logic.

With chat being novel for Quicken Loans, integrating AI created unprecedented complexity. I mapped comprehensive user journeys covering all possible chat scenarios and outcomes to ensure team alignment. These flows included detailed prompt logic, illustrating how the AI agent would handle and learn from each interaction, establishing clear guidelines for this unexplored feature set.

Caption: Prompting logic and user flow defined for the Quicken Loans Digital Assistant.

a detailed user flow of the AI chat experience, including prompting logic.

Launching and learning.

Deployment showed modest site-wide engagement increases, but AI chat adoption remained under 1%. However, users who engaged with the Digital Assistant before reaching lead forms were 11% more likely to start mortgage applications after lender matching. The data revealed a clear opportunity: dramatically increasing AI chat interactions could capitalize on significantly higher lead quality and conversion rates.

Caption: A motion prototype of the first ever Quicken Loans Digital Assistant.

Fine tuning through testing.

User recordings revealed confusion about the chat FAB's purpose. Competitive research showed successful AI chat implementations used clearer CTAs. Testing a new "Ask Chat" FAB against the control generated a 300% increase in user engagement, proving clarity drives adoption.

Winning Challenger

Control

Mega menu navigation

Primary Result:

Multi-platform unification

Secondary Result:

Improved retention and lead flow

My Role:

Lead Product Designer, working with two cross-functional teams. July 2024-July 2025.

The problem: The 3 platforms that made up the Quicken Loans website were not connected by navigation—creating high friction and pitfalls for users. In addition, outdated design and a poor site map representation ignored user priorities.

Before: Legacy Navigation

After: Mega Menu Navigation

Navigation optimized, accessible, and unified.

By creating a more modern “mega menu” experience:

Users were now able to navigate between all three platforms of the Quicken Loans website.

Our account sign-ups improve significantly, which improve our remarketing and engagement efforts.

Trimmed down navigation categories could help keep user attention in the places it mattered while reducing cognitive load.

Users were no longer “trapped” once they entered the account web application.

Caption: The user journey from the home page, through the authenicated account web application, and back again.

Monetization seen everywhere.

One year post-launch, we implemented endemic advertisements to capitalize on hundreds of thousands of monthly organic visitors. This drove cost-efficient traffic to lead forms while improving solution discoverability across the entire website.

Caption: The user journey from the home page, through the authenicated account web application, and back again.

Mortgage amortization calculator

Result:

Improved accessibility, usability, SEO and overall value

My Role:

Lead Product Designer working in one cross-functional engineering team. March 2025-Present.

The problem: Users spent long periods of time on this calculator but rarely converted. SEO performance ranked the tool at position 42 on Google —leaving us significantly behind competitor calculators, limiting organic discovery, and compounding conversion challenges.

Finding the missing value.

Research revealed we were failing 1.1 million consumers who rely on mortgage amortization calculators: first-time home buyers. Key findings included:

User behavior patterns

50%+ of amortization calculator users immediately visited the mortgage payment calculator, indicating missing critical data points.

93% of these users then researched "pre-approval letter" content, which is classic first-time buyer behavior.

Competitive & technical gaps:

Competitors integrated monthly payments with down payment considerations directly in amortization outputs; ours didn't.

All Quicken Loans calculators suffered poor page performance, damaging SEO rankings.

New inputs, new outputs.

Filter Improvements:

New “sticky” behvavior added, which followed users as they explored their amortization schedule. This reduced the need to scroll back up to the top of the page to make adjustments.

All fields are now pre-populated by default to give users a positive starting point instead of starting from scratch.

Input Field Optimization:

Removed non-essential "State" field (not used in calculations).

An accessible “start date” field, combining date picker and number input, to make this calculator useable by all users, not just those who were starting a mortgage in the next month or had an established loan.

Auto-populated "Rate" field with daily dynamic mortgage rates based on specified terms.

Added flexible "Down Payment" field accepting exact amounts or estimated percentages.

Purchase Price

456,000

Down Payment

40,000

Percent Down

20 %

Loan Terms

Loan Start Date

05/2025

Interest Rate

6.52%

Update

Visualizations that simplify data.

Interactive chart visualizes payment changes over time on page load, improving accessibility for visual learners and users with dyscalculia (number processing disorders).

Relocated "Pay Off" schedule to separate tab within visualization block, improving performance by removing large charts from initial content paint.

Added expandable year sections in amortization table, allowing users to focus on specific monthly data without overwhelming interface.

Before: Legacy calculator

an image of the pre-modernized calculator

After: Refreshed Amortization Calculator

In conclusion

Quicken Loans, re-invented in the modern era.

In a saturated mortgage marketplace, Quicken Loans evolved from a transactional "monetization-only" lead generator into a comprehensive financial empowerment platform that Americans genuinely trust and value.

Expanding market reach: We successfully broadened Quicken Loans' audience beyond its traditional demographic, connecting with previously untapped market segments through inclusive design and modern digital experiences. This strategic shift positioned the brand to capture a larger share of the mortgage market while serving diverse user needs.

Rebuilding consumer trust: Trust restoration became our foundation through deliberate design decisions: implementing clear, intuitive UI patterns; establishing a unified brand voice across all touchpoints; eliminating manipulative dark patterns; and setting realistic user expectations. These changes directly addressed the transparency issues that had damaged consumer confidence.

Universal accessibility & value: Our tools now serve users of all ability levels, incorporating accessibility standards that welcome everyone rather than excluding segments of potential customers. Visual learners, users with dyscalculia, and those requiring assistive technologies can now successfully navigate mortgage calculations and decisions. The enhanced calculator suite provides genuine value beyond lead capture, helping users make informed financial decisions.

Measurable impact: The transformation delivered concrete results: 300% increased engagement with AI chat features, 11% higher conversion rates from assisted users, and improved SEO performance that expanded organic reach. Users now spend meaningful time with our tools because they provide authentic value.

Continuing evolution: While significant progress has been achieved, this transformation represents the beginning of Quicken Loans' evolution into a truly user-centered financial services brand. The foundation for trust, accessibility, and value creation is established—positioning the company for continued growth and positive user impact.

The journey from transactional tool to trusted financial partner demonstrates how thoughtful Product design can fundamentally reshape brand perception and business outcomes.

My Role:

Lead Product Designer, UX Researcher, and Strategist

My Team:

Additional Product Designers (3- 5), DEV agile teams (4), Product Managers (3)

Timeframe:

2023 - 2025

My Challenge:

Creating and evolving a design system

KPI Result Primary:

65% improvement in time-to-market

Secondary Result:

Brand/UI/UX consistency

My Role:

Product Designer (contributor), working in a team of 4 other designers and one Design System lead.

The problem: The bespoke variance in designs added scope and time to overall production efforts—slowing down development and speed of prototyping, all while creating a disjoined brand experience.

Enter “Nest”: Quicken Loans’ first design system.

To modernize and align Quicken Loans, my team created Nest—the brand’s inaugural design system. This atomic system delivered:

De-cluttered atomics: After a brand audit, we built our documentation only around the components currently in-use, keeping the design system lean and uncomplicated.

Design Efficiency: Enabled rapid, high-quality design creation without compromising standards.

Brand Evolution: Strategically incorporated signature "brand red" while avoiding negative "danger/warning" associations.

Cross-Team Alignment: Improved designer-engineer collaboration through comprehensive documentation and shared Storybook component libraries across all agile teams.

Nest established the foundation for scalable, consistent user experiences while streamlining internal workflows.

Caption: Brand color primitives and tokens.

Caption: Variants, sizing, and placement for “floating action button” (FAB)

Caption: Complete documentation for “Global Navigation” feature: Variants, usage, atomics, and animation.

AI “Quicken Loans Assistant” chat

KPI Result Primary:

+16% lead quality

Secondary Result:

+300% engagement

My Role:

Lead Product Designer, within one cross-functional engineering team from August 2024 to December 2024.

Rapid prototyping with an SDK.

Caption: Nest documentation for the “Global Navigation” feature, motion behavior, & atomics.

Establishing the user flows and prompt logic.

Caption: Prompting logic and user flow defined for the Quicken Loans Digital Assistant.

Launching and learning.

Caption: A motion prototype of the first ever Quicken Loans Digital Assistant.

Winning Challenger

Control

Fine tuning through testing.

Mega menu navigation

Primary Result:

Multi-platform unification

Secondary Result:

Improved retention and lead flow

My Role:

Lead Product Designer, working with two cross-functional teams. July 2024-July 2025.

Before: Legacy Navigation

After: Mega Menu Navigation

Navigation optimized, accessible, and unified.

By creating a more modern “mega menu” experience:

Users were now able to navigate between all three platforms of the Quicken Loans website.

Our account sign-ups improve significantly, which improve our remarketing and engagement efforts.

Trimmed down navigation categories could help keep user attention in the places it mattered while reducing cognitive load.

Users were no longer “trapped” once they entered the account web application.

Caption: The user journey from the home page, through the authenicated account web application, and back again.

Monetization seen everywhere.

Caption: The user journey from the home page, through the authenicated account web application, and back again.

Mortgage amortization calculator

Result:

Improved accessibility, usability, SEO and overall value

My Role:

Lead Product Designer working in one cross-functional engineering team. March 2025-Present.

Finding the missing value.

Research revealed we were failing 1.1 million consumers who rely on mortgage amortization calculators: first-time home buyers. Key findings included:

User behavior patterns

50%+ of amortization calculator users immediately visited the mortgage payment calculator, indicating missing critical data points.

93% of these users then researched "pre-approval letter" content, which is classic first-time buyer behavior.

Competitive & technical gaps:

Competitors integrated monthly payments with down payment considerations directly in amortization outputs; ours didn't.

All Quicken Loans calculators suffered poor page performance, damaging SEO rankings.

New inputs, new outputs.

Filter Improvements:

New “sticky” behvavior added, which followed users as they explored their amortization schedule. This reduced the need to scroll back up to the top of the page to make adjustments.

All fields are now pre-populated by default to give users a positive starting point instead of starting from scratch.

Input Field Optimization:

Removed non-essential "State" field (not used in calculations).

An accessible “start date” field, combining date picker and number input, to make this calculator useable by all users, not just those who were starting a mortgage in the next month or had an established loan.

Auto-populated "Rate" field with daily dynamic mortgage rates based on specified terms.

Added flexible "Down Payment" field accepting exact amounts or estimated percentages.

Purchase Price

456,000

Down Payment

40,000

Percent Down

20 %

Loan Terms

Loan Start Date

05/2025

Interest Rate

6.52%

Update

Visualizations that simplify data.

Interactive chart visualizes payment changes over time on page load, improving accessibility for visual learners and users with dyscalculia (number processing disorders).

Relocated "Pay Off" schedule to separate tab within visualization block, improving performance by removing large charts from initial content paint.

Added expandable year sections in amortization table, allowing users to focus on specific monthly data without overwhelming interface.

Before: Legacy calculator

After: Refreshed Amortization Calculator

In conclusion

Quicken Loans, re-invented in the modern era.

Expanding market reach: We successfully broadened Quicken Loans' audience beyond its traditional demographic, connecting with previously untapped market segments through inclusive design and modern digital experiences. This strategic shift positioned the brand to capture a larger share of the mortgage market while serving diverse user needs.

Rebuilding consumer trust: Trust restoration became our foundation through deliberate design decisions: implementing clear, intuitive UI patterns; establishing a unified brand voice across all touchpoints; eliminating manipulative dark patterns; and setting realistic user expectations. These changes directly addressed the transparency issues that had damaged consumer confidence.

Universal accessibility & value: Our tools now serve users of all ability levels, incorporating accessibility standards that welcome everyone rather than excluding segments of potential customers. Visual learners, users with dyscalculia, and those requiring assistive technologies can now successfully navigate mortgage calculations and decisions. The enhanced calculator suite provides genuine value beyond lead capture, helping users make informed financial decisions.

Measurable impact: The transformation delivered concrete results: 300% increased engagement with AI chat features, 11% higher conversion rates from assisted users, and improved SEO performance that expanded organic reach. Users now spend meaningful time with our tools because they provide authentic value.

Continuing evolution: While significant progress has been achieved, this transformation represents the beginning of Quicken Loans' evolution into a truly user-centered financial services brand. The foundation for trust, accessibility, and value creation is established—positioning the company for continued growth and positive user impact.

The journey from transactional tool to trusted financial partner demonstrates how thoughtful Product design can fundamentally reshape brand perception and business outcomes.

Case Studies

Past Work

Creative Art

Recommendations

My Role:

Lead Product Designer, UX Researcher, and Strategist

My Team:

Additional Product Designers (3- 5), DEV agile teams (4), Product Managers (3)

Timeframe:

2023 - 2025

My Challenge:

Creating and evolving a design system

Primary Result:

65% improvement in time-to-market

Secondary Result:

Brand/UI/UX consistency

My Role:

Product Designer (contributor), working in a team of 4 other designers and one Design System lead.

The problem: The bespoke variance in designs added scope and time to overall production efforts—slowing down development and speed of prototyping, all while creating a disjoined brand experience.

Enter “Nest”: Quicken Loans’ first design system.

To modernize and align Quicken Loans, my team created Nest—the brand’s inaugural design system. This atomic system delivered:

De-cluttered atomics: After a brand audit, we built our documentation only around the components currently in-use, keeping the design system lean and uncomplicated.

Design Efficiency: Enabled rapid, high-quality design creation without compromising standards only documenting the components currently in use.

Brand Evolution: Strategically incorporated signature "brand red" while avoiding negative "danger/warning" associations.

Cross-Team Alignment: Improved designer-engineer collaboration through comprehensive documentation and shared Storybook component libraries across all agile teams.

Nest established the foundation for scalable, consistent user experiences while streamlining internal workflows.

Caption: Brand color primitives and tokens.

Caption: Variants, sizing, and placement for “floating action button” (FAB)

Caption: Complete documentation for “Global Navigation” feature: Variants, usage, atomics, and animation.

AI “Quicken Loans Assistant” chat

KPI Primary Result:

+16% lead quality

Secondary Result:

+300% engagement

My Role:

Lead Product Designer, within one cross-functional engineering team from August 2024 to December 2024.

The problem: Engagement on the Quicken Loans website needed to be improved in-addition to growing organic lead form traffic. Research illuminated that user had questions preventing them from monetizing, and we needed provide them answers in low friction manner while leveraging AI technology.

Caption: Nest documentation for the “Global Navigation” feature, motion behavior, & atomics.

Rapid prototyping with an SDK.

Establishing the user flows and prompt logic.

Caption: Prompting logic and user flow defined for the Quicken Loans Digital Assistant.

Launching and learning.

Caption: A motion prototype of the first ever Quicken Loans Digital Assistant.

Winning Challenger

Control

Fine tuning through testing.

Mega menu navigation

Primary Result:

Multi-platform unification

Secondary Result:

Improved retention and lead flow

My Role:

Lead Product Designer, working with two cross-functional teams. July 2024-July 2025.

Before: Legacy Navigation

After: Mega Menu Navigation

Navigation optimized, accessible, and unified.

By creating a more modern “mega menu” experience:

Users were now able to navigate between all three platforms of the Quicken Loans website.

Our account sign-ups improve significantly, which improve our re-marketing, engagement, and growth efforts.

Trimmed down navigation categories could help keep user attention in the places it mattered while reducing cognitive load.

Users were no longer “trapped” once they entered the account web application.

Caption: The user journey from the home page, through the authenticated account web application, and back again—an experience finally unified.

Monetization seen everywhere.

Caption: Endemic ads specifically tailored for the job-to-be-done of each navigation category tray.

Mortgage amortization calculator

Result:

Improved accessibility, usability, SEO and overall value

My Role:

Lead Product Designer working in one cross-functional engineering team. March 2025-Present.

Finding the missing value.

Research revealed we were failing 1.1 million consumers who rely on mortgage amortization calculators: first-time home buyers. Key findings included:

User behavior patterns

50%+ of amortization calculator users immediately visited the mortgage payment calculator, indicating missing critical data points.

93% of these users then researched "pre-approval letter" content, which is classic first-time buyer behavior.

Competitive & technical gaps:

Competitors integrated monthly payments with down payment considerations directly in amortization outputs; ours didn't.

All Quicken Loans calculators suffered poor page performance, damaging SEO rankings.

New inputs, new outputs.

Filter Improvements:

New “sticky” behavior added to reduce scroll when visualizations become longer.

All fields are now pre-populated by default to give users a positive starting point instead of starting from scratch.

Input Field Optimization:

Removed non-essential "State" field (not used in calculations).

Created accessible and "start date" combining date picker and number input for broader user accessibility.

Auto-populated "Rate" field with daily dynamic mortgage rates based on specified terms.

Added flexible "Down Payment" field accepting exact amounts or estimated percentages.

Purchase Price

456,000

Down Payment

40,000

Percent Down

20 %

Loan Terms

Loan Start Date

05/2025

Interest Rate

6.52%

Update

Visualizations that simplify data.

Interactive chart visualizes payment changes over time on page load, improving accessibility for visual learners and users with dyscalculia (number processing disorders).

Relocated "Pay Off" schedule to separate tab within visualization block, improving performance by removing large charts from initial content paint.

Added expandable year sections in amortization table, allowing users to focus on specific monthly data without overwhelming interface.

Before: Legacy calculator

After: Refreshed Amortization Calculator

In conclusion

Quicken Loans, re-invented in the modern era.

Expanding market reach: We successfully broadened Quicken Loans' audience beyond its traditional demographic, connecting with previously untapped market segments through inclusive design and modern digital experiences. This strategic shift positioned the brand to capture a larger share of the mortgage market while serving diverse user needs.

Rebuilding consumer trust: Trust restoration became our foundation through deliberate design decisions: implementing clear, intuitive UI patterns; establishing a unified brand voice across all touchpoints; eliminating manipulative dark patterns; and setting realistic user expectations. These changes directly addressed the transparency issues that had damaged consumer confidence.

Universal accessibility & value: Our tools now serve users of all ability levels, incorporating accessibility standards that welcome everyone rather than excluding segments of potential customers. Visual learners, users with dyscalculia, and those requiring assistive technologies can now successfully navigate mortgage calculations and decisions. The enhanced calculator suite provides genuine value beyond lead capture, helping users make informed financial decisions.

Measurable impact: The transformation delivered concrete results: 300% increased engagement with AI chat features, 11% higher conversion rates from assisted users, and improved SEO performance that expanded organic reach. Users now spend meaningful time with our tools because they provide authentic value.

Continuing evolution: While significant progress has been achieved, this transformation represents the beginning of Quicken Loans' evolution into a truly user-centered financial services brand. The foundation for trust, accessibility, and value creation is established—positioning the company for continued growth and positive user impact.

The journey from transactional tool to trusted financial partner demonstrates how thoughtful Product design can fundamentally reshape brand perception and business outcomes.