Skip to main content
city buildings in a globe

Case Study

A Major Nonprofit Adopts Drupal 8

A strategic leap with Drupal 8 attracts volunteers and donations on a global scale.

Project Highlights

Mediacurrent is honored to support a leading International Nonprofit ranked on Forbes list of the 50 Largest U.S. Charities. To continue on their mission, the Nonprofit needed to create a world-class website and explore ways to increase donations, highlight volunteer opportunities, broaden international reach, and build an engaging mobile presence. 

To achieve such a worthy yet huge goal, the Nonprofit embarked on a redesign to rebrand the website and make a significant, strategic leap with their user experience and technology stack. They chose Drupal 8 to power their digital efforts. Longtime partner Mediacurrent provided the deep Drupal 8 expertise required to extend their internal development team.

    atl=""

    Goals

    • Migrate from Drupal 7 to Drupal 8
    • Create a fully responsive website
    • Increase donations
    • Promote volunteer opportunities on a global scale
    • Cross-pollinate story content throughout the website
    hand drawn flow chart of customer trends

    Why Drupal 8?

    • Out of the box responsive and mobile ready
    • Fast and flexible theming with Twig
    • Future proof
    • Cost-efficiency and value over proprietary solutions

     

    We are excited about the relaunch of our International Nonprofit .org website. Our site has always been a critically important channel for us to share content about our global mission and to connect with people all over the world who want to help make a difference in communities.

    Harnessing the Power and Potential of Drupal 8

    However powerful, Drupal 8’s recent release meant there were inevitable technical and financial considerations to navigate before launch. Since its release in November 2015, Drupal 8 has gained significant momentum: Drupal 8 sites are being adopted twice as fast as Drupal 7. However, time was still needed for Drupal 8 to reach full maturity as 1,000,000+ members of the Drupal open source community work to update all of the project’s community contributed modules from versions 6 and 7 to version 8.

    Mediacurrent’s deep understanding of Drupal 8 contributory module functionality served to minimize the required amount of development customization so that the site is built on maintainable, future-proof code. Furthermore, our team engaged with the Nonprofit’s design and strategy firm to help drive creative decisions through a Drupal lens. Ultimately, this paid off in a web architecture that met the Nonprofit’s launch timeline and budget.

    Shining the Spotlight on Donations

    Because donations are critical to sustaining the organization, donation forms had to incorporate the new design—even though they are linked to a non-Drupal IIS server instance. Mediacurrent worked closely with the Nonprofit’s development team to create and integrate a non-platform specific theme. Now, the donation web forms are seamless and consistent with the look and feel of the new site design.

    Multiple calls to action for donations appear throughout the site: in the header and footer, in the main navigation bar, and throughout the page. This allows the Nonprofit a seamless updating process. Mediacurrent also provided page components for small call-to-action forms that were displayed on pages throughout the site. Once the visitor selects a donation amount, they are directed to the donation web form, where the selected donation amount is automatically populated. Content editors have complete control over their donation message, with the ability to edit surrounding text and the donation amount. To improve on the flat “donate” link on the previous site, calls to action are now more dynamic and editors have the flexibility to change the default donation amount. Editors can also easily redirect the page where the “donate” button leads to, offering flexibility for targeted donation campaigns.

    On the back end, the area edition content type includes a field that controls the “donate” links in the header and footer. It also updates the link in a full-width customizable donation form which can be added to additional pages inside the relevant area edition by simply checking a box on the content node. This process provides a single location for content editors to update the link if needed, simplifies the process for adding a donation call to action on potentially hundreds of individual pages, and helps to separate donations by geographic region.

    Delivering a Personalized Experience for an International Audience

    One of the most significant advancements in Drupal 8 is the internationalization (i18n) features added into its core. Drupal’s out-of-the-box multilingual capabilities were employed to support translations and language handling for Spanish-speaking site visitors. For example, site search is internationalized so that a Spanish search query in the Latin America and Caribbean area edition automatically yields results in Spanish. The Nonprofit team also leverages the user interface translation built into Drupal 8 core to easily translate call-to-action buttons into Spanish.

    Drupal 8’s i18n capabilities were further leveraged to help the Nonprofit team create compelling multilingual content. With five area offices located around the world, the Nonprofit needed a way to deliver geo-targeted content. The site is structured with an “area edition” content type that allows for most of the content to be focused towards specific geographical audiences, including US and Canada, Latin America and the Caribbean and Europe, Africa, and the Middle East.

    Each Area Edition has its own landing page, with the main site’s homepage serving as the US / Canada landing page. In some cases, even the logo changes depending on user location.

    Drupal 8 Mobile Design and Theming

    Going Mobile: A major challenge the Nonprofit faced going into the redesign was adapting its website to a world gone mobile.  Previously, the Nonprofit had a separate mobile site with pared-down functionality and overall stale user experience. Now, the new mobile experience is vastly improved, with a responsive design and theme that delivers a consistent brand experience, including navigation elements and content, on mobile or tablet devices.

    Theming: To achieve a maintainable and scalable responsive design, Mediacurrent’s Front End Development team used a component-based approach that leveraged the Twig template system in Drupal 8. This approach, combined with a living style guide, allowed for frontend and backend teams to work separately on different site components until they are married by an integration task.

    Throughout the theming process, Mediacurrent’s team searched continuously for ways to make improvements toward maintenance and overall usability. We also looked for ways to make the website accessible for search engines and screen readers by using core components, modules, and markup that is semantically correct. In Drupal 8 themes, Libraries are Even though the new site is responsive, the overall page weight is smaller than before. This performance optimization feature of Drupal 8’s powerful front end enables pages to load faster.used to add only the essential CSS and JavaScript assets needed on the page. Even though the new site is responsive, the overall page weight is smaller than before. This performance optimization feature of Drupal 8’s powerful front end enables pages to load faster.

    Living Style Guide: To keep designers and developers on the same page, Mediacurrent created a living style guide that serves as front-end documentation for the entire site, displaying all styles, components, and usage. Because it shares the same markup and styles as the Drupal site, the style guide displays a cohesive, 1:1 view of the live site. This served as a key point of reference for all parties involved with the site redesign. For example, the Nonprofit had a developer working on ASP.NET, a development framework that sits completely outside of Drupal. With the style guide, they were able to include all the styles from the main Drupal site plus the JavaScript elements needed for specific functionality.

    Development

    Instead of writing custom code, Mediacurrent’s development team improved existing modules to make them function fully with the site’s intended architecture in Drupal 8. By extending or completing the community solutions, we were able to provide the Non-Profit with a more maintainable architecture that thrives on module support from the larger Drupal community.

    Key Modules

    Migrate - As part of the site redesign, content had to be overhauled to match the new page layouts and the Non-Profit's new branding guidelines. The Migrate module worked effectively to pull job postings, legacy stories, press releases, and other content. Instead of a one-time migration, this module tracks and updates content.

    Workbench moderation - This suite of modules for content editors was used to improve the content authoring experience.  

    Paragraphs - The paragraphs module was used to build a more robust content architecture. Paragraphs are like mini-content types that can handle a variety of use cases.

    Entity Clone - This module provided a valuable workflow option for content editors in order to create multiple pieces of similar content from a template.

    Search API - Search API provides the .org’s core search, using fully rendered nodes for indexing and a special “search results” view mode for display. A “search boost phrase” field provides the ability to boost the relevancy of a given piece of content for specific phrases.

    _blank

    Final Thoughts

    Mediacurrent's partnership with the Nonprofit spans over four years and we look forward to continued,post-launchh collaboration. Our team’s development approach gives site builders the power to easily drop in components and build pages, empowering the Nonprofit to make custom pages in the future.

    On the horizon for the Nonprofit are performance improvements on the front end in order to make the site even faster. We are also gathering and creating custom reports to track the before/after results of key data points and analytics. Finally, Drupal 8’s powerful internationalization features can be further extended to support the Nonprofit's expanding global vision and community.