Energy Monster - Data Representation

We all use electricity every day, but how often do we think about how much we’re using? For example, if you turn on an 18-watt light bulb for two hours, it consumes 36 watt-hours of energy. Now, consider how much electricity you use across all devices in a single day. It’s easy to lose track, especially since most of us don’t check our energy data regularly.


Globally, electricity usage varies, with North America standing out for its high consumption.


Therefore, I designed a project using React.js and Cursor AI. This project bridges creativity and functionality, offering a practical way to monitor and manage home energy usage in an engaging way.



The idea started with a common problem: we don’t usually feel the need to check our energy data daily. This lack of awareness makes it hard to understand where our electricity goes and which devices are driving up our bills. To make this process interesting, I turned to the concept of digital pets, inspired by Tamagotchis—the handheld devices kids loved in ’00s.



“Energy Monster,” a playful way to visualize energy consumption. The monster’s appearance reflects the type of appliance it represents. For example, large appliances like refrigerators are red, medium ones like hair dryers are blue, and smaller devices like phone chargers are yellow. The monster’s size grows as its energy usage increases, making it easy to see which devices consume the most power.

The monster also interacts with users. It gets “hungry” every 4 hours, and you feed it based on its energy consumption. For example, if your refrigerator uses a lot of power and grows to three times its size, you’ll need to give it three portions of energy food to keep it happy.

You can earn energy food in a few ways: by saving energy, working out, taking public transit, or donating to environmental causes. If your energy usage stays below a certain level, the app rewards you with energy food automatically. There’s even a ranking board to help users quickly understand their usage patterns and compare them with others.

The Energy Monster can be installed on different devices—your phone, laptop, or even a smart home screen. It’s designed as a Progressive Web App (PWA), making it flexible and easy to use. Future updates could integrate real-time energy data through APIs from home hubs, making it even more accurate and responsive.

Chiwu's website

join me thoughout my design journey

File

Assets

Pages

Design system

Product design

Links

Connection

Social media

Contact

Chiwu's website

join me thoughout my design journey

File

Assets

Pages

Design system

Product design

Links

Connection

Social media

Contact

Chiwu's website

join me thoughout my design journey

File

Assets

Pages

Design system

Product design

Links

Connection

Social media

Contact