Realtor.com Responsive
PROJECT OVERVIEW
- Redesigned our flagship real estate search product for a new responsive front end in 2015.
- Optimized the design to flow responsively between a large range of screen sizes and device types.
- Maintained or improved business metrics . After launch we set a record of 50M UUs in Jan ‘16.
- My role was UX Designer (visual & interaction). I was supported by two designers on my team, we each led a section of the project.
LESSONS LEARNED
- Responsive design requires a balanced approach for features and flexibility.
- Daily communication with developers was required.
- Documenting design patterns is important work.
- Alignment with Product Management keeps things moving.
- Big project can get crazy, stay focused on the goal.
NEWS
Two of my teammates on this project, Joyce Leung and Jeremy Taylor, were interviewed about the project on the Responsive Web Design Podcast with Karen McGrane and Ethan Marcotte. 🎙 This is kind of a big deal in the industry! 💯
FULL STORY
Realtor.com’s desktop optimized website has been successful for many years. As mobile exploded and we developed industry leading native apps, a gap appeared between these two experiences. This disconnect was a disservice to users of tablets and mobile devices.
Collaboration Required
Collaborating with our UX Dev teammates, we began planning to transform our existing desktop experience into a flexible and adaptive site that would work across devices, and would eliminate the need for our mobile (m-dot) site. Responsive design would provide a consistent experience for users and reduce engineering overhead that’s needed for separate mobile and desktop sites.
To make this big goal happen we designed and built a new responsive framework, based on Bootstrap 3. We documented grids, breakpoints, and patterns. In collaboration with Product Management, we mapped out every piece of content that would be rebuilt and decided what content could be removed, then we ordered the priority of content.
Our core real estate search product consist of 3 parts, Homepage, Search Results and Detail pages. I led the Search Results UX, which includes the listing result page, the search filters (faceted search), and maps (details over here. My teammates, Jeff Boissier and Paulus Trisnadi, led the homepage and property detail pages respectively.
Facets of Complexity
The most complex aspect of our search results page (my area of focus) is the faceted search UI. This allows users to dial in exactly what type of home they are looking for. We have two layers, the exposed set which includes price, beds, baths and then the ‘more’ options. Designing these for a wide range of devices was challenging. We needed touchable, mobile friendly controls without sacrificing the functionality that power users enjoy.
We couldn’t cut features to make a responsive layout work.
Ask the Users
I developed variations of the faceted search layout and worked with the product manager to pair the legacy requirements to their core. We then wired mockups together for an in-lab usability test by our UX research staff. Watching users compare the layouts is powerful and humbling. Ego quickly goes out the window (or 2-way mirror) and the hidden flaws come to light.
UX research is essential. Observing user studies lets me see the product from their perspective, which otherwise is difficult to understand.
Our research learnings helped us choose a design direction for the faceted search UI. I then worked with UX developers to iteratively implement the features, adjusting the design with their input and planning for various use cases and sad paths.
Launch time
With a careful phased rollout, we launched the new responsive site, including my work on search results, maps and faceted search to full traffic in December 2015.
We celebrated our hard work and ate cake 🍰.
The next month we hit our all time record of Unique Users per month, 50 Million! We continue to iterate on the site each sprint, adding features and squashing bugs.
View it live at realtor.com on all your devices.
Next Project: Realtor.com Maps