How can we increase user engagement on the homepage?

By building a more efficient and user-friendly homepage experience we believe we will see at least a 20% increase in visit to app start or account creations.

Role

Platform

Year

Product Designer

Mobile & Desktop

2023

Homepage Redesign

The redesign of Rocket Mortgage's homepage marks a key step in providing a guided experience for clients. This revamp aims to help users grasp their current position in the home-buying journey, envision their destination, and create a clear course to reach it.

The design solution outlined below contributed to an impressive 27% increase in conversions.

View Final Designs

Design Challenge

RocketMortgage.com's homepage hasn't been updated since 2018. This outdated appearance poses a risk to the brand, creating a negative first impression, causing clients to question their trust to product offerings.
‍
As the product designer for this project, I worked collaboratively with my team to improve the overall user experience by redesigning the homepage layout to make it more user-friendly and ensure everyone who comes to RocketMortgage.com:

Feel welcomed
Find something valuable and relevant to them
Feel like Rocket Mortgage is a partner they can trust

Research & Analysis

Before we started building the homepage, it was crucial to truly understand what clients visiting the Rocket Mortgage homepage wanted and needed. This involved assessing the value of existing content and figuring out what additional content should be added.

Our homepage serves as our front door, welcoming every visitor who could be a client or a potential one.

Recognizing the importance of a guided learning experience, I focused on providing clients with deeper insights into the overall process.

Brand Consistency

The previous Rocket Mortgage homepage used to follow the Spark Design System, however there's been a refresh to the new Rocket Design System. The introduction of a new design system brings along a fresh aesthetic and brand image that we aim to showcase on our homepages.

Informational Approach

To kick off the design process, I decided to explore various styles for homepage. The goal was to create a guided experience, detailing the process and how it works through the use of captivating photography, interactions, and data visuals to engage the client.

Below, you'll find scrollable prototypes for both desktop and mobile below. Click on each image and scroll to view.

Although the informational approach succeeded in enhancing page clarity, it fell short of showcasing what clients should anticipate, and it didn't boost user engagement to the desired extent.

Interactional Approach

Throughout these iterations, we continued to include informative content while incorporating a customer-centric calculator. This tool enables homebuyers to better understand their financial situation and gain insight on what to expect. This approach has consistently been a central focus throughout the project.

Scrollable prototypes for both desktop and mobile are available below. Click on each image to see the complete view.

Hero

The hero section is the very first thing users see when they load the page, and on some devices, it's the only thing they see. It's crucial to make this section attention-grabbing to encourage users to scroll down and discover more.

At first, I used imagery and testimonials to capture the user's attention and create a sense of familiarity, almost like reflecting the user's own scrolling experience on their device as they explore the page. As our designs evolved through different variations, we started emphasizing illustrations and animations. This shift aimed to make the visuals more captivating, encouraging users to scroll down the page for to learn more.

Final Option

We finalized the hero section by creating an engaging animation that showcases money falling in addition to cards with selectable options. This animated feature captures the attention of clients and assists them in choosing what they're searching for.

Valuable tools and resources

Our goal was to make sure clients discover valuable and relevant information as they navigate the Rocket Mortgage homepage. We utilized different approaches, including the calculator tool, to showcase rates and provide users with a valuable resource for estimating their loans. Here are a couple of our explorations.

Final Option

This option introduced simplicity and interactivity for the actual product. To enhance this feature, we further refined it by incorporating a slide toggle. This allows users to easily switch between 30-year and 15-year fixed loans.

Final Solutions

In this project, we worked to align Rocket's goals with a better user experience. With my team, we made sure to present information in a visually appealing yet simple way to keep users engaged and prevent them from leaving the page. I gave our typical landing page a fresh look by using new design patterns. I played around with things like images, icons, and simplified design to add variety to each section.

The final promotional page was a success, with a significant 27% increase in conversions. Check out the designs below—they include extra links to learning resources and a testimonials section. These added resources provide users additional help, and the testimonials build trust and confidence.