WESTRIDGE SCHOOL
ANNUAL REPORT

Westridge School is an independent school for girls in grades 4-12 in Pasadena, CA . Like many nonprofits, they traditionally design a printed annual report every year, but in 2018 they decided to take their report entirely online (hooray for saving trees!).

Over several months during the fall of 2018, I designed a new website on Squarespace from the ground up, building wireframes and writing custom CSS and Javascript to precisely style a complex layout. I also wrote lighthearted copy and collected some lovely testimonials from various people to set a warm, communal tone. The site went through multiple iterations and the report launched in November 2018.

 

the challenge

Westridge’s priority was to personalize philanthropic impact, and wanted to include testimonials about the school collected from all of their primary constituencies. I needed to find a way to format dozens of quotes and images that wasn’t overwhelming for a viewer.

Additionally, Westridge provided me with lists of donor names (which had formerly taken up dozens of printed pages), and we needed a formatting solution that wouldn’t require a user to scroll endlessly to find their name in the report.

 
westridgear1718-screen3.png
 

the solution

Student, parent, and alumnae testimonials were scattered throughout the website using Squarespace’s summary carousel block, which I custom-styled using CSS injection. The result was a beautiful, image-based layout that captures the eye without being distracting.

For the donor lists, I was able to keep all of the hundreds of names on one page by using CSS and Javascript to create a series of responsive tabs that, when clicked, triggered dropdown content. I styled the tabs as blocks of buttons and clustered the buttons by category (example provided in the image above) that could all live on the same, single page.

 
   Above:    Initial wireframes for the site

Above: Initial wireframes for the site

   Above:    I created charts and graphs to display gift summaries and general financial information.

Above: I created charts and graphs to display gift summaries and general financial information.

   Above:    I used bold, colorful overlays to make the messaging pop.

Above: I used bold, colorful overlays to make the messaging pop.