Leading International Non-profit

Leading International Non-profit

Mediacurrent is honored to support a leading International Non-Profit ranked on Forbes list of the 50 Largest U.S. Charities. To continue on their mission, the Non-Profit 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 Non-Profit 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.

 

 

Customer Testimonial

We are excited about the relaunch of our international non-profit .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.

Goals
  • 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 platforms
Challenges and Solutions

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 is 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 Non-Profit’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 Non-Profit’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 designeven though they are linked to a non-Drupal IIS server instance. Mediacurrent worked closely with the Non-Profit’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 Non-Profit 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.


Delivering a Personalized Experience for an International Audience: 
One of 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 Non-Profit 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 Non-Profit team create compelling multilingual content. With five area offices located around the world, the Non-Profit 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 (English)
  • Latin America and the Caribbean (Spanish)
  • Europe, Africa, and the Middle East
  • Asia-Pacific

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.

 

Project Highlights

Mobile Responsive Design: A major challenge the Non-Profit faced going into the redesign was adapting their website to a world gone mobile. On top of the 50% of the world’s traffic already on mobile, a 2016 report from The Pew Research Center shows that the rate of smartphone ownership in emerging and developing nations (like those communities served by the Non-Profit) are rising at an extraordinary rate.

Previously, the Non-Profit 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.

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

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 to all parties involved with the site redesign. For example, the Non-Profit 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.

Performance and Accessibility: 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 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.

Improved Content Authoring: Mediacurrent engineered several improvements to create a content publishing workflow that empowers the Non-Profit team to share stories that inspire volunteers to get involved. 

The Paragraphs module was used to allow editors to edit content pieces and publish them on any page. WorkBench, a suite of modules for content editors was integrated to help the Non-Profit save and view unpublished progress on a content draft.

The Non-Profit team needed a way to create an archive page that would dictate the content that loads when a user clicks “go to archive.” Using Views, we created a system for the Non-Profit to create archive pages to populate the archive content stream. Publisher permissions were also updated to allow the Non-Profit more control over who can publish content to production.

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.


QUALITY ASSURANCE 

A critical part Mediacurrent’s development process is Quality Assurance. Our goal was to help ensure that all bugs were found, reported and fixed before deployment. Furthermore, we tested the site post-launch to make sure all priority flows were operational. To accomplish this, our QA team:

  • Created a test plan
  • Worked alongside the developer to test tasks as they were completed
  • Engaged in exploratory and regression testing
  • Executed a smoke test post-launch to ensure all modules were operational
Final Thoughts

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

On the horizon for the Non-Profit 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 Non-Profit's expanding global vision and community.