Greenpeace

Online campaigning framework & front-end toolkit

Launch the project 
Greenpeace Screen 2
Browser Shot 1

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.

Browser Shot 2
Browser Shot 3
Phone Shot 1

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.

Components

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.

Forests Mockup
Oceans Mockup
Arctic Mockup

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.

Forests Not Fires
Not Just Tuna
Frack Free

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.

Doc Shot 0
Screen Shot 2016 06 23 At 18 12 28

Hire us.

To talk to us about your project email studio@fjell.io.