Rainforest Partnership: Volunteer Page
Role: Visual designer, Ally
3-person team: UX designer, project manager, web developer
RP Volunteer Page
Live link coming soon!
Webpage still in development
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 Volunteer Page: Challenges & Solutions
Challenge: Rainforest Partnership doesn't have a special page dedicated to attracting volunteers to learn and work for the organization. A volunteer page is vital for the RP team to have a specific weblink and create advertisements online that abide by Google Grant guidelines.
The alternative entails sending users to a third party website called Volunteer Match, where potential volunteers must create a profile and register for opportunities with RP. However, this alternative is a problem since this will drive traffic to the third party website, instead of RP's main website and a volunteer webpage.
Solution: Create a special landing page for potential volunteers that provides concise information on the application process, information about volunteering at RP, and most importantly, inspires them to participate as a volunteer for the organization.
Note: RP will continue using Volunteer Match for logistical purposes.
Research & Planning
Goal
To understand the usual components within non-profit volunteer pages through secondary research that can be implemented in the new design, while creating a unique design for RP.
Non-profit Volunteer Pages
Using Figjam, I studied nine non-profit websites and noted key (bold) and missing components that can be used in my design.
Creating the design
I developed three wireframes, then I sent them to our head project manager for feedback. He replied in our Slack channel with the following notes, then we held an individual meeting to discuss the feedback he provided.
PM's Feedback
I like where it's going, esp. the 3rd option. I have some thoughts but also think it would be good to run it by the other designers for comments too. I think my comments would be best shared on a call but I'll type them out to get the conversation started. All these comments are referring, esp. regarding item block order, to design 3.
Important info and updates should be up as high as possible.
For the 5 things we are looking for, I think that could use some movement. The text below the main word could be on a card that flips or something?
Note: During the weekly meeting, Luther decided to remove the extra text and put a headline instead
In How to apply, I like how the steps are broken apart, but maybe keep those blocks all on one side? Use the space on the right for an extra design element that gives it life?
The intern section will be more descriptive in nature and not like the volunteer testimonial section
I think the volunteer match widget width could be larger than half the page and will likely need it's own section. We can put a CTA on that section to click out to our volunteermatch page, but I want people to see the block on our website first before clicking out
There needs to be contact information at the bottom, but just the volunteer@rainforestpartnership.org email so it won't be a big element of the overall design.
Digital wireframes
UI Scope
The UI design needs to be simple, yet engaging and informative to motivate users to volunteer for Rainforest Partnership.
Refining the design
Mockups
After meeting with the PM, I designed the two iterations and made several changes such as removing the text under the photos in the "We are looking for people who are" section based on the PM's feedback. I also iterated the steps into rectangle shapes in the "How to apply" section to better attract users to volunteer opportunities and provide an easy sign-up process.
Iteration 1
Iteration 2
After meeting with the PM about the first iteration, I implemented recommended changes based on my expertise and collaborative feedback from the PM. This is reflected in the second iteration:
Added a Current Opportunities section. This will require writing during the development phase.
Important notices section is collapsible with a headline and a right side arrow that should motion downward to show more information.
Created gradient between Current Opportunities section and hero image.
Added a fourth step to the How to apply section and resized the squares and added new icons
Added info about interning in the Current Opportunities section instead of on the hero image.
Added directional arrows to Testimonials section and additional ellipses
Detailed Improvements
Potential Issue
I tested the Volunteer Match step process, and incurred several issues with step 2 that didn't align with the suggested flow:
Step 2: Once this has been submitted, you will be prompted to “Complete your application”. By clicking this button you will be taken to our Volunteer/Intern Interest Form. Fill out the form as soon as you are able [takes ~30 minutes] and click submit.
I brought this to the PM's attention and requested that I rewrite the steps after testing the flow from the RP page to Volunteer Match.
UX Research & Analysis
Unmoderated Usability Study
To further improve the webpage, I conducted an unmoderated usability study using Optimal Workshop. I tested seven users of diverse genders and ages with an interest in conservation and deforestation. Then, I collected the data and organized the feedback based on each participant's feedback in Figjam.
Afterwards, I read each participant's notes and developed themes and insights into an affinity diagram. Every participant held differing opinions from one another on certain aspects of the website, hence the reason for the "future consideration" section. However, many participants had similar ideas such as the distracting intern section and the appropriate hero image.
Based on the usability study, I discovered the following insights from the participants:
5 out of 7 participants deem the hero image appropriate.
Insight: No change to hero image.
2 out of 7 participants believe the the white space needs to be placed on the "Current Opportunities" section.
Insight: Experiment with another design for this section.
2 out of 7 participants believe the white space needs to be placed on the "Important Updates and Notices" section.
Insight: Experiment with another design for this section.
3 out of 7 participants did not find the background image in the internship section distracting.
Insight: Despite some participant feedback, there might be a different design that would better serve the internship section.
2 out of 7 participants found the image in the internship section distracting.
Insight: Despite some participant feedback, there might be a different design that would better serve the internship section.
5 out of 7 deem the contact section easy to read and engaging with the colors.
Insight: No change to the contact section.
Insights
Final Iteration
I iterated a final design and presented it to the PM. I explained the themes and insights developed from the usability study and the reason behind some of the design changes. After he carefully examined the webpage, he decided to hand off the design to one of the team's developers.
Accessibility (a11y)
Color
Used this color (65BD7E) to ensure we’re following WCAG guidelines since the background is dark (#06121B).
Text
I re-wrote the original text to ensure readability, ease, and comfort for the user to prevent any drop-off rates.
What I learned
Through this particular project, I worked alone because the other UX designer surprisingly dropped-off without notice. I quickly pivoted and worked alone while communicating with the PM and developers about the design during private and team meetings.
Most importantly, I learned to organize and keep track of the design process, such as taking notes from the PM, participants, and notating ideas to enhance the webpage.
Lastly, I learned to trust my abilities and believe in myself while working autonomously because it can be difficult to trust yourself while working alone.
