Design For Understanding: Creative Energy Import/Export Visualization

Alexander Spielman
5 min readNov 20, 2018

--

Within our four person team I worked on the creative/persuasive data visualization, which can be found here.

In the beginning, our half of the group, working on the persuasive communication of data, started by brainstorming and sketching possible designs, shown below.

Prototype Brainstorm

All of these ideas were based on the concept of conveying to the user something about clean energy or the increasing use of fossil fuels over cleaner energy. From those brainstormed ideas, we narrowed it down to three different models shown in videos 1, 2, and 3 below.

Prototype Option 1: Import/Export
Prototype Option 2: Wind
Prototype Option 3: Lightbulbs

When we brought these ideas to a prototype stage, without incorporating any JSON data, it was reviewed by peers at the first demo. The table below, shows the outcome of user opinions on the representations of the data.

Demo Day 1 Feedback

The two we decided to eliminate from the prototype stage were the lightbulb and wind power representations. In the lightbulb diagram, most found it lacking in detail and unclear about what it was trying to convey, therefore it was the least appealing to users. For the Wind power representation, most found it alright, but lacking a lot in execution, but could be improved through added metrics or extra details. Overall, the Imports/Exports diagram was most successful. Many people enjoyed the interactivity, though it was straightforward enough to understand and visually interesting.

After narrowing down which data visualization model was most effective we worked off the prototype, including more interesting images, an image of the united states and metrics that pertain to the data. Most of these improvements were gleaned from reactions of users during the demo testing. While we received a good amount of feedback on the final demo day, some of it conflicted with the observations of other users. (feedback shown below)

Demo Day 2 Feedback

For example, multiple users enjoyed our bright funnels and matching text blocks, while others disliked them, and thought we should make them like pipes. For ideas like this we tended to go with the majority opinion as well as our own judgement. For that specific example, we decided to keep the bright and eye-catching colors. Some of the suggestions that we did incorporate were: rounding the digits of imports and exports numbers, leaving more space above and below the funnels to view the oil, and Changing the color of the oil dots to black.

Much of our design process revolved around turning quantity into quality through outside feedback and testing. Starting out with many initial paper sketched designs. Narrowing that down to three prototypes and creating rough models in p5.js. Narrowing those down further to one copy and improving that based on feedback. Then repeating the process for the final model, while incorporating the true data set. Overall, I feel like this process worked well, in conjunction with the five design sheet approach, allowing us to be creative and not put too much effort behind one idea then refining those ideas through the opinions of our classmates. If I were to change one part of this process I might have added another stage of paper prototyping before we went on the create rough models in p5.js.

Other Prototype Brainstorm
Demo Day 1 Testing
Demo Day 2 Testing

Comparison between types of Visualizations:

While Clara and I worked on the persuasive portion, my other partners, worked on the clear communication and reasoning portion, which can be found here.

There are several differences between the two ways we have chosen to represent our data. On the one hand, we have the method of clear communication and reasoning. The half of our group that worked on this ended up deciding to represent the data in line graphs with total amounts of a type of energy by the time period. This is a very simple and clear way to display trends over time. For example, it can be clearly seen that in the past 50 or so years the energy usage in that timeframe has nearly tripled. These types of facts can be extrapolated easily enough from the type of graph that was used. It also represents the data numerically and wholly, not emphasizing or downplaying any parts of the dataset. The other two graphs that were represented in this side of the project were comparative line graphs representing production vs. consumption and exports vs imports. These two graphs, are useful in supporting the first graph because it takes the data represented there and expands on it. These three graphs, together would be most useful in a scientific study. An example might be a study about the increasing usage of energy and its tenability long term. While not communicating that point by themselves, they could be presented that way in a larger paper.

On the other hand, the persuasive communication and storytelling method sole purpose is to lead someone who views it to an idea by itself. The way we presented our data was through dots flowing into and out of funnels, their quantity representing the amount of imports vs exports of crude oil. I believe that we did a good job in communication that there has been a drastic increase and decrease in the import vs export of crude oil respectively. This method of conveying data has its benefits and demerits. Its main benefit, is that it excels at having an impact on people. If we wanted to convince people that we becoming too reliant on foreign oil, then this graph would excel at making people see that and agree. Conversely, by choosing to represent something in this manner, we forgo the opportunity that something else could be gleaned from this dataset. In the end both data representation types have their own time and place, and depending on the author’s purpose, one may be more beneficial than the other.

--

--