The challenge

USAID presented me with a dual task for this project:

1. Create an easy-to-locate and easy-to-navigate home for about a dozen technical reports that had been written over the past two decades on topics ranging from malaria to newborn care.
2. Provide users with a more engaging online experience for these materials.

My three proposed options

The solution

I provided three possible routes to address these needs. Ultimately, my suggested option was selected and we chose to invest in better design of the lengthy PDF documents which would make them cleaner and easier to consume and would include interactive features and accessibility standards to make it easier to navigate the reports.

Additionally, I would create this website that would both act as a home to previously published reports and provide users with the ability to create robust summary landing pages for forthcoming reports.

With the task in hand, I designed this modular site to easily accommodate a variety of content including graphs and charts, expanded source information, key factoids, photos, and more.

Wireframes

These low fidelity wireframes were an important first step to ensure everyone was in agreement on both structure and functionality of the site.

The site itself is simple and easy to navigate. Old reports are easily downloadable from the homepage so there’s no need to navigate between lots of pages. New reports have their own landing pages which are easy to build using custom modules.

Design System

I created a design for this site whose tone was academic, friendly, and trustworthy.

Primary colors are traditional and scholarly but are complemented by the secondary colors which are warm and friendly. It strikes the perfect balance of feeling serious but personable.

I also created an accessibility table and ensured none of the modules strayed from these standards.

Headers (The Seasons): This modern serif font feels contemporary but alludes to the academic nature of the materials on the site that a serif font evokes.

Body text (Adelle sans): A fantastic font for this site as it is easy to read and has no distractions. However, the slight variability in the width of the letterforms and angled terminals creates a more whimsical feel that plays well with the secondary color palette.

This is a relatively simple site but I did want to create a few different button options for future users to have at their disposal. All buttons have both default and hover states.

Homepage design