SUSTAINABILITY ADVICE GRADUATION RESEARCH / WEB SOLUTION

PROJECT Year: 2016

The sustainability advice project is my graduation prototype and research that led up to it. This prototype is a web based application that gives advice to energy consumers and was built with the latest web technologies such as HTML5, CSS3 and Angular.

The final prototype is application with 3 states (pages). First a login or a registration form to get a unique “user”. Once completed a series of (dummy) data is attempted to be connected to the user. In the prototype an environment from an energy supplier point of view is used, where data like the space of a residence, roof information, energy use & costs and family composition is being connected to the login. After this process a series of products are presented to the consumer. The user is then asked to either verify or answer if he or she has the product. Conclusively a roadmap is shown. An advice how to make their home more sustainable in steps. The advice is based on input, context and the scientific principle called “Trias Energetica”. The consumer can then change the projection of the plan, products, amounts or retailers and see how this affects their energy use and costs in the future.

COMPETENCES

  • Development
    • JQuery, JQuery UI, Google Charts
    • AngularJS
    • Bootstrap (HTML/CSS)
  • Research
  • Agile / Prototyping
  • User Experience Design

PROCESS

A big part of this project was research in different aspects of energy and its consumers, theory behind sustainability, current technologies, mentality and motivation under consumers and working with data to find out how data can be used to aid consumers in this process.

After much research, I began to create wireframes to prototype to get the first directions. I took some feedback from my supervisor and then began a design in photoshop. Once done I created the framework HTML that could hold the content and design. After most of this was done, the CSS took a long time to get done, but things were made easier with the use of bootstrap. With some JQuery lines I was able to make the application come to live quickly.

With this set and done, I went to the users and initially started testing the goal and usability of the website. I made multiple test rounds with various test methods to gather feedback. With this feedback I was able to keep making changes to the usability and functionality while at the same time trying to refactor my code. Using Angular to define the routing, allowing it to be more responsive and to be usable with any backend. The final prototype was handed in together with my thesis as proof of concept.