Blog

 

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.

 

We’re also implementing another technique for increasing page speed. Traditionally, the page would run a script that goes to the database, retrieves a list of dealers and writes that into JavaScript, which loads the map. Since this could take a long time and the dealer list is updated infrequently, caching was adding to the site so that every time a change was made to the dealer list in the database, our CMS regenerated a static JavaScript file to reduce overall load times.

Read our blog post about the process behind the design and overall development of the All Weather Windows website.