UNFPA Learning Map

Designing a visual tool for the United Nations Population Fund.

2020D3.js, HTML, CSS Demo

The project

In Spring 2020, I took a course called Information Presentation & Visualization (DS 4200) that was a part of Northeastern's service-learning program. Throughout the semester my team and I partnered with the UNFPA, known as the United Nations Population Fund, to design and build a useful data visualization for their operations.

The problem

At the start of the semester, we interviewed representatives from the New York UNFPA office to identify any problems they faced that could benefit from a visualization.

During our discussion, they communicated the desire for a channel that the 120 global UNFPA offices could use to learn about each other's country initatives.

A country intiative is essentially a UNFPA program that targets a problem area (e.g. Sexual Reproductive Health, Gender-based Violence) in a particular country.

My team decided to run with this idea and set out to create a "learning map" that would allow users to explore different country initiatives.

The process

Data Exploration

The dataset we received from UNFPA was mostly non-numerical, categorical data about different country initiatives. So first we played around with some visualization ideas in Tableau in order to get a sense of how we could display qualitative data in an interesting way.

Data exploration in TableauData exploration in TableauData exploration in Tableau

Different kinds of charts we explored in Tableau

Task Analysis

After becoming familiar with the data we were working with and taking into account our client's needs, we established three domain tasks we wanted an MVP of our visualization to achieve:

  1. A user can view UNFPA initiatives by category.
  2. A user can view UNFPA initiatives by country.
  3. A user can see details about each country’s initiatives.

Sketching

Guided by these three core domain tasks, we each hand sketched a few directions our visualization could go in. Below are some our early sketches that inspired our final design.

Rough hand sketch of our visualizationRough hand sketch of our visualizationRough hand sketch of our visualization

Early hand sketches

Next, I onboarded our team onto Figma and synthesized ideas from our hand sketches to a polished digital sketch:

Digital sketch of our final visualization
Digital sketch of our final visualization

Implementation

Half of my team came from non-technical backgrounds, which presented the unique challenge of implementing a web project together with varied design and development skills. To help bridge this gap I...

  • Assumed the role of a project manager/scrummaster by grooming a backlog of tasks and keeping track of everyone's progress.
  • Reviewed all committed code and enforced code cleanliness, while giving my team members space to learn the technologies we were using and implement features on their own.
Demo of our final visualization

Demo of our final visualization.

At the end of the semester, we delivered a complete prototype of a learning map to our partners at the UNFPA, who plan on adapting our project to their work on UNFPA learning!