Realtor.com // Referral Manager / Lender Integration

---

---

Challenge

In a tight housing market, pre-approval can give buyers and their agents the advantage they need to compete. Unfortunately, agents often lack visibility into their clients’ pre-approval process, leading to delays that could cost buyers their dream homes. 

To attract top agents to its service, Realtor.com acquired Opcity, a company with a product to help realtors manage client relationships. Seeing an opportunity to give agents a competitive edge around financing, Realtor.com partnered with technology-focused lenders, like Rocket Mortgage, to make this information accessible to agents.

Because this was an emerging initiative centered around a complex, recently acquired product, Realtor enlisted Lab Zero’s help with discovery and feature delivery. We focused on:

• Working with agents to understand how lender information fits into their workflow and prioritize which information to include in the pilot
• Understanding the data offered by Rocket Mortgage’s API
• Partnering with Rocket’s team to develop new API functionality
• Planing data structure for future lender partnerships
• Transitioning design files from Sketch to Figma to incorporate them in the emerging RDC design system

Technical Discovery & Sensemaking

This initiative was scrappy. Rocket’s data was still in progress, the Realtor’s team was working to integrate Opcity’s Referral Manager, and, as an extra layer of complexity, the Opcity design files were in Sketch, and the Realtor files were in Figma.

Making sense of complex problems and detangling technical/design debt is an area where the Lab Zero team shines. I worked closely with my LZ, Opcity, and Realtor engineering and design partners to visualize the customer journey and logic behind the UI’s current and potential future states. My engineering partners and I identified several technical challenges, and I discovered several opportunities to bring valuable data into the customer experience earlier in the flow.

These sensemaking activities helped us determine what technical debt could be addressed as part of this effort and what the broader Realtor team should consider prioritizing as part of future efforts.

To help Realtor prepare for future lending partnerships, my talented engineering lead, Travis Gaff, and I paired to visualize the current Rocket API data and data to request from future partners. We mapped these API calls to the UI so the team could better understand where the data fits into the user experience.

Design System Integration and Auto-Layout Coaching

Figma’s auto-layout feature launched a few months before our engagement with Realtor. The feature saved me countless hours on a previous client, so when I noticed the Realtor team hadn’t yet implemented it in their layouts and design system, I saw an opportunity to share my expertise.

I organized an informal lunch-and-learn tutorial for the Realtor design team to share ways auto-layout could speed up our workflow and improve consistency.

The tutorial was well received, and I got great questions from the team during the session and throughout our engagement. I recorded the session and added it to the team confluence page for future reference.

At the time of our engagement, Realtor was in the early stages of implementing a Design System. I paired with their design system lead to ensure my UI experiments followed the system standards. Once I’d narrowed in on patterns, I created components for my UI to add to the system. The lead and I paired to ensure the components were intuitive and all states were accounted for.

Socialization

As consultants, we want our work to be clear and accessible to the next team to carry the torch. We make it a point to socialize what we learned, how we made our decisions, and what we delivered. For my LZ engineering partners, this meant pairing with the Rocket engineering team to review code and technical documentation.

For me, this meant geeking out on Confluence. I shared the desired outcomes, the why behind our work, our linking to the customer personas and interviews, and any previous documentation that helped my team get up to speed. I used the Figma/Confluence plugin to include our journey maps, prototypes, and mockups.

I used documentation as a script to walk through my work with Realtor’s design team. Knowing the work was documented allowed the team to focus on asking more complex questions. Pairing with the designers taking over my work helped my partners feel confident that nothing was missed during the handoff.

Outcomes and Learning Opportunities

Outcomes: By working together closely, my team and I launched the pilot for the new lender feature ahead of schedule. This helped enable the Realtor/Rocket Mortgage partnership and open opportunities for partnership with additional lenders.

We used the extra time to build out post-pilot features. Because the data was not yet available, we put these features behind a feature flag so they could be tested and released as soon as the data became available.

Learning opportunities: In pairing with Agents, we learned that the most valuable thing Realtor could provide them with was the pre-approval letter. One agent said “Email me the pre-approval letter and I won’t even need to open the app.”

Had the pre-approval letter been available as part of the initial API, sending it via email would have been a great low-code way to validate the customer need and service before committing to the larger effort.

I am all for low effort validation and truly minimum MVPs. Although we weren’t able to act on the potential opportunity here, hearing this statement from agents was a great reminder to seek out the opportunities to make a big impact with a small change.