Adding portfolio support

Addressing a long-requested feature that forced us to retool our software

Overview
For years, Buildout users had asked for the ability to have "portfolios"--a group of properties for sale as a unit. However, this concept was at odds with the underlying structure of the software, which had been built upon the concept of single property listings. This project sought to re-structure the way listings worked in order to support multiple properties.
UPDATE:
The development of this project was delayed until Q1 2025 due to team bandwidth. I have still included the case study as a "Work in Progress" example of real-world development. In preparation for its launch, I've included the metrics and feedback I'm looking to track after release.

Quick Summary

The problem

Users could not create listings for groups of properties, only single properties.

The solution

Add support for grouping properties and treating them as a single listing.

The journey

6 user interviews to figure out what part of portfolios people really wanted. Multiple meetings with the development team to figure out technical limitations. Eventually, we landed on a solution that worked for both our users and the dev team.

Results

PENDING. Development on this project was delayed until Q1 2025.

Quick Summary

In 2023, Buildout's core leadership decided that there was a potential opportunity in matchmaking brokers and buyers who were looking to sell and buy listings off-market, respectively.

The problem

Brokers want to find buyers to sell to off-market, but don’t have a great way to find buyers outside of their personal network.
Buyers have a hard time finding off-market listings outside of their personal network.

The solution

Create a matchmaking service to pair brokers and buyers who are interested in buying and selling off-market listings

Results

Our changes made a huge difference and we eventually found decent product-market fit with improved and stable user adoption. App usage was good enough start building a mobile app for the product--Buildout's first.

Results

Our changes made a huge difference and we eventually found decent product-market fit with improved and stable user adoption. App usage was good enough start building a mobile app for the product--Buildout's first.

Full Case Study

The project
For years, Buildout users had asked for the ability to have "portfolios"--a group of properties for sale as a unit. However, this concept was at odds with the underlying structure of the software, which had been built upon the concept of single property listings. This project sought to re-structure the way listings worked in order to support multiple properties.
My Role
Lead UX Designer
Lead UX Researcher
Lead UI Designer
Team
1 UX Designer
1 Project Manager
6 Developers
Tools
Figma
FigJam
Pendo
Internal tracking

Our Problems

Brokers want to find buyers to sell to privately, but don't have a great way to find those buyers
Brokers want to find buyers to sell to privately, but don't have a great way to find those buyers

The Solution

Create a matchmaking service to pair brokers and buyers who are interested in buying and selling off-market listings

Project Timeline

This is the H1 title

H1 titles are ignored in the table of contents. We always start the table of contents links with H2.

The best part about H2 elements

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

H3 is one number lower than H2

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

I'm an H4 chilling under an H3

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

And now back to H2

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

H3 is one number lower than H2

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

I'm an H4 chilling under an H3

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

H5 is very rare

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

and H6 is a unicorn!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Another H2 here

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

H3 is one number lower than H2

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

I'm an H4 chilling under an H3

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Context

What is a listing?

When a commercial real estate (CRE) broker wants to sell a property, they create a listing and post it on CRE sites to attract buyers, similar to residential listings on Zillow or Trulia.
Loopnet, the most popular CRE listing site
However, unlike residential real estate, CRE deals often include multiple properties, known as portfolios.
Our users had long-requested portfolio support, but since our software was designed only for single-property listings, adding this feature required re-building core parts of our architecture.

Discovery

What do people mean by "portfolio support"?

On client calls and in feature requests “portfolio support” was always at the top. However, this was always an amorphous request. “Portfolio support” could mean anything from adding a few checkboxes to re-structuring the entire application. So I wanted to reach out to users and clarify exactly what they meant.

Questions

Talking to people revealed that users wanted the following:

Grouping
The ability to group multiple listings together into a portfolio
Separation
The ability to maintain individual listings that were part of a portfolio
Website
The ability to create a single website for a portfolio
Email
The ability to send a single marketing email for a portfolio

Let’s get to work!

With our users' wants in mind, I began designing wireframes that added portfolio functionality to our current interface.

Create a new portfolio from scratch
Create a new portfolio from existing listings
Naming portfolios
Portfolio index screen with child listings

Two possible paths

While designing, it became clear that there would be two potential ways you could create a portfolio:

Initially, due to work required, my PM only wanted to support the second use case. I was not so sure of that option, though. In my opinion, the user experience would be frustrating if you did not already have your listings created and wanted to make a portfolio. Therefore, I flagged this as something I wanted to validate more.

What rolls up from the individual listing?

Another challenge came when we arrived at the Media page of portfolios. Specifically, how should media function between the portfolio listing and the individual listing?

Should it be synced or completely separate? For instance, if I edit a photo on the individual listing should it update on the portfolio listing? Are there use cases where I wouldn’t want that to happen?

Initially, I designed a solution that would allow multi-directional syncing. However, I quickly felt like this got too convoluted and, before going further, I wanted to verify if this was functionality that users actually needed.

Refining our understanding

Because there was still so much unclear , I brought these outstanding questions back to the users we initially talked to. After talking to them, we learned two more things:

KEY FINDING
Users did want to create portfolios from scratch
In fact, this was the use case that most matched how they created them today. Therefore, we had to support it in our designs.
KEY FINDING
Users did not need media to sync between the portfolio and the individual listing
There were times that users wanted to display different images on the portfolio than they would have on the listing.

After gaining both of these insights, I tweaked my designs in order to better fit these needs.

Prioritizing new property creation

How do I make it as easy as possible to go from “No portfolio created” to “Portfolio with 5 listings”?

One of the highlights here was to change our “New Property” form into a modal and only make you fill out the required fields. This sought to decrease the friction of creating multiple properties at once.

Before

This workflow made users enter our full-screen edit form every time they wanted to create a new listing.

After

This workflow allowed a user to quickly create multiple properties without leaving the portfolio

Simplifying media

Now that I knew that users’ main want was to “not have to enter the same photos twice,” rather than “keep all media in sync” I updated the media page on the portfolio to reflect that.

I simplified the experience to use a modal that imports media from the individual listing. This solved for the main use case without adding the complexity of keeping media in sync.

Before

A complex workflow that kept media from in sync between the individual listing and portfolio listing.

After

A simply workflow that allows users to customize the media on their portfolio listing, while still being able to use already uploaded media.

The final version

After making these final tweaks and verifying once more with users, I developed hi-res versions of the mocks for development.

A scheduling roadblock

Unfortunately, due to a development backlog, we had to push this project from Q3 2024 to Q1 2025. Here's what I'll be tracking once this project is released to users:

User Response
Does this solve the problem for the users who have asked for it?
Optimization
Do those people enjoy using it? Are there ways we can improve the workflow?
Adding new features
Are there other things that people want to do with portfolios that this workflow doesn’t cover?
User retention
Do we retain the users who have asked for this feature?

Lessons learned

1

Avoid taking the shortcut

This project often balanced “easier for Buildout’s dev team” vs. “easier for the user.” Each time we tried to cut corners, user feedback reminded us it wasn’t enough.

2

Constantly clarifying

We repeatedly consulted the same users to clarify amorphous requirements. Although I worried about overloading them, most were happy to help multiple times throughout the design process. When in doubt, just ask the users again!

3

Challenge requirements (sometimes 🙂)

When discussing requirements, it’s often unclear what came from users versus assumptions by the PM. A key win on this project was asking my PM to clarify users' needs for portfolio media. The PM had assumed syncing was needed, but users hadn’t requested it. Sometimes, it helps to ask, “What did they actually say they wanted?”