Templeton World Charity Foundation (TWCF) builds on a legacy of founder Sir John M. Templeton. It primarily funds interdisciplinary research on what it means to be human, from the intellectual to the scientific to the spiritual. Founded in 1996, TWCF funds projects around the world and from both established and emerging experts in science, technology, religion and related fields.
TWCF came to us last year primarily to modernize the front and backend experience, which had grown increasingly unwieldy. We established the following broad-based objectives for the redesign:
- Update the design and improve the readability, findability and indexing of content. The previous website locked significant amounts of content in imagery and PDFs that limited the usefulness of search
- Migrate the technology from Drupal 7 to Drupal 8.
- Improve sitewide performance. Here, we looked to a new solution, Gatsby, to deliver content lightning-fast. This allowed the site to produce any image-heavy pages or project database content quickly by separating the Drupal database from an ultraquick front-end rendering engine.
Let’s take a look at each of the key objectives:
Update the design and improve the content experience
We created wireframes that simplified and unified the design experience, in particular for the four major initiatives that the Foundation currently supports through grantmaking. Previously, each initiative followed no clear template for presenting their programmatic objectives, impact, funding opportunities and previously supported projects. Our wireframes (and the subsequent design provided by TWCF’s design partner), provided a unified approach; now each initiative has a hierarchy of messaging and related content while still distinguishing themselves through the use of imagery and unique branding.
Additionally, the old site designs delivered a significant portion of evergreen content within images, PDFs and other design elements that were negatively impacting search. In essence, valuable content that would have been indexed by search engines was lost because the old site often treated content as if it was a brochure - locking away valuable narrative & SEO related to the Foundation. Our approach solved this problem as well.
Migrate to Drupal 8
Migrating the site to Drupal 8 allowed Chapter Three to rebuild the site in a more modern approach and allowed us to create a more intuitive backend that allows their content administrators to easily update major landing pages, while also giving them the flexibility to build out new pages using several repurposable components. These components gave the site a polished and unified look and feel but allows enough customization to keep their site sustainable for the long-term. It also sets up the site for a smoother move to Drupal 9, should the Foundation wish to do so later.
Improve site performance by implementing Gatsby
Gatsby provides an extremely fast front-end experience on top of the Drupal backend. You’re still taking advantage of all the flexibility and customization that Drupal offers to store and create relationships between content types, but the delivery to the browser itself is handled by Gatsby’s unique combination of tools including React.js, Webpack and modern CSS and javascript. Essentially the pages on the Templeton site:
- Load instantly because users don't need to wait for the pages to be called up from the Drupal database; they sit within the React.js presentation layer;
- Other pages within the site you’re visiting are prefetched by the browser, so clicking from page to page feels incredibly fast.
The speed of the pages is noticeable and is particularly important to mobile users. As mobile access to the web keeps growing, and we ask more and more of our phones, having superfast delivery of pre-formed content can help those accessing pages from less-than-optimal data or wifi networks.
For a deeper dive into the technical realm of Gatsby, see Rob's recent post, "Gatsby + Drupal (in Lando)".
And finally...
The Templeton World Charity Foundation website is a model of clean design, improved usability and modern content management and delivery. We launched in the Spring of 2020 and are providing ongoing support and maintenance for the Foundation.
