Agora Photovoltaics and Wind Area Calculator

Context

The transition to renewable energy in Germany is complex, involving numerous factors that are difficult to quantify and visualize. Stakeholders, aka government officials, environmental advocates, investors, and community planners—all interested in Germany's renewable energy transition, face challenges in understanding the impact of wind and photovoltaic energy, e.g. with concerns such as wind turbines near residential areas. Building an app that visualizes and quantifies the overall situation, challenges and future possibilities, not only addresses resistance but also empowers users with the information needed to support the energy transition.

Objectives

• Designing an interface that displays potential land use for wind and PV energy, integrating factors like geographical data and environmental impact.
• Allowing stakeholders to interact with data, compare scenarios, and understand the implications of different energy choices.
• Working on the data visualization design (charts and maps) to help understand the different outputs of each decision.
• Implementing the design into the front-end, ensuring a smooth integration with the back-end and data teams.

Design Concepts and Solutions

• Began with a simple interface centered around wind energy only, featuring guided steps for data manipulation and comparison of different scenarios.
• Created first simpled mockups featuring a main chart (status quo vs. goals to achieve) on the sidebar providing instant feedback on changes made to the data, helping users understand their progress toward energy goals.
• Collaborated with the think tank's graphic design team to ensure proper use of brand guidelines, enhance the visual elements and integrate additional features.
• Adapted to new requirements, such as adding photovoltaics energy to the data, by updating the structure and adding more complex data interactions.
• Conducted user testing throughout development to gather feedback and guide improvements.

Data Visualization Design

A major challenge was color-coding the various map layers, requiring distinct colors for each layer and related colors for categories. It was also important that the two main map layers (wind and photovoltaic) were easily distinguishable from the rest of the map, as they are the primary focus of the app.

• Designed color palettes for each category that are easy to understand and distinguish, using tools like ColorBrewer.
• Separated the colors of wind and photovoltaic from the rest, to highlight them.
• Iterated on the color palettes based on user feedback to improve the interface and meet new needs.

Front-End Development

• Implemented the design with CSS/Sass and Bootstrap
• Worked hand in hand with the back-end and data teams to ensure functionality and performance.
• Ensured cross-browser compatibility and responsiveness (desktop-first) with device testing as well as online tools.

Results

• The app’s design and usability received highly positive feedback from the client, resulting in its immediate integration and display on their official website.
• Developed an intuitive interface that empowered stakeholders to interact with complex data, compare scenarios, and make informed decisions about renewable energy choices.
• The flexible design and development process allowed for the smooth addition of new features, such as photovoltaic energy data, ensuring that the app could adapt to evolving user needs and requirements.

Reflections

• Improved my skills about map visualization design, making me more interested in the field of map visualization.
• Highlighted how challenging starting from few requirements can be, as new features and requirements can be added at any time, requiring a flexible design and development process.