Find your next home

Redesigning the home search experience for millions of home buyers across America.

*All information in this case study is my own and does not necessarily reflect the views of MoxiWorks.

Consumer expectations

Traffic to traditional brokerage websites is steadily decreasing due to the advancement in features and increasing expectations from home buyers on portal sites such as Zillow, Redfin, and Realtor.com.  While brokerages will always have a hard time competing to get large quantities of leads from their sites, they can improve the overall relationship between agents and clients by giving them tools to collaborate more.

Outcomes

By focusing on our users goals, all the while keeping in mind business objectives, we were able to deliver an improved home search experience between agent and client and help our sales team win the next deal.

92%

+36%

-21%

Owners or managers either satisfied or extremely satisfied with search redesign.

Increase in unique page views to search on mobile devices.

Decrease in bounce rate on mobile devices.

The game plan

Discover

Define

Iterate

Deliver

Identify personas 

Analyze competitors

Interview stakeholders

Review existing features

Form design principles

Define functional limitations

Write user stories

Create lo-fidelity concepts

Build foundational elements

Test & learn

Finalize visuals

Spec out complex interactions

Launch & learn

Core team members: 

Dustin Martinka (UX Designer)

Bryan Link (Product Manager)

JP Given (Developer)

Jeff DeMelle (Tester)

1

2

3

4

Changing opinions

The first task was to narrow down who our target user was. The search tool was originally created for agents so we had to make the declaration up front to stakeholders that this was no longer for them, but for consumers. A ton of industry research had already been done on home buyers so we leveraged that information. We’re a scrappy team so we’re ok taking advantage of freebies like this. Our PM recently bought a house and he was able to confirm these preferences for us.

Discover / Personas

Quality of neighborhood

Whether single, unmarried, or married, home buyers rated quality of neighborhood as their number one preference across the board. This includes design of neighborhood and surrounding community.

Overall affordability

Home buyers don’t want to search for homes that are completely out of their price range. Although, they will search for homes slightly outside in hopes they find “the one” or a deal.

Convenience to job

Distance to work was a major factor of most home buyers. They typically want to move closer to work, not further away. Commute time was a typical concern.

Convenience to friends and family

Distance to friends and family was also large factor. Again, commute time to and from those places needed to be factored into the home buying decision.

We identified the 4 major preferences of American home buyers

Discover / Competitive analysis

Be scrappy

The team realized we’re not inventing this space so we took a look at some of the top companies for searching  homes. We also included those that deal with apartments, rentals, and vacation rentals. We looked for common features across all sites, mobile and desktop, to identify current trends as well as look for those “wow” moments within. 

Companies that provide the best experience for finding homes or rentals

Discover / Competitive analysis

Inline photo gallery

Quick fav

Simple controls

Sliders

Ability to navigate photos directly 

on search results page.

Users can favorite a listing without having to view the details.

By removing input fields users don’t have to type on a keyboard.

Using sliders allow for quick adjustments to filters.

AIRBNB MOBILE APP

HOMEAWAY MOBILE APP

AIRBNB MOBILE APP

HOMEAWAY WEB APP

Prices on map

Listing card info

Drawing controls

Viewing prices on the map allows users to see the differences of pricing between neighborhoods.

AIRBNB WEB APP

Placing the listing info on top of photos allows for more listings on the screen at one time.

ZILLOW MOBILE APP

Drawing directly with your finger allows users to create custom boundaries that filters alone can’t accomplish.

REDFIN MOBILE APP

Discover / Stakeholder interviews

Never lose sight of the business

To make sure we were able to hit our delivery date, we divided the research up between the team. PM was in charge of interviewing stakeholders, both internal and external. Internal stakeholders included Account Management and Sales. Our primary external stakeholder was Windermere.

Discover / Stakeholder interviews

Mobile, mobile, mobile

Mobile experience was the primary concern of everyone. It currently failed at providing users what they needed and agents would hear about it from their clients.

Easy to use filtering

The previous version of search made filters so complicated. Everything had equal weight which confused the user on where they should focus first.

Simple and clean

This was a typical request, but everyone wanted a simple, easy to use search experience that looked great.

Enlarged photos

Previously, photos on the results screen were small. This resulted in people having to navigate to a listing details screen in order to view larger photos.

Collaboration visibility

If a user is signed in, and they are connected to an agent, they can save searches and favorite listings. Agents are notified of these preferences. This feature was buried and needed more visibility.

Connect with an agent

Because Search is embedded on brokerage sites, home buyers needing to find an agent was a high priority for those who don’t have one yet. These leads would be sent through the brokerages lead routing system.

After talking to stakeholders, we identified their primary concerns

Iterate / Review existing features

Clean up is important

Because our search application is used within our other products, we had to keep the same feature set unless we could find evidence of features that weren’t being used. We ended up finding a few with near zero adoption. These were: search by MLS#, search by MLS area, and set border radius.

