Rescuing a Slow, Buggy, and Frustrating "Store Locator"

For any brick-and-mortar business, it’s a major problem if your customers can’t find you.

That’s true for medical professionals and their patients, too. I’m delighted that I got the opportunity to help Connect Hearing, a major network of hearing clinics in Canada and the United States. They recently asked me to fix some big issues plaguing their hearing clinic locator, namely:

The locator itself took upwards of 10 seconds to load and routinely got the visitor’s location wrong during geolocation auto-detection
Individual clinic pages would often show the wrong location on the map or were zoomed in so comically close that the map lost all context
Map pins were a crowded mess in the areas where several clinics were clustered close to each other
Custom location pins were fuzzy on Retina devices and didn’t point to the right spot on the map
Visitors navigating the page with a scroll wheel would get caught in the map’s zoom feature

The user experience was pretty bad. In short, there was too much getting in the way of what every visitor wanted to know: where are the nearest clinics, when are they open, and how can I get there?

Here’s a tour of just a few of the visual issues they were dealing with:

Crowded pins on a store locator map — A potential patient searches for clinics near Chicago and is shown this crowded bunch of pins. This is not helpful.

Map zoomed so far in that it has lost all context — This is from a single clinic page. With it zoomed so far in, why even have a map?

Map viewport focused on the wrong location. — Doesn't look like Wichita Falls to me.

# The Goals

“Make it better” was an obvious desire, sure. But for any project to be counted a success, it must have specific and measurable outcomes marked down from the beginning. It must have goals.

I worked with Connect Hearing to combine user frustrations with the client’s business needs to come up with several project goals.

The main clinic locator page needs to load fast – 2 seconds at the most
It should unobtrusively auto-detect a visitor’s current location
It should automatically display the 5 to 6 clinics closest to the user on the map and as info tiles
Clinic locations should be accurately displayed in any context
Map styles and custom pins should be sharp on Retina screens and match the company brand
Maps should not hijack the scroll wheel
Individual clinic pages should expose data like contact info, hours, location, and business type to Google and other search engines so third-party business listings are always accurate
Clinic info should be added and updated through the site’s CMS, ExpressionEngine – no turnkey, third-party store locator services

# The Fix

The best course of action was to rebuild the entire locator experience from scratch, and I took special care to make sure the new maps would not only look great but that the logic behind it all would support a seamless user experience, something that was even more important to Connect Hearing since their target market tends toward an aging population.

# The Results

Thanks to smart caching and data modeling, the clinic locator and individual clinic pages are now blazing fast. The locator quickly determines the user’s general location and does so while the rest of the map continues to load, keeping things feeling snappy for the user.

All location data is now represented accurately on the maps with attractive, on-brand, high-resolution graphics, and the locator automatically clusters locations that would otherwise be crowded together on the map. And clinic info is encoded into each clinic page to make it easy for Google to import.

The visual highlights:

Nearest clinics results with an good example of marker clustering — Much-improved visitor location auto-detection, sensible marker clustering, and nearest-first listing of the closest clinics.

Winnipeg's clinics, showing custom markers and map styles — On-brand custom markers and map styles with friendly info boxes showing the clinics in Winnipeg.