top of page

Indeed Check

  Project Brief  

Keller Williams Redesign

Leading and leveraging a competitive analysis to advocate for UI improvements.

iPad Air.png
MacBook.png
360MortgageCalc.png

Project Summary

I conducted an in depth competitive analysis of some of the biggest real estate websites to assign KW.com a competitiveness score and advocate for including new features and UI enhancements.

Role

I independently conducted this competitive analysis, defined the methodology, and mocked up what some of these UI enhancements might look like. 

Hypothesis

By including features and UI elements that the biggest real estate websites have, Keller Williams could capture web traffic that has traditionally gone to more consumer focused real estate websites. 

Process Overview

In this project, I worked on a team of 2 engineers, 1 PM, and myself to define, launch, and evaluate 2 MVPs to test our hypotheses. Below is the process we followed. Click on tag to jump to that section.

  Redesign  

  Outcome  

  Initial Analysis  

Previous Competitive Analysis

Following KW launching a new consumer website in 2019, some Product Managers conducted a high-level competitive analysis to gauge how KW's new experience fared against other platforms.

Website Prior to Analysis

Search Results - 1024.png

2

5

4

3

1

Initial Analysis Suggestions

This analysis suggested updating 5 key features of our consumer website. As the designer on this product, I incorporated the suggestions across KW's responsive website to ensure parity with competitors.

1

CTA to Clear Search Boundary

Jakob's law states that users spend most of their time on other company's apps. Our user's mental models were most likely created on sites like Zillow and Redfin. To mimic what they were used to, we needed to update our "clear search boundary" button placement.

3

Sort by Feedback

Our "sort by" button forced users to remember what criteria they had sorted by instead of showing that outright. This broke the heuristic of "recognition vs recall" and needed to be updated to improve usability.

5

Neighborhood Boundaries

2

Visibility of "Save Search"

Saved searches were a feature KW's agents were most excited about, but the visibility of this button on the consumer site was difficult to spot. We wanted to increase visibility of this feature to deliver more value to consumers.

4

Map to Listing Ratio

This analysis indicated that competitors had a more 50:50 split between map and listing area, likely to place more focus on the eye-catching property photos. 

A feature KW had that competitors did not was a neighborhood boundaries map overlay. However, there was no way for users to toggle this on or off resulting in decreased user freedom. We wanted to add an easy way to turn this off in case it distracted users.

4

Website After Updates

1440 - Search Searching.png

1

2

3

4

5

  Responsive Design  

Scaling a Responsive Experience

Following alignment on the design changes, I scaled these updates across our mobile, tablet, laptop, and desktop breakpoints.

Before

iMacMockup.png
MacBook .png
ipadBefore.png
iPhoneBefore.png

After

iMacMockup.png
MacBook .png
ipadAfter.png
iPhoneAfter.png

  Follow-Up Analysis  

Leading a Follow Up Analysis

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

Goal of the Study

My goal in conducting the follow-up study was to evaluate how KW compared to industry leaders in terms of its user experience. 

CoverPage.png

The Competitors

I evaluated 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 visual experience similar to a real estate website.

Redfin logo

Redfin

Direct Competitor

Compass logo

Compass

Direct Competitor

Remax logo

Remax

Direct Competitor

Zillow logo

Zillow

Indirect Competitor

Trulia logo

Trulia

Indirect Competitor

Airbnb logo

Airbnb

Influencer

Analysis Methodology

I analyzed these competitors in terms of the features they had on their search and property details pages. By quantifying these features, I could calculate a score for each website and directly compare them to each other.

Compass.2@3x.png

Establishing Context

To start out by looking at digital traffic over the last 6 months of these real estate sites to calculate market share. This mainly served to identify KW.com's current ranking amongst its competitors.

Bar graph depicting market share of web traffic over the last 6 months. Zillow with 62.9%, Trulia with 18.4%, Redfine with 15.4%, Remax with 1.9%, Keller Williams with 0.9%, and Compass with 0.5%

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.

Bar graph showing which web products are the most competitive. Redfin is in 1st place with a score of 81%, Zillow 2nd with 69%, then Compass at 67%, Keller Williams at 66%, Trulia at 62%, and Remax at 57%.

  Recommendations  

Recommendations from Study

I presented this study to the UX team and suggested 8 improvements to the consumer website based on its results.

Suggested Features

Recs.png

Home page

Present saved searches on home page

Recs.png

Home page

Multi-location search

Recs.png

Search results

Image carousel on property cards

Recs.png

Search results

Homes for you, max bedrooms filter

Recs.png

Property details

A more image forward experience

Recs.png

Property details

Map view and street view

Recs.png

Property details

Interactive mortgage calculator

Recs.png

Property details

Add comments and co-buyer visibility

  Redesign  

Redesigning Property Details

After presenting the analysis to the team and garnering initial buy-in, I mocked up what a new property details page would look like including the suggestions. This way, we could loop in dev and product to gauge the feasibility of this redesign.  

Designing Two Variants

I mocked up two iterations of how a new property details page could look. Version A was a 2 panel experience meant to compete directly with Zillow's visually entrancing experience. Version B deviated less from KW's existing experience but still showcased larger photos. 

Variant A

iMacMockup.png
1440V1.png
ipadAfter.png
768V1.png

Variant B

iMacMockup.png
1440V2.png
ipadAfter.png
768V2.png

The Winner: Variant B

I shared these designs in our Slack channel for feedback from the team and leadership. Variant A impressed with its immersive visual experience but lacked usability compared to Variant B, which included a back button and subnav menu for easier navigation. Additionally, Variant V allowed for the inclusion of a "photos" section in the subnav menu, enhancing user accessibility to popular content.

  Outcome  

Project Outcome and Variant B

Below is a more detailed look at Variant B. I used this artifact to advocate for the inclusion of these features by collaborating with my product and engineering colleagues.

1

Back Button

Addition of a back button, only seen on Trulia, to enhance usability

2

Header Images

I updated the photos to be 16:9 ratio and expanded them across the whole header to be more visually enticing.

3

Address on Listing Card

The listing card on the right follows the user down the whole page. I added the property address here to help users easily reference it.

4

Feature Icons

Airbnb inspired the addition of feature icons. This provided an engaging way to highlight what makes a home stand out on KW.

5

Explicit Map View + Street View

This version broke out the map view into its own section, because in real estate location is everything. I also highlighted the street view with its own button to make it more apparent.

6

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.

7

Neighborhood Overview

Much of this content was present in the previous version of property details. However, I believed that introducing a dedicated neighborhood section would offer users a more coherent experience. This addition also highlights a unique feature exclusive to Keller Williams.

8

Neighborhood Map

I added this section to highlight the location of this home's neighborhood. This was previously included in the map view, but it seemed to fit better in the neighborhood section as a whole.

1024 - Property Details - Home - V2.png

1

2

4

3

5

6

7

8

Project Outcome

I leveraged the above design to collaborate with product and engineering and prioritize these features. These features were rooted in making KW more competitive, but it would have been helpful to have user research handy to ensure these features benefited KW's end users. 

While all these features didn't get included, this work resulted in the inclusion of multi-location search, larger photos, photo carousels on property cards, a mortgage calculator, back button, and subnav seen in the design. 

Shipped Features

Recs.png

Home page

Present saved searches on home page

Recs.png

Home page

Multi-location search

Recs.png

Search results

Image carousel on property cards

Recs.png

Search results

Homes for you, max bedrooms filter

Recs.png

Property details

A more image forward experience

Recs.png

Property details

Map view and street view

Recs.png

Property details

Interactive mortgage calculator

Recs.png

Property details

Add comments and co-buyer visibility

Indeed Check

Redesign
Initial Analysis
Responsive Design
Follow Up
Recommendations
Variant B
bottom of page