Greenpeace approached us to help optimise the way they delivered their day to day campaigning online. The result was a modular design system and front-end development framework that allowed a flexible approach for online campaigning whilst maintaining a consistent visual identity across actions.
We started by auditing the various components that made up an online campaign. As well as forms and action buttons, these components also included elements such as video, suggested amounts to donate, thankyou messages, quick donate buttons and progress bars.
Having established the core structure of an online campaign we approached the design phase from two perspectives. Firstly a general visual identity was created which included a solid grid system, typographic styles and component hierarchy.
The second approach looked at campaign components on a more granular level, designing each element and its interactions separately. Ensuring no element relies on another for its visual styles allows flexibility when constructing campaign layouts.
Our granular design methodology enabled us to approach the development process in a similarly modular manner. Each component is built as a separate entity which can be added to campaigns without affecting surrounding components.
This approach has resulted in a flexible and easily extensible front-end toolkit. We thoroughly documented this toolkit to enable easy handover to other developers and integration with other fundraising platforms.
This front-end toolkit evolves with Greenpeace's campaigns. We are constantly iterating, updating and reviewing with new feature requests and the latest web standards and techniques.