In the fall of 2014, we launched a new website for All Weather Windows, a company whose products are sold in nearly 700 dealers across Canada. A prominent feature of the website is a dealer locator map; however, the attempt to load that amount of data into a standard interactive map created a few technical and usability hurdles that we had to overcome.
When we originally added the locations to the map, we were overwhelmed by the sheer number of dealers—the map showed a giant cluster of markers overlapping each other.
To counter this, we added marker clustering to the map—at higher levels, you would see one single marker with a number indicating how many locations were close by. As you zoom in to more detail, the individual dealers’ markers broke off from the cluster to show their actual location.
Clicking each marker brings up the dealer’s contact information. However, with approximately 700 dealers, load times could lag, which was especially problematic since the map would live on the homepage. We realized that the average user might only look up information for a few locations, so we trimmed as much from the map as possible: for each location, only the map coordinates and a unique ID associated with it would be loaded. All the contact information for each location is loaded on demand when the user clicks a marker. This made a significant improvement on the load times and reduced any lagging when users would search for dealer-specific information.
Read our blog post about the process behind the design and overall development of the All Weather Windows website.