portfolio /

NDC Tool



Design and develop a prototype for a web application to see how countries adhere to their NDCs. Derive user stories from the provided research material.

What should this prototype do?

The Design

We had eight categories and 11 NDC criteria to rate a country's commitment. We decided to translate these criteria onto a scale of 5 based on a country's actions. To convey this visually, we now use a world map with each country displaying a colour based on their NDC rating. This view helps the user understand how countries rank among their neighbours.

country-ratings phone design country-ratings desktop design

The prototype had to provide both a high-level overview and the ability to dive deep. While the tool displays an NDC rating and visually compares it with neighbouring countries, it must also explain why/how a country got a specific score. For this purpose, we use an array of pie charts (one per criterion). Upon selecting the NDC criterion, we use modal windows to provide more information, like excerpts from their NDC document and expert comments.

ndc-criteria phone design ndc-criteria modal phone design ndc-criteria desktop design ndc-criteria modal desktop design

The prototype had to display a country's annual CO2 emissions, projections based on their commitments, deviation from BAU (business as usual) and 100% abatement cost. We use a line chart to display this information. The end user could use the slider at the bottom to adjust the action year. Doing so recalculates the abatement cost and updates the chart.

emissions chart

Finally, we changed the colour scheme to PRGn to make it work with colour-blind vision.

PRGn color theme
new color-theme preview (phone) new color-theme preview (desktop)

The Development

From the beginning, our focus was getting the design right. We designed four versions earlier that progressively resulted in the one that's presented across the world today. We kept refining details till the last day. Due to the uncertainty around the UI design, we wanted a simple tech stack that's easy to code, maintain, add enhancements or pivot if necessary. We chose HTML, SCSS, jQuery, Handlebars and ChartJS. We implemented a clear separation of presentation and data using JSON files.


Our client, GBPN, remains delighted with the project handling and delivery. They presented the prototype on 11 Nov 2022 at the UNFCCC COP27 conference in Egypt.