[← 返回作品檔案](https://cheyuwu.com/zh/work/) 早期專案2017 # Interactive Household Electricity Data Visualization ![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%2Fcover.jpg?alt=media&token=14dbd113-bef6-49a7-ba97-c033bd5e5a95) 合作單位 ITRI Green Energy and Environment Research Laboratories 原始日期紀錄 03/2017 – 05/2017 類型 Web page design and development 參與工作 Graphic design UI UX / Frontend and backend web development 目錄與作品資料 合作單位 ITRI Green Energy and Environment Research Laboratories 原始日期紀錄 03/2017 – 05/2017 類型 Web page design and development 參與工作 Graphic design UI UX / Frontend and backend web development ## 專案紀錄 以下保留原有英文專案說明、製作過程與影像。 ## 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://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%2Fh5eaoeg16b.jpg?alt=media&token=54a535d7-f1fe-43ab-aad1-9a47168a4ac9) ## 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://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%2Foyzep4rbxc.jpg?alt=media&token=66ff38ea-ec1f-4442-bc88-22db3c18df82) ## 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. ## 延伸閱讀與來源 - [原始專案連結 ↗](http://saving.energypark.org.tw/) 展出、研究與合作 [聯繫藝術家 ↗](https://cheyuwu.com/zh/contact?work=Interactive+Household+Electricity+Data+Visualization&from=/zh/project/-L3BF-Vyu4MIt4bQ_jDa/) ## 沿著作品繼續閱讀 ![Selinko & Remy Martin APP UI Design](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FSelinko%20%26%20Remy%20Martin%20APP%20UI%20Design%2Fcover.jpg?alt=media&token=27f49fad-2c24-4b9a-94d7-89e0bd20eefc) 03/2015-05/2015 ### Selinko & Remy Martin APP UI Design [https://cheyuwu.com/zh/project/0](https://cheyuwu.com/zh/project/0) ![Unleash the Future - n3xtcon brand design](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FUnleash%20the%20Future%20-%20n3xtcon%20brand%20design%2Fcover.jpg?alt=media&token=fc69f24d-f81f-4959-a481-b5ef671433c4) 06/2017 – 12/2017 ### Unleash the Future - n3xtcon brand design [https://cheyuwu.com/zh/project/1](https://cheyuwu.com/zh/project/1) ![Taipei Metro Soundscape - Interactive Website](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fcover.jpg?alt=media&token=aadd606a-2460-4f98-9db1-decd68fea3e5) 01/2017 – 03/2017 ### Taipei Metro Soundscape - Interactive Website [https://cheyuwu.com/zh/project/-L3BAn3HOg8fE1jx5B79](https://cheyuwu.com/zh/project/-L3BAn3HOg8fE1jx5B79) 1 / 0