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.
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.
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.
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.
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.
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.
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?
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.