EmpowerPlan

Context

The goal was to develop a user-friendly platform for visualizing and comparing energy scenarios in order to help stakeholders in understanding the complexities of Germany's renewable energy transition, as well as to make informed decisions based on real data. The main target groups were decision-makers in regional and environmental planning.

Objectives

• Ensuring users can easily navigate and understand regional specificities and unique challenges of Germany's energy transition.
• Creating a results view that is intuitive and informative, in order to help users taking data-based decisions.
• Balancing comprehensive options with a good user experience for effective scenario comparison without overwhelming users.
• Identify the most appropriate design approach for the application context, ensuring that the interface is both functional and user-friendly, making interaction with complex data easy.

Design and development process

• Brainstormed first ideas with the initial data we had about the future users of this web tool and with our experience from similar web apps we had built in the past.
• Created mockups and low-fidelity prototypes with Figma, which were shown at the first workshop with actual users to get their direct feedback.
• Improved the mockups and turn them into high-fidelity prototypes.
• Implemented them in the front-end, working with the back-end and data teams to make it functional with real data.
• This process repeated with new workshops and feedback, each time improving the tool's usability.

Navigation and interaction design

Along the process, the user interface became complex due to new requirements. A few decisions were made to improve navigation and interaction:

• Restructured the app by implementing a wizard-style step process starting with a global introduction (steps 1 and 2), a scenario overview (step 3), options to change the selected scenario (step 4) and the results (step 5), reducing cognitive load and possible errors.
• Built a map dashboard layout containing a sidebar and an expandable secondary sidebar, displaying controls and extra information, while keeping most of the available space for the main content: the map and the result charts.
• Reduced the amount of displayed information and refined the chart designs to improve their readability.

Data visualization design

The project required displaying over 30 map layers simultaneously with each of them having a different color, presenting a significant visualization challenge. Typically, using more than 10 colors for categories can diminish the effectiveness of data presentation. A few decisions were made in order to help users distinguish between different data sets:

• Categorized the map layers and assigned a distinct base color to each category.
• Used sequential color palettes within each category to differentiate further among the layers.
• Layers displaying lines or smaller areas got darker values to improve readability and color balance with lighter, larger areas.

Front-end development

• Used Bootstrap as our CSS framework, integrating it into the existing Python framework for the back-end and data handling.
• Chose not to use a front-end framework like React to keep the app infrastructure simple.
• Opted for ECharts for visualizing plots, an easy-to-use chart library that integrates smoothly with our existing app.
• Highlighted accessibility issues (keyboard navigation, HTML/ARIA structure, textual description for data visualization, color contrast).

Results

• Positive feedback from workshops indicated that users found the platform’s interface both clear and user-friendly, significantly reducing the learning curve for non-expert users.
• The new design provided stakeholders with an accessible way to visualize and interact with both predefined and custom energy scenarios, improving their ability to evaluate and choose suitable energy transition strategies.

Reflections

• Improved my skills about accessibility for user interfaces.
• Highlighted the need for deeper knowledge in accessible map visualization practices, as it is more difficult to find resources on that topic.