Commercial Real Estate Listing and Searching

The Design Process of a Real Estate Two-sided Marketplace



DISCLAIMER: To comply with my non-disclosure agreement, I have omitted confidential information when writing and sharing this case study. All information is my own and does not necessarily reflect the views of the Comercialise Team.

About the Project.

Designing an easy to use self-service platform where brokers can list and promote their properties.

Client
Comercialise
Year

2020

Deliverables
  • Low-fi Wireframes and Prototypes
  • Usability Report and Recommendations
  • High Fidelity Prototypes
  • Product Presentation

The challenge

How to make the process of listing and searching for offices, warehouses and commercial properties easier?

My Role

My role consisted of advising and guiding the Comercialise Product Development Team through the early stage validation process of their idea.

Main Tasks

  1. Problem reframing
  2. Ideation
  3. Feature Prioritization
  4. Wireframing
  5. Usability Testing
  6. User Interface and Experience Design
  7. Design Execution and Validation

The Design Process

The Product Development Team already provided the user insights that came out of a previously conducted workshop where they were able to pinpoint user pain points and motivations. And with only 2 months to define a Minimum Viable Product to test out in the market, I needed to quickly validate and execute design ideas.

The first step of the design process consisted of reframing the identified user problems into design questions. This served as a foundation for the ideation session. After that we prioritized the ideas and once the team reached out a common agreement I proceeded with wireframing and prototyping a rough first solution to validate with brokers.

We then performed a testing session with brokers where we quickly gathered meaningful feedback and recommendations related to the usability and information requirements. These early results and recommendations guided us through the rest of the design process where we involved both brokers and brands. The process consisted of designing a higher fidelity prototype to test out with broker and users.

Design and Research Toolkit

The tools, artifacts and methodologies used to deliver the tasks and challenges at hand.

Adobe XD
Illustrator
Wireframes
Interviews
Usability Testing
Recommendations Report

User Insights

The Product Development Team and I recapped on the motivations and pain points from their previously conducted workshop.

Understanding the motivations of BROKERS and BRANDS

Broker: This user’s main job is to get his clients properties listed and rented/sold in order to earn a juicy commission. He needs to have a streamline way to list properties and have accurate information related to the listing in order to make decisions that influence the listing closing.

Brand/demand: This user requires to find a suitable space to allocate his business. Part of the information they find important are:

  • Exclusive Location
  • A high number of people transiting the venue
  • Easy access to amenities
  • Competitive renting prices

Reframing the challenges

I guided the Product Development them to think on behalf of the user real needs, by flipping the user pain points and motivations into How Might We questions. The design questions were posted on a Mural canvas where we were able to gain a quick overview of the design challenges ahead.

Ideation and Priorization

We came up with a handful of ideas for each How Might We question defined. We then proceeded to prioritize the ideas within the context of designing a MVP by performing a quick voting session.

Wireframing the first approach

I designed low-fi wireframes that serve as the base to produce the prototypes to be used during the testing and validation session. The workflows we targeted were:

  • Property listing
  • Managing properties
  • Checking up on property metrics
  • Checking people interested in the property

Usability Testing

We conducted an early testing and validation session with 7 users who fit the Broker profile.

Moderated Testing Sessions with end users

Each user was exposed to the prototype and provided with a series of tasks and pretty basic instructions. Users were encouraged to think out loud and express how they felt when trying to complete each task. Each session was recorded for further analysis.

Task Completion Analysis

By checking and analysing the recordings we quantified the observations.

Error Occurrences

Errors are pinpointed to highlight areas for improvement.

Recommendations

Based on the quantitative and qualitative analysis that came out from the testing sessions, I provided a series of recommendations for the next iteration.

Screen Design for the Listing Profile

Based on the outcomes and recommendations from the first iteration I improved the property listing and management flow and added the aesthetic details to each screen.

Onboarding

Brokers need a quick an easy way to navigate through their listings and check more in-depth information. I designed an on boarding  solution to quickly get a broker up to speed on how to access and publish their property listings.

Step by step listing process

I introduced a step by step guided property listing process. One step at a time. If the broker is in a hurry or can’t simply complete the task at hand he can save his progress and continue later on.

Property Management

Metrics and key actionable information is easily accesible from the Property Dashboard.

Screen Design for the Demand profile

The demand (or searcher for that matter) requires an easy to find yet detailed property look up when navigating through listings.

Inspiration

I conducted a quick benchmark and reference analysis and figured that the airbnb website includes some design patterns that could come in handy and were relevant to our context. As inspiration, I  used the AirBnB’s property search and listing patterns as a reference to include on my designs.

AirBnB includes the most important information under their featured listings. They also provide quick access to featured listings on the homepage by categories.

Property Search

Properties can be searched from the Homepage. Featured properties are highlighted as well. A more in-depth search can be performed featuring a real time map that highlights properties that match the search criteria.

Listing Details

The key decision making information about the listing is highlighted on the screen threshold. Searchers need a personal connection and seal of trust if they can see a person behind the listing, so we included a section where the broker information can be easily accessed.

Broker Profile

The broker reputation is a definitive factor that drives the demand’s decision of leasing or renting a property. I included a landing page devoted to showcasing the broker’s background and latest reviews. The broker can be contacted on this page.

Color Scheme

The Client provided a brand guideline which I used to design the UI, and added one extra color to complement and enhance some actions.

Russian Violet

#342960

Buff

#f4e192

Coral

#fb8f67

Typography

Chose a simple to read font family that works well across devices.

Ag

Poppins Bold

Poppins Medium

Poppins Regular

Ag

Raleway Bold

Raleway Regular

Raleway Light

Thanks!

Thank you for taking the time to learn more about this case. If you liked this work, make sure to show your appreciation by sharing this content.