World Bank
Atlas of Sustainable Development Goals 2023
Art Direction, Visualisation Design, UX & UI Design, Code
Visualising Progress toward the Sustainable Development Goals of the United Nations
In this project, I contributed as Art Director. This included the development of a versatile data visualization style guide and its integration into code. I was further responsible for the UI and UX design of the page, logo design, and for creating a characteristic key visual. I further advised on visualization concepts and styling and the creation of assets for social sharing.
In 2015, the United Nations have agreed on 17 Goals (SDGs) that aim at achieving “peace and prosperity for people and the planet”. Where do we stand in our efforts to achieve these goals? The SDG Atlas 2023 explores this questions through 17 immersive and interactive visual stories showing a plethora of state-of-the-art data visualizations.
Client & Collaborators
Project Management @ World Bank Development Data Group:
Ana Florina Pirlea
Divyanshi Wadhwa
Code & Visualizations:
Dominikus Baur
Maarten Lambrechts
Jan Willem Tulp
A Flexible Design System for Creative Visualizations
The main goal of the SDG Atlas is to show new data on the SDGs in visually interesting, interactive and creative ways. The design system had to be flexible to allow developers to create novel and striking interactive visualizations while still providing enough structure to make all these diverse charts feel consistent and as parts of one single, cohesive publication.
To achieve this, the design system included reusable building blocks such as chart grids, axes, label styles, tooltips and legends as well as design references for the most common visualization types. However, to support the creation of bespoke, custom charts, the foundation of the design language are flexible building blocks in the form of design tokens which can be built upon to give a wide variety of charts a cohesive look and feel.
Design Language
The design of the SDG Atlas relies on a set of basic design tokens that can be used in Figma prototypes, in the CSS and Javascript code of the page as well as R scripts used to create additional static visualizations.
The goal was to create a clean, accessible and friendly set of visualization colors, that take previously familiar Worldbank color conventions (e.g. familiar region and gender colors) into account. The set of colors contain versatile color ramps that fit with a wide variety of data semantics. The UN has further introduced brand colors for each of the 17 SDGs. Our visualization colors thus had to harmonize with these colors as well.
The typography and spacing is based on the Worldbank brand guidelines and uses a fully responsive fluid modular scale in order to interpolate seamlessly between different screen sizes.
The globe as a key visual
The rotating globe serves as an iconic key visual that fits with the Atlas metaphor. At the same time it is a versatile display of global data. For each of the 17 stories, the globe shows one core dataset, relevant to the story. The color palette of each visualization picks up on the brand color of each SDG.
Highlighting countries of interest
On the landing page as well as the header of each story, people can pick a country of interest. This country is highlighted across visualizations that show country level data and stays selected during the entire exploration of the Atlas, until changed.
This allows people to compare their home country to other countries or worldwide trends across the different goals, thus giving the visualizations a more personal focus and make them relevant to individual interests.
Learning about SDGs and their connections
The main objective of the SDG Atlas is to provide the newest data and insights on the 17 SDGs. However, it was also crucial to help people who are less familiar with the SDGs understand the basics about the goals, their targets and connections between them. We wanted to show in the design that there can be both synergies, but also tradeoffs in achieving the SDGs.
This was achieved by enhancing each mention of an SDG or target with direct access to its definition. If a goal is mentioned outside of its chapter, it is also highlighted in the navigation as a jump-of point to prompt exploration of the related goals.
Internationalization
A challenge in the design of the SDG Atlas was to support translation into different languages.
The layout thus supports both a left-to-right and right-to-left reading direction, to allow translation into, for instance, Arabic.
Impact and Media Coverage
The Atlas of Sustainable Development Goals 2023 was featured on the SDG Knowledge Hub as well as the World Bank Data Blog.
The Atlas was also displayed at the UN High-level Political Forum on Sustainable Development 2023.
The Atlas is nominated for the 2023 Information is Beautiful Awards
