Lorem ipsum dolor amet, consect adipiscing elit, diam nonummy.
The Institute for Reproductive Health (IRH) first approached us with the idea of making two static infographics highlighting some key takeaways from their work in violence prevention and family planning in Africa conducted under the USAID-funded Passages Project. After helping the team define their goals and target audiences, I proposed that we instead consider a digital-first approach as a better option for sharing their findings.
The final result is two engaging, long form web features that a reader can digest in a single sitting or can be used in webinars and conferences to showcase the Passages Project’s important norm-shifting work.
I created the design for these websites in Adobe XD using the Passages Project branding guidelines including the icons and photography treatments. I worked closely with the developer to create the subtle animated entrances seen on scroll.
I designed this simple menu for the site which changes as the user scrolls based on the information the user needs at different points in the site.
When someone first lands on the site, it helps explain to the user what the content on the site is (A summary of work by the Passages Project). Once the user understands that information and begins to scroll, it then switches to act as a navigational menu which takes a user to an anchor at the top of the page.
I also designed both a version that appears on dark and light backgrounds so this too changes on scroll. It’s subtle enough to not be distracting, but remains functional and informative.
When I first received the content for this web feature, I noticed how dense the results section was and knew I wanted to design an engaging way for the user to skim the information but easily read more if they wanted.
I came up with these expandable result cards. Easy to skim and click through with key facts highlighted in bold. For the engaged user who wants to see the specific details of each result, there’s an obvious way to expand all of the cards at once, or expand them individually.
