WWF Energy Dashboard

Time span:
2022-2023
Description:
Dashboard showing from the daily updated electricity mix to CO2 trends for a climate-neutral Germany
Tasks:
  • UI Design
  • HTML/CSS Development
  • Data Visualization Design
Tools:
  • Figma
  • Illustrator
  • Bootstrap

Requirements

  • Create custom dynamic plots on key energy-related topics and statistics for Germany
  • Follow the existing client design guidelines and branding
  • Use a grid view to display the plots visually
  • Implement the solution so it can be easily integrated into an iFrame and be responsive
Example of three tiles from the WWF Energy Dashboard

Data Visualization

The initial sketches for the charts contained a lot of information. To improve usability and ensure that all important information is visible on the screen, we decided to simplify the charts by cutting out some parts. This reduction in complexity also helped with responsiveness.

We chose D3.js as our chart library because it allows us to create custom charts that aren't available in other JavaScript chart libraries. A significant challenge has been ensuring the responsiveness of the plots and making sure that adjacent cards with different amounts of plots have the same height.

Example of three tiles from the WWF Energy Dashboard

Results

We created a grid with 11 cards, each focusing on a specific energy-related topic and featuring unique interactive data visualizations.

Reflections

Custom charts provide a unique perspective on data, but in other projects, using ready-made charts might be sufficient to reduce technical complexity and save resources. It is also crucial to find the balance between the right amount of information and good readability during the design process. For this, design processes and data visualization must work closely together.