5 guidelines we followed for designing the new Greenpeace.fr website

One of the mockups of the soon-to-be-released greenpeace.fr

At Greenpeace France, we are working on a new website. We are now finalizing design and I would like to share with the Planet 4 fellows some of the UX guidelines we followed.

Benchmark, but not only NGO’s websites

Greenpeace needs to talk to environment specialists as well as people who don’t know much about ecology. An online newspaper faces the same problematic: it will be read carefully by a movie critic (only cultural section) and someone like me who reads only the international headlines, tennis results and pick up at random a local news (while talking on the phone at the same time). Obviously, a variety of users will access greenpeace.org sites, so we had to look for inspirations from many different kinds of organizations.

We benchmarked websites that had very diverse users, and we kept that in mind as we searched for a web agency. In particular, experience in media field was a plus.

Dual navigation

While benchmarking media websites, we found out that some smart online newspapers implemented a dual navigation : a very light and simple menu with intensive use of inside page jumps to navigate from one page to another and, in parallel, an exhaustive, tag-driven mega-menu listing all categories. A powerful search feature fulfilled what we can call the expert mode of the website. We adopted this solution for addressing our dual audience.

Here is the result :

Top menu with only 3 main links (the upper line hides on scroll down and appears on scroll up)
Mega-menu listing all website’s pages appears when you click on the burger menu

Call To Action policy

Our website’s goal is to make people act so we had a reflexion on how to design Call To Actions (CTAs) and we ended up following these rules :

  • Follow implicit code that we found on most NGO’s websites for donate CTA : hot colours, fixed at the top right, clear label
  • Other CTA (for petitions) should follow another design.
  • Limit CTAs to those 2 types : petitions and donate
  • Don’t use the colour code or style of CTAs for other elements of the page.

Best practices for donate forms

We studied best practices from e-commerce landing pages techniques and we mixed with Greenpeace existing forms. This gives the following guidelines :

  • No exit links : no header and minimal footer. (Additional financial report file can be downloaded within the page.)
  • Use of a multi-step form (~3 steps) : no page load between steps, show all steps, clearly show which step you are in and that you can go back at anytime
  • Secure user by showing https, EV-SSL green address bar and security logos at the bottom of the page
  • Use equivalents relevant for the donate amount and for the campaign ( dynamic settings in database)
  • If the field is not properly filled, show that it is not ok instantly (on field exit not on form validation). If the field is properly filled, show that it is ok (using , or colour indicators)
  • Single donation and recurrent donation should both be available on the same page and we should be able to hide one or change order.
  • Make a clear visual distinction on the choice between regular and single donation
  • Retrieve the campaign context if needed (background image)
  • Show live the tax deduction according to amount chosen
  • Use a gauge if you have a target and print a count down if you have a deadline
  • Use exit intent technologies to print a message if user intends to close the page
  • Optimize page load / speed (minimize and compress javascripts and images)

Fold management

Greenpeace communicates a lot through visuals and images. At the same time, our campaigners and experts produce precise and precious content. How to be sure that readers will keep on scrolling for reading the text below the fold? As explained in this article, the fold position is not easy to determine and we went for a technical solution based on vertical media queries and viewport units to address most screen sizes. According to screen height, the header height gets progressively reduced to always show the beginning of the content, so regardless on which screen you are accessing the new greenpeace.fr, you will constantly be able to see that there is more content below the fold.

Since Greenpeace France new website will be built on WordPress as well, all these are key inputs to take into consideration, now that the Discovery Phase is about to start its “juicy” phase. More inputs are welcome, of course, so don’t hesitate to comment here below, Tweet them at #GPP4 or get in touch with myself directly.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.