homegenius Real Estate
Property Details Page Redesign
What is homegenius Real Estate?
The homegenius platform is a real estate search tool that puts home buying, selling and owning tools in customers’ hands within a digital experience.
Introduction
The property details page contains information about a listing like the address, pricing, photos, property facts, history, etc. The existing layout needed to be redesigned to accommodate more sections and align better with competitors.
Desktop Original design. Live on Prod
Defining the Problem
Remove two column layout: The existing property details page had a two column layout where the left side featured the property photos, address, and property facts that were fixed on the page (ie, didn’t scroll) and the right side of the page was scrollable and contained several sections like property history, market information, homegeniusIQ, etc. Splitting the page in half allowed limited horizontal space for the sections of the page. As the site continues to grow we know we will add more sections like mortgage calculator, a map featuring information about the area, and much more.
Change UI to align better with new branding: In addition to the structure of the page we also wanted to clean up the design. Our original branding featured a lot of dark blue blocks which gave the site a dated and busy look.
Understanding our Users
The primary users are individuals who own a home and are interested in learning more about the current valuation of their home or are users who do not own a home and are interested in the our owner tools.
Design Steps
Competitive Research: looked into other real estate search tools and shared findings with stakeholders to understand business goals.
Iterations: Did several workshops with other designers to come up with new ideas and see how we could combine elements that worked.
High-Fidelity: Created a prototype for user testing to get feedback on design direction.
Final solution
Brought more attention to geniusprice and hgIQ - Originally the geniusprice was tucked away and the homegeniusIQ was further down the page. These are two features that set us apart from our competitors. Calling more attention to these features helps our branding and provides more context.
Highlighted hgConnect (real estate services) - We also offer real estate services. Originally we had ads further down the page, now we have a space for these ads right up top. This also matches a similar format to our competitors.
Wider layout - This allows more space for future features and provides a better viewing experience. Now everything doesn’t need to be crammed together and now features like a mortgage calculator can have enough real estate to be user-friendly.
My role
I was the lead designer for this project. I received help from several other designers on our product team during the initial brainstorming and lo-fi phase. It was my job to set up recurring meetings and make sure brainstorms were productive. Once a final design I put together a prototype and ran a user test on usertesting.com to make sure that the layout made sense. Then I set up the final design file and components with the assistance of another designer. Together we were able to put everything together very quickly and hand it off to dev.
After designs were handed off I supported the developers and QA team with visual quality assurance.
Team Members
Product Owner - Dalisa
Lead UX/UI Designer - Sarah Walsh
Support UX/UI Designer - Caitlin
Tools Used
Figma