← Previous Project
Next Project →

Population, Health, & Environment Approaches

Enhance Youth Leadership & Development





Tools Used




This web feature outlines ways youth leadership can improve 

We were working with a limited budget for this web feature, so we decided to design and develop it in-house using the platform StoryMaps. I came up with a double exposure design concept to marry the two themes of the feature: youth and the environment.

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.

FPDS Website-01.png

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
Sidebar v2.gif
Design Spotlight

One of the first design features I created was the nav bar. Based off of previous sites we had made at PRB with similar content and the density of the data, we had identified that desktop users were our primary target audience for this site. Because of this, I decided to move the nav bar to the side of the site so that it could act as both a reference point and navigation for users. In the mobile version, we simply removed the nav bar.

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, most of them needed tweaking to be scaled down to mobile.

Line small-08.png

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 followed by the screens that followed once you selected that country and including navigation so you could get back to the original map.

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 making sure the right colors were being used to represent contraceptive methods.

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 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.

Add Your Title

This is a great place to add a tagline.

Tell customers more about you. Add a few words and a stunning pic to grab their attention and get them to click.

This space is ideal for writing a detailed description of your business and the types of services that you provide. Talk about your team and your areas of expertise.