Heatmaps
Visualization of CO2 emissions at Fornebulandet on commission from Bærum Municipality - delivered by Knowit Objectnet.
Embedded Files
Overview
Overview
Starting point:
Starting point:
Over the summer, I had the opportunity to work in a team of three students at Knowit Objectnet. We developed a web application commissioned by Bærum Municipality in connection to their ambitious climate vision and their work at Fornebu.
The Challenge:
The Challenge:
The client desired an interactive map with a simple visualization of emissions, as well as an overview of various climate initiatives to motivate residents and businesses at Fornebu to make more environmental friendly choices.
My Role:
My Role:
UX designer in a small, interdisciplinary team. I was responsible for user research, ideation, prototyping, and usability testing.
Process overview
Process overview
- Understanding the context
We started by interviewing the client to identify the root of their desire, enabling us to finalize a specific idea for a solution and an overview of the system requirements. We also conferred with other stakeholders to clarify what kind of data we were working with and what data was available.
2. Defining the problem
2. Defining the problem
As the project description was quite vague, we needed some external insight as to how we wanted to frame the task to engage with the user group. Therefore, I arranged for the entire team to travel out to Fornebu to walk around, primarily the shopping mall, conducting short guerrilla interviews to get some insight into what the users knew about energy usage, what they wanted to know, and what might motivate them to change their habits towards more sustainably practices.
3. Exploring & Prototyping
3. Exploring & Prototyping
Throughout the project, we engaged in multiple iterations of prototyping, testing, and adjustments. Our team worked agilely, utilizing SCRUM principles to organize our workflow. Being on-site together minimized the need for frequent meetings, as we communicated continuously. We held weekly updates with our team lead and client representatives in Bærum to present prototypes and gather feedback. I was fortunate to collaborate with two skilled software engineers keen to learn about design and actively participate in various stages. To work effectively as a team, we ensured open communication, involving each other in decisions and ideation sessions, which enhanced my understanding of technical aspects while they grasped the user needs we aimed to meet.
We sketched early concepts and tested them through low-fidelity wireframes. I used Figma to build interactive prototypes that let users explore sensor data across different buildings and time ranges. The design focused on simplicity, clarity, and layering of information to avoid overwhelming the user.
4. Testing & Iteration
4. Testing & Iteration
Focusing on agile development and the principles of design thinking, the process required continuous testing and development. Utilizing the resources at the office, the design team at Knowit arranged weekly meetings to present and provide feedback on each other's projects. This proved to be an excellent means to get continuous feedback on my design prototypes and the functionality we developed.
Later on, we also engaged participants from the user group in usability testing as the product continued to develop. This feedback resulted in several concrete changes, such as highlighting what the user might gain from implementing sustainable measures, and a more detailed and better onboarding process when first opening the website.
Feedback induced improvements
After several usabilitytests, we discovered that the information displayed on the screen and the functions on the website were not as intuitive as we had initially assumed. This led us to conduct further research regarding potential onboarding options. We presented three different approaches which we then retested with users. We concluded that the approach you see here was the most understandable. After going through the onboarding process, we found that users gained a better understanding of the web application as a whole and the information presented.
Design Tools
Design Tools
Over the summer, I primarily worked in Figma focusing on interaction design, but I also ventured into more visual tasks by developing my own mini design system, UI design, and even a bit of graphic design where I created a logo and illustrations based on open-source vector-based figures, which was very exciting.
Product Functionality
Product Functionality
Front page
Front page
The front page of Heatmaps provides a comprehensive overview of Fornebulandet and the average emissions from the buildings that make it up. The colors on the buildings represent how high the emissions are based on the graph to the left. In addition, in the bottom left corner, you can see a representation of how many offices and homes are included in our dataset, as well as whether they are colored green, yellow, or red
Building information
Building information
By navigating around the map, one can zoom in and click on the different buildings.
If one or more filters are activated in the top right corner, we simulate all buildings installing and using heat pumps and/or solar panels.
Then, you can see how the colors on the map change and the CO2 graph decreases.
At the bottom of the side menu, there is an overview of how much money, kWh, and kg of CO2 can be saved annually if the given measure is implemented.
This is intended as extra motivation for users, as we found that the strongest motivator for adopting more environmentally friendly measures was economic gain.
Outcome
Outcome
The project concluded with a demo for Knowit internally, followed by a demo for the client and finally a presentation at Arendalsuka 2023 alongside Bærum Municipality.
Our Proof of Concept was later further developed at Knowit Objectnet and is set to be launched as a service by Bærum Municipality.
Page updated
Google Sites
Report abuse