A PDF report that had to be re-exported and re-sent every time it changed, rebuilt as a live dashboard in four languages and two writing directions. Nine sectors and roughly $80bn of assessed need, on one link that is never out of date.
The brief
GDD is a humanitarian and development organisation based in Istanbul. Part of their work is an assessment of what the war in Gaza has destroyed: not a headline figure, but a sector by sector account of it, costed, with an estimate of what recovery would actually take.
When they approached another NGO about working together, they sent that assessment as a PDF. Which meant exporting it, attaching it, and knowing that every copy already sitting in somebody’s inbox was out of date. The document was the bottleneck, not the data behind it.
They asked for the same report as a link. One address they could send once, that would be correct the next time it was opened.
Two months, November and December 2023, freelance. I did the design. A front end developer and a back end developer built it. On GDD’s side there was a project manager, a coordinator and two assistants, and between them they supplied and verified every number on the site.
The material
What I was handed was an Excel sheet, and all of it was in there already.
The structure is GDD’s: nine sectors, each broken into sub classifications, each carrying a costed split across relief, recovery and development. I did not design that taxonomy and I would have been the wrong person to. It exists to line up with how humanitarian funding is actually requested, and the people who wrote it do that for a living.
What was mine was the reading of it: what you see first, what you see second, and what you have to ask for. That is the entire job on a project like this, and it is easy to undersell because it produces no new information. The sheet already contained everything. It was simply unreadable at the size a human being actually reads.
Sectors
Human damages, Health, Education, Economic, Infrastructure, Shelter and public services, Cultural and institutional, Environmental, Governance
Every sector splits three ways
Relief, Recovery, Development
Pages
Homepage, Damage Assessment, Required Interventions, Summary of Interventions, Achievements, Gaza Strip
The home page
Three things carry it, and none of them is a chart.
The type scale does the ranking. A figure is large, its label is small, and the percentage underneath is smaller still, so a sector reads in the right order before anyone has decided to read it. Get that wrong and every number on the page shouts at the same volume, which is the same as silence.
Icons do the scanning. Every metric has one, which is what makes the page findable rather than merely organised. You get to the hospitals by their shape, not by reading six labels to arrive at the seventh.
Repetition does the rest, and it is the part I would defend hardest. Relief, recovery and development appear at the top of the page as the site wide total, and then again under every single sector, as the same three cards in the same order in the same colours. You learn the pattern once, at the top, and after that you can read any of the nine without learning anything new. That is what lets the page be long without being tiring.
The total, and the same three way split that repeats under every sector.
One sector: figures ranked by type scale, found by icon, closed by the same three cards.
Damage assessment
The second page is the detail, and the problem with detail is that all of it cannot be on screen at once.
So it is a table that expands. Closed, a row is one line: the classification, what it covers, the sub sector it belongs to, the estimate, the percentage, and when it was last updated. That is the index. Open it and you get the breakdown underneath, as a donut where the question is composition, horizontal bars where the question is comparison within a category, and plain large figures for the things that are just figures.
Nothing that matters at a glance is buried, and nothing that does not matter at a glance is competing with the things that do. The table paginates, because there is far more of this than one page can hold.
Closed, every row is one line. This is the index.
Open, the row becomes its own breakdown.
Composition as a donut, comparison as bars, and figures left as figures.
The rest of it
Required Interventions, Summary of Interventions and Achievements are one taxonomy read three times: Social, Infrastructure, Economic and Good Governance.
Required Interventions is what the response needs. Summary of Interventions costs it, sector by sector, to a subtotal and then to a total. Achievements is what has actually been delivered, and it uses the same rows in the same order as Required Interventions on purpose, because the only useful way to read a delivery figure is against the need it was measured from.
The last page is about the Strip itself: context, video, and a report to download. It is the one page with no live data on it, and it earns its place because a casualty figure means very little to a reader who does not know that 2.4 million people live in 360 square kilometres.
Required Interventions. What the response needs, by sector.
Summary of Interventions. The same sectors, costed to a subtotal and a total.
Achievements. Same rows, same order, so delivery reads against need.
The Gaza Strip page. Context for anyone who arrives without any.
Four languages
Arabic, English, Turkish and Indonesian. One of those runs right to left, and that single fact shaped the layout more than anything else on the project.
Mirroring is not text alignment. The icon moves to the other side of its label. The chevron that means “more” turns around. The three cards reverse their order, because relief has to stay first in reading order and reading order has changed. Table columns reverse. So does the pagination. Every one of those is a small decision, and getting one of them wrong is instantly obvious to the reader and completely invisible to everyone else on the team.
Type solved a problem I had expected to fight. Alexandria carries Arabic and Latin in one family, so all four languages share a vertical rhythm and I was never reconciling two typefaces with different ideas about where a line sits.
Languages
Arabic, English, Turkish, Indonesian
Directions
Right to left, Left to right
Type
Alexandria, Arabic and Latin in one family
Mirrored, not realigned
Icon side, Chevron direction, Card order, Table column order, Pagination
The same home page in Arabic. Not translated, mirrored.
Relief stays first in reading order, which means it moves to the right.
Table columns and pagination reverse with the text.
On a phone
The three need cards sit in a row that scrolls horizontally on a phone, rather than stacking. Stacked, they cost three screens of vertical scrolling before you reach the first sector. Side by side they cost one, and the gesture is one that every person holding the device already owns.
The risk with a horizontal row is that it looks like it ends where the screen ends. So it advances on its own. If you never work out that it scrolls, it shows you, and once it has shown you once you know what to do with every other row on the site.
This is the one piece of the design that could not have come from looking at the desktop layout and making it narrower.
The need cards as a horizontal row that advances by itself.
A sector on a phone. Same structure, same order, less of it at once.
And the same again, right to left.
Handover
The failure mode of a dashboard built by an agency is that it goes stale the moment the agency leaves. That is the same trap as the PDF wearing different clothes.
So there is an upload. GDD’s team fill in a sheet in a format we agreed with them, drop it on the page, and the site takes the new figures. The format was designed with the people who would be typing into it rather than handed to them, which is the only reason it gets used at all. The dropzone takes xlsx, xlsm and xlsb, which is to say the three things their office actually produces, and it says so on the dropzone rather than after the upload has failed.
There is also a registration for organisations. An NGO enters their details, registers as a partner, and that opens up more of the data and the route into actually contributing to the response. It is the point of the whole project stated as one flow: the report exists to start a conversation with another organisation, so the report should be able to accept one.
Partner registration. The report exists to start a conversation, so it accepts one.
The importer GDD use to keep the site current without us. Three Excel formats, named up front.
What went wrong
Two months is not long for six pages, nine sectors and four languages, and it was not long partly because of this.
Things came apart at small widths early on, and the charts were the worst of it: they did not align the way the design said they would, and sometimes they broke outright. That turned into a lot of back and forth with the front end developer to get right. The honest lesson is that a static design file does not express how a chart behaves when it runs out of room, and I had drawn them as pictures rather than specifying what they do when squeezed.
GDD changed what they wanted several times, and work that was already finished had to be redone to accommodate it. Some of what we built was not needed by the end. This is the single biggest reason the project took the time it did, and it is the part I would handle differently rather than the part I would blame.
Some of these titles are very long, and GDD did not want them shortened: they wanted them exactly as descriptive as they are, which for this kind of reporting is a fair call. So instead of arguing I designed around it, breaking long labels across multiple lines inside a defined space that had to hold at every width and in all four languages. The developer implemented that exactly as drawn, which is the only reason it works.
4
Languages, across two writing directions
9
Sectors, all reading through one repeated structure
2 months
November to December 2023, freelance
What I cannot tell you
Access ended at handover. That is normal on freelance work and it is still the part I would change: nobody agreed at the start who would be watching whether the thing worked, so the answer turned out to be nobody I could reach. I am not going to fill that gap with a number I cannot stand behind.
What I can tell you is what it replaced. GDD no longer export a PDF to open a conversation with an NGO. They send a link, and the link is right.
Why it is here
Ecom Society was a product I took over from someone else. Pixilence was one I started from nothing. This was neither. The information already existed, complete, in a spreadsheet. The work was making it possible to read.
It is on this site because it is the one project I would point at if someone asked whether I can organise information rather than decorate it, and because a layout that survives nine sectors, four languages, two directions and a client who will not shorten a label is a harder test than any of it looks.
Next case study