[← Back to work](https://cheyuwu.com/work/)

Project archive2017



# Interactive Household Electricity Data Visualization



![Interactive Household Electricity Data Visualization](https://cheyuwu.com/static/img/mirror/49805527b04b.webp)



Client



ITRI Green Energy and Environment Research Laboratories



Original date record



03/2017 – 05/2017



Type



Web page design and development



Responsibilities



Graphic design UI UX / Frontend and backend web development



Contents & work details



Client



ITRI Green Energy and Environment Research Laboratories



Original date record



03/2017 – 05/2017



Type



Web page design and development



Responsibilities



Graphic design UI UX / Frontend and backend web development



## Project record



## Background















Upon request of Green Energy and Environment Research Laboratories of Industrial Technology Research Institute of Taiwan, I was to create an online household electricity journal. The purpose was to collect statistics of household electricity nation-wide. Because the original web page contained flash and outdated interactive and visual design, we decided to renovate it with 3D scene construction. My teammates and I created five 3D rooms while I determine the UX optimization on the web page to enhance input experience and willingness to participate.



















## Data Visualization















![Interactive Household Electricity Data Visualization](https://cheyuwu.com/static/img/mirror/e77d20b0c1f5.webp)















## 3D Modeling and Interaction Design















We used the trendy UI style of 3D plus lines with yellow as the main color. We also visualized the data of the country’s electricity consumption with a bubble chart and then guided users to fill out







the form. This allowed users to understand the main purpose of the web page, optimized time register options, and lowered visitors’ doubt and bounce rates.















![Interactive Household Electricity Data Visualization](https://cheyuwu.com/static/img/mirror/136f06b337e5.webp)























## Website Design and Development















![Interactive Household Electricity Data Visualization](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FHousehold%20Electricity%20Journal%20in%20Collaboration%20with%20ITRI%20Green%20Energy%20and%20Environment%20Research%20Laboratories%2Fimg%2Fhdr7nxurfoc.jpg?alt=media&token=d83c0857-4bc6-4a12-b9c1-4b2b9f0197d6)















## Results















Vue.js frame was adopted in the frontend, so the data could be instantly connected and represented to users. Upon completion of the form, they would see a visualized graph showing the power consumption of their households. Additionally, I also included energy-saving appliances recommended by Taipower and pushed certified appliances to interested users.















According to the backend statistics, the renovated web page successfully enhanced the willingness to complete the online form by 60% while adding a fashionable touch to a government website. Later, we were contacted by other public institutions such as National Applied Research Laboratories of Taiwan. I believe good design is contagious and it will invite more people to join the movement to make our lives visually and technically better.



## Context & sources


- [Original project link](http://saving.energypark.org.tw/)



Exhibitions, research & collaborations

[Contact the artist](https://cheyuwu.com/contact?work=Interactive+Household+Electricity+Data+Visualization&from=/project/-L3BF-Vyu4MIt4bQ_jDa/)



## Continue through the work



![Selinko & Remy Martin APP UI Design](https://cheyuwu.com/static/img/mirror/7531d981e357.webp)


03/2015-05/2015



### Selinko & Remy Martin APP UI Design

[https://cheyuwu.com/project/0](https://cheyuwu.com/project/0)



![Unleash the Future - n3xtcon brand design](https://cheyuwu.com/static/img/mirror/af7e4d0a4c08.webp)


06/2017 – 12/2017



### Unleash the Future - n3xtcon brand design

[https://cheyuwu.com/project/1](https://cheyuwu.com/project/1)



![Taipei Metro Soundscape - Interactive Website](https://cheyuwu.com/static/img/mirror/25e82a257f00.webp)


01/2017 – 03/2017



### Taipei Metro Soundscape - Interactive Website

[https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79)



1 / 0