Designing to add location context

01 — Context

Why neighborhood matters

PropertyGuru is Southeast Asia's largest property listing platform, helping millions of people find homes to rent or buy across Singapore, Thailand, Malaysia, and Vietnam. But finding a property is only half the battle — the real decision comes down to whether that neighborhood feels right.

Every property listing on PropertyGuru has its own landing page filled with pretty photos, prices, and amenities. But people don't just care about the property itself — they care about everything around it. Where's the nearest transit? Are there good schools? Can I walk to restaurants or healthcare? The "What's nearby" feature was designed to answer those questions instantly, right on the property page.

02 — The Problems with the Old Widget

Three fundamental design problems that made the map feel useless

User research and testing sessions revealed three critical failures:

• 1. Classification was confusing. Amenities like doctors and parks were lumped under "Family Living" — which meant non-family people might overlook important nearby services. The categories didn't reflect how real people think about their neighborhoods.
• 2. Pins were impossible to identify quickly. The tiny icons inside the pins were hard to distinguish at a glance. Users couldn't tell a bus stop from a school without hovering or zooming in, which broke the most important thing about a map: visual scanning speed.
• 3. Users couldn't browse without constant interaction. You had to click through categories one at a time to see what was available. There was no way to get a quick sense of "what's actually near this place" without manually testing each category.

The original widget — vague categories, hard-to-read pins, and no way to quickly scan the neighborhood without clicking through each option.

03 — Design Brief

What users actually needed to walk away knowing

Before sketching, I worked with the PM to define the core things someone deciding whether to view a property needs to understand:

04 — Explorations

Three directions

I explored three fundamentally different approaches to the problem. Each solved some issues but created others.

1

Simpler categories with horizontal scrolling

Flattened the category structure and made the place list scrollable. Better classification — no more "Family Living" bucket. But the horizontal scroll list could grow infinitely, and users didn't know when they'd reached the end.

2

Highlights section for the most relevant places

Added a "Highlights" section that automatically surfaced the closest or most important places without clicking categories. Reduced friction dramatically. But the logic for picking "highlights" was arbitrary — how do you choose between the nearest bus and the nearest school? And there were too many of both.

3

Full list of places below the map

Simple, transparent — show every place in every category in a scrollable list beneath the map. No hidden logic, no guessing. But the list could get massive, and if you allowed multiple categories on at once, the map became unreadable. You still had to manually filter.

✓

Single-selection map + scrollable list hybrid

Allow only one category on the map at a time (keeps it clean), but show a complete, scrollable list of all places in that category below. Users choose what to explore, the map stays readable, and the list gives full transparency without overwhelming.

05 — The Key Decision

Why 1km became the magic number

Early testing showed something interesting: users mentally split the world into "walkable" and "not walkable" distance. Anything beyond a 10-15 minute walk (roughly 1km) felt like it might as well be in another neighborhood.

So we made a deliberate call: only show places under 1km away.

This solved three problems at once. It made the lists shorter and more relevant. It got everyone on the same page about what "nearby" means. And it forced us to focus the feature on what actually matters — the things you could reasonably walk to as part of daily life.

06 — Designing Pins for Speed

Making every icon instantly recognizable

The original pins were failing because the icons inside were too small and the colors didn't stand out. I redesigned them with one principle: instantly recognizable at a glance.

Each pin now uses:

Pin design evolution — the new pins are bold, colored, and readable even when zoomed out.

07 — The Final Solution

What's Nearby v2.0

The final design brings together four key features that work in concert:

Here's the feature in action:

08 — Testing & Iteration

One hypothesis that shifted everything

In the first round of testing, I discovered something counterintuitive about the desktop side panel. I'd originally designed it to collapse when the user's mouse moved away from it — based on the assumption that if someone's moving their cursor over the map, they want to interact with the map.

Testing showed this was annoying. The panel would collapse unexpectedly, breaking flow. Users wanted a simple toggle button instead — give them control, even if it meant one extra click. It was also far easier for engineers to build.

Final approach — clear toggle button for the side panel. Predictable, easy to build, and users preferred it.

10 — Measuring Impact

The numbers told the story

Two weeks after launch, the metrics were clear:

But the real win was qualitative. Users stopped asking "what's near this property?" They started exploring neighborhoods confidently. The feature had moved from overhead to genuinely useful.

11 — Three Big Learnings

What this project taught me about design at scale