Rocket Central - Banker Landing Page

Storefront Design | Mortgage Application & Business Connection Project

My Responsibilities
UI Design
Usability Test
Team
V1: 1 PM, 3 UX Designers, 1 UX Writer, Engineer team
V2: 1 PM, 4 UX Designers, 1 UX Writer, Engineer team
Duration
V1: 3 weeks (Jan-Feb.2023)
V2: 4 weeks (Jul-Aug. 2023)
Tools
Figma
Miro
UserTesting.com
Context

About

Franchise Banking is a new channel at Rocket Mortgage, combining local presence with national brand support. Unlike our retail channel, Franchise Bankers generate their own leads, prioritizing organic lead generation.
This project aimed to create (1) the storefront page and (2) the Banker Landing Page (BLP), to provide clear communication between the REA, client, and Rocket Bankers and to facilitate the client's mortgage application.

My Role

• Worked with 2 to 3 other designers on ideation, design, and delivery
• Contributed largely to the UI exploration to improve product performance and align with marketing strategies
• Finalize design and content by collaborating closely with the UX writer
• Worked with UX researchers on user tests, conducted design QA to ensure precise delivery to Devs across different devices

Outcome

V1 was launched on Mar 31, 2023, and generated 318 closings from 5,456 leads.

V2 was launched on Aug 6, 2023 to be live for all 160 Franchise Bankers nationwide.

Design V1_Launched on Apr 2023

In the storefront page and the Banker Landing Page (BLP), we want to enable REAs to submit their client's information to the banker

Design V2_Launched on Aug 2023

Problem: In V1, clients have to wait for the banker to connect and initiate loan application after they submit their info

Solution: Enable actions for both REAs and clients, and sent clients directly to create application accounts

This Case study will focus on the process and outcomes in V2

Understand

Use Cases

Pain Points

During the stakeholder conversation, we discovered that the current product lacks an efficient way to connect clients and bankers. This hinders clients from starting loan applications immediately, leading them to resort to different Rocket mortgage application channels.

Define

How might we redesign BLP to
allow clients start application without having to wait for bankers?

Design

To include clients in the application flow, we carefully considered how the tasks were handed between the 3 parties and when the Banker Landing Page (BLP) would be accessed by REAs/clients.

Since we need to collect the necessary information from either Clients and REAs for the bankers before sending them to the loan application process, we require them to fill out a form.
However, the form's content and title will vary for each group. So, we aim to design a process that presents the specific content and title to each party.

Design A: Identify Roles before Entering the Page

✅ Pros: Role-specific buttons and actions can be designed into the separate versions of BLP

😕 Problems: When search the banker by name, can't land on his page directly

😕 Problems: Adding steps and users might drop

Design B: Specify Roles in the Questions

✅ Pros: Besides helping user specify their goals, the form also provide context / explanations for the users without making them click and navigate to another page to understand

😕 Problems: There is no CTA button when user first landed on the screen without scrolling

UI Explorations

After several rounds of discussion, we have decided to settle on design B. We have also explored several other UI iterations of the embedded form.

Final solution

The final design improved the embedded form idea from solution B by adding the CTA button, ensuring clear and successful paths for both client and REA. Considering the time limitation, we decided to only implement the Apply Online with the embedded form on this launch.

   Client path

   REA path

Evaluate

User Testing

We tested on 5 real estate agents (REA) and 5 recent home buyers on a series of tasks involving starting the application and getting connected. This was followed by some open-ended evaluation questions.

The test found positive experiences for both clients and REAs, with the frequent mention of "user-friendly" and "straightforward."

"All the information I would need is provided and easy to find. Well written, well thought-out profile page for sure." -REA 1

"As a real estate agent, this would be easy for my clients to use whether they're purchasing or refinancing a home." -REA 2

“I like the 3 steps of apply. ‘Apply Online with Me’, I think that is probably my favorite part” -Borrower 2

"I didn't even question he wouldn't be there. I would say very confident and it says Local Team." -Borrower 4

Opinions around what users want to see to speed up the process and build up trust were also collected to prepare for the V3 design. And we plan to ideate around the map and badge.

Takeaways

In the span of 8 months, I was able to explore various projects and collaborate with so many different roles. The experience of designing in a large organization taught me about the professional collaboration process and delivery process.

Going through designing with restrictions and rejections requesting more market study in the BLP project, I understood the relationship between product design and business considerations. Good business product design should also speak to the profit model and build customer trust.

Another big learning for me is communicating ideas in a reverse product cycle. During Hack Week, we devised the improving idea as the design team and "sold" it to the PMs and upper-level stakeholders. When they are more concerned with the more direct business measurements, it's our responsibility to make them understand why good experience can fuel the business.

Besides BLP and MaaS, I also help improved the training document that helps Devs geeting onboarded on using Figma and our design system.

Please hold on as we reheat our coffee...