BlackFem Case Study - Jasmine Sarau

Project Details

I was the sole designer and developer on this project in 2022. I ideated early design concepts, presented to leadership, and delivering the finalized website. During this project I collaborated with our CEO as well as a branding consultant to redesign BlackFem's website. BlackFem is a nonprofit "wealth justice" organization that works across the country providing financial education and healing financial trauma.

Role :

Product Designer

Year :

2022

Tools :

Balsamiq, Figma, & Webflow

Website :

Visit Website

The Problem

Confusion on "What BlackFem does"

BlackFem had shifted from primarily working with K-12 schools to working with higher ed, policy makers, and community organizations. The current design of our website was not reflecting this change, and funders were having a difficult time understanding what we do.

Urgent need for funding

We had an immediate need for funding which was crucial to the business because BlackFem is a nonprofit that heavily relies on grants.

The Business Goals

The primary goal of this project was to increase funding (grants and donations). The constraints of this project were that we needed the website redesign done quickly, effectively, and at a low-budget. In the past we had worked with web developers, but the process of working with them was often costly and took a long time to complete. Often times, the developer would not translate our designs exactly to the completed website.

Background Research - Interviews

I conducted interviews with leadership on our team to get a more complete sense of the feedback we were receiving on current website design by funders. Our leadership teams were meeting and communicating with funders the most. After conducting the interviews I performed open coding and identified four major themes that were showing up over and over again as seen below:

Proposed Solution

Redesign Website in-House

The proposed solution was to redesign the website and develop the website in-house using Webflow, so we can represent our company better, increase funding, and publish the website in a timely manner at no additional cost.

Guiding Design Principles

I identified four guiding design principles to keep in mind while completing this project. The principles included the following: clearly explain what BlackFem does, display third party endorsements, highlight impact numbers, and make donation buttons noticeable and easily accessible.

We needed to clearly explain what BlackFem does because there was confusion on this topic and it was something that was vital for funders to understand in order for them to give us grants. We also needed to display third party endorsements to build social proof and highlight the notable organizations and companies we had worked with in the past to build credibility. We wanted to highlight our impact numbers because this is something funders specifically look for and ask for. Lastly, we wanted to make our donation buttons noticeable and easy to access so those that wanted to make a donation were able to do so quickly and easily.

Ideating Design Solution

I began the design process by generating basic wireframes based on our current research and guiding design principles. These wireframes were created using Balsamiq. These wireframes helped me to organize my ideas at this stage in the project, and I was able to show these to the rest of our team to make sure we were all on the same page in accordance to our business goals and product design goals.

These wireframes depict the impact and home page of the website. For the impact we wanted to highlight our "numbers", and for the homepage we wanted a powerful image and a compelling headline with a noticeable donation button in the headline.

These wireframes depict "what we do" and "social proof".

Information Architecture

After identifying the guiding design principles and doing some initial ideating via sketches I refined my ideas and worked on the information architecture of the new website.

I created a site map as shown below, that helped organize all of the pages that were going to be included in the website as well as what content would be included on each page. This helped set the stage for the continuing to ideate on my design which would eventually lead to the final designs developed in Webflow.

The "Why" Behind the Design - Hero Section

The final design of the BlackFem website was developed using Webflow. The final design incorporated the four guiding design principles, as well as addressed the recurring themes brought up during the background research.

The design choices for this project were very intentional in order to solve the problems identified. The hero section on the home page included strong imagery to represent our new branding of being "powerful, sophisticated, and bold".

I used our photography imagery as a way to tell our stories and capture authentic moments. Since user's tend to form first impressions of websites in around 0.05 seconds, in the hero section I silhouetted subject matter onto a flame background to create a bold and striking portrayal. [1]
Landing pages can be some of the most important pages on any website and the goal is to convert users. In our case the goal is to get people to fund us through grants or donate to our organization. I included the a compelling headline that states "we are a wealth justice organization" to quickly grab user's attention and describe what the focus of the organization is in a concise manner.

The "Why" Behind the Design - Social proof

When deciding whether to give our organization grants, funders often want to learn more about our founder and get a deep sense of her story and "how she got here"

Our founder has worked with several notable brands and had received honors, awards, and grants from notable organizations and we wanted to take advantage of this to visualize to users that we are a credible organization. [2]