Discover / Review existing features

Identifying all the existing features was a major task because so much functionality was added over a long period of time

Define / Form design principles

The team felt we needed some principles to adhere to. This helped tremendously as we were able to make decisions to some hard problems later in the project.

Lightning fast

Consumers now are accustomed to instant gratification with their digital experiences. Our previous version was slow and we received many complaints in the past. This version had to be lightning fast to satisfy the growing expectations of users.

Photo rich

Adding large photos not only looks great on the page, but based on research we found online from Redfin, photos can really help a home buyer visualize their life in a home.

Define / Write stories

Stay on target

When the team’s confidence level grew for what we needed to build, we started breaking it down into manageable pieces. We needed to keep the user at the center of everything so rather than fall back to our old ways of building a set of features, we came up with job stories based on the Jobs to be Done Framework. This way the entire team knew who they were building for, and most importantly why they were building it. We were able to come up with 3 primary stories, with many supporting child stories.

Define  / Write stories

Preliminary attempt at crafting user stories for our personas.

Define / Write stories

Primary user stories

When I'm looking for homes

I want to narrow down the location first

So I can live close to [school/family/friends/work]

When I know my location

I want to narrow down homes that fit my needs

So I can ensure they match my budget

When I find a [home/area] I like

I want to be able to save it

So I can keep track of it

Iterate / Create lo-fidelity concepts

Contant feedback is key

As the designer, I started with some very lo-fidelity wireframes to get a feel for the overall flow of the search process. At this point, details are not as important as accounting for the various elements needed. Search box, filters, photos of results, listings on a map, etc. I ran these past the team during our weekly design reviews to ensure everyone felt good about the direction this was heading.

Iterate / Create lo-fidelity concepts

Inline photo gallery

Everyone loved the inline photo gallery concept so we started there

Filters

What if each filter was treated as a richer experience. We explored that idea here.

Aggregated results

If user had many results in one area, it would show an average price before narrowing it down further.

Draw on map

We explored a draw mode which would freeze the map and allow user to draw a custom boundary.

Because distance to work, friends, and family was so important, we wanted to surface the DriveTime search feature

Iterate  / Build foundational elements

Starting from scratch

Because this was a white-labeled, consumer facing site, we did not have a style guide to work from. I first created a responsive page structure for the results page and listing details so our development team could get to work. I then focused on the overall style. This was a challenge because every company had their own branding. It had to be generic, but not lifeless.

Iterate / Build foundational elements

Emphasis was placed on large sized photos within this responsive grid structure

Iterate  / Test & learn

Increase our confidence

Working closely with the PM, together we identified 3 main areas to gain more confidence in. Search and filtering, understanding the map options, and drawing custom boundaries. We ran a remote usability study using a testing environment our dev created.

This was the first time we used a remote testing service to run a study. In the past, getting participants scheduled was so painful for a small company like ours. It was nice to alleviate this pain point in our process.

Iterate  / Test & learn

Study results

We received some very positive reactions about the overall look and feel of the page. One participant was so impressed he said “Definitely a lot quicker than Zillow, and slicker.” 

To gauge the ease of use of the product, we asked the same question after each task "Overall, how difficult or easy was the previous task to complete?” This gave us an indicator of how they perceived the task and where we needed to make improvements. We learned that users were able to accomplish some of the primary tasks of the site with ease, but had quite a difficult time using the map tools.

Iterate / Finalize visuals

List view

Ability to navigate photos directly 

on search results page.

Map view

Clicking on a listing pin would bring up a mini photo gallery and ability to add it as a favorite.

Search location

Quickly search by location or jump into DriveTime to see possible commutes.

Filter your criteria

View saved searches

A mix of controls to quickly filter your results, with no keyboard entry required.

Users can receive daily updates on listings matching their saved search criteria.

Large screen experience for search results

Iterate  / Launch & learn

Takeaways

The launch of this redesign made a lot of our current clients happy, but more importantly became another talking point for our sales team. While we will always be playing feature catchup with the big portal sites, our new search site offers an improved user experience over all the brokerage sites out there and in terms of look and feel more closely matches the big players in the industry.

The team learned a lot during this project. While there were a lot of bumps in the road trying out a version of agile development, we all couldn’t wait for the next project to try again to improve the process and introduce it to other teams.

If I could change one thing through it all, I would try to get more user feedback earlier in the process. We kept making excuses for not doing it but in the end we realize we could have saved a lot of time in doing so.

View the full story on a larger screen size

Iterate / Test & learn

Apply filters prematurely

Map controls

We found so many small interaction bugs with a full functioning site. In this case, users were choosing a minimum price, applying it, then going back to add a maximum price. You could sense the frustration from one of the participants.

By far the biggest issue was users weren’t seeing the map controls at the bottom of the map. It includes a number of important features such as school boundaries,  drawing radius, and drawing a custom boundary.