While Glen Dimplex Americas was creating a new D2C website, some of the existing tools from the old website needed some upgrading before being implemented on the new website. The original heat loss calculator tool, created about 20 years ago, had very poor usability. It was full of industry jargon, and the calculation results were meaningless to the user.
Before we tested the current tool, it was immediately clear from a glance that there were some potential pain points that users might struggle with.
The first being the appearance. The page was long, without visuals to break up the text and engage the user. We knew we could design this form in an immersive way.
Users might be able to overlook a visually unappealing page. However, it's difficult to overlook jargon. As we went through the tool with our minimal construction knowledge, we didn't understand most of the questions being asked. We hypothesized that jargon would be a major pain point for users.
In order to successfully design a better heat loss calculator, we first had to see how users interacted with the current tool to learn about pain points they were experiencing.
On UserTesting.com, we conducted a usability test with six participants from Canada and USA, and took notes as they walked through the Dimplex heat loss calculator.
It was very clear from watching the participants that this tool was causing a lot of frustration for its users. The biggest takeaways from this test were:
Altogether, these pain points caused so much frustration that users felt like the tool wasn’t made for them, and was instead made for industry professionals. This was something we had to change.
Now that we knew which flaws we had to fix, we wanted to see how other heat loss calculators had improved upon these flaws. We conducted another usability test and had participants run through the Stelpro heat loss calculator. The empathy map below summarizes users’ feelings and actions throughout this test.
Users definitely liked this tool better than Dimplex’s. It had similar problems, such as confusing jargon and meaningless results. However, we also learned what features make this tool an impactful user experience:
Of course, usability is important. But if the calculator doesn’t actually work, it’s useless. Before going any further with the design, we met with a coworker who knew the math behind the calculation.
He kindly gave us a spreadsheet with the calculation behind the current tool, and from this, we learned there were only three factors that went into the calculation. Those three factors were:
Therefore, when creating our heat loss calculator, we had to create questions that would lead to a specific value for each of the three factors.
Insulation was a big focus, since it was the most complicated. From the usability tests we learned that the target audience doesn’t understand insulation jargon, so we needed to simplify this factor into everyday language.
Below is the insulation question in our first iteration. Instead of asking a bunch of confusing questions (because who knows what their wall insulation’s R# value is, anyways?) we simplified the process of determining the insulation value to fit the three calculation values of Good, Moderate, and Bad. We described each of these values in a user-friendly way, and added help text to further explain each option.
It was a step up, but it wasn’t perfect. Now, users’ confusion came in the form of questions like, “How old is an ‘Old House’?” During an ideation session in our team’s agile room, we tried to understand how we might break this step down into four separate steps for our next iteration.
With our new insights, we cut out aspects of the original tool that caused friction and frustration in the usability test, and included aspects of the competitor tool that users found joy in using, such as imagery, help text, and user-friendly explanations.
We also designed the tool in a guided, step-by-step format in order to break down each question. By separating the questions in this way, the tool is more digestible and is less overwhelming for the user.
I created a flow of four easy questions to lead users to their insulation value. By simplifying such a complicated topic, users can feel confident that they are answering the questions accurately.
We included icons in this iteration to keep users’ attention and to help them visualize the options. The imagery provided a pleasant user experience by eliminating confusion and substituting it for joy.
Our efforts payed off. After a usability test with ten participants, it was clear from users’ behaviour that we had designed a tool that was significantly easier for homeowners to use. No more furrowed eyebrows and frustrated sighs.
Not only did users seem more confident, they told us they were. When asked how successful they thought they were in their answers, 80% of users said they felt very successful.
Instead of being annoyed by the insulation questions, the main complaint from users was the tedious process of finding their room dimensions with a tape measure. As much as we’d love to find a solution to that problem, there are some things that even UX design can’t solve.
After making edits to the appearance to better fit the website's branding, we handed the prototype off to the development team.
