Commercial Real Estate Listings: Making the Best Impression
Guiding Users in Uploading their Listings
My Role
Led user research and feedback initiatives to prioritize a user-centric design
Ideated wireframes and created prototypes to visualize the updated Build/Edit flow
Collaborated with product, engineering, and data teams to align design decisions with business goals
Background
Crexi is an online commercial real estate marketplace that streamlines the entire buying and selling process. CRE brokers are essential to Crexi’s success in order to provide listings to the platform and supply the marketplace. Listings published serve to attract buyers and help brokers reach their goals to sell or lease their properties.
The Problem
Brokers listing their properties on Crexi need the ability to preview their listing wherever it appears on the site.
In my past role at Crexi as a Customer Success Manager, I would frequently hear user feedback that users did not understand how the information entered for their listing would actually appear live on the site. For example, customers would commonly call about their listing’s cover photo and how they’d like to replace it with an alternate image.
I would think to myself:
How can we make it clear that the photo uploaded in the first position would be the cover photo?
How can our users better utilize the ability to preview their listing before publishing?
Fast forward to now providing design solutions for Crexi, these questions served as my starting point in understanding how we can make uploading listings more transparent for our users.
Strategic Importance & Business Goals
As a marketplace for commercial real estate, Crexi depends on users uploading listings to make the entire transaction process go round, making the Build/Edit flow for Listings one of the most important features on the site. Without attractive, detailed listings, there are no buyers.
Looking at another marketplace, in Airbnb’s early days, their founders took matters into their own hands by taking high-quality, professional photos of the spaces that resulted in 2-3 times more bookings. While I’m not suggesting this as Crexi’s solution, it underscores the importance of photo quality that contributes to overall listing, and therefore, company legitimacy.
Here are the assumptions to be made of Crexi’s supply-side users:
Brokers do not understand what fields populate the property search card or the order in which their photos appear
Brokers building listings are able to preview their actual listing (Property Details Page) but they cannot preview what the property card looks like in search results
Not knowing what the property card looks like could result in an unappealing property card which may result in less property traffic to the Property Details Page (PDP)
Framing the Problem: How might we guide users more effectively as they upload their listings to ensure listing quality?
User Observations
Observations were held with 3 users via Zoom. Participants shared their screen and uploaded a sales listing.
User Story
As a broker building a sales or lease listing, I want to be able to understand what fields populate where on Crexi, with the ability to preview my listing, to ensure my listing makes the best impression to buyers so that I get more leads.
Workflow
The flow delineates the broker’s journey adding a listing with the option to preview the listing at each step. The journey ends with the broker verifying the listing has been uploaded by performing a search and finding it on the aggregate page.
With this broker’s workflow, we confirm the two valuable places that listings appear on Crexi: The Aggregate Page (in the form of a Property Search Card) and the PDP.
Aggregate Page
PDP
Ideation
Using the Crexi design system, I began designing concepts that provide a solution to listing transparency and optimal preview capabilities prior to activating.
Concept 1
Concept 1 utilizes the open white space to the right of the build/edit form. As users build their listing and input details into the fields, the Property Search Card updates in real time with the corresponding information.
Concept 2
Concept 2 adds a “hidden step” prior to activating the listing, where users preview the Property Search Card and can utilize the edit tools within to correct any information.
Concept 3
The third concept finds us with an actual 9th step, “Activate Listing.” The additional step features preview capabilities for both the PDP and Property Search Card, making it hard for users to miss.
User Testing
Putting the three concepts in front of users, users were asked to share their feedback and preference. 2/3 participants preferred the style of Concept 1, as not only does it save them one more step, but can also save them time as they better understand what fields are populating where as they are building their listing.
Final Designs
Taking user feedback into consideration, I expanded upon Concept 1 to create a solution for user needs.
As the current flow already features a tool called Search Score, a way to measure how well listings perform in search results, I decided to transform the right-hand space into “Benchmarking Tools” - where users can view their Search Score and Property Search Card in an area that makes sense. I also added “Coaching Tips” in this section, to guide users to make the best possible decisions when creating their listings.
This solution provides users the ability to preview their listing where it appears on Crexi, as well as offers insight to increase confidence in building a listing.
Challenges
With the vertical progress stepper and Search Score already in place, it was challenging to incorporate even more features without stressing the eye. Additionally, the new features started a larger conversation about the existing Build/Edit flow (Are there too many unnecessary fields? Does anyone actually know how Search Score is calculated?).
While there are also initiatives to redesign the PDP and a way to upload listings via Property Record, it was imperative to collaborate with the cross-functional Product and Data teams to provide a solution that will be effective for many sprints to come.
Next Steps
Design and implement for lease side of the platform
Gather data on preview button click rates and overall user feedback
Iterate as necessary per feedback and future releases
Fin.