ROLE
UX/UI Designer, Programmer | Individual Project
January 2022, 5 weeks
DURATION
OUR OZONE
Taking the lead to depict the success of the Montreal Protocol based on the data of ozone layer depletion, progression of international agreements and signals of ozone recovery.
Present a data story in an interactive medium while identifying and using appropriate scientific quantitative data.
THE
GOAL
Data progressively invades all spheres of society, and there is a lack of civic engagement and political action to ensure the ethical use of Big Data.
THE
PROBLEM
The Montreal Protocol on Substances that Deplete the Ozone Layer was adopted across the world since 1987 and is widely regarded as the most effective international treaty ever. Its goal was to phase out or at least limit the usage of man-made ozone-depleting compounds in order to protect the ozone layer.
How can we visualize the success of the Montreal Protocol based on data of ozone layer depletion, progression of international agreements and signals of recovery?
RESEARCH
The adoption of the Montreal Protocol on Substances that Deplete the Ozone Layer,1987 marked a turning point in environmental history and is widely regarded as the most effective international treaty ever. It was the first international environmental treaty to achieve complete ratification and critical in reducing ODS consumption and ozone recovery. Its main goal was to phase out or at least limit the usage of man-made ozone-depleting compounds in order to protect the ozone layer.
In May 1985, scientists shocked the world when they announced the discovery of a huge hole in the ozone layer over Antarctica. Depletion can have significant health consequences including skin cancer, sunburn and skin ageing. Since then, the Antarctic ozone hole, about the size of North America, has opened every year as a result of the combination of low temperatures and man-made pollution.
PROBLEM & SOLUTION
WebGL is a JavaScript programming interface for rendering interactive 2D and 3D graphics within any compatible web browser. Specifically, the WebGL Globe is an open platform for geographic data visualization created by the Google Data Arts Team. With this open source, I was able to use its code and add my own data, then put them together on to the web browser via html.
CONCEPT PITCH
CONCEPT ART
MOOD BOARD
The feedback received from research and peers made it clear that users are more interested in learning about the tale of global collaboration and ozone recovery.
CONTEXT OF USE
KEY USER
Youth Model United Nations
Students between the ages of 15 to 24
The data visualisation could be used as research tool for a Model United Nations (MUN) on making positive change to global environmentalization. Youth delegates can use the data for their research conduction and in preparation for their speeches and discussions.
The data interaction will be experienced through a web browser. It could be a data visualization plugin for the United Nation Environment Programme.
DATA SOURCE
CSV dataset from Our World in Data
Data published by The World Meteorological Organization(WMO), UNEP, NOAA, NASA, the European Commission, and the European Environment Agency (EEA)
-
Change in the consumption of ozone-depleting substance (1986-2018)
-
Stratospheric ozone concentration projections (1960-2100
-
Countries subscribed to the Montreal Protocol (1985-2013)
PROTOTYPE
WebGL is a JavaScript programming interface for rendering interactive 2D and 3D graphics within any compatible web browser. Specifically, the WebGL Globe is an open platform for geographic data visualization created by the Google Data Arts Team. With this open source, I was able to use its code and add my own data, then put them together on to the web browser via HTML.
CHALLENGE
The initial ideation was to visualize the changes of ozone hole, however the implementation of precise data on to WebGL proved difficult in the early prototypes. Ultimately, I had to step back and redefine the visualization.
Plotting 3D vertical points (see format below) of ozone hole with latitude/longitude was time-consuming and error prone.
[ 'seriesA', [latitude,longitude,magnitude,latitude,longitude,magnitude,... ]],
['seriesB' [latitude,longitude,magnitude,latitude,longitude,magnitude,... ]].
USER TEST
I conducted two contextual cold reads with school peers to see if the layout of the low fidelity prototype is intuitive to understand. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Users raised concerns about the usage and relationships of the various components on the page, indicating a need for additional captions and labels. They also require a more intuitive user flow to access other features on the website, such as an opening and closing page.
HIGH FIDELITY
IMPACT & LESSON
Thirty-two years ago, countries signed the world’s most successful environmental treaty, the Montreal Protocol. It is saving the ozone layer, saving millions of lives, and avoided a global catastrophe. The world has solved an environmental crisis collaboratively, and we can do the same for climate change. Data visualization should answer vital questions, provide real value. The challenge is not how visually appealing or intricated the visualization is, but lies in deciding what method best tells the story. In my story, I want to deliver the happy ending that comes when science, the public, and policy-makers join together. Policymaking at The United Nations directly affects global climate change, but how and where do we start?
As a beginner to the programing world, I encourage myself to boldly experiment with new tools and to continue elevate my creativity in global conversation.