Product Design Volunteer | Case Study

Designing for Climate Justice Partnerships & Donations

Our Design Volunteer Team

1 Web Designer & Developer,
1 Product Designer (Me)

My Role

Lead the design and UX research for the website

Scope & Duration

Target User’s: Organizational grass root, government, and non profit leaders | 4 weeks


The  Climate Emergency Mobilization Task Force (CEMTF) is a Bay Area coalition of elected officials, city staff, county staff, youth, environmental activists, social activists, and front line communities addressing the inequities of the climate emergency.


The goal of the project was focused on creating the web and brand design. CEMTF was established in 2019 and did not have a website or branding created for them yet. While their logo was created before I joined, everything else needed to be designed from scratch.


Design a website that:
1. Encourages leaders of organizations to partner & donate with CEMTF
2. Inspires volunteers to join & donate with CEMTF
3. Represents CEMTF values

The Problem

Zero oNline Presence

CEMTF was established in 2019 and was preparing to launch a online summit to connect various leaders for the fight against climate change in the Bay Area. However, they didn't have an online presence and needed one.

CEMTF Client Research


The main volunteer contributors to CEMTF are their partner organizations, legislators, and politicians.

Understanding how they self-describe

Through speaking directly with CEMTF members and reading various documents I made a list of words that they self-describe as. I then organized this via a mind map to interconnect the different descriptions.

This would later support questions asked in user interviews, the theme of the brand design, and the website design.

Partner Organizations User Research


To understand the value CEMTF brings to organizations in order to receive partnerships and donations that would directly influence the designs of the website and CEMTF's branding.

The was focus was to:

  • Empathize with their personal needs & challenges
  • Determine how CEMTF supports them and vice versa
  • Understand what they look for in an organization to partner or donate with

Selecting participants

I selected 5 different organizations that are already partner with CEMTF. They were chosen based off active participation in either volunteering their time to drive CEMTF’s mission forward and or through donation support.

Conducting interviews & Synthesizing Data

All of the interviews were for 30 minutes and the responses were organized via an excel sheet. When they were all completed I synthesized the qualitative data via an affinity diagram.

Key findings from research

The organizations that are currently participating value CEMTF because:

  • The impact that can be made, acts as catalyst, facilitator, change-agent
  • Partnerships and alliances, especially for political and organization alliances
  • Scalable influence & creating a movement, “We want to raise consciousness, awareness, and commitment across the bay area with CEMTF”
Creating persona based on key findings

I gathered the key insights from the user interviews and then created a persona to implement throughout the rest of the design process.

With the initial user research completed I moved on to the design phase.

Designing CEMTF Website

Initial Wireframes

Our team made a list of all the pages we would need, reviewed it with CEMTF leadership, and then broke out the pages between us. I was was responsible for designing the wireframes for the Home, About Us, and Get Involved pages.

With the initial wireframes approved I then moved on to creating the brand while the other designer started to bring the pages to hi-fidelity.

Designing the Brand
Searching for inspirational imagery

I searched for imagery based off the words that CEMTF self-described as and how partner organizations value CEMTF.

Selecting CoLOR & TyPOGRAPHY

Next I created two different brand themes that expressed very different vibes. The first is earthy, vibrant, and youthful which could be appealing to not only organizations but the general public as well. I created two different home pages for this brand theme.

The second is more serious, business, and straight-forward which would be more appealing to organizations who are CEMTF’s primary user. I created two different home page options for this brand theme.

CEMTF chose the first earthy vibrant one without gradient background images. With the branding completed we moved on to gathering copy and imagery from CEMTF to fill in the wireframes in order to make hi-fidelity mockups.

Final Hi-Fidelity Designs

Accomodate request: temporary home page

CEMTF wanted a temporary home page while the final one was being built so I created one last wireframe with the brand colors incorporated to accommodate this ask and when approved created the hi-fidelity mockup for the temporary home page.

final designs

The web development of the final website is ongoing however you can view the temporary home page that my other team member created here.

Challenges & Learnings

The greatest challenge was understanding how non profits operate differently from corporations in terms of organizational structure. In CEMTF there were so many stakeholders with equal weight in determining business decisions that sometimes it was hard to find alignment. For example, having copy filled in for certain sections like the Mission & Vision. It was awesome to assist in bringing them alignment through the process of designing this website.

The greatest learning was discovering all of the people and organizations working hard in the Bay Area to combat and mitigate the consequences of climate change. For me it was extremely inspiring to meet and design for them in order to help achieve their desired goals for CEMTF.