rbf-website-thumb.png

Redesigning the Rockefeller Brothers Fund's website

Redesigning the Rockefeller Brothers Fund’s website

rbf-website-desktop-tablet-mobile

Time Scope
January – September 2015
(8 months)

My Role
Project Management, User Research, Content Strategy

 

Overview

As communications manager at the Rockefeller Brothers Fund, I led its first responsive website project in September 2015. My primary role was to liaise among staff and leadership, our longtime design partner, On Design, and our new web development firm, Message Agency. In addition to making it mobile-friendly, other goals included better connecting related content, improving the navigation, and updating its appearance.

Key Features

Grants Search

 
 

One of the most important features of the site is its Grants Search, a tool regularly promoted as the hallmark of the Fund's commitment to transparency. It contains information about every award granted since 2003 and is updated monthly. I sought to reinvent the search experience to feel familiar to our users by advising we simulate the best e-commerce sites.

Reconciling our data with a new web-friendly system was one of our biggest challenges. The data, exported from our grants management software, contained nearly 4,000 entries, categorized by more than 100 unique codes, under 27 parent codes. We sought to organize and present the data under 57 categories nested among 8 program focus areas. A lesson in the value of collaboration, it required me, along with our grants management analyst and our web firm's lead developer and project analyst, to understand the softwares and systems we each used in order to come up with a robust, flexible, and elegant solution.

Annual Review

 
 
 
 

Through the years, the Rockefeller Brothers Fund’s annual review has evolved from a printed summary of its endowment growth, spending, and grantmaking, to a deeper reflection on its impact and an analysis of trends over a three-year period. I met with each of the internal teams responsible for providing data to learn the stories they wanted to tell with their numbers. I then sketched out new charts to better visualize some of the trends.

 
 

Before: The only graphical representation of portfolio growth in the 2013 annual review was in this table.

 
 

After: Displaying quarterly changes tells a richer story of the Fund's endowment growth over three years.

 
 

Before: The Grant Dollars Awarded bar chart from the 2013 annual review.

 
 

After: In the new Grant Dollars Awarded chart, we stacked the program grant totals to show overall annual grantmaking and the trend over three years.

 
 

Inspired by beautiful parallax sites, I recommended that the annual review be a continuously scrolling page, which would also make it more mobile-friendly than the tabbed structure we had in the past. I had planned for the charts to be responsive, but we encountered last-minute challenges with Google Charts site-wide, and decided it was best to go with static images instead.