With mortgage rates at an all-time low, Home Captain identified a time-sensitive opportunity to increase its revenue by expanding real estate offerings. However, its existing hodgepodge of applications created a poor customer experience and prevented Home Captain from taking full advantage of the market opportunity.
In four months, our team created a responsive real estate platform and a B2B landing site, conducting user research to ensure effective design and a user-friendly experience. Our effort included the creation of a componentized Design Library that synced across all design files, providing consistency in all aspects of our design.
July- November 2020
I was one of two designers in the comprehensive redesign of Home Captain’s real estate platform. I touched every aspect of planning, ideating, and designing throughout the project cycle. Additionally, I helped create a componentized Design Library that synchronized the designs across all platforms.
BACKGROUND ON HOME CAPTAIN
Home Captain is a FinTech company providing tools, services, and data to financial institutions in the area of mortgage lending and customer retention. Its product road map calls for evolving the platform’s capabilities to allow white labeling so that banks can incorporate the Home Captain technology into the banks’ own web pages and mobile apps.
From a B2C perspective, Home Captain’s selling point is that it is a premier concierge service for home buyers, providing a high-touch, end-to-end service in a market known for a lack of follow-through and poor customer experience.
Make a modern real estate platform that creates a great customer experience fully meeting customers’ needs, while also satisfying legal and MLS requirements. Requirements included a fully functional B2B landing page to allow Home Captain to begin an engagement with its potential financial services customers. We needed to deliver all requirements in a tight time frame so that Home Captain could take advantage of the current market conditions.
Our team met with the C-Suite executives to discuss their objectives before initiating research, ideating, and wireframing.
I'm a title. Click here to edit me.
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.
Our team conducted a comprehensive survey of features on competitor offerings, including a visual analysis to compare style choices.
After significant analysis, we rejected the traditional persona approach and opted to design for our three user types:
Our team conducted a survey to identify core homebuyer needs, patterns, and methods for saving favorite homes. We also used this survey as a base from which to recruit users to interview.
We interviewed users to determine their core frustrations in their homebuying experience and identify the filter functionality they used in their online searches.
We finalized the process by asking users to walk through several other real estate sites such as Zillow and the existing Home Captain website to determine the usability of specific filters.
TITLE OF THE CALLOUT BLOCK
Users rely very heavily on pictures when deciding to take the next-step actions on a home.
Users use a wide array of filtering metrics, but they always rely on area and price as a constant.
Users prefer a cleaner and simpler interface (such as Airbnb) compared to a feature-rich but somewhat bloated interface.
Users need a way to easily save and share houses of interest with spouses and real estate agents.
Users need a mobile-forward solution. We found that users search throughout the day at work or while commuting. We heard from users that they often are on their phones while searching.
It became clear that we would need to quickly bring our wires up to high fidelity; so, we created both a style guide and a mood board, which we presented to stakeholders in an unveiling that went over extremely well. From there, the C-Suite turned us loose to design full throttle.
Within two weeks, we created a fully functional, high-fidelity prototype that we were ready to test with users and then present to our stakeholders.
Photos. We heard early on that users relied very heavily on photos to determine if they wanted to go in person for a house showing. (Some users indicated that this was the only thing they looked at.) After much discussion, we decided to make a gallery lightbox accessible from the main map/listing page, which was only one click away instead of the legacy two clicks it took on other real estate sites.
Mobile-First. With a mobile-first approach, we designed a mobile website (due to stakeholder-imposed limitations) that mimicked an app experience that later could be wrapped into an app.
Interface. We endeavored to make a simple, clean interface that users could easily navigate without getting weighed down by unimportant visuals. Therefore, we decided to radically pare down the results page, showing just one view on desktop and two views on mobile, compared to the three or four views on some other legacy real estate sites. To ensure a simpler experience for users, we created an interface with only map and listings shown together on desktop and a list and map view on mobile.
Listing Details. When ordering the listing page, we relied on a card sort that allowed us to understand the importance of specific listing details that users looked at before seeing a house in person.
Armed with our research, we moved into ideating and wireframing.
During ideation we split screens by mobile and desktop; I ideated on mobile navigation while my teammate ideated on desktop. Our goal was to develop a wide variety of approaches and ideas. We user-tested our most promising design and presented them to stakeholders for buy-in. After significant iteration, we settled on a mobile-first approach and web design that mimicked an app experience.
We set out to create an elegant Instagram-like interface. This proved challenging due to the complexity and associated constraints imposed by the high degree of regulation, outdated laws, and legacy technology of MLS. The resulting design struck a balance between the necessary complexity to resolve all the constraints, yet it preserved a clean design with a satisfying experience.
TITLE OF THE CALLOUT BLOCK
Users got lost and confused as they navigated between the map and list view on the mobile app. After three distinct iterations, we resolved this elegantly through a toggle button.
Users loved that a photo gallery was just one tap or click away from the map view and that the tap/click did not take them away from their search.
Users preferred a more organic draw tool than a vector-based tool for map selection.
During our team's internal QA we discovered many inconsistencies. We chose to fully remake our designs by creating a fully componitized design system to ensure adaptability and consistency. We also wanted to provide Home Captain with a long-term sustainable platform that will allow it’s future Dev and Designs teams to increase their productivity and enable them to maintain consistency long term.
The result was a fully componentized, auto-layout, responsive design system loaded with all the requisite designs. Fully compontezing our work enabled us to make mass changes to our design as a whole. This strategy creates value for Home Captain in complying with the high rate of regulation change without causing the cost and time required by a major redesign.
Home Captain’s new platform design is complete and undergoing a handoff with the Dev team. Home Captain’s executives expressed their view that their new platform is “worlds ahead of where they were” and that they feel confident their company is on an accelerated path to improve its competitive position.