Skip to content
Shoaib Hadeed

Flashboard

A dashboard concept for the 2022 floods in Pakistan, designed to show impact and help direct aid without overwhelming the people using it.

Role
Self-initiated, solo
Year
2022
Status
Concept, not built or tested
The Flashboard dashboard. A map of Pakistan's districts shaded from light to dark blue by the share of people exposed to flood water, darkest across Sindh. Jacobabad is selected, with its figures in a panel on the left. National totals run down the right, and a bar above the map shows the UN appeal, 32 per cent funded.

The need

In 2022, Pakistan was hit by devastating flash floods during the monsoon. They took lives, destroyed infrastructure and livestock, disrupted the economy, and brought waterborne diseases, psychosocial harm and mass migration.

After the floods, people needed clear information on who was affected, what the impact was, and how to get aid to them. International organisations and individuals wanted to help.

Sorting the information

Researching the cause, effects, prevention and aid for flash flooding turned up a bundle of metrics. With limited time and space, each metric needed a priority and a category, to save people from information overload. I grouped them into cause, effect, prevention and aid.

The flood metrics sorted into four groups. Cause and prevention are marked phase 2 and greyed out: rainfall, dam levels, topography, forecasting, warning alerts and more. Effect, and aid and recovery, are marked phase 1 and set in full: deaths, displacement, diseases, crop and livestock loss, infrastructure, urgency, funds, donations and relief.
The metrics, sorted into four groups.
  1. 1Because of the urgency, the effects of the flood became the focus, along with how to get aid to the people affected.
  2. 2A lot of information was saved for cause and prevention, for a second phase. Winter gave a window of three months to prepare for it.

Deciding what comes first

After sorting the list, the goal became clearer. Phase one focuses on effects and aid. Cause and prevention move to a second phase.

Who it’s for

Government officials, NGOs, relief and aid workers, and people looking to help. Their needs set the priority of each metric.

Wireframes

After wireframing, I realised there was a lot of information for someone to sort through. I set each metric’s priority by its weight and urgency, and kept the design clean and minimal, so the landing page stays free of clutter and the relevant data is there.

A greyscale wireframe of the dashboard. A navigation bar, a row for carbon emission, deaths, infrastructure damage and the aid goal, and a row for people at risk, livestock, displacement, crops and economic loss. Below, a map of Pakistan’s districts in greys, with panels for the area under most risk, the selected area and rehabilitation, rehabilitation totals, a Twitter feed, and a donor attribution box with a button to contribute.
The annotated wireframe.
  1. 1A navigation bar leads to the other pages: relief and aid, news and updates, the gallery, and resources on flooding.
  2. 2Carbon is shown because it’s the number one cause of climate change and snow melt.
  3. 3Metrics for the different groups of people affected, set by hierarchy.
  4. 4A clickable map, divided into districts. Metrics for each group are split into loss and rehabilitation.
  5. 5A Twitter feed from the government’s flood relief account, for live updates.
  6. 6Donor attribution promotes aid. The highest contribution is shown with the name of the organisation or person, and updates when someone gives more.

Colour only on the map

After refining, I was convinced that only the map should be coloured, as it gives the impact needed.

The refined wireframe. Everything is grey or black except the map, where a few districts show red for impact and green for rehabilitation, on a scale from severe impact to safe. Panels list the figures for a highlighted area, waterborne diseases and the area under most risk.
The refined wireframe.

Revisiting it

My final screen from 2022 still had placeholder values, and only one district on the map carried colour. In 2026 I rebuilt it with the real figures.

The Flashboard screen as designed in 2022. On the left, cards for Swabi district: people, livestock, crops, infrastructure and waterborne diseases, each giving figures affected, at risk and rehabilitated. In the middle, an aid bar at 52 million of a 10 billion dollar goal with a Contribute now button, an impact scale from red to green, and a grey map of Pakistan with Swabi in red. On the right, national totals, and along the bottom a row of totals, several still marked with an exclamation mark.
My final screen as designed in 2022, with early figures gathered online. The ! and ? mark ones I didn’t have yet.

Every figure now comes from a named source: NDMA’s final report on the floods, the UN’s response plan, the post-disaster needs assessment and UNOSAT’s satellite analysis. Every district is shaded by the share of its people exposed to flood water, in one blue from light to dark, which people with colour blindness can read. The first version ran from red to green. The selected district shows its own figures, and says clearly when a figure covers the whole province. Some metrics I planned, like waterborne disease by district, have no consistent public figures, so they’re left out.

The rebuilt dashboard. A map of Pakistan’s districts shaded from light to dark blue by the share of people exposed to flood water, darkest across Sindh, with a legend from under 1 per cent to over 60 per cent. On the left, Jacobabad: 91 per cent of its people exposed and 96 per cent of the district under water, with Sindh’s deaths, houses, livestock and relief payments. Above the map, the UN appeal at 262 million of 816 million dollars, with a button to contribute. On the right, Pakistan’s totals, from 33 million people affected to 30.1 billion dollars of damage and losses.
The final screen, rebuilt in 2026 with the real figures.
  1. 1Every figure names its source and date, so people can trust what they act on.
  2. 2Selecting a district on the map shows its figures, split into loss and relief.
  3. 3Contribute now is there to promote aid and donors’ contributions.
  4. 4Districts are shaded by the share of their people exposed to flood water, in one blue from light to dark, so colour-blind readers can tell the levels apart.
  5. 5Only the map is in colour, so the level of impact reads at a glance.

I also added a phone layout, since relief workers are mostly in the field.

Three phone screens. The first shows the UN appeal with a button to contribute, and Pakistan’s totals in tiles. The second shows the shaded map with its legend, and a sheet for Jacobabad at the bottom. The third shows Jacobabad’s figures: 91 per cent of people exposed, 96 per cent of the district under water, Sindh’s losses and its relief payments.
The phone layout: the national figures, the map, and a district.

What I’d do next

It’s far from complete, but as a concept it works. Next, it needs live data, and testing with the people it’s for. Then phase two: the cause and prevention metrics I set aside. I’d also make a version in Urdu, light enough for weak connections, for people in the affected areas.

Next project

Canterbury 100

A museum piece that tells Canterbury’s history through taste and smell.