Rainforest Partnership: Donate Page
Role: Visual designer, Ally
3-person team: UX designers, project managers, web developers
What is Rainforest Partnership (RP)?
Rainforest Partnership (RP) is a non-profit organization based in Austin, TX, focusing on protecting the rainforest and indigenous communities in the Americas and Africa. RP’s main goal includes ending deforestation by 2030 locally, domestically, and internationally. Check out RP's website for more information.
Overview
RP's Donate Page: Challenges & Solutions
Challenges: RP's donate page was confusing, had non-user friendly user navigation, and repetition. This is a result from multiple people fixing the website at different stages, thus causing the difference in text size and lack of overall uniformity.
I analyzed the website and noted some key issues that may cause the user to feel that RP is not an efficient organization:
Some of the text in the boxes below the donate form are not equally leveled (e.g. Venmo & DAF Direct)
Below the donation text, there’s the option to make a donation using the following sources, however, the other payment methods include the same options listed above. Cryptocurrency is the only option that’s different
The text hierarchy under ‘Donate’ can throw the user off a bit since the top text is smaller than the bottom text. It also appears that one portion of the top text is bolded compared to the rest: The time is now! For the forest, for our planet, for our future.
There is no uniformity or consistency with the boxes. If this section remains, this needs to be redone.
The quotes at the bottom are quite big and need to be minimized. There is no header for the quotes, so I'm unsure what the user is reading.
Solutions: There were more problems with the page that we discussed with the CEO, but we transitioned to solutions after my co-designer briefly researched donate pages of various non-profit websites:
Minimal text
Easily illustrate diverse payment options within the same form as buttons: Paypal, credit card, Venmo, wire transfer, cryptocurrency, mail-in check, Zelle.
Add an FAQ or question section on the side with drop down options.
Have a hero page in the background like many of the websites
Since the background is dark, it will be easier to follow WCAG guidelines since we only need to use light colors. We can select up to two that correlates with the background color. Dark background photo with white form & darker text color & green RP accent colors (buttons)
Note: RP uses a website Give Lively to capture credit card payments
Research & Planning
Goal
To understand the typical components within non-profit donate pages through secondary research that can be implemented in the new design.
Non-profit Donate Pages
We sampled seven non-profit websites and noted key components that can be used within our design.
Creating the design
The other designer and I individually developed our own wireframes and presented them to the project managers for feedback. We opted to have my co-designer include the Give Lively widget, while I created an alternative option for PMs to consider.
Digital wireframes
My wireframes
Able to capture the information from the donor profile information. Created 'Thank you' page to make show gratitude to the user.
UI Scope
The UI scope is simple. We needed to make a design that is simple, minimal, and engages the user through a background image and an FAQ section.
My co-designer's wireframes
Simplistic and less scrolling. It also uses the Give Lively widget to easily capture donor information.
Refining the design
Mockups: Iteration 1
After meeting with the PMs, we realized my design would be too complex for the web developers since RP would need an alternative way to capture donor information without using Give Lively. We decided to use my wireframes in the future when RP's web development team creates a method to effectively capture donor information.
After collectively iterating the designs, we sent them to the PMs for review. They wanted the hero page changed, rounded corners, color change in widgets from white to navy blue, and provided more details for the FAQ portion.
Mockups: Iteration 2
My co-designer and I collaborated on different portions of the design. I designed the FAQ and testimonials section, while my co-designer focused on the pop-up widgets. We collectively selected the hero image in the background.
This is one of the widgets created.
FAQ Section
I created the FAQ section for the page, however, during the web development phase, there were few changes made once I passed it the developers.
Accessibility (a11y)
Color & text
Used this color (65BD7E) to ensure we’re following WCAG guidelines since the background is dark (#06121B).
Transition
We checked with the web development team to ensure the animations remain between 500ms - 600ms.
What I learned
I learned that communication is key to understanding my team's capabilities and responsibilities.
It is imperative to communicate with the software development & salesforce RP team during the design process to understand software capabilities and limitations within the organization, possibly any organization or company.
Every company and organization has limitations, so it’s good to understand the software being used to take into consideration when iterating designs.
