Sonnentag Sustainability Display

Showcasing groundbreaking sustainability with an interactive touchscreen installation

Overview

The Sonnentag Sustainability Display is an interactive touchscreen installation in the lobby of the newly constructed Sonnentag Complex at UW-Eau Claire. Designed to highlight the building’s cutting-edge sustainability features, the display allows visitors to explore an interactive 3D model and view real-time energy and water usage data gathered from the building’s submetering system.

The Challenge

The Sonnentag Complex is one of the most energy-efficient buildings in the region, incorporating geothermal heating, solar energy, and advanced automation systems. The client wanted an engaging, interactive way to educate visitors about these often invisible sustainability efforts. The display needed to integrate a highly detailed 3D model, handle real-time data visualization, and run smoothly on a dedicated on-site computer.

My Role

As lead front-end engineer, I developed the technical architecture and collaborated with Lauren Malkani on design and content strategy. We conducted in-depth research on the building’s construction and refined architectural models from the project’s architects to optimize them for web performance.

Technical Implementation

• React.js & Apollo: Created a scalable front-end with a GraphQL-based real-time data pipeline.
• Three.js & React-Three-Fiber: Developed an interactive 3D model showcasing the building’s sustainability features.
• D3.js: Designed a custom dashboard to visualize power, water, and HVAC data from submeters.
• Blender: Optimized architectural models for seamless rendering in a browser environment.
• Hardware Integration: Worked with UW’s IT team to select a NUC micro gaming PC capable of handling complex 3D graphics.

The Sonnentag Sustainability Display transforms technical building data into an accessible, visually rich experience, helping visitors understand and appreciate the facility’s commitment to sustainability.