Hyperlocal Targeting HeroHyperlocal Targeting Hero

Hyperlocal Targeting

Neighborhood targeting for the neighborhood social network.

Tool that enabled businesses to pick where their ads appear at the neighborhood level. 

Launched Feb 2019

Increased AOV (average order value) by 2.5x

Building the foundation for neighborhood advertising.

In 2018 Nextdoor was building a self-serve advertising product called Local Deals. As a hyperlocal network, Nextdoor had much more geospatial resolution compared to other platforms — down to the neighborhood and even block level. Local businesses lie on a spectrum from part time dog walkers and contractors to restaurants with multiple locations. The challenge was building a tool that could scale in complexity from very casual to highly professional needs. 

Design a way to select neighborhoods in a fast and precise way.

Neighborhood Targeting is part of the Local Deal creation flow. As such it is subject to a few important constraints:

1. It'll be built in responsive web
2. The existing flow is in a modal and cannot be changed
3. Must work well on mobile devices

Given these constraints I knew I'd be quite limited by the platform and also in screen real estate. Mapping experiences on mobile web tend to be subpar relative to native. In addition there are many specific use cases that had to be accommodated. My approach was to start thinking about the base problem: how might people select areas on a map?

EXPLORATIONS

How might people select areas on a map?

Direct selection

Map as the primary input and clicking on neighborhood polygons for selection.

✅ Intuitive - just point and click.  
🚫 Neighborhood polygons vary in shape and size which requires changing zoom levels and using a mouse.
🚫 Too task intensive for multiselection.  
🚫 Interactions not viable on mobile.

Multiselection tool

Exploring ways to select multiple areas at once using a drag to multiselect gesture.

✅ Multiselection via drag to select.
🚫 Precision of multiselect is dependent on zoom level. 
🚫 Interaction requires a discrete dragging mode adding complexity.
🚫 Interaction not viable on mobile. 

Moving primary input off the map 

Using a range slider to select neighborhoods within a radius. 

✅ Multiselection via radius.
✅ Range slider works great on mobile.
✅ Slider communicates relationship between reach and price.
🚫 Harder to make precise selections.

FINAL DESIGN

Radius based neighborhood targeting

Balancing precision and speed

I explored the radius tool further as it was the most practical given the platform, device and infrastructure limitations. A range slider as the primary method of input is a simple constrained interaction compared to navigating freely on a map. There was also a clear relationship between the input (distance) and the output (price). Critically this experience is more suitable for a mobile experience than trying to pan and zoom on an often janky map layer. 

The slider operates a distance scale which is a proxy for reach and price. This actually unlocked a huge strategic advantage for our team as we're now able to specify the minimum, maximum and the default targeting size. As an example we can increase the maximum distance on the scale for low density rural communities. Food and drink businesses have around 30% lower AOV (average order value) than home and garden businesses. We can tailor the default selection based on category to show a reasonable price to reduce drop offs. These are just a few examples of the incredible flexibility this design enables.

HOW IT WORKS

Range Slider

Moving the slider makes the radius smaller or larger which targets one or all neighborhoods. It works great with a pointer or a finger. 

Refine Selection

A radius builds fast but rough selections. Users can expand their selection, hover over specific neighborhoods and exclude it. 

Change Center

The default centroid is set to the business location, but it can be changed by dragging and dropping the pin elsewhere or by using the search field to enter a new address or ZIP code.  

Non-Contiguous & Multiple Areas

Sometimes there's a need to target areas that aren't contiguous, such as a plumber or a delivery service that only operates in specific municipalities. Clicking on "Add another area" collapses the current selection, and adds another radius on the map.

Materializing Nextdoor's key strategic advantage. 

Neighborhood Targeting materialized Nextdoor's value proposition as a hyperlocal platform to local businesses. By making targeting much easier it also dramatically increased average order value which contributes to this product's path to monetization. This level of precision is a market differentiator and is a step function in Nextdoor's potential as an advertising platform. 

•  Increased average order value by 2.5x
•  Unlocked ability to customize pricing by category  

Working with tough constraints

Neighborhood targeting was a very complex task, and had to be accomplished in a tiny area built with limited engineering resources within a mobile web experience. Designing all this felt like trying to fit an entire house of stuff into one of those super tiny apartments in Hong Kong. Small spaces force extreme prioritization — it's key to remove any clutter that isn't relevant. 

My team was unable to fully implement what was designed. We ran into quite a number of performance and legacy issues that pushed more complex features to the backlog. I partnered closely with engineers to address key issues and was in the room to make sure that technical limitations do not drive product decisions. It was a challenge to get the engineering bandwidth to fully realize the design and feature set, however it is fully functional. The final product provides a solid and usable experience but there's a lot that can be better in the UI, the performance and in dynamic pricing.

James Wang © 2019