Small Case Study

PadSplit search labels

A scalable label system applied to each PadSplit listing on the search results page, to help users make more informed decisions about what listing they want to book and when to book it.

Background

PadSplit is a platform to help people find affordable housing, creating safe, attractive, and respectable co-living environments. PadSplit’s mission is to solve the affordable housing shortage one room at a time while leveraging housing as a vehicle for financial independence.

As PadSplit’s supply grows, there’s an ever-increasing need for ways to distinguish one listing from another. Anyone who has looked at renting a space or even just buying products online at all has probably had thoughts along these lines:

“This home is perfect, do I need to jump on this immediately? Or can I wait a little while before making a decision?”

“Oh this looks like a pretty good price! I wonder if the prices ever change? If I wait a little while, will the price go down? Or what if the price goes up?”

The goal of this project was to introduce a label system that can be applied to each listing, to help users make more informed decisions about what listing to book and when to book it. Additionally, the final design should be flexible and simple enough that future labels can be immediately implemented ad hoc.

Role
UX researcher
UX/UI designer
Two phone mockups showing the new search labels

Research

I started by looking at other similar products and how they’ve introduced labels on their search results. What is the standard that users have come to expect from labels like these? Where are they usually placed, how are they used to distinguish listings? How does this apply to PadSplit, and how might we implement labels that keep with convention but still fit our product and user needs? This research was also shared with stakeholders to facilitate some discussion before jumping into the design.

Wireframes & design mockups

After a short period of research, the next step involved some quick wireframes to illustrate my ideas. I built the wireframes using Whimsical and presented them to stakeholders from the product and marketing teams to make sure we were all in alignment with what these labels would generally look like in the product and to make sure they solved for their needs.

Wireframes
Some of the wireframes (more options were presented)

Once I got working on higher fidelity mockups, I also made sure to share my work with the other designer on the team during one of our weekly design critique sessions. Even though we drive projects independently, getting regular feedback like this is super important and valuable. It helps me take a step back see my decisions through another designer’s eyes. Plus, they can help catch visual design inconsistencies with other areas of the product and offer their own ideas.

Result

Our new labels are simple, made up of an icon and short text. These always appear in the top left corner of the listing card, with a maximum of two labels at a time. If a listing meets the parameters of having more than two labels (for instance, a home with a 3D tour, a recent price drop, and has several users eyeing it), we came up with a hierarchy of visibility.

For example: because it’s less impactful to conversion, we want to bump the “3D tour” label off the card to make room for the more important “hot home” and “price drop” labels. Of course, this can be tweaked after release as we gather more data about conversion.

New labels and card components in Figma
Laying out the labels and new card components in Figma
Hierarchy of search labels
The search labels and display hierarchy (subject to change after gathering conversion data)
⚡️ Challenge

On the old listing cards, we actually already had two labels in use: the Host occupied label and the commute time label. How can we refactor these two pieces of information on the listing card, so that they do not conflict with the new label system, while at the same time remaining clearly visible to users that rely on them to make their decisions?

✅ Solution

Let's demote the “Host occupied” element down below the listing title, alongside the number of rooms available. This is because these two elements are in the same category of information: occupancy.

As for the commute time, let's append this info to the bottom of the card. This way it no longer conflicts with our new label design and is still easily scannable down the page (it's always in the same spot). This also makes sense because the commute time is something added after seeing search results. Having it appear at the bottom is further reinforcing the idea that this is information that has been added to a listing (if you read from top to bottom).

To accommodate the new labels, and address the challenge outlined above, the final result was a small design refresh of the listing card as a whole.

The old and new listing card designs
The old listing card vs the new one

Next steps

Over time we’ll be able to see how this affects conversion rates and adjust the design accordingly if needed. One thing that will be a challenge going forward is nailing down a label hierarchy. It’s pretty easy now when we only have a few labels to work with, but over time as marketing goals change and needs increase, we’ll be working with many types of labels. When that time comes, perhaps this design will need to be revisited again.
More projects