On the founder page, I included a section to display third party endorsements from companies that our founder has worked with/been featured in the past. Some of these notable companies included Vogue and MSNBC. This was used to build social proof.
I also included a section to display some of the organizations that have given our founder honors and awards along with our funders. This was done to build credibility in our brand as potential funders are browsing through our website to learn more about us.

The "Why" Behind the Design - Imagery

One of the problems we were having with the older design was that our imagery and branding made it seem like we were still only working with K-12 schools, however that was not the case since now we were working more so with high ed institutions, policy makers, and community organizations.

I decided to use the photography imagery on our website to address this issue as shown below.

As mentioned earlier, our photography is used as a way to tell our stories and capture authentic moments. Our secondary photography is candid, vibrant, and authentic in nature.
The imagery on the old design of our website primarily consisted of students K-12, however in the new website design I included imagery of our primary target audience which are Black women and girls. Although we worked with all members of the communities we serve, the focus of the organization has always been uplifting Black women so I decided to reflect that better in our new website design.

The "Why" Behind the Design - Donation Buttons

One of the guiding design principles for this project was to include clear noticeable donation buttons throughout the website since BlackFem relies on grants and donations. I wanted clear call-to-action buttons.

I included large donation buttons on both the top navigation bar and footer on each page of the website in order to maintain consistency while keeping the donation button accessible so if users were interested in making a donation they could do so quickly and easily.
I also included donations button in relevant sections throughout the website as well to encourage users to donate.

The "Why" Behind the Design - Impact

Another problem we were consistently having is that our old website was lacking relevant and meaningful impact numbers. Impact numbers are something that funders are particularly interested in when deciding whether to give grants to nonprofits.

I included relevant impact numbers on the new website design and highlighted this section so it stood out. It displayed the work BlackFem has been doing. This included the number of policies adopted, number of people served, and the number of wealth generated from one of our initiatives.

The "Why" Behind the Design - Trauma Map

Financial Trauma is a new concept that was coined by our founder, and it is central to the work that is done at BlackFem. I wanted to visualize "where we work" and show that the we are working in the most financially traumatized regions of the country.

I designed this map and included it on the home page that included a visual of "where we work" because this was a recurring question that was coming up during meeting with funders. I also included a written list of all of the cities as well in case they were interested in seeing the specifics.
I also included the number of current cities we operate in as well as the number of cities on our waitlist to build a sense of urgency in users and get them excited about the work we are doing by showing how many cities are committed to working with BlackFem.

The "Why" Behind the Design - What does blackFem Do?

In the old website design there was confusion about what BlackFem actually does. Some funders still assumed we worked primarily with K-12 students and schools, however this was not the case. I wanted to highlight all the work we were doing with all the different partners we have in the education, community, and policy field.

I broke down our 4 pillars into separate sections and included relevant icons so users could quickly skim through the sections and scan the information that was most relevant to them. Most users view the information on websites by scanning through the website instead of reading everything on the website so I wanted to include all relevant information while keeping it easy to find quickly.

The "Why" Behind the Design - Headlines, Subheadings, & Paragraphs

Lastly, I wanted to incorporate compelling headlines with short paragraphs 3-4 sentences with descriptive subheadings. This was done so users could quickly scan the website and reach information most relevant to them.

The primary typeface used for our headlines and subheadings was Oswald which is bold and confident just like BlackFem's brand. This was paired with with Flood to highlight key messaging in a striking and expressive way (as seen in purple text in the above screenshot).
I used compelling concise headlines that were relevant to our content and demanded the user's attention.
I included descriptive subheadings to segment the copy and kept the paragraphs short and easy to scan (around 3-4 sentences at most).

Collaboration

I presented to leadership on a regular basis while completing the process to get their feedback, as well as collaborated with our brand consultant to get their feedback on how our new branding was implemented into the new website.

The final design was presented to our brand consultant to get their feedback on how the brand guidelines were executed on the new design of BlackFem's website. Overall I received positive feedback, and collaborated with them to make the final touches.

The Results

The results of the redesign of BlackFem's website were very positive.

After we published the new redesign throughout the year we received an increase of 55% in the total amount of funding and an increased number of grants (+4). The feedback we received from funders validated the new design because the information they were searching for on the website was easy to find and they were able to get a better sense of what BlackFem is and does than compared to before.

The new website design represented BlackFem's brand more effectively and authentically. The intentional design choices made during this project had a huge impact on the results that followed the publishing of the new website.

BlackFem Website Redesign + Development (2022)