Rainforest Partnership: Rainforest Collective Website
Role: Visual & interactive designer, A11y
6-person team: UX designers, web developer, project managers
Rainforest Collective
Check out the website that I co-designed!
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.
Then, what is Rainforest Collective (RC)?
Rainforest Collective (RC) is a collaborative, umbrella effort under RP, where indigenous communities, government leaders, private companies, and anti-deforestation organizations work collectively to end deforestation in the Americas by 2030.
Overview
The challenge & solution
RC was created by several of RP's volunteers and project managers to further the organization's goal and extend their efforts to other sectors of the economy and society. However, RC didn't have a website to market their message to the world.
The solution was simple: Co-design a brand new website from scratch for RC. However, the RC board wanted their brand to differ from RP, while using RP's brand colors to maintain a connection.
Creating the design
I worked with another designer to create digital wireframes. We each iterated our own wireframes, then combined them in one wireframe set.
Because I was new to RP, I used one of their partnership websites, Gen Z for the Trees, for inspiration. I also asked my co-designer for help and learned different iterations from her design style.
My wireframes: I created my wireframes based on the style from the Gen Z for the Trees website
+
Co-designer's wireframes: She added annotations and more grouping, which I started implementing in my future designs.
=
Combined wireframes
Digital wireframes
First Iteration
Second Iteration
We sent the designs to our project managers and stakeholders for review. After they communicated with the CEO about the designs, she expressed more complex iterations to illustrate the collectivity among the different groups: private sector, government, organizations, and communities.
My co-designer and I refined the wireframes and added annotations and experimented with images.
We also iterated two designs for the vision page to ensure we met the CEO's vision and removed the photo placeholders at the top of the partners and contact pages.
Refining the design
Mockups
Collaboration
After getting approval on our designs, we split our responsibilities. She created the 'partner' and 'get involved' page, and I focused on the 'our vision' page because it was the most challenging. And I wanted to take on the challenge.
The project management team and the CEO wanted the vision to display the motto of Rainforest Collective: A circular connection amongst the four main groups working together to end deforestation: governments, private sector, rainforest communities, and organizations. I iterated three designs, but the CEO opted for a simplistic design in the final iteration.
My co-designer and I were given an assignment to create a landing page. Because we were not given instructions on specific colors, images, or a design style to use, we decided to have fun and give our project managers a couple of mockups for them to determine which ones to use.
After deliberating, they informed us they want a starry, dark sky background with RP's style colors. We iterated their vision in the last mockup with placeholder images.
My mockup
Co-designer's mockups
Our mockup
I used a starry-night background and combined it with dark colors in gradient style to make everything blend together.
My co-designer focused on the photo carousel at the bottom and partner photos, while I implemented the designs above the center photo.
We used my co-designer's design for the 'Our Partners' section, but I changed the photo based on feedback from our project managers.
Iteration 1
Iteration 2
Iteration 3
Final iteration
One of the original ideas entailed having the users hover over each image with the text revealed (green circles on the side). They also wanted a scrolling interaction, where the long colorful blocks in the last part of the design extend behind the text.
The project managers and CEO wanted the images removed and replaced with color and lines to connect the circles. They also wanted to illustrate a 'broken path' in the middle section and they also wanted to view how the extended block looked behind the text.
I changed the colors to match RP's brand and shifted the circles into squares with icons and text. They also wanted all of the blocs extended to help the web developers easily create the scrolling interaction.
After much deliberation, the CEO opted for a simplistic design and wanted to remove the 'broken path' design in the middle. We also changed the colors in the last section.
Accessibility (a11y)
color & text
Our biggest concern was color and text since we used multiple colors on a dark background. We used the color contrast tool on WebAim often to ensure we weren't violating any WCAG guidelines.
We were also concerned about the use of white text since the main background image has white starts, so we used a gradient cover to make it darker.
What I learned
The Rainforest Collective website was my first project outside of the portfolio projects I created.
It was my first time working with others to iterate someone else's vision outside my own, and it was very challenging and rewarding. Before creating ExT, I never designed a website, and I was a bit unsure if I would be able fulfill someone else's vision. And I did!
I was unable to use most of my original designs for the 'our vision' page, but I was happy to take on a challenge and learned more design iterations as a result. I enjoyed every part of the journey and even met a fellow designer and made a new friend! This project taught me how much I enjoyed working with creative designers and to believe in my abilities. This UX journey is not just one of creativity, but one of collaboration, listening and learning.
