CLIENT:
Rocket mortgage
YEAR:
2023
SERVICES:
visual design, prototyping
timeline:
9 weeks
Home Buying Plan is Rocket Mortgage's first iteration of a guided plan that helps clients understand where they are in their home-buying journey today, figure out where they're going, and create a clear path to get there.
My design solution detailed below resulted in a 14% lift in conversions.
Rocket Mortgage knows that all home-buying clients aren’t always immediately ready to transact, in fact almost 40% of our clients indicate they are just researching or are looking to purchase much further in the future. Rocket's Home Buying Plan is the perfect opportunity for users to stay in Rocket's ecosystem while planning their future to buy.
As the lead designer on this project, I was tasked with creating a campaign page for Home Buying Plan that satisfies the requirements below. This page will open the door for an additional $5,000,000 of generated revenue.
Before creating a campaign page to promote the Home Buying Plan (HBP), it was important to actually see how it functioned in Rocket's overall experience.
HBP is a complex product - there are numbers everywhere! On first glance, it can be overwhelming to someone just browsing. We needed to figure out a way to simplify this page into easily understandable bite-sized snippets.
I knew we had to focus on the visualizations. The meters for measuring goal progress, credit score, and more were the most eye-catching and easy to parse information on the page.
During the period of this project, Rocket Mortgage was undergoing a design system refresh. With a new design system, there came a new aesthetic and brand image to project onto our promotional pages.
One of the most recent shipped promotional pages was for Debt Consolidation. We had a challenge using this as inspiration, though. This page was meant to advertise multiple options for debt consolidation, while HBP is a fully-fledge feature integrated in Rocket's platform.
The other page pictured above introduces and advertises each company under the Rocket Family of Companies. It follows the new Rocket design system and was a great source of visual inspiration.
I studied the design patterns and components used on these pages to find opportunities to reuse them for HBP.
To begin the design process, I wanted to approach this promotional page with different styles. Rocket's design system began centered on photography and its integration with shapes, patterns, and data visualizations.
Below are scrollable prototypes for desktop and mobile. Click each image to see it as a whole.
While the photography was effective in making the page more personable (pardon the pun), it didn't demonstrate what the client should actually expect to see in the HBP. It was a more abstract approach that we felt we should move on from.
In these iterations, we swapped the photography in the second section in favor of device mockups. We added screenshots of the actual client experience in these mockups so people knew what to expect from HBP. This is the approach we continued refining throughout this project.
Below are scrollable prototypes for desktop and mobile. Click each image to see it as a whole.
The hero is the first (and dependent on device, only) thing that users see upon first load in. We needed to make this hero area eye-catching and draw the user down the page to learn more.
Originally, I used photography to draw the user in and make the page feel more relatable; as if to mirror the user scrolling on their own device, learning about the page.
As our designs continued through various iterations, we began to focus more on feature visualizations. This allowed what imagery we used to be more informative in nature.
We finalized the hero by developing an animation that featured each goal on an individual's home buying plan filling to completion. This animation gave a sense of progress; building, growing, and moving forward.
We wanted to explain each step of developing a client's individual HBP. There were multiple methods we could use to explain the steps; below are a couple of our explorations.
We wanted to explain each step of developing a client's individual HBP. There were multiple methods we could use to explain the steps; below are a couple of our explorations.
The device option allowed for interactivity and realism to the actual product. We began to refine that option even further, adding animations to adjust the screens with each step.
This project was a challenge of balancing Rocket's marketing needs while trying to make a complex feature easy to understand for our users. I worked to keep the information visually engaging and brief, to minimize page falloff. I adapted and reimagined our usual landing page design approaches, refreshing them with new design system patterns and photo-editing. I played with image overlays, transparencies, icons, simplifying of UI, and mockups to add visual diversity throughout each section.
The final promotional page was a success and resulted in an overall 14% lift in conversions.
Below are the final designs, including a Rocket Rewards promotion tie-in as well as a testimonials section. The Rocket Rewards convinces people to work with Rocket for their own short-term gain, while the testimonials and other value propositions make them feel secure to stay.
