Inside MyHEAT: Simplicity, speed, and ease of use matter

By Bilal Karim

When a user arrives to their city’s map on MyHEAT, our goal is to make it simple, fast, and easy to find their home. To achieve this, we rely on the Places Library as part of the Google Maps JavaScript API. Specifically, we use the Place Autocomplete feature to automatically complete addresses as soon as the user starts searching for one. Google defines a ‘place’ as an establishment, a geographic location, or a point-of-interest. For MyHEAT use case, a ‘place’ is a ‘home’ — with a unique address.

The biggests strengths of Place Autocomplete is it’s speed, and the ability to search for different combinations when searching an address. For example, we have seen MyHEAT users search for home addresses using different street types such as 144 Royal Avenue instead of 144 Royal Ave, 144 Royal Av, or even Royal Avenue 144.

Place Autocomplete also provides a host of meta data using autocomplete.getPlace(), such as full address, location (latitude and longitude), vicinity, and more. So when the user selects their address from the list of place predictions, we pan the map to their house and set the desired zoom level. When worked perfectly, an animated location marker would show on the roof of the house. Using a ‘ping’ animation was our way to tell the user to select their home on the map and finally see its Heat Loss Map. Here’s a snapshot of what the implementation looked like.

Simple and fast. Easy, not so much.

Despite using the animated location marker and displaying street names, users still had difficulty figuring out their home on the map, or not knowing that there was still an additional step required to see their home’s Heat Loss Map. Moreover, the basemap just showed houses in colors that ranged from green (low heat loss) to red (high heat loss). In some cases such as near cul-de-sacs, Maps JavaScript API would return a slightly different location of the home — resulting in the animated location marker either being in front of the house, or on the road. This caused hesitation on the user’s end. Am I about to select the right (my) house? What happens if it’s incorrect?

We solved this by matching the street type returned by the Maps JavaScript API with the street type that existed in our database. This was necessary because our addresses come from a variety of different sources (open data catalogues, municipalities, etc). Now, if an address matches with what Maps JavaScript API returns versus what exists in our database, we automatically display the Heat Loss Map of the searched home to the user.

This makes the experience of finding their home simpler, faster, and now… easy too. It’s one less step from the user’s point of view. It matters because there’s less confusion and friction for the user. Moreover, if we’re not able to match the address, we show a tooltip to the user to select their home.

Although you can add geographic restrictions on Place Autocomplete such as limiting searchable places based on a country, it would be nice to limit searchable places to a particular city as well. In some cases we have observed users searching for their home address in the correct city, but the Maps JavaScript API predicts or prioritizes the searched address in a different city.

Matching addresses is a big technical challenge, and we still have some work on our end to perfect it.

But we have already seen over 90% success rate in matching addresses since we deployed this solution to production — making it simpler, faster, and easier for our user’s to find their home.

It’s important to continually make refinements like these to improve the speed and efficiency of your product so your users can have an all-around positive experience.


MyHEAT engages the human spirit on energy efficiency. Our mission is to empower a worldwide reduction in urban greenhouse gas emissions, one building at a time. We show energy loss in a new and interesting way, and provide the tools and information needed to make changes for the better. See the platform in action at myheat.ca, or get in touch with us at hello@myheat.ca

Like what you read? Give MyHEAT a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.