Greenpeace- Non Profit Org Redesign

Project Name: Redesigning an NGO site for improved accessibility ; Visit Greenpeace Here

Challenge: Identify and amend accessibility pain points. Then apply these amendments in a way that satisfies business goal of increasing donations for NGO

My Role: UX/UI Designer

Step 1: Analyze Site and Find Accessibility Issues

These are the top 5 problems that I identified and aimed to fix:

Number 1
The donation buttons (light green with white text) under “Help Power Our Work” are not AAA, AA, or even A approved contrast level based on WCAG standards

Number 2

When using a keyboard, donation amounts, check boxes etc are not accessible within keyboard accessibility; the focus states are not clear, and it is easy to get lost

Number 3

Sign up area near the bottom of the page does not have the input field descriptions outside of the box- users may forget what they are meant to fill in because prompts disappear once clicked

Number 4

Donation buttons are everywhere with different wording, font size, and capitalization (too much cognitive load)

Number 5

The main nav bar is overwhelming and a bit confusing, there seems to be two of them which feels overwhelming and disorganized

Step 2: Observe Business Goals vs. User Goals

In this given scenario, the user personas and top 3 business goals were already provided.

The #1 Business Goal: How might we increase donations?

User Persona Highlights
Erol: wants to know he’s making an impact; wants a simple way to donate regularly; likes small orgs or international project
Ada: wants to feel more involved and she would like for the org to give her opportunities to participate in projects; wants to volunteer
Xiang: wants to be able to showcase and write about the specific work and projects the org has or is doing

Step 3: Propose Solutions

Below are some changes that I think would improve the accessibility of Greenpeace based on the top 5 issues mentioned:

  1. Change the background color of buttons from light green to darker green so that the contrast ratio increases

  2. I will increase the contrast between focus state outlines and the area being highlighted. However, I would also need to discuss with developers to ensure that keyboard is accessible to all areas users may need to reach.

  3. Additionally include written prompt above the field as well as within

  4. Decide on a single style to stay consistent with and relocate some of the CTAs

  5. Minimize to a single nav bar and allow for drop down titles or relocate the categories elsewhere

The following common needs between the personas, business goals, and design flaws is WHY I proposed the above solutions

  • Monthly donations are a commitment- users may want to be able to customize the amount instead of only being able to choose multiple choice options

  • Monthly payment option is not keyboard accessible- what if Erol cannot use a mouse?

  • The process for volunteering is complicated, someone like Ada needs it to be an option that stands out-- some ideas: take action, volunteer, and donate don’t need to be scattered everywhere, perhaps users can choose to “take action” and feel like they are helping out a specific project by either donating to the project or volunteering. This way users don’t feel like they’re putting money into an unknown void

  • Current projects or “what we’ve done” should take higher priority. Showcasing this front and center may convince website visitors that they are justified in donating

Step 4: Sketching, Iteration, Final Product

Sketched some ideas….

Original site

Current mock up

When iterating for accessibility, I had to think about more than just UI. This being said, there is still much to improve on with the visual interface design.

Between my first and second revisions, I realized the buttons were still not consistent which created choice overload- this was adjusted. I also had forgotten to prioritize the work that Greenpeace had done, so I increased its hierarchy at the forefront of the page. This would allow users to see why they should sign up and donate and allow someone like Xiang to be able to write about the NGO.

The changes I made account for both accessibility AND business goals. By allowing users to visually see buttons more clearly and focus on one section at a time, people will feel less overwhelmed and frustrated which in turn will make them feel more inclined to volunteer or donate and feel satisfied that they have participated in a great cause.

Accessibility guidelines were unfamiliar to me until completing this project. It opened my eyes to a lot of different aspects of accessibility and audiences to consider. Thanks to the help of my mentor, I was able to better understand what to look for!