Kris Makuch

Asian Development Bank

Supply Chain Maps for Pandemic-Fighting Products, interface design for a database built to help banks and governments find the firms that could make ventilators, fast.

Client
Asian Development Bank
Role
Dashboard UI design and illustration
Discipline
Editorial and data
Year
2020

Objective

The tool states its own purpose on the cover: to give banks, investors and government the information they need to ensure companies manufacturing and distributing goods critical to fighting COVID-19 “have nothing stopping them from ramping up supplies as fast as possible”.

Behind that sits a database that decomposes a product into its component parts and returns, for each company involved, its name, location, turnover, headcount, position in the chain and, where known, its bank. Somebody deciding whether to finance a ventilator manufacturer needs all of that on one screen, in a hurry, and probably only once.

The plates record the context: the work is for ADB's Supply Chain Finance Program, part of the $20 billion the bank committed to offsetting the effects of the pandemic, drawing on Orbis and Bureau van Dijk company data.

Creative response

UI/UX design, information architecture, data visualisation and bespoke illustration for a complex supply-chain platform.

  • The product page. Tabs across Aprons, Face Shield, Goggles, Respirator and Ventilators; an equipment illustration beside the component list that product decomposes into, for a ventilator, twenty-one parts from compressors and flow regulators to pre-circuit bacterial filters, and beneath it the sortable table of firms making the selected component
  • The location page. The same table under a world map with proportional bubbles, so the geography of supply and the detail behind it sit in one view
  • Thirty-nine items of equipment, drawn individually. Ventilators, oxygen concentrators, tanks, tubing and flow splitters; respirators, surgical masks, coveralls, gowns, aprons, goggles and gloves; PCR, antigen and antibody tests, swabs and blood plasma; dexamethasone, hydrocortisone and lopinavir; vaccines, vaccine research and cold chain
  • Twenty-three numbered concepts, running 22 April to 15 May and then through a second phase to 23 July 2020
  • A typographic system. Ideal Sans licensed and packaged with the artwork

Drawing thirty-nine items separately rather than buying a medical icon set is the decision the rest of it rests on. A database that distinguishes a portable oxygen tank from a fixed one, and an antigen test from an antibody test, cannot be illustrated by a library that draws them as the same picture; the interface would be telling the user they are interchangeable while the data says they are not.

Twenty-three concepts is the other half. Each is a different answer to what the user meets first: the product, the place, or the company. The route that carried puts the illustration and the table on one screen at one scale, so recognising the item and reading its suppliers are a single action rather than two.

The mock-ups carry placeholder strings, but they are drawn at full density: eighteen rows visible, every column header sortable, and pagination running out to ninety-nine pages. That is the difference that matters in a data tool. A comp showing four tidy rows gets approved and then fails the first time somebody loads a component with nine hundred suppliers, because nobody ever looked at what the page does when the data arrives.

  • The product page. Tabs across Aprons, Face Shield, Goggles, Respirator and Ventilators; an equipment illustration beside the component list that product decomposes into, for a ventilator, twenty-one parts from compressors and flow regulators to pre-circuit bacterial filters, and beneath it the sortable table of firms making the selected component
  • The location page. The same table under a world map with proportional bubbles, so the geography of supply and the detail behind it sit in one view
  • Thirty-nine items of equipment, drawn individually. Ventilators, oxygen concentrators, tanks, tubing and flow splitters; respirators, surgical masks, coveralls, gowns, aprons, goggles and gloves; PCR, antigen and antibody tests, swabs and blood plasma; dexamethasone, hydrocortisone and lopinavir; vaccines, vaccine research and cold chain
  • Twenty-three numbered concepts, running 22 April to 15 May and then through a second phase to 23 July 2020
  • A typographic system. Ideal Sans licensed and packaged with the artwork

The work

Asian Development Bank Concept
Asian Development Bank Concept
Asian Development Bank Concept
Asian Development Bank Concept
Asian Development Bank Concept
Asian Development Bank Concept