Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Amazee Labs on
WMF’s aging Drupal website was no longer meeting their needs as a marketing, educational, and fund-raising tool. With an emphasis on modern design and streamlined content architecture, Amazee Labs was tasked with improving the overall usability of the site, for both end users and site administrators.
Why Drupal was chosen:
WMF’s legacy website was built with Drupal 6, a version long in the tooth but familiar to their content editors. An upgrade to Drupal 7 took advantage of that familiarity, while exponentially expanding the toolbox with which to build a fast, reliable, user-friendly product.
Describe the project (goals, requirements and outcome):
ARCHITECTURE
At the heart of the World Monuments Fund redesign is a simplified site architecture. By organizing content into four comprehensive landing pages, we’ve improved the user experience for two key audiences. First time visitors are readily introduced to WMF and their mission, while returning devotees are encouraged to get involved or give to the cause.
In parallel, a series of in-depth pages serve more distinct audiences.
Architecture, history, and travel enthusiasts alike can quickly and easily comb through WMF’s 1,000+ projects using the multi-faceted Site Explorer. Drupal’s Search API Solr Search module allows these users to search by any combination of site type, theme, and country, as well as free text. Results can be displayed on an interactive Google map, custom designed for WMF using Mapbox.
Preservation professionals and academics are treated to a similar experience in the Library, a searchable archive of WMF publications. Further reading is curated on the News page, which offers up WMF’s latest blog posts, press releases, and media mentions. Visitors also have opportunity to sign up for a monthly Newsletter, which is connected on Drupal’s backend to Pardot by Salesforce.
DESIGN
Big, beautiful imagery and handsome typography do the heavy lifting for the look and feel of the new website. Taking advantage of WMF’s seemingly endless supply of impressive photography was obvious, a strategy that lends a great deal of authenticity to the product.
Interaction design centers around conversion. Whether it be contacting a WMF affiliate office, or signing up for Friends Membership, considered layouts and careful use of color help direct visitors to the far corners of the site. An all-encompassing responsive design ensures a consistent user experience across all screens and devices.
MIGRATION
Site structure and design mean nothing without content, and WMF has plenty. In what can only be described as a monumental migration, we’ve folded nearly 6,000 unique pieces of interwoven content into the new platform. We used migration scripts to pull in high-resolution images from Dropbox and thousands of lines of copy from a Google Sheet and merged the two together in Drupal using entity references so that the content populates and is completely connected to other site content.
SITE ADMINISTRATION
We’ve delivered our client a highly customizable product, one they can update themselves without needing to contact a developer. Text and images that would normally be hardcoded can be easily updated by the administrator. New content can be created and promoted to the homepage, and other landing pages, with the click of a button. The Paragraphs module empowers WMF to build complex new pages from scratch, and ensures they’ll display beautifully and responsively.
Technical specifications
Drupal version:
Drupal 7.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
Paragraphs
With the Paragraphs module, we gave content editors total control over the flow of content. Any combination of 11 paragraph types builds a robust, beautiful, responsive basic page in minutes.
A few of the different paragraph types we custom designed and implemented for this project: Accordion, Call to Action button, Cards, 1-column WYSIWYG, Full-Width Image, Photo Banner, and Video. Take a look at Friends of WMF to see some of these paragraphs in action.
Search API, Search API Solr, and Facet API
These modules were used together to build a dynamic search engine for WMF’s nearly 1200 projects. On Project Explorer, users can browse and filter projects to their heart’s content.
We’ve implemented the power of Solr sitewide so users can easily find and explore WMF’s breadth of media including videos in the Video Vault, three kinds of News, and the content-rich Library.
Media
We used Media to allow WMF administrators to take advantage of their vast library of beautiful imagery and videos by enabling Drupal’s powerful multimedia file system site-wide. With a few administrative keystrokes, visitors can see the same beautiful image from a Site in India on an Event listing in India or a Blog post on India, or as a thumbnail for one of their many YouTube videos.
Mapbox
We used the Mapbox module to implement a custom designed Google map with which users can pinpoint the location of a WMF site. We’ve used this mapping feature site-wide to reinforce WMF’s global reach. Users can access the map in the header of a project page. Users can also use the Project Explorer map to discover and browse WMF’s many projects by location.
We also used a custom Mapbox search query on the Watch to help reveal WMF’s 50 new Watch Sites for the 2016 Watch announcement.
Organizations involved:
Project team:
The WMF project was completed by the Amazee Labs team in Austin, Texas, with supplemental development work from Amazee Labs Zürich and Cape Town. We continue to maintain and further develop the project. View the full site credits at https://www.wmf.org/humans.txt
Project Manager: Stephanie El-Hajj
Design Lead: Andrew McClintock
Tech Lead: Kathryn McClintock
Migration Lead: Vasi Chindris
Developer: Claudine Braendle
Developer: Maria Comas
Developer: Brandon Williams
Sectors:
Non-profit
