A fully responsive campaign/petition website for a national UK environmental charity, calling for 100,000 signatures to protect UK waves.

Aug 2012

Client.

Surfers Against Sewage (SAS) are the largest environmental boarding charity/NGO in Europe.

Project.

The aim of SAS's Protect Our Waves Petition is to generate at least 100,000 signatures to highlight the value of surfing waves and locations to the UK government and encourage MPs to debate legislation in order to recognise the importance of waves as a cultural, social, economic and environmental asset to coastal communities. The campaign was an instant viral success! In the first few days online it received 2.4K Likes, 1.5K Tweets and collected 10K signatures!

Solution.

A fully responsive website, optimised for the best user experience on desktop, tablet and mobile. The petition is powered by Campaign Monitor, which collects the petition 'signatures', redirects the user to a thank you page with plenty of options to share their involvement, and they are also sent a thank you (HTML) email encouraging them to share the petition. Additionally there is a Facebook App/Tab on the SAS Facebook Page.

Info.

Involvement

Creative Director. Design. Build.

Tools

Photoshop. Coda. Campaign Monitor.

Code

HTML5. CSS3. Media queries. jQuery. PHP.

Credits

The print campaign creative concept (i.e. surfboard graveyard etc…) was created by M&C Saatchi. The 3 primary campaign photos are by photographer Spencer Murphy.

Home page

The home page focuses on the petition itself. A form powered by Campaign Monitor collects simple information from the user. The text below explains more about why you should sign the petition. With supporting quotes from celebrity ambassadors and a gallery of the three campaign posters.

Counter

To the top-left is a live counter showing the number of petitions collected to date.

Sharing

There are numerous options to share the petition, with tailored campaign messages featuring #ProtectOurWaves

Responsive

The website has a number of breakpoints, using media queries, serving up a unique experience over desktop, mobile and iPad (portrait & landscape). All interactive (slide) elements are swipeable on mobile/tablet to make the mobile versions feel more like an app for a nicer user experience.

Navigation

A subtle navigation, taking ‘mobile first’ quite literally in terms of UX. The simple icon, on-click reveals a menu, breaking open the page, sliding all content below down the page. The left and right arrows are an alternative form of navigation to simply navigate to the next or previous page/article in the series, which in sequence, tell the story of the environmental campaign.

Thank you!

On submit of the form on the home page, the user is forwarded to a thank you page, with plenty of options to share the petition, again, with tailored campaign messages featuring #ProtectOurWaves

Stats

The campaign was an instant viral success! In the first few days online it received 2.4K Likes, 1.5K Tweets and collected 10K signatures!

Text template

The top banner image lends space for imagery of endangered (great) surfing waves in the UK. The template gives ample space for text. A flexible right column houses ambassador quotes, more imagery and a (read more/further information) site navigation.

iPad

Images scale to 100% width in portrait view on an iPad.

Ambassadors

A visual showcase of celebrities, pro surfers and musicians that are supporting the campaign.

Facebook

I also created a Facebook Page Tab featuring a tailored version of the responsive home page template so people could sign the petition on Facebook too, raising more awareness. The tab is featured on the Surfers Against Sewage and Club Of The Waves Facebook Pages.