Global Goals

Redefinding data visualization to end extreme poverty, decrease inequality, and fix climate change

SAP collaborated with Global Partnership for Sustainable Development Data to create a Digital Boardroom that displays data of the 17 Global Goals launched by United Nations, which helps stakeholders to focus on areas that requires the most work and investment . The Global Goals aim to end extreme poverty, decrease inequality, and fix climate change by 2030.

final image
View of the interface when goal 14 is selected.

Role: UX/UI Designer

Responsible for creating the visual style, composition, and structure of the product

Tools:

  • Information Architecture
  • Visual Design
  • Wireframing
  • Sketching
context image

Understanding context

Before I started sketching or creating mockups, I sat down with the Data Scientist to understand the various data available for each goal, which gave me a clear idea of the context.

Establishing Information hierarchy

Together with the data scientist, we wrote down all of the data on sticky notes and organized them to create information hierarchy based on level of importance and how users would approach the data. The result gave the data scientist a clear picture of what data were needed to be visualized for each goal and how I would approach designing the composition of each interface.

sticky notes image

Creating Wireframes

While the Data Scientist worked on visualizing the data, I focused on creating wireframes. I considered the hierarchy of the information of each goal throughout the design process because it determined where each data should be placed within the composition. Since the Digital Boardroom consisted of three big monitors, I also had to consider how the three screens would look together as a whole, not just for each individual screens. I created a grid structure of 4x6, so that it would create visual consistency across all interfaces.

wireframe image
Wireframe of the navigation screen on the left monitor.
wireframe image
Wireframe of the landing screen for center monitor.

Final Product

We decided to move forward with the idea of keeping the left screen as the menu panel, so users could easily navigate between various goals. Data of each goals were displayed on the middle and right screens. Images and colored rectangular shapes in the background were added into the composition of the interfaces with data to create a cohesive look with the menu and landing screens.

wireframe image
wireframe image
wireframe image
Interface of the initial landing screens.