Reducing unnecessary heating by granting the user a better understanding and control of where the heater is on and increasing comfort and cost-efficiency by creating customized schedules through routines.

The goal was to not having to think about heating ever again.

What started out as an effort to find just the right time to begin heating my bathroom in the morning quickly evolved into a full-fledged case study about how we perceive temperatures and what we can expect from technology in the future. While studying the way heaters work, I discovered how ingeniously they are constructed but at the same time offer room for improvement – especially in combination with state-of-the-art technologies such as machine-learning and AI-powered decision-making that even modern smart-technology heating solutions haven't fully capitalized on yet.

Enjoying warmth can take many forms and is not inherently human.

With the goal to find out at which rate our bathrooms temperature was rising I built a small setup consisting of an Arduino Uno board and a temperature & humidity sensor. I later added a ESP8266 board to transmit the sensor-data wirelessly.
The site thingspeak.com allowed me to log the gathered data in real-time and access it through my browser. I visualized the data in 4 graphs, displaying temperature and humidity separately in two time spans: 4 hours for a detailed view and 48 hours. I then gathered data for about two weeks and analyzed it.
As a result I measured that it took roughly 2 hours for the temperature to rise by 1° Celsius on average and that hanging towels over the heater increased the amount of time needed by roughly 30%. Without any heating the bathrooms' temperature was usually floating around the 19° Celsius mark, which in turn means, that heating the bathroom up to a more or less cozy 22° Celsius takes around 6 hours.
Measuring the humidity was in this case just a side-feature that the used sensor offered and is not necessarily of relevance for the study, although the gathered data might be used at a later point to get a deeper understanding of how we perceive temperature as humans – which humidity-levels are undoubtedly a big factor of.

Heaters and their thermostats are already designed quite ingeniously, so why all the hassle? Here's what I found when asking users about the problems they are facing.

Patented first by Warren Johnson titled "Heat Regulating Apparatus" in 1895, the mechanical thermostat was designed as a solution to a problem that still persists to this day and because of its ingenuity, the functionality of the construction hasn't been altered substantially for well over a century. So while the mechanism itself is a perfect example of the timelessness of a well-engineered solution, the contemporary adaptations aren't really where they could be yet.

When gathering user feeback about the problems they were facing with the status quo, most of the issues were in essence the lack of modern and data-driven technologies that our heaters could benefit from.

According to the feedback, heaters are often running unnecessarily long. Why? The answer varies, but most of the time it's either because you have no indication of how long you have to heat before your desired temperature is reached (to have a warm bathroom in the morning for example), so people just keep the heater on indefinitely or simply because of the forgetfulness we humans are doomed to live with ("did I turn off the heater?").

The lack of overview of the current status of your heaters is also a big issue mentioned. Simply by knowing where the heater is on at the very moment can raise more awareness and as a result reduce the amount of energy needed – which is not only beneficial for the environment but also for your wallet. Having the ability to control the rooms independently of your current location strengthens this awareness and increases the benefits you gain from it.

So to conclude, users want to spend less time thinking about their heaters but still fully benefit from them in a cost-effective way.

To deepen the understanding of what a user might want out of a solution that gives them more control over their heaters I put together User Stories.

As a user...

With the gathered feedback, the user stories and my own ideas I am then able to put together a set of hypothetical features.

Brainstorming a set of hypothetical features and ordering them by what makes the most sense regarding the information architecture already paints quite a detailed vision of the finalized product. While my first impulse would generally be to draw a rough wireframe, I still like this format because it allows me to add, delete and rearrange features extremely quickly – which is absolutely necessary, as feature ideas come and go very fast in this phase and therefore need to be captured as swift as possible.

Ideate, Prototype, Test – Rinse & Repeat

The first very rough and quick sketches to get a "top-view"-style feeling for how the app could look and navigate.
Usually I draw these just for myself although I sometimes use them to gather additional user and/or stakeholder feedback before heading into the next stage.

Clickable Prototype

Low-fidelity wireframes allow me to prototype features very quickly.
With the help of Figma or similar tools I can make them interactive and test the designs on real users.

In moderated testing-sessions I let the users solve given tasks while they are commenting on their experience with the product.
I record the process and look for pain points the user might be facing and iterate on them afterwards.

Finding a visual language and putting it all together.

A quick-reference sheet of the colors, fonts and icons used in the design.

After laying down the groundwork I start working out the visual details of the design. In this case the design system is dominated by a color contrast of very cold greys and a warmer orange color-spectrum that is used to highlight parts of the interface that revolve around the heater being on or actions that accompany that status. The typeface of my choice this time is Apercu because it fits in very well with the clean aesthetic I was going for. The icon set is divided into a set of smaller icons that are mostly used as action-buttons and a set of bigger icons that the user can categorize the rooms with.

The three main-screens visualized in their final form.

Exemplary navigation through the main screens of the app.

The Floor Plan

The first screen you're confronted with when opening the application is the floor plan because here's where the most important things can be controlled.
Through the plan you are given a visual overview of all of your rooms of a certain floor, their heating status and their temperatures. Tapping onto one of the rooms on the map also brings you into the detailed view of that room to adjust specific settings. If you have multiple floors you can also switch the view with the "layer"-button in the bottom-right corner of the map.

The floor plan can be customized by going into the "architect-mode" with the dividers-icon that is also located in the bottom-right corner of the plan. This mode lets you add more rooms to the map, resize and position them and connect them to other rooms by "drawing" a bridging line between the rooms. I visualized the whole process in the wireframe.

For quick adjustment of the heater-status of the whole apartment there's a main switch that lets you shut down or turn on every connected heater. Under that you find the list of rooms with their respective switches. Tapping onto one of those rooms also brings you into the detailed view.


The Room View

Prominently displayed in the room view is the current temperature of the room and circled around it are waves that should symbolize the way warmth is emitted from the radiator into its surroundings. These waves are animated and will only be displayed while the heater is on. The button to the bottom-right side of the temperature brings you to the syntax editor where you can specify the routines for this particular room. Under the temperature is a switch that allows the heater to be turned on or off and also shows some additional info about the room temperature.

Heating intervals can be adjusted and checked through the area below. The user is able to set individual heating-intervals for every day or multiple days at once.


The Syntax Editor

"Syntax Editor" is a fancy name for the area that lets the user configure very specific routines for a certain room. Routines can be built by dragging and dropping "Syntax Blocks" from the bottom of the screen into the work-area at the top. The blocks are separated into conditional operators (displayed in grey) and will be bridged by the conditions (displayed in orange) that have to be met for a routine to be triggered. More routines can be created by tapping the "new" button and a list of already existing ones can be found by tapping on the downward-arrow left of the routines name.


Conclusion

Granting the user a better understanding of where the heater is currently on and allowing for very specific routines that adapt to the users schedules can lead to a impactful reduction of wasted heating-energy, but at the same time allow for greater comfort, as the rooms are automatically heated to the desired temperature and will reach the specified degree right on time through measuring and calculating the amount of time needed to heat the room up.
The syntax editors' conditional operators try to imitate the way many coding-languages work but at the same time be accessible to every user through its easy to understand drag and drop-nature.

Next case study

Plant Irrigation System