A Strategic Drupal Redesign for CARE Action! Network

Project 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 participate and 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 Networks’s core audience is rooted in political activism Through audience research, Mediacurrent saw that Care Action Network 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

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

Results

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