Ryan Xia

Princeton University Class of 2022
Computer Science
Visual Arts

UI/UX Designer
Graphic Designer
UX Engineer
Project Manager

Energy Consumption Display

Influencing Energy Behavior and Awareness with Data
(UI/UX, Front-End)

UI/UX Designer, Front-End Engineer
Winter 2020 | Princeton, NJ


Students seeking to understand their own
energy consumption and emissions from
their dorm.

Primary Challenge: 

Designing an Information Hierarchy to
influence student behavior in terms of being
energy efficient and conscious.


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.


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.

Project Summary

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.


Thorough 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.