Electricity Usage Dashboard

Data Visualization
Overview
This project focuses on making sense of a chosen data set and creating visual representations of the data in a dashboard format. This data visualization is focused on answering the question: “How is electricity usage by category and month of the year connected?”. Illustrations and shifts in form, color, and scale are tools that I will use to understand the connections and patterns in the data. The purpose of this visualization is to also help the audience critically think about the data and modify excessive electricity consumption.
Project Timeline
April - May 2020
Tools
Visual Design
Iteraction Design
Prototyping
Research
01
‍
Going into my electricity usage portal, I was able to gather the relevant data. The data includes each category’s usage in kilowatt-hour (kWh), total usage (kWh), and the average temperature of each month (°F). I also included the monthly cost of electricity just in case this was another variable I wanted to explore.
02
‍
Before jumping into sketching, I decided to take a look at existing data visualizations related to energy consumption to identify strengths and weaknesses in their designs and scope out what I might be able to do better in my visualization.

Ideation
Exploring different forms, colors, and scale.

Refinements

01

After testing the previous iterations screens with two participants, I found that the user didn’t think the temperature was relevant to the topic of electricity usage. They voiced that they would rather see total electricity usage by month on a separate graph. At this point, I decided to pivot and change the graph to display total electricity usage by month.

02

I also started refining the final screens and user flow. For example, reducing the size of the category titles, pushing the pentagon form rightward, and also pushing the month key up to line up with the “Other” and “Appliances” titles.

Final Prototype
To make the visualization more interactive, I decided to add a toggle button that would allow the user to go between screens to view the different types of visualizations. On the total usage screen, I added hover states so that the user could more accurately see the total electricity usage for each month. On the usage by category screen, I added in hover states for each title so that users know that the titles are clickable. Once the user clicks on a category, the category title also changes to white to indicate that the user is currently viewing the description for that category.

Back to TopSee All Projects
Sketching Notes

01

With the circles, I experimented with putting different variables as different rings. In one of the ideas, I graphed the total electricity usage of each month in the center ring, months of the year in the middle ring, and the average temperature of each month in the outer ring.

02

Another idea I explored was using electrical wires to represent each month and splitting the wire into different colors to represent each category of electricity consumption.

03

I also explored conveying the data in a linear form stacked on top of each other, and having the size of the circles represent the amount of electricity usage for each month. I also tried displaying the data in a more traditional x & y-axis graph.

First Iteration

I explored using electrical wires to represent the different categories of electricity usage by month. In this version, I used color to define the category and length to display total electricity usage of each month. In the second person, I explored using each point of a pentagon to represent the category and color to represent the months. I also added in a temperature indicator on this screen to represent the average temperature of that particular month.

Second Iteration

I decided to add descriptions and tips to reduce usage for each category as a way to further allow users to critically think about their electricity consumption behaviors. I also edited the temperature graph so that the bars are side by side to compare the average temperature across all months. I also started thinking about micro-interactions such as the description for each category that will display when the user presses on the category. Moreover, what might happen when users hover or press on each temperature bar for each month?