CARE Action! Network

CARE Action! homepage

CARE Action! Network

CARE, a leading international humanitarian organization, established CARE Action! Network to support the organization's core mission, advocating for the world’s poor by influencing policymakers. Since it was first launched in 2007, CARE Action! Network lived online as part of CARE.org.

The organization was ready to branch out and live on its own domain with independent advocacy messaging and membership conversion goals. CARE came to Mediacurrent to help them launch a new website for CARE Action! Network that would leverage a targeted content strategy to drive membership and donations. Developing a web presence to inform and inspire users required a blend of analytical and creative disciplines across Mediacurrent’s digital strategy, design, and development teams.

CARE would face many decisions about the new CARE Action! Network site and its goals but choosing a Content Management System (CMS) platform was simple. Drupal, the tried and true CMS for CARE.org, was the logical choice for its ease of use and maintenance, flexibility and competitive total cost of ownership.

 

CARE Action! goals for Drupal site
Goals
  • Clearly define organizational goals and membership strategy

  • Inspire and lead users down a path to become members and donate. Show potential members how their donation will make a difference.

  • Provide an easy-to-navigate interface and resources for volunteers to take action in their home state.

  • Build on existing email list

  • Drive membership and donations
Project Highlights

Defining Organizational Goals: Mediacurrent facilitated website strategy sessions to drive action and engagement with petitions as well as state and national advocacy campaigns. Mediacurrent also shaped  organizational and membership goals by guiding end-to-end membership strategy for CARE Action! Network, determining that paid membership was the best option given their audience and fundraising goals.

Digital Strategy: The CARE Action! Network project went through Mediacurrent’s full strategy process from Discovery to Build to Launch to Post-Launch Support. The Strategic Analysis included deliverables such as a Creative Brief, Landscape Analysis, Personas, Content Audit & Gap Analysis, and SEO audit. While Care.org’s audience is humanitarian based, Care Action Now’s core audience is rooted in political activism. Through audience research, Mediacurrent saw that Care Action Now appeals to a younger audience, underscoring the importance of a high-performing mobile site experience and emphasis on social engagement.

Custom analytics and goal tracking were also implemented, providing a clear window for CARE Action! Network to track  ROI, ensure their goals are being met, and  guide future usability and content initiatives. Key Performance Indicators such as increased email acquisitions were documented to serve as a benchmark for measuring future improvements.

Data-Driven Design: Mediacurrent was challenged to create a distinct design that allowed CARE Action! Network to clearly articulate their organizational objectives, voice, and audience, all within CARE’s brand guidelines. User personas guided most layout and content placement decisions through the annotated wireframes and design process.

With a call-to-action and content focused design philosophy in mind, Mediacurrent designed a clear and simple site architecture. Organizing  many links in the flyout menu as anchors to the same page provides ease of navigation, higher content visibility, and marketing opportunities. In addition to the flyout menu that provides anchors to frequently accessed content (such as 'Active Petitions' or 'Events') encouraging easy click-through was also accomplished with other elements, such as the 'highlight' components (some include videos, others a direct link to that content) and the 'Card' approach (used on 'Our Campaigns' component on the home page, 'Take Action-Petitions' on the Take Action page.) Each 'Card' provides a summary with a bit of relevant information before asking the user to access another page.

Mobile Responsive Design Strategy: Mediacurrent designed for an optimal viewing experience across a wide array of devices. An effective mobile design was of particular importance to CARE Action! Network, and Mediacurrent employed several design strategies to optimize their mobile traffic, with the spotlight on Calls-to-Action to increase donations and membership. A simple, intuitive interface encourages visitors to click through to another page and easily find what they’re searching for. Features like a back-to-top indicator when scrolling and finger-friendly action scripting for each campaign graphic quickly brings the summary onto the screen. Further, the small screen design does not cut targeted content and functionality. For example, the clickable map feature that appears on the desktop version to highlight advocacy news on a state-by-state basis translates to an automatic rotator on mobile.

 

Challenges and Solutions

Impactful Storytelling: To effectively reach the target audience for Care Action! Network, Mediacurrent created user personas that represent real decision-makers who visit the site. Building these user personas profiles shined the light on user's’ desired online experience to be sure the design speaks to activists and skeptics alike. To allow for storytelling with an emotional connection, the design layout puts mixed media like images and video at center stage. The use of high-impact photos and short videos—did you know that 65% of video viewers watch more than ¾ of the way through?— conveys a more powerful message than text in a shorter window of time.

Deadline and Budget: To accommodate for a tight deadline, the site was developed in phases. This methodology helped to  prioritize the most critical features for launch and continues to allow for growth over time. CARE Action! Network Content editors needed direct access to own and edit the site. Therefore, the  site’s Drupal components were designed to be repeatable, placed on pages as needed, at the discretion of the CARE Action! Network content editor. Site editors have the ability to select background color, image justification, upload image, add text, with editable buttons for easy CTA implementation. The flyout menu is also editable, with the ability to change links, images, and CTAs as often as needed.

 

Drupal Development

Mediacurrent's development methodology took a smart approach to the “3 C’s” of Drupal (Core, Contrib and Custom).  Our first stop to fulfill site requirements was Drupal Core. To minimize the amount of custom code, we next turned to contrib modules from the Drupal community, including:  

Panels: Panels provided us the best way to include dynamic parts of the page, such as views and custom content panes, and the ability to pass dynamic data from a panels page to the views to render the specific content.

Views: Contextual filters and relationships were a big part of many of the pages, where we needed to show state-specific content.

TB MegaMenu: This was chosen as the solution for the mega menu, as it provided an easy-to-use interface, integration with menus and blocks, and met the theme requirements.

Picture / Breakpoints: These modules show their colors on the tablet and module viewports and are responsible for rendering optimized images for each breakpoint used on the site.

Mediacurrent also created a custom module that was written to integrate with the AddEvent.com service. The purpose of this module was to provide an “Add to calendar” popup for saving events to a user’s calendar. It can be seen on an event page.

 

Results
  • Google scores mobile UX site speed at 99% out of 100%

  • Less than 2% of visitors have used the site search function, a testament to the UX and navigation menu that effectively addresses users informational needs

  • Over 25% of sessions are on mobile and tablet devices

  • The bounce rate (averaging 47.15%) is consistent across all devices. The industry average bounce rate for advocacy groups is 70%.
Final Thoughts

The new site delivers resources such as contact information, events, news, and more on a  state-by-state basis, encouraging users to participate and take action. Care Action! Network realized the benefit of partnering with a Drupal-centric agency for full-service development, strategy, and creative. Planning the site from all these disciplines led to a final product that stands out in the hyper-competitive nonprofit space. With design and development in sync with strategy, Mediacurrent’s Drupal focused creative team delivered design mockups that were an accurate representation of the CMS functionality. This provided a level of that insight went beyond what a generalist designer could accomplish, and set expectations early in the project.