DASHBOARD DESIGN

Climate Monitor for North Africa

Communicate complex information with visualizations: Climate crisis and environment refugees in North Africa.

BACKGROUND

This project is about designing a single screen non-interactive dashboard for raw data on North Africa environment and climate. The goal of the dashboard is to help policy makers understand the environment crisis of the region and the potential causes. How to clearly communicate complex information with visual graphs and simple animations are challenges of the design.

This project is a CMU class project for Interaction Design Studio.

MY ROLE

  2017.03 - 2017.04
  • Graphic Designer
  • Dashboard Designer

SKILLS

  • Dashboard Design
  • Animation
  • Data Visualization
  • Storytelling
1

DASHBOARD PREVIEW

How to communicate complex information

A dashboard is a single screen display of dynamically changing information. People use them to monitor unfolding situations to adapt their behavior or take specific actions. Designers struggle to create dashboards so information can be understood at a glance, can be monitored with minimal attention, and can alert users to critical situations. To achieve these goals, I worked on the following aspects of visual storytelling:

Preprocessing complex information and narrative design
Eliminating extraneous information
Attract audiences’ attention to the point of interest
Present causality or associations in an intuitive way

In this portfolio piece, I present a sample dashboard designed for climate and environment refugee monitoring. The dashboard focused on global.

DASHBOARD

THE STORY: CO2 leads to a rise in Temperature, which is the primary cause of increasing natural disasters, decreasing agricultural yields, and increasing climate refugees.

This dashboard also shows the future impact on North Africa if no action is taken and should especially concern European leaders because of climate refugee migration across the Mediterranean.

Animations

CO2 and Temperature

The first animation shows the interaction between CO2 and temperature. There is a strong positive correlation between these two variables. To convey this information, we use an animation which shows the history data and future prediction of CO2 growth at the first, following with temperature data in the same graph.

Natural Disaster and Agricultural Yields

We use a balance to show the interaction between natural disaster and agricultural yields. It indicates the negative correlation between these two indicators. As the natural disaster incidents go up, agriculture yields decreases, moving from sufficiency to shortage. We use color as indication when agriculture yields is lower than the threshold. We show the changes in these two indicators simultaneously.

Ripple animation to indicate anomaly

When a new natural disaster happens, the map will show the location and scope of it. We used spot with bright yellow color to indicate the location, and used ripple animation to indicate the scope. With its enlarging effect, the ripple circle creates feeling of emergency and plays a good role of reminding the policy maker to take instant reaction.

2

RESEARCH

From research to storytelling

The early phase of dashboard design focused on identifying the main indicators of climate crisis and refugee issues in order to choose elements for our dashboard.We chose our indicators based on our desk research and literature review on environmental issues. We decided the following factors as our indicators:

Global CO2 emissions, Temperature, Drought, Sandstorms (incidents), Sea level, Agricultural yield and biodiversity, Refugee migration.

For more information, view the PROCESS REPORT

DARRATIVE DESIGN

The early phase of dashboard design focused on identifying the main indicators of climate crisis and refugee issues in order to choose elements for our dashboard.We chose our indicators based on our desk research and literature review on environmental issues. We decided the following factors as our indicators:

3

DESIGN

Iterate, Iterate, and Iterate

Early Sketches on Dashboard Elements

Use Layout to Define Entry Point

Making the dashboard tell a story by itself can help policy makers understand how to use the dashboard at a glance. We used layout to show relationship between indicators. An entry point is placed on the left-hand side of the dashboard as people naturally read from left to right. Other data are used to support understanding state changes happen in entry point.

Reduce Cognitive Load

Making the dashboard tell a story by itself can help policy makers understand how to use the dashboard at a glance. We used layout to show relationship between indicators. An entry point is placed on the left-hand side of the dashboard as people naturally read from left to right. Other data are used to support understanding state changes happen in entry point.

Final Version
Reduce Unnecessary information from the graph to argument perception.
Avoid "beautiful but useless" design.

Make Interaction Between Indicators Intuitive