Website design

WWF UK Fundraising

Adoption and donation sections of the fundraising support page, designed for WWF UK by Stuff & Nonsense. This design will be implemented in early 2016.

Please donate to WWF

WWF do incredibly important work to sustain our planet’s forests and oceans and help to avoid the impacts of climate change. They help to protect the world’s most iconic and threatened species including our beloved mountain gorillas.

If you enjoy reading about work for WWF UK, please donate some money to help them continue their work.

Donate to WWF UK

As life-long supporters of WWF and enormous fans of their work to help save threatened species—including our beloved mountain gorillas—we were over-the-moon when they asked us to redesign their UK fundraising pages.

Symbolic adoptions of endangered species, monthly or one-off donations from supporters and memberships, are a vital source of income for WWF UK. When we approached our redesign of their fundraising pages, our aim was to increase these contributions and reduce the number of failed transactions. We aimed to do this by designing pages that are visually engaging and improving a supporter’s experience with better content and a smoother payment process.

Making use of WWF UK’s as yet unreleased new brand guidelines, we designed a bespoke responsive grid to present their content and functionality across all sizes and types of screens. We designed a colour system that includes colours and tones for each of the species their supporters can adopt. We designed a web design manual that WWF have adopted and named Bamboo and we developed responsive web page templates for all of the fundraising pages.


Our brief

To redesign WWF UK’s fundraising pages including adoption, donation and memberships. To help increase the amount raised per supporter and to reduce the number of people lost during the payment process.

Making a colour palette for every adoption species

Our design used one signature colour—and several tones of that colour— for every species that supporters can adopt. We’ve used that colour to visually link specific pages and payment pages for that species.

Working within WWF UK’s existing brand guidelines, we chose one signature colour for each of their fourteen species for adoption. We then created lighter and darker tints of that colour to use when theming the specific pages and payment pages for a species.

To maintain harmony throughout our design, we only used tints of one signature species colour per page. We created two sets of all graphics with versions containing darker text on a lighter background and the reverse.


Colour accessibility

It’s vital that WWF UK’s content is accessible, so we tested every graphical element using Lea Verou’s contrast ratio checker to ensure that there’s sufficient contrast between background and text to meet international accessibility standards.

Designing the flexible grid

Our WWF UK fundraising grid was designed for responsive flexibility and for arranging content in attractive and effective ways. We also designed it to be visually distinctive. These are the stages of its design.

1 Started with six even ratio columns reflecting WWF UK’s new logo mark.
2 Split column one in half, creating a left margin.
3 Moved one small column to the left of column seven.
4 Added this column width to column seven, creating a generous sidebar.

Our resulting grid includes a wide left margin. This can be used for effect by pulling content including images, quotations and tables into the margin. It includes a complementary sidebar that’s generous enough to display meaningful content. Finally, our grid includes a content area that can contain any combination of four units.


We delivered

Web page templates and CSS stylesheets, tested as far back as Microsoft Internet Explorer 9. We also developed a web design manual that WWF have named Bamboo.

Creating responsive page designs

With so many websites today looking the same, we wanted our designs for WWF UK to be different. Our aim was to draw people into their content through visually distinctive page layout designs that were built on our bespoke responsive grid.

We made each species page unique by including text and graphical elements in its signature colour. We combined a bespoke column-based grid with a field-based grid to create distinctive, flexible layout units.

For a new adoption page design we took our use of field-based units to the next level, creating a hierarchy that starts with the most endangered species. Sadly, this list includes our beloved mountain gorillas.

Although WWF UK produce wonderful content in their offline magazines, membership packs and updates, very little of it is used online. We focussed on that compelling content to improve the success rates of their donation and membership pages.

We spent several weeks improving the experience of using WWF UK’s fundraising payment pages. We added rich content-filled sidebars and callouts and made the process of adopting, adding new species and joining WWF easier.


Crafting content

We believe that art direction and copywriting, combined with well-considered customer experiences that are backed by a clear creative strategy, creates loyal supporters. That’s why—in addition to designing websites that are creative, effective, responsive and perform well on search engines—we help our clients by developing their visual identities and crafting their content.

Designing the fine details

Our redesign of WWF UK’s fundraising didn’t stop with their web pages, it extended to designing their content too. We edited their written copy to make it sound more personal approach give and a friendlier tone of voice. We created graphical callouts and information panels that carry a species’ story all the way through the payment process and we made that process unique to each species by using its own signature colour and content.

Instead of long passages of written copy, we designed graphical callouts and panels to give WWF UK’s information higher impact.

Scalable vector graphics

It’s impossible to predict the size and resolution of screen that someone will use to look at WWF UK’s content. That’s why we chose to implement our graphical elements using Scalable vector graphics.

SVG files have small file sizes so they’re fast to download and can scale to any size without losing quality.

Developing the Bamboo design manual

Pattern libraries and style guides for web design are a popular responsive design tool. WWF UK were so impressed with the web design manual that we created for the fundraising design project that they adopted it and called it Bamboo.

Over the next few months, Bamboo will be developed further to include guidelines, resources and styles for offline as well as online media. This will help WWF UK maintain consistency and save both money and time when developing websites in the future. We’re immensely proud that our pioneering work on web design manuals is paying off for WWF UK and we hope that other charities will adopt a similar approach.

Logo marks and types in several configurations across responsive screen breakpoints. Tints of main, secondary, neutral and accent colours for buttons, backgrounds, borders and hyperlinks.

Primary and secondary typefaces in several sizes and weights. Heading levels from 1–6. Paragraph styles such as lead (big), secondary (small), tertiary (smaller), and milli (smallest). Styles for block quotations and every type of list.

Basic table styles, every type of form input and buttons in different sizes, styles and states. Boxes, blog, event and news summaries and media components. Responsive content modules in several configurations.

Bamboo includes additional pages that describe how our grid was designed and how to use it and how to use the signature colours for each species a supporter can adopt.

Our design for WWF UK fundraising will be implemented in early 2016.

Designing atmosphere

Look up the word ‘atmosphere’ and the dictionary will tell you that it’s “the pervading tone or mood of a place, situation, or creative work”. In the context of responsive web design, think of atmosphere as comprising the combination of colour, typography and texture, distinct from layout.

You can read more about designing atmosphere in Andy Clarke’s book, Hardboiled Web Design.

Contact us

x

Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ

(Here’s a map showing how to find our studio.)