EmpowerPlan

Time span:
2023-2024
Description:
Visualization of a regional energy system aiming at creating a trans-disciplinary dialogue between decision-makers
Tasks:
  • UI Design
  • Prototyping
  • HTML/CSS Development
  • Data Visualization Design
Tools:
  • Figma
  • Illustrator
  • Bootstrap
  • Echarts

Objectives

  • Ensuring user familiarity with regional specificities and energy transition challenges
  • Defining user expectations for results view
  • Optimizing user experience for scenario comparison without overwhelming choice
  • Determining the most suitable design approach for application context.
Design of the scenario page from EmpowerPlan

Iterative process

We began by using initial data about the future users of this web tool and our experience from similar web apps we had built. I created mockups and prototypes, which were shown at the first workshop with actual users to get their direct feedback. Based on this feedback, we improved the prototypes and then 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.

Reducing complexity

To manage complexity from the first to the last page, I implemented a wizard-style step process focusing on specific topics at each stage, enhancing user navigation and comprehension.

Design of the results page from EmpowerPlan

Visualizing data

The project required displaying over 30 map layers simultaneously, presenting a significant visualization challenge. Typically, using more than 10 colors for categories can diminish the effectiveness of data presentation. To overcome this, I decided to categorize the map layers and to assign a distinct base color to each category. Within each category, I used sequential color palettes to differentiate further among the layers. This approach helps users easily distinguish between different data sets without feeling overwhelmed.

Different color palettes designed for the app

Improving Information Design

The user interface became complex due to new requirements coming during the building process. This complexity risked diminishing effectiveness in navigating through the pages. I decided to restructure the interface to separate the primary information into the main view, while settings and options were moved to a sidebar and an expandable secondary sidebar. Additionally, the amount of displayed information was reduced and the chart designs were refined to improve their readability. These changes helped simplifying interactions and making data comprehension more intuitive.

Design of the results page from EmpowerPlan

Front-end development

We used Bootstrap as our CSS framework, integrating it into the existing Python framework for the back-end and data handling. We chose not to use a front-end framework like React to keep the app infrastructure simple. For visualizing plots, we opted for ECharts, an easy-to-use chart library that integrates smoothly with our existing app.

Map visualizations from EmpowerPlan

Results

We achieved a simplified step process and results view where users are able to visualize pre-defined as well as custom scenarios with plots and an interactive map. The detailed results should help stakeholders understand the different possibilities and base their decisions on real data.

Reflections

I was able to improve my skills about accessibility for user interfaces. This also highlighted the need for deeper knowledge in accessible map visualization practices, as it is more difficult to find resources on that topic.