About the Project
I was brought on with digital agency Grow, based in Norfolk, VA to reimagine what the online home shopping experience could be for Homes.com.
The project had already been ongoing for a few months, and I was tasked with working through the logic of a new "Match" feature, as well as designing the UX for educational content that would live in the redesigned "Homes Hub" section.
Most search sites offer buyers a rigid set of filters that could be hiding their perfect home (ex. 2 bedrooms, price X - Y). If there are houses that meet your criteria but don't fit in that specific price parameter, they won't show up in the results. Our goal with the Match tool was to give users more control (ranking system) and in- turn, more options that better fit their needs.
The Homes hub also posed an interesting challenge as the target audience were first-time home buyers (millennials). The aim was to meet them where they were in their journey and empower them with the tools and resources that they needed.
IA & Content Hierarchy
We were agile in our design approach in order to deliver on user needs and on time. Some of the things we developed during this project include:
Audit existing search functionality and hub content
Review analytics and testing results to drive design decisions
Developing feature logic, by focusing on the analytic data and creating something users would understand
Tailored toolkit including Sketch libraries and flexible templates
"Searches begin conversationally, and not just with a zip code"
Simplify and streamline the process of finding the perfect home in an engaging, ultra-personalized way that makes searching for a home a truly unique & enjoyable experience.
The first step in my process was to become familiar with the existing landscape of the homes.com mobile and web experiences. To do this, I created a tracking document to capture findings and identify areas for improvement. This was also an opportunity to learn about the home-buying process for myself, as I've never owned a home. We wouldn't be redesigning the calculators and tools in this phase of the project, so I had to figure out how to restructure the information and incorporate them into the story flow.
We had access to an SEO/testing firm that was able to provide analytical insight and recommendations - which also contributed to design recommendations.
Mapping the Platform
As with most redesign projects, the Homes client wanted to take a phased approach to their relaunch. Before I was brought on, the CD and team pitched new features and outlined other improvements that we could accomplish for the roll out. Certain modules and components would need to be left as-is and framed in to the new site, so keeping track of those via a high-level sitemap kept everything organized. The previous homes.com was quite disjointed and had scattered information and several missing or broken links, so identifying this new hierarchy was crucial.
Information architecture & hierarchy for existing and new content as well as modules/features
Account setup and introduction to new tools to aid in the home search experience
Reimagining of existing components and their flow & functionality within the larger story
A whiteboard session with the full team gave shape to the Match tool and Homes hub requirements. We began with the first steps the user would take as they searched the site, and looked for opportunities to encourage additional inputs.
The challenge we faced with the Match tool was ensuring it was clear to the user that the listings shown were indicative of the parameters that they defined. We explored how this would work as a drag & drop rank/ordering system.. and did some light user testing with people in the Grow office.
We learned that leaning so heavily on user input might deter users from interacting with the tool. The result that felt more natural was not to ask users to give a particular order or weight to the parameters, but rather asking them to set their hard parameters and flexible ones and go from there. This resulted in the "must have" vs. "nice to have" Match feature.
Input and suggestions from the tech lead validated that this approach was possible and logical on the back-end.
The ability to name and save matches, as well as be sent personalized matches, would require the user to create an account with homes.com - further growing ecosystem engagement.
We also had to be aware of how Match integrated with a new search - and how the user would interpret those results.
The Homes How To section was our chance to tell a cohesive and engaging story to the first-time home buyer & seller. The existing "hub" content consisted of calculators, tools and blog posts that were scattered throughout the site. I aimed to establish a hierarchy and page flow that would synchronize the content and intuitively guide users down their desired path.
I went through a handful of UX iterations with the hub navigation and storytelling structure before landing on the final solution. The first approach allowed users to continuously scroll from step to step after making their selection from the hub home screen (buy, sell, rent or finance). With the amount of content for certain steps, I found that would be too much to scroll, especially on mobile, so each step was separated to its own page.
To ensure users could easily jump to the other How to sections, I recommended a tabbed navigation on desktop that would scale down to a dropdown for mobile. A "peek-a-boo" nav was implemented to the left of content on desktop, and in a sticky bottom nav on mobile, so users could easily move between steps/chapters. This approach supports the user's journey across devices and keeps them grounded in the narrative.
With certain steps (sections) came a lot of copy. I worked with the copywriter to trim down and group content without losing the key points of the story. From there, I recommended interactive modules for displaying/hiding content to create an intuitive & digestible browsing experience.
In a category where everyone looks the same, we introduced an online search & first-of-its-kind features that stands out in simplicity, and in their stunning, modern design. The design system across the entire homes.com platform needed to follow suit. The visual designer kept the original homes color palette but implemented it in areas that let the content take center stage.
In addition to updating the graphics, he designed a new icon library and established a consistent typography treatment that feels fresh and encourages user interaction.
My favorite part are the micro-interactions peppered throughout the site. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, fun. Whether you're searching for a home or becoming educated on the process, these details bring the experience to life.
What have I learned from this project?
Go big then narrow down — Figuring out user logic of an initial search, advanced search & a match profile proved to be a large task. Communication and thinking about it night after night helped land on the best solution.
Team dynamics — This was my first project as a full-time freelance designer. I reported to a CD at Grow that had super high expectations and little patience for error (I was warned of this by my contact going in). I jokingly say that this project gave me slight carpal tunnel as I pushed myself harder than I ever had to make a good impression on the CD and agency. I'm proud of the work I did and that this opportunity helped launch my freelance career.
Always be willing to learn — Given that I'm single and rent an apartment in Brooklyn, I haven't purchased a home of my own to know what that process was like. This put me at a slight disadvantage as a majority of my up-front tasks in designing Homes how to required asking questions and learning what goes into buying or selling a home. I learned so much but wouldn't have if I hadn't researched and asked so many questions throughout the project.