Energy Consumption DisplayInfluencing Energy Behavior and Awareness with Data
UI/UX Designer, Front-End Engineer
Winter 2020 | Princeton, NJ
Audience:Students seeking to understand their own
energy consumption and emissions from
Primary Challenge:Designing an Information Hierarchy to
influence student behavior in terms of being
energy efficient and conscious.
Solution:By putting the time-series data and current
consumption at the forefront of the display,
the student places their attention on the
relationship between the time of day and
their own consumption.
Results:The product has since been transferred to the
Princeton Office of Sustainability for review
and implementation consideration. As the tests
showed active engagement throughout the day,
the Office of Sustainability is considering
additional features for the platform.
The energy consumption and emission display was a project done in collaboration with a Senior in Chemistry doing their thesis. The goal was to produce a display and interface to be installed in residential buildings and dorm rooms that inform students of their energy consumption, emissions, and current energy intensity.
Primary Design Challenge
As users tend to only interact with the product for a few seconds, a large challenge is resolving an information hierarchy that will most affect user behavior around energy use and awareness.
SolutionThorough Exploration and Testing
Step 1: Understanding the Problem
The first part of the project was meeting with the Department of Sustainability and the collaborating Senior to understand the specific goals of the project. A list of feature and implementation requirements was then drafted and used for the subsequent phases of the project.
Step 2: Designing the Interface
The next step was designing the interface. I walked through the usual steps of getting a hold of the content, building wireframes and high fidelity mockups, and testing.
Step 3: Developing and Deploying the Interface
The last step was developing the interface with HTML/CSS and JS. React.js was used for front-end and chart.js was used for the data visualization.
While what you see above is a mockup of one of the high-fidelity mock ups from the prototyping phase, the actual product looks identical. The product will go live at energymonitor.princeton.edu in about three weeks. The link here will become active when the product has been deployed to the production server.