Enhancing the user experience and design of a residential real estate search website with a refreshed, modern interface and an optimized mobile experience.
Company
Neighborhoods.com
Role
Product Design Lead
Skillsets
Building Design Systems
Working with Cross-functional Teams
Leading a Redesign Initiative
Introduction
Project Overview
Neighborhoods.com helps homebuyers find the right neighborhood and home by offering a seamless platform for searching MLS listings across 38+ states in the U.S. The site partners with real estate agents in these areas, creating more opportunities for connections with potential buyers. Revenue is generated through a percentage of sales made after users are matched with and assisted by one of our Partner Agents.
To drive lead generation, Neighborhoods.com launched an initiative to refresh the user experience and design. Our high-level goals were to bring content higher on the page, introduce more color and visual appeal to the layouts, and enhance the overall mobile experience.
Users and Traffic
The majority our users visit through google searches for real estate in a particular area. They are generally in the 30–55 age range and topics that are most important to them include neighborhood school information, the geographic relationships between home, school and work, property value, taxes and HOA fees.
Users find Neighborhoods.com mostly though a browser search. "Area" pages were the most visited. These pages included a map-based property search tool, as well as information about the area such as neighborhood data, attractions, restaurants and nightlife with supporting images. Data showed that less than 10% of traffic started from the home page.
KPIs
• Increase session-to-lead conversion
• Increase call volume
• Increase mobile leads
Timeline
Design explorations and initial page layouts were performed and handed off to our team in March. These were done by an outside resource. With user research, we vetted and validated those designs and continued to make refinements. Once our initial design direction was established, my team began their phase of work.
This timeline represents the template build that was aligned with the engineering team's workflow:
Design at Work
Design Collaboration
The design team was myself and one other product designer. We partnered up daily to divide design tasks evenly. In addition to daily Slack planning, we held weekly one-on-ones to share progress and provide mutual feedback and align on necessary feedback from the larger product team and stakeholders. It was very much an equal sided approach.
Workflow
Upon completing design tasks, designs and assets were uploaded to InVision and links were shared via Jira for transparency and tracking. At the time, we were using Sketch and hadn't fully migrated to Figma.
Engineer Collaboration
Engineers reviewed designs directly in InVision, leaving comments and feedback for iteration.
Jira workflow – A nimble team working on the REDNH tickets.
•••
As designers, we never stood in the way of engineering. If a design was too complex to
code, we would find a simpler solution. Engineering would score task for the designs
in the following week’s sprint planning session. Our agile workflow was methodical and
balanced. Because of this, the work was done efficiently with a small team.
code, we would find a simpler solution. Engineering would score task for the designs
in the following week’s sprint planning session. Our agile workflow was methodical and
balanced. Because of this, the work was done efficiently with a small team.
Screenshot from InVision. This tool (at the time) allowed for great communication between designers and engineers.
•••
Outcome
✔️ Stronger brand representation with more color, icons, and improved hierarchy.
✔️ Full-width design, replacing the outdated center-column layout.
✔️ Enhanced photo gallery for mobile and desktop.
✔️ Unique layouts tailored to different area pages and use cases.
✔️ Improved map and listing views with cleaner Yelp integration.
✔️ Updated Sketch library with new UI elements.
Takeaways
The redesign was a much-needed refresh, but after launch, lead generation dropped slightly. Although disappointing, we investigated the cause and discovered that moving buttons and forms, even slightly, had shifted them out of key hotspot areas. To address this, we conducted A/B tests using legacy features, ultimately finding ways to realign the design with previous performance data.
We needed more time to meet our KPIs. After our launch, a pivot in the business brought our need to move resources to a different product. We A/B tested the legacy (50%) and new version (50%) of the site. At first our legacy version was still slightly out-performing. With minor changes we bought them to a more equal stage.
I learned so much from my team and the Director of Product at the time. I'm really proud of the design for this project.
The above link goes to the current Neighborhoods.com, which as of January 2025, is still aligned with our 2020 design updates.
•••
Screenshots
Above: Image gallery including screens from the redesign initiative.
•••
Project Summary of Responsibilities
Discovery
Understand Business Requirements (BRDs), timeline, scope, KPIs and limitations.
Planning
Work with Director of Product, manage one Product Designer, Communicate with stakeholders.
Establish design timeline, work with engineering teams to prioritize component list.
Work on project goals while also following overall company roadmap, navigating changes.
Design
High fidelity designs of large concepts; review and test and learn with users.
Share and review with stakeholders.
Navigate feedback and pivots to identify MVP.
Final Deliverables
Document UI and incorporate new design elements within the MortarUI System.
Demo interactions with engineers; collaborate and QA the build.