780-633-0415
INFO@PAPER-LEAF.COM

project case study

Dogwood Initiative Website Design & Development

https://paper-leaf.com/wp-content/uploads/2016/12/hero-overlay-dogwood-website.png
^

summary

The Challenge

Dogwood Initiative is a grassroots NGO operating in British Columbia, Canada. With over a quarter million supporters and multiple campaigns to reclaim power over BC’s environment and democracy, their existing site was outdated and not supporting their efforts. They needed a team to come in and work collaboratively to design and build a new, flexible site designed to share Dogwood’s story; build their network; and ultimately be a tool to help Dogwood effect change.

The Solution

We worked together to design and develop a custom site, powered by WordPress, that is truly a flexible, powerful, easy-to-use tool for the team at Dogwood. Harboring multiple 3rd party integrations alongside a component-style atomic design build, the flexible WordPress implementation makes site content easy to manage on the back-end and find on the front. A mobile-first responsive build as usual, Dogwood’s new site is performant while steadily growing their network. Mission accomplished!

Key Project Features

  • UX
  • Site Architecture
  • Prototyping
  • Visual Design
  • Responsive Front-End Dev
  • WordPress Integration
  • Nationbuilder & Salesforce Integration
  • Quality Assurance Testing
  • Performance Optimization
  • View Live Site
https://paper-leaf.com/wp-content/uploads/2016/12/wireframes.jpg
https://paper-leaf.com/wp-content/uploads/2016/12/mobile-navigation-rightsplit.jpg

The Details

Dogwood Initiative works out of Victoria, Courtenay and Burnaby, anchoring volunteer organizing teams in dozens of key ridings. Their goal is to build a grassroots base of engaged citizens – their network is over 250,000 strong – ready to take action outside of the existing party system, in order to effect positive change for British Columbians.

Their website plays a huge role in building their network – in their own words, “it’s the centre of our online presence and the foundation of our digital platform” – and is integral to distributing their message, organizing their 500+ organizers, and mobilizing their network. However, when they came to us, their existing site just wasn’t doing it anymore. Built on an outdated instance of Plone, the site wasn’t doing the job technically; it wasn’t mobile friendly; and the overall messaging and communication about the work Dogwood does wasn’t accurate anymore.

ipad responsive design

Simplifying a Complex Digital Toolbox

So, we joined forces with the talented Dogwood team to tackle these objectives. We flew our project team out to Victoria for a day-long kickoff meeting – knowing your team members is important! – and immediately dug into the considerable technical considerations of the project. Over the years, Dogwood has built up a toolbox of digital applications to help them do their work (Salesforce, Click ‘n’ Pledge, Marketo, and Nationbuilder to name a few), and the success of the project was largely dependent on simplifying this network of tools, and centralizing the management of as many as possible. In the end, this involved a near-invisible-to-the-user integration of FormAssembly, OpenNorth, Click ‘n’ Pledge, and Nationbuilder directly into the custom WordPress instance we built for them.

iphone responsive design view

Fast & Consistent Design & Content Management System

Early on, Dogwood articulated to us their frustration with the rigidity of their Plone setup, and their need to “think up a campaign and launch it on the site in under 24 hours”. We needed to strike a fine balance: providing content managers with a wide range of flexible design and content control while maintaining long-term design integrity and consistency. Thankfully, flexible WordPress builds are one of our core competencies – we met the need with a complex-made-simple implementation of Advanced Custom Fields, singular points of data management within the CMS, multiple layout and visual design options that work within a consistent set of patterns, and an atomic-design-style approach that means components are largely available and work on nearly any page template.

Technical

As mentioned, the site is a mobile-first, custom-designed responsive site built using WordPress as a CMS. We’re serving viewport-specific images using Waldo, our open source responsive images tool for WordPress, and the framework is a stripped-down, only-what’s-needed version of Bootstrap. The complex layouts you see on the all pages are handled via Advanced Custom Fields, and the site is running on a LEMP stack via Rackspace Cloud.

Summary

Overall, the Dogwood site was a technically challenging build, helped along by a knowledgeable client in Dogwood. The end site has a huge range of content types and features – events, team bios, online donations, petitions, multiple 3rd party integrations, and more – all presented with on-brand, well-executed visual design and rendered with forward-thinking web development. We continue to work with the fun group at Dogwood to iteratively improve and maintain the new cornerstone to their digital platform.

contact us

Let's make something amazing together.

Interested in working together, or maybe just having a conversation? We’d love to hear what you have in mind, and answer any questions you might have. Let’s make whatever’s rolling around in that brain of yours happen.

Onwards to view The Next Project →