The context

about the product

This was a design team-led project to refresh an old product listing page. Since the company’s focus is more toward sellers, so anything meant for buyers kind of fell by the wayside and got pretty outdated.

my role and the team

I worked as the main designer on this project, while working closely with our creative lead. Later, I collaborated with another designer during the user testing phase, in which we conducted internally with our teammates in the office.

Dissecting the old listing page

Heat Map

Very High Engagement at the First Fold

Just like in any other heat map, the first fold is the most prevalent section. Mainly because the top section already has the gallery, important information of the property, and the agent of the property. In which those are the most important thing when looking for a property to buy, what it looks like, what are its’ specifications, and the seller.

Drop-Off Begins at Property Details

While some users care about the specifications like completion year, property type, and unit size, the majority are skimming or not reaching this section at all. Likely because they’ve already made an initial impression from the top content.

Clicks

🔥 High engagement

Description

Even though the key details are laid out neatly in a table, users still seem drawn to the full description. This could mean they’re looking for a more human, narrative-style explanation to help them emotionally connect with the home.

Image Gallery

Photos clearly matter, a lot. Users want to get a feel for the place visually, which makes sense since how a home looks often influences whether they’ll take the next step.

AI Redesign’s “Try It Now” CTA

With AI becoming more mainstream, it’s no surprise that users are curious about how it fits into their home searching experience. A feature that helps them visualize renovations or potential changes likely taps into their imagination and future planning.

👀 moderate engagement

View Count of the Listing

Seeing how many people have viewed the listing adds a layer of urgency. In a competitive market, users probably interpret high views as a signal that they need to act quickly if they’re interested.

Agent Photo

One of the most important thing in buying a home is knowing that you’re buying it from someone real. And since, false property listings are a thing, users are more likely to check that the seller of the home is from a real person.

Interactions

My main take away for this data is how important the description is for buyers. They maybe want to really read what the seller/agent have written about the property since there are really additional human information that the unit details card and other sections cannot provide. The rest of the sections pretty much stayed the same.

New arrangement (based on percentage)

1. Gallery
2. Description
3. Price Card
4. Agent Card
5. AI Redesign CTA
6. Unit Details

old arrangement

1. Gallery
2. AI Redesign CTA
3. Price Card
4. Agent Card
5. Unit Details
6. Description

What I did

Gallery and AI Re-imagine Feature

I placed the images inside a container to create a cleaner, more organized look, preventing the next images from peeking out at the sides. A central slide indicator was added to subtly prompt users that there are more images to browse.

As for the AI Re-imagine feature, I’ve refined it to appear more subtle compared to the previous version. This is because it’s not the primary reason users visit a listing page, and the feature itself is still in early development. I also added a clear “AI” label and a noticeable transition animation when toggling the re-imagined view. This helps manage expectations and clarifies that the image shown is AI-generated and not the actual photo of the property.

On desktop, only the main image is re-imagined, as the rest are placed in a separate container.

Price Card

The content of the price card remains largely the same, but I added an estimated mortgage line. This gives users a rough idea of potential monthly payments if they’re considering a purchase.

On desktop, the price card together with the agent contact card is fixed on the left side, this is to give them access to it at all times and because the desktop has a much more bigger screen and more things can fit in it.

Bottom Sticky Navigation

I kept the WhatsApp button as the main CTA, since it remains the primary communication channel for users in Singapore. A new toggle has been added to expand the sticky nav, which now offers alternative property suggestions.

Unlike in the old design, it only featured CTAs in the bottom nav, yet this updated nav includes the property price. This aligns with common UX patterns and reinforces the cost throughout the user journey.

Agent Card Modal

The agent modal now highlights key trust indicators to reassure users that the listing is legitimate. It includes a branded photo of the agent, their certifications with a link, and the company name displayed under their name.

Additionally, users have the options to contact the agent via WhatsApp, text, or an enquiry form, accessible through a prominent CTA.

About this home

What I’d do differently

Survey and test with Singaporean buyers

Since, the whole design team is based in Singapore, it is quite hard to interact with the target users. We have to immerse ourselves in their way of life and directly ask them of their way of thinking. This will greatly help how the product would be shaped.

Selling the dream: Redesigning the listing page with an AI twist

The context

about the product

my role and the team

Dissecting the old listing page

Heat Map

Clicks

Interactions

What I did

Gallery and AI Re-imagine Feature

Price Card

Bottom Sticky Navigation

Agent Card Modal

About this home

What I’d do differently

Survey and test with Singaporean buyers

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Read next

✳︎

Sundara: Where skincare meets science

One hello can spark the best

conversations.

ideas.

collaborations.

beginnings.

stories.

P.S. Website designed and developed by yours truly.