Sustainable House: A Combination of TUI and GUI
In this project, I designed a model of a zero-energy house that demonstrates how renewable energy can be incorporated into daily life. The model will feature a 3D representation of the house and an interactive GUI that allows users to select and experiment with various types of clean energy. This way, users will be able to see firsthand how the house operates and how clean energy can affect it.
3 weeks
Hardware Project
Processing, Arduino, Figma
Challenge
Clean energy is crucial in addressing climate change and reducing reliance on fossil fuels. Zero-energy houses, which generate as much energy as they consume, offer a sustainable solution but face limited adoption due to public unfamiliarity with their concept and benefits.
What did I learn?
I enhanced my technical skills in model making, Processing, Arduino, and hardware design while also refining my design and iteration abilities. This included using tools like Figma and techniques such as creating user personas, user flows, system flows, screen flows, graphic user interfaces (GUIs), and developing real 3D models.
Knowing Content
Why I got the idea to do this project in the first place ?
As we face the urgent challenges of climate change and the growing need to reduce our dependence on fossil fuels, clean energy has become a critical focus in building a sustainable future. Among the many innovative solutions, zero-energy houses stand out as a promising approach.
What's Zero-energy Houses?
A zero-energy house is a building designed to generate as much energy as it consumes over the course of a year, achieving net-zero energy consumption. This is accomplished through a combination of energy-efficient design, advanced insulation, and the integration of renewable energy sources like solar panels and wind turbines.
Why I got the idea to do this project in the first place ?
Despite their potential to significantly reduce carbon emissions and lower energy costs, zero-energy houses remain underutilized. One key barrier is a lack of public understanding and awareness. Many people are unfamiliar with the concept, how these houses function, or the benefits they offer. This knowledge gap hinders the adoption of zero-energy houses and slows our collective transition toward sustainable energy practices.
HMW
Design develop
Overview
Persona
System Map
Final Design: Digital Part (GUI)
GUI Wireframe
Processing Code
The Processing program creates an interactive system that combines digital visuals with tangible feedback to teach about zero-energy houses. It uses images, videos, and mouse interactions to navigate through educational content, with boolean variables managing page transitions. The program communicates with an Arduino via serial communication, enabling actions on the interface, such as selecting solar, wind, or heat pump systems, to trigger corresponding physical responses in the 3D hardware model.
User Interface
The GUI introduces users to the world of zero-energy houses, featuring two main functions:
Learn About Renewable Energy
Visual and textual explanations of clean energy types (solar, wind, geothermal).
Interactive diagrams to demonstrate energy generation and conversion.
Compare Energy Systems
A side-by-side comparison of a zero-energy house versus a traditional house, emphasizing energy savings, cost efficiency, and environmental impact.
Final Design : Tangible (TUI)
Tangible Feature

A miniature wind turbine to demonstrate electricity generation.
Solar panels that track light sources using ambient light sensors.


A heat pump system with neon light tubes to simulate energy transfer.
Hardware
This is a simulation of the wind energy process. Wind energy is typically providing the house with electricity. So the light bulbs here are representing the electrical facilities in a house.
The solar panel will move based on the position of the lights. There are two Ambient Light Sensors. Arduino will compare the numbers that each Ambient Light Sensor transfers and make the motor move based on the numbers. Also, the red light bulbs will light up, representing the hot water coming down because of the solar energy.
The heat pump part consists of four main components: above ground part of the neon light tube, below ground part of the neon light, a mode converter , and a transformer and a button(inside the converter).
Arduino Code
This Arduino program simulates a wind turbine, solar panel, and heat pump, controlled via serial commands. Input '1' activates LEDs and a motor for the turbine; '2' adjusts the solar panel's angle using light sensors and a servo while lighting LEDs; and '3' toggles a light ball for the heat pump, creating an interactive demonstration of renewable energy systems.