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:
"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 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.
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: