General design principles

Consistent design language

We want to make use of a consistent design language.

• Primary color: #ffa300 (orange)
• Secondary color: #9a49e2 (purple)
• Tertiary color: #69be28 (green)

Ease of use

• Anyone should be able to use our website, regardless of their technical skills.
• We want to make it as easy as possible to manage the website content as an admin (less complexity is better)

Accessibility

The design should be accessible and well-optimized for most types of people and devices.

Loading speed

Fast loading speeds lead to more conversions.

Nudging

By placing certain content and links in certain places, we can nudge people to take certain actions. Actions that change-makers can take which have a high strategic value for us, should be placed on prominent positions on our website.

Navigation position values

Where 1 is the least value (fewer people click these items), and 5 is the most value (more people click these items):

• Primary buttons: 5/5
• Secondary nav items: 4/5
• Tertiary nav items: 3/5
• Footer items: 2/5
• On-page links: 1/5

Page position values

Where 1 is the least value (fewer people see this section of the page), and 5 is the most value (more people see this section of the page):

• Top section: 5/5 (most people, as this is where the page is loaded)
• Middle section: going down 4/5, 3/5, 2/5, 1/5 (the more people need to scroll, the less people see it)
• Bottom section: 4/5 (many people scroll straight down to the bottom of the page)

Primary CTA

Every page should have one single primary CTA. This CTA should be given visual prominence on the page. This can be done by:

• Using more color (for example, by adding a background color, using a different color than the rest of the page or by using an emoji)
• Using a larger font size and making other UI elements larger
• Taking up more space on the page (for example, by adding whitespace)
• Adding an animation
• Hiding other UI elements that can distract the user from the primary CTA (removing them completely, moving them below the fold, removing color, making them smaller, requiring an additional click to see them, etc.)

When designing the primary CTA, imagine a user who is blindly clicking the first thing they see without reading anything. You should be able to identify the primary CTA without understanding the language.

The primary CTA should be based on the type of user that visits the page and our strategic goals. These two factors can conflict. Sometimes, most users will want to do one thing, but we want them to do something else. The following questions can help you strike the right balance:

• What do we stand to lose if users do not take this action, versus what do we gain when people do?

  • Example 1: Imagine a page that mostly gets visitors through our newsletter. Most of these visitors are willing to take small actions, such as signing a petition. We can be confident in this, because this is usually how they ended up on our newsletter list in the first place. Only a small number of them are willing to take larger actions, such as donating money or signing up for an event. If we base our primary CTA on the action that most users want to take (signing a petition), we gain very little. After all, all of these users are already on our newsletter list, and besides that not much value is derived from them signing a petition. However, if we base our primary CTA on the action that we want them to take (donating money or signing up for an event), we can gain a lot, even if only a small number of people decide to do so. After all, these are the actions that can help us achieve our strategic goals, such as raising funds and building a powerful movement.
  • Example 2: Imagine a page that mostly gets visitors through organic search engine traffic. This audience is much more diverse. Some people will already be deeply involved in our movement, while others just found out about us. On such a page, we want to make sure that as many people as possible leave their contact details one way or another, because if they do not, we will lose them forever. A good primary CTA would be something like a newsletter signup form or a petition. At the same time, we want people who might be willing to do something more to take the next step. For them, we can add secondary CTAs.