Skip to main content

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.

Goals

  • Migrate from Drupal 7 to Drupal 8
  • Consolidate the mobile and desktop experiences into one fully responsive website that will look beautiful on desktop, mobile and tablet devices
  • Increase donations
  •  Promote volunteer opportunities on a global scale
  •  Cross-pollinate story content throughout the website

Why Drupal 8?

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

 

QuoteIcon of Quotation Marks.

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.

Hand holding a small pile of coins with the message "make a change"

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 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.

A person holding a black globe between their arm and hip with the sun leaking through the opening

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.

crowd of people waving iphones in the dark

Drupal 8 Mobile Design and Theming

Going Mobile: A major challenge the Nonprofit faced going into the redesign was adapting their website to a world gone mobile.  Previously, the Nonprofit had a separate mobile site with pared down functionality and an 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.

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.

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow