Plastic Free Rivers

Greenpeace UK approached us with a new and exciting challenge…to engage and mobilise users to help reduce the dump of single-use plastics in our rivers.

The Brief

In line with the launch of their most recent campaign and research, Greenpeace needed a website that supporters could use to urge their local MPs to sign a pledge and back an Environment bill to reduce the pollution of plastics.

The desired outcomes were:

The client

You have probably heard of Greenpeace but just in case you haven’t, they are a non-governmental environmental organisation known for their direct actions, lobbying and research. Their UK office is responsible for running and managing actions and campaigns in the country.

For this project, they had a dedicated UK team to produce a clear strategy, the data research complete and the message out to the public.

Our solution

We first had to identify the key goals and steps for users. Greenpeace UK run a lot of digital campaigns, so they know what makes users tick. With this, we had a wire-framing session and constructed a clear flow and user journey to work with. With a variety of possible user journeys, determining the UI and UX was both fun and challenging. We did have Greenpeace’s brand guidelines and assets to work with which was a nice treat!

After we came up with the wire-frames, we ran a mini-design sprint to go on and identify a creative approach to clearly communicate the end-goal, all while providing users with the ability to digest the scientific facts behind the creation of the bill.

The site acts first and foremost as a campaigning tool for the public to search if the local MP has pledged to support the bill or not. The series of of scoping and UX workshops we ran helped us all to come up with a campaigning tool for the public that is still being used today.

The first action requires users to enter their postcode. This then returns the user’s local MP page.

Depending on whether a user’s MP has backed the bill or not, the call-to-actions differ.


The Tech

It was clear that this should be a Laravel project. With that we decided to use OctoberCMS for the back-end, a popular back-end PHP framework that’s used for Laravel projects. It provides a simple but effective interface for managing content snippets and data. Another benefit is that it’s as a headless CMS, making the site quick and snappy.

For the app’s front-end we decided to use Angular and we created an API that would return the content to the client as JSON. So the Angular client inserts the content snippets into their appropriate blocks to be displayed in their front-end views.

We also used JSON Web Tokens to authorise MPs. MPs receive a link that contains a query parameter as a JSON Web Token. This token is then used by the back-end to verify that the pledge request is genuine.