Family Planning Data Sheet

Client

USAID

Year

2019

Tools Used

InDesign

Illustrator

Sketch

InVision

HTML

The Family Planning Data Sheet is a poster produced every five years with up-to-date statistics on contraceptive use and women’s health data for every country in the world. Noteworthy trends are pulled from the data and put into narrative form on the flipside of the poster. This was the first year a website was created to compliment the data sheet.

I designed the print poster and lead the design and development of the website.

PRINT
02.27.19_Family Planning Datasheet_Page_
02.27.19_Family Planning Datasheet_Page_

I gave the Family Planning Data Sheet a bold, colorful design that would pull people into the dense data sets and graphs. I meticulously migrated the data for the data table from Excel into InDesign, developing a system of paragraph styles for each type of number so that all data aligned on the decimal.

WEB
FPDS Website-01.png
About

Historically only a print poster of the Family Planning Data Sheet had been published, but this year we also created an interactive web feature to accompany the poster and increase engagement and accessibility to the data.

FPDS Wireframes-05.png

I began my UX and design planning for the site by wireframing each section of the print version. From there I decided that a single page site would be most user-friendly and would allow the user to scroll through interesting content without getting lost in a series of pages.

Design Process
Design Spotlight

One of the first design elements I created was the nav bar. The main goal with the nav bar for this site was simply to provide users with a touchpoint for where they were located and give them an additional option for navigation. I knew that we would remove the nav bar in the mobile version, meaning a side nav would be a good desktop option.

Mobile Line-06.png
Mobile UX Challenges & Solutions

One of the biggest UX challenges for our site was designing the mobile versions of each data visualization. While most of these translated relatively easily into desktop versions, some of them needed tweaking to be scaled down to mobile.

An especially challenging graphic was the map which is much harder to interact with on a small surface. I had to design an interface that would allow users to select a country from both the map itself and a dropdown with country options. I then needed to design the screens that followed once the user selected a country, making sure to include obvious navigation back to the original site.

Quality Control

Designing a data-heavy website like this meant LOTS of attention to detail. Our reviews with the developers had to be incredibly thorough to catch any data or spelling errors, no matter how small. Each list of countries needed to be reviewed for consistency and every chart had to be checked to make sure the correct data had been pulled and was showing as it should. Not to mention, the interactivity for each chart alone often involved many components from highlighting different data points to ensuring hovers were working to confirming that the right colors were being used to represent different contraceptive methods.

Data-03.png
Lessons Learned

Early Conversations with Developers

As with every project, both time and budget meant we had to wrap up the project without fixing a few small details that were deemed low priority at the end of the day. This was a lesson in how important it is to walk the developer through every small detail in a site design before they begin developing and to be as thorough as possible in each round of reviews.

Prioritizing Mobile

Although mobile users were not our primary target audience for this site, the mobile functionality of the feature was still an important component to the site that ended up as a lower priority because we had not finalized it early enough in the process. The data-heaviness of the site meant there was much more work to be done to transition the site to mobile than we or the developers had anticipated.