Brief
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?
- Visually represent how the countries fulfil their NDC commitments.
- Rate every country's adherence to their NDCs based on well-established criteria.
- Let the user drill down deeper into multiple NDC criteria and provide insights for each country (when available).
- Visually compare the CO2 emissions and abatement cost based on the country's commitments.
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.
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.
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.
Finally, we changed the colour scheme to PRGn to make it work with colour-blind vision.
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.
Reception
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.