A Workplace Energy Usage Display, Nonverbal Information and Empathy

A WORKPLACE ENERGY CONSUMPTION DISPLAY – THE ORIGINAL DESIGN
We installed an energy monitoring system from a company called Agilewaves in our office. This system stores data on our electricity, water, and natural gas usage. The system’s interface has been displayed frequently on our lobby TV. As part of a white space project, we decided to explore custom visualizations to see if we could reduce the studio energy use.


The Agilewaves information display.

NONVERBAL INFORMATION AND EMPATHY
It has been claimed that as much as 95% of our communication is nonverbal. As the old saying goes, its not what you say its how you say it. Nonverbal communication includes among other things, body language, gestures, posture, facial expression and eye contact and also aspects of the voice such as pitch, volume, rhythm, intonation and stress (Note that verbal communication is not synonymous with oral communication.)

Inspired by our amazing ability to understand nonverbal information and the simple fact that nobody knows what the @#&$%! kWh really means, I ditched as much of the numbers and text as possible. Later, when showing the concepts around the office, most people did not even reflect on their absence. I wanted to communicate through other means but still preserve some of the utility of numbers that allows one to understand how much energy is being used and changes over time. There are some truly beautiful info-graphics out there that show our use of energy but they can be hard to ‘read’ and they are not the type of displays you find useful to look at day after day.

Nonverbal information is no stranger to the interaction designer, on the contrary, we use color, spacing, contrast, movement etc to communicate information. I wanted to take this concept a step further and use people’s ability for empathy towards others to encourage behavior change. The human ability to empathize involves not only understanding but also feeling with someone else.

THE NEW CONCEPT
The concept is simple. Every day a new layer is added in-front of the previous day. The layer is added over the course of 24 hours so that it starts form the left edge of the screen and goes to the right edge. In the two examples below you can see that the water consumption display is somewhere in the morning where as the electricity consumption display show the time of day being sometime in the evening. The height of the hill or wave indicate the level of consumption. As you can see, the consumption pattern for our electricity consumption is quite predictable. The water consumption is less so (and also less accurate since I’ve not done a proper to confirm how the real data looks). Each scene has a protagonist who takes the journey across the screen and is intended to be animated in place (see end of post). The biker would be peddling and the surfer would be riding the wave.

Depending on the trend of the data the protagonist would have a harder or easier time moving forward. If the energy consumption is on the way up, the biker and the surfer have to work hard uphill/upwave. If the consumption is trending downwards, the biker can coast downhill and the surfer can ride the wave. The idea being that you can imaging yourself in their shoes and empathize with the protagonists and want to help them out.


The biker animated showing three potential states. Can’t you feel how the middle guy is struggling?

I realize that the whole idea can seem a bit whimsical but considering the context of an office lobby, I wanted to create something that had an element of storytelling. Something to delight and something to start a conversation that would hopefully contribute to behavior change.

In the next post I’ll discuss the same project but in relationship to one of the most influential biases, the fundamental attribution error and why it causes problems when we compare ourselves with others.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>