Rainforest Partnership: Films for the Forest (F3)
Role: Visual designer, UX researcher, A11y
5-person team: UX designers, researcher, web developer, project managers
What is Rainforest Partnership?
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.
Okay, so what's Films for the Forest (F3)?
F3, also known as "Films for the Forest," was created by RP in 2010 for international and American filmmakers to compete and share stories of their local communities, biodiversity, and forests, highlighting various environmental degradation and collective efforts to restore the planet.
Selected films have been shown as part of the SXSW Community Screening in Austin every March since 2012 and most recently were shown at a special Films for the Forest screening in Tokyo, Japan.
Disclaimer: Another UX designer and I were designing the F3 website, however, despite the CEO favoring the designs, she was not part of the development process and decided to have the designs redone.
Overview
The current F3 website predominantly showcases its previous event in 2022, which includes the 2022 winning and runner-up films as well as information about the event judges. This may confuse the users who wish to submit their films for the 2023 F3 event.
The solution: F3 needs help to develop a robust, responsive web design showcasing their 2023 film event, along with summaries of its previous events from the past 12 years.
The challenge & solution
Research & Planning
Goal
We need to learn more about the current trends in environmental film festivals, and the most effective method to organize a large amount of archived content.
Objectives
Understand what information should be displayed on a film festival website.
Determine how to organize content to be most effective/efficient for the user.
Identify issues or confusion people face when viewing the existing (and similar) film festival websites.
Identify opportunities for Rainforest Partnership to showcase its mission outside of F3.
Methodologies
Secondary research to learn about trends in the environmental film space.
User testing to understand how users feel about the existing website and similar film websites, and to learn about what features could be added.
Results: Secondary Research & User Testing
Secondary Research
We researched recommended websites from the RP team that they believed related to their vision, goals, and mission. The other designer and I preferred the first two websites, WCFF and IWFF, since they showcased a hero video on the homepage; however, we found the website content and simplistic design preferable on IWFF and Jackson Hole.
User Testing
We tested 10 Individuals aligning with one or more of the behavioral categories listed below. Different demographics including age, gender, ethnicity, and career path will be considered.
People who attended F3 in the past
People who are interested in attending F3 or a similar film festival event
People who work or volunteer with Rainforest Partnership, or its other campaigns
55% don't like the order of the homepage and the judges' image in a butterfly shape
72% prefer a clean, simple design that is natural and user-friendly
45% express the need to illustrate the 2023 winners on the homepage
32% believe a navigation bar is helpful in perusing the website effectively
25% find the website less engaging with the interactive flowers and 3D vectors on the sides
Assumptions & Risks
RP staff/volunteers spoke with an F3 manager about the vision for the updated website design. We weren't given an opportunity receive additional information or have the opportunity to speak with other stakeholders during the process. However, we maintained communication with the manager and decided to use the existing F3 logo and typography, but we decided to develop a new color scheme from the previous design.
Creating the design
After drafting the paper wireframes, we collectively designed the homepage it by splitting our responsibility into four sections each: My co-designer created the headline, video, about, and screening sections. I created the winners, judges, partners, and quote sections.
My wireframe
Digital wireframes
Next, we sent our designs to the project managers for approval. Meanwhile, we created the rest of the pages the managers wanted us to design. I focused on the winners and runners-up page, while my co-designer was supposed to design the judges page, but our managers decided against it.
Paper wireframes
After research and planning was finished, my co-designer and I drafted our own paper wireframes and selected parts of our design we wanted to combine for the homepage.
Co-designer's wireframes
My wireframes
The green is the final design after iterating several wireframes
After reviewing our wireframes, we decided to use my 'About F3' design, combine my 'winners' page with my co-designer's thumbnail (the preview cards), use my co-designer's judges' design, and my 'encouraging quote' portion from the CEO.
My co-designer's wireframe
The list is very long so I created a collapsable design hence the circular (-) sign on each section. And the 2023 portion doesn't have any information because we weren't given the list yet.
This is the page when un-collapsed. Users can easily view the current and past winners by clicking the (+) in each section.
UI Scope
The other designer and I collaborated with with the F3 project managers on a doc to develop the necessary UI components within the website, such as typography, descriptions, and a breakdown of which portions we will designs. For privacy purposes, I put "XXXX" in place of the other designer's name.
Sitemap
We created a simple, hierarchical sitemap to illustrate the navigation of the website with five important main tabs (right to left): Home, About, 2023 Screening, Films, and Judges.
User Flow
After creating the sitemap, we focused on developing a potential user flow for F3 users.
Refining the design
Mockups: Iteration 1
After getting approval on the homepage and winners & runners-up pages, my co-designer and I began iterating mockups. She worked on the homepage, while I continued my work on the winners page.
After iterating these designs, I sent them to our project managers for approval. However, they wanted a major change: Make the image the central part, make a separate frame to reveal the information, and change the hero image.
When users press the (+) sign, more information about the film & directors is revealed.
The 2022 & 2021 section is different from 2023 because it requires the user to hover over each box to reveal the information about the film.
Mockups: Iteration 2
Accessibility (a11y)
Color & text
We used WebAim's color contrast checker system to ensure we followed WCAG guidelines.
Opacity
We checked the opacity of every section when the user hovers against the white text to ensure the information is readable for the user.
What I learned
Since this is my second project, I was much more confident and enjoyed iterating designs for F3. I enjoyed collaborating with my co-designer and established a closer bond with her as a friend and team member.
I also know that there is always something new to learn. My project managers always challenged us, and I ensured to follow through, despite the amount of time spent resizing images, text, or even adding color. I also enhanced my UX research skills with user testing and conducting quantitative data analysis. I am always open to collaborate, learn, and help organizations & businesses spread their positive objectives to implements new solutions.
