Keller Williams Redesign

Summary

By leveraging the results of one competitive analysis and conducting a deeper analysis myself, I devised a strategy to make KW.com a more competitive website in the world of digital real estate.

Role + Team

I led design initiatives with this project and worked alongside product managers and engineers to help ship these features. I also conducted the second competitive analysis independently.

Tools

•Sketch

•InVision

•Jira

First Competitive Analysis

Keller Williams launched a new consumer website in late 2019 to compete more aggressively for digital traffic against direct competitors like Compass, Remax, and Redfin as well as indirect competitors like Zillow and Trulia.

Product Managers conducted a high level competitive analysis after launch to gauge how KW's new experience was faring against other platforms.

Preliminary Analysis Recommendations

Leveraging our design system, I redesigned the search results page to include the changes proposed in this analysis.

1 CTA to clear search boundary

The analysis found that the placement of the "clear" button was not as intuitive as competitors' "clear boundary" button. To solve this, I created a new "clear boundary" button to increase awareness around this feature and mimic competitors' patterns.

2 Increase visibility of save search

Increasing the visibility of the save search CTA would bring one of the primary methods to build value into the product to the front of the experience.

3 Sort By Feedback

4 Increase Map/Listing Ratio

This analysis also found that competitors had a more even ratio of map:listing area, so that was optimized to be more even. This resulted in a 1 column experience on 1024 breakpoint screens, but this also made that experience more visual.

5 Neighborhood CTA

Users wanted a way to toggle on and off neighborhood boundaries on the map, so this was added to increase user freedom.

Adding a field to show what users had sorted by would reduce cognitive load by not expecting them to remember what they had sorted the results by.

Search Results Before Analysis

1

2

3

4 Search Results After Analysis

1

2

3

4

5

Scaling a Responsive Experience

I implemented these changes across all 4 breakpoints of KW.com – 1440, 1024, 768, and 360 – to create consistency in KW's responsive experience.

Before

After

Competitive Analysis 2.0

Following these changes, I conducted a deeper competitive analysis focused on both the search results page and the property details page of real estate websites.

My goal in conducting this analysis was to figure out how to make KW.com the most competitive real estate web product within the industry.

You can access the full deck by clicking on the image to the right, but I'll discuss the main findings below.

The Competitors

I chose to evaluate direct competitors, indirect competitors, and Airbnb as an influencer. The direct competitors have the same monetization strategy as KW, indirect competitors are real estate platforms with different monetization strategies, and Airbnb is an influencer because it offers a best in class experience that's very similar to a real estate website in terms of design.

Redfin

Direct Competitor

Compass

Direct Competitor

Remax

Direct Competitor

Zillow

Indirect Competitor

Trulia

Indirect Competitor

Airbnb

Influencer

Setting the Stage

To start the analysis, I looked at digital traffic over the last 6 months of the top real estate sites to calculate market share. This mainly served to identify KW.com's current ranking amongst its competitors.

This mainly demonstrated that Zillow and Trulia, both owned by Zillow, completely dominate web traffic.

Analysis Methodology

This analysis hinged on analyzing these sites in terms of individual features and functionality. By aggregating the core features of these sites' search results and property details pages, I could calculate a score for each website and directly compare them to each other like in the example below.

Analysis Results

I averaged the scores of the search results and property details pages to attribute a score to each website and rank them in terms of most competitive feature wise. Redfin came out on top and Keller Williams was 3rd to last based on its current website version.

Feature Recommendations

This analysis also revealed ways that Keller Williams could compete more aggressively within this market. By adding features that the competition had, Keller Williams could move up the charts by offering a centralized real estate experience that couldn't be found on any competitor website.

Property Details Redesign

Following the competitive analysis, I wanted to redesign the property details page to be more competitive with some of the top performing sites. I focused on creating a more visually forward experience, maximizing usability, and introducing competitive features.

Variants A and B

I ideated 2 versions of a new property details page when starting this project. Version A was a 2 panel experience meant to compete directly with Zillow's visually entrancing experience, while Version B was an experience more akin to KW's first iteration with a larger image at the top of the page and direct access to photos regardless of your destination on the property details page. Below are those two versions at desktop and tablet breakpoints.

Variant A

Variant B

Variant B: The Winner

I submitted these designs to our design feedback Slack channel to get feedback from the team and leadership.

While we loved variant a's strong visual experience and freedom provided by simultaneously scrolling between content and images, we thought that variant b offered better usability due to the presence of the back button and subnav menu that helped users jump between sections.

With variant b, I could also add a "photos" section to the subnav menu to increase ease of access to the most popular destination on the property details page.

This wasn't possible to achieve with variant a, because the fixed card at the top of the screen already limited scrollable space significantly. Because of that, variant b came out as the winner.

I'll use the 1024 breakpoint design to go into further detail on version b.

Variant B In Depth

Back Button

Trulia was one of the only sites to feature a back button, but both competitive analyses found that this would enhance usability.

Header Images

I opted for larger 16:9 ratio photos in the header and expanded the images across the whole header to engender a more visually forward experience.

Address in Right Card

I added the address to the right card to help users easily reference this important piece of information down the entire page.

Feature Iconography

By adding icons to the features section, I hoped to add more visual contrast to this page and give the users a break from all the textual information. Airbnb also does this on their website.

Explicit Map/Street Views

The past version of property details had neighborhood and map views all within the same section. I thought it was important to separate these two features, because although they both rely on the map, they compliment different user goals. I also included property boundaries, which other sites did to be on par with competitors.

Interactive Mortgage Calculator

Adding an interactive mortgage calculator put this section on par with competitors and also introduced a new opportunity to surface a contextual ad for Keller Mortgage's "Zero Plus" product within the loan type dropdown.

Neighborhood Information

Most of this information was on the past version of property details, but I thought creating a whole section for the neighborhood would help create a more cohesive picture for users and draw attention to a distinguishing feature Keller Williams has that competitors do not. I added an image in the header too to entice users when they scrolled past it.

Neighborhood Map

I added this section, which was formerly tied into the home's map view. I wanted to encourage users to explore the boundaries of the neighborhood to get a better idea of the area separately from the map view.

Next Steps

While the first competitive analysis features have already been shipped, the property details page is still being groomed for development.

In terms of testing, it would be great to test this property details variant against the version that's currently live to see if it yields more engagement with certain features, like neighborhood information or the photo carousel.

Another hypothesis that would be fun to test would be if adding a "photos" section to the subnav menu resulted in more users selecting that to access the images rather than scrolling to the top of the page.