WESTRIDGE SCHOOL
ANNUAL REPORT

 

Westridge School is an independent school for girls in grades 4-12 in Pasadena, CA. Like many nonprofit institutions, they traditionally print an 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 using CSS and JavaScript to precisely style a complex layout. I also wrote lighthearted copy and collected some lovely testimonials from various school community members to set a warm 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 they wanted to include testimonials about the school collected from all of their primary constituencies. I needed to format dozens of quotes and images in a way 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 hundreds of names on a single webpage 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 page while taking up minimal real estate.

 
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.