Next Project
Next Project
Next Project
My UX/UI Portfolio
My UX/UI Portfolio
My UX/UI Portfolio
My UX/UI Portfolio
Project Brief
Keller Williams Redesign
Leading and leveraging a competitive analysis to advocate for UI improvements.
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.
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
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
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
After
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.
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
Direct Competitor
Compass
Direct Competitor
Remax
Direct Competitor
Zillow
Indirect Competitor
Trulia
Indirect Competitor
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.
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.
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.
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
Home page
Present saved searches on home page
Home page
Multi-location search
Search results
Image carousel on property cards
Search results
Homes for you, max bedrooms filter
Property details
A more image forward experience
Property details
Map view and street view
Property details
Interactive mortgage calculator
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
Variant B
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.
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
Home page
Present saved searches on home page
✔
Home page
Multi-location search
✔
Search results
Image carousel on property cards
Search results
Homes for you, max bedrooms filter
✔
Property details
A more image forward experience
Property details
Map view and street view
✔
Property details
Interactive mortgage calculator
Property details
Add comments and co-buyer visibility