Northeastern University Sustainability Data
Website Design | Research | Coding

The sustainable management of universities is key for ensuring clean air, water, food, and soil in local ecosystems, supporting the growth of all life and biodiversity, promoting health and human wellbeing, and creating thriving and abundant creative communities. For this project, Northeastern’s Sustainability Office has granted us permission to use their recent data to explore and create a meaningful set of visualizations for communicating key sustainability data.
The development of the Northeastern University Sustainability Hub website was a collaborative effort aimed at creating an intuitive and informative platform for incoming students to explore sustainability initiatives on campus.




Northeastern University’s campus is huge and right in the middle of the city, isn’t it great?
But is this campus with a relatively old architecture and design even SUSTAINABLE??
But is this campus with a relatively old architecture and design even SUSTAINABLE??
Oh my God!! Its so difficult to understand this data. I wish there was a simpler way of understanding this……
So the aim of this website is collect the data and make it simple and understandable in order to spread awareness among the incoming students……
Research and Data Collection
Data for this project was primarily sourced from Northeastern University’s sustainability website and additional university-provided resources. Through rigorous analysis of this data, we experimented with various design approaches to present the information in an engaging and informative manner. This iterative process allowed us to create a user-centric and visually appealing representation of the data.

Buildings with Highest KgCO2e Emission Rate

Circular bar graph:
This graph represents building emission values for a campus, displaying the environmental impact of various campus buildings in terms of their KgCO2e rates.The radial plot provides a visual overview of these emissions, where each bar corresponds to a building, and the height of the bar represents the KgCO2e rate.The graph highlights the buildings with the highest emissions by labelling the top five buildings with the darkest colors, making them easily identifiable.
This visual emphasis draws attention to the specific buildings that have the greatest impact on emissions within the campus. Overall, this graph allows viewers to quickly identify the buildings with the highest emission values, making it a useful tool for assessing and addressing environmental concerns within the campus infrastructure.
Emissions from 2005 to 2022:
The scatter plot depicts the total CO2 emissions for a campus over the years 2005 to 2022. Each point on the plot represents the total CO2 emissions for a specific year.
The y-axis shows the total CO2 emissions, and the x-axis represents the years. As the years progress from left to right, the plot illustrates a clear decline in emissions, demonstrating the campus’s commitment to reducing its carbon footprint. Overall, the graph provides a visual representation of the reduction in CO2 emissions over the years, signalling an environmentally responsible approach and a move toward sustainability.
Emissions from 2005 to 2022:

Buildings with Highest KgCO2e Emission Rate

Circular bar graph:
This graph represents building emission values for a campus, displaying the environmental impact of various campus buildings in terms of their KgCO2e rates.The radial plot provides a visual overview of these emissions, where each bar corresponds to a building, and the height of the bar represents the KgCO2e rate.The graph highlights the buildings with the highest emissions by labelling the top five buildings with the darkest colors, making them easily identifiable.
This visual emphasis draws attention to the specific buildings that have the greatest impact on emissions within the campus. Overall, this graph allows viewers to quickly identify the buildings with the highest emission values, making it a useful tool for assessing and addressing environmental concerns within the campus infrastructure.
- The design of the Northeastern University Sustainability Hub website was meticulously crafted to embody the university's commitment to sustainability while captivating the attention of incoming students.
- Drawing on a color palette featuring scarlet, light olive, and blue, the design evokes a sense of vibrancy, harmony, and eco-consciousness. Scarlet symbolizes the university's passionate dedication to sustainability initiatives, while light olive represents growth, renewal, and the lush beauty of nature. Complemented by calming shades of blue, reminiscent of clear skies and pristine waters, the color scheme reflects the interconnectedness of environmental stewardship and personal well-being.
- Through the thoughtful integration of these hues, the Sustainability Hub fosters a sense of optimism and excitement, inspiring incoming students to explore and engage with sustainability in a meaningful way.
Buildings with Highest KgCO2e Emission Rate

The primary design and development of this project was done using Figma, facilitating collaboration, iteration, and efficiency. It helped in creation of visually compelling and user-centric layouts, incorporating a harmonious blend of typography, imagery, and data visualization elements.
Subsequently, the Figma designs were translated into HTML and CSS code to bring the website to life. This process involved attention to detail, ensuring pixel-perfect implementation of the design while optimizing for performance and responsiveness across different devices.
