As the sole Visual Designer and UX researcher, I led the project with input from the client, taking on a deep and wide approach for both the visual branding as well as the UI design and UX research.

After conducting a usability evaluation, I noted some general issues within the current website including information architecture, user experience and usability issues.

After learning more about PSF, I dove deeper into non-profit STEM charities.
I wanted to get a better understanding of the market and created a bucket-analysis of different categories. Over-arching non-profits for girls (STEM) and specific target non-profits (STEM focusing on POC women)

By grouping them, I was able to have a more comprehensive view of the competitors and the donators for specific information like tone, content, and imagery.
‍
I then conducted a competitive visual analysis of these non-profits, as shown above.

I designed the logo and symbol, taking reference from the femininity that is established throughout the website. The script of the logo and softness of the typography help balance each other and maintain cohesiveness.

I was then able to use the bucket-analysis I created to map out the competitor website audit shown below. I focused on a variety of things including;
‍
What CMS platforms were they using?
‍Knowing the CMS platforms gave me a reference into how I would rebuild the current PSF website as well as any friction I might encounter. 

‍How were these non-profits collecting donations?
‍PSF offers the supporter a makeup-brush kit for donating. I was able to confirm that this was an opportunity for the non-profit since only one competitor offered their supporters a chance to purchase merchandise.
‍
What were the competitors landing page sections?
‍Analyzing the competitors landing pages gave me an insight into their content strategies and what PSF needed on their landing page to be at parity.

How is the content displayed?
Analyzing the competitors landing pages gave me an insight into their content strategies and what PSF needed on their landing page to be at parity.

After completing the visual and competitor audit, I focused on friction donators usually have in terms of when they decided to donate to a charity.

Due to this project's time-constraint, I relied on outside research, including an informative article from the Nielsen Research Group that focused on donators, titled "Donation Usability: Increasing Online Giving to Non-Profits and Charities."

This research helped confirm my competitive audit. I then created a proto-persona, and I seek to continue to validate my assumptions as the project proceeds.

After completing the visual and feature competitor audit, user research, and visual branding - I was ready to begin the site-map. I used the research conducted from the competitor audit to inform my decisions for the primary navigation, section modules and pages.

Using the site-map as my guiding light, I began to sketch the lo-fi wireframe. I detail above every section of both the homepage and product page.

Using the visual design system I created, I began my hi-fidelity wireframes in Figma.

Below I detail out the sections of the landing page.

Easy pathway to donations

To immediately catch the donators' attention, I implemented the donate button in the global navigation and separate sections throughout the landing page. Placing the Donate button in prominent modules gives the donator an easy pathway to support the foundation. I incorporated Donation CTA's in the Hero, Fund Allocation, and Donation sections.

Transparency in mission, impact + funds

Donors want to know what your foundation does and how their donations will be allotted before choosing your foundation.
One of the ways I accomplished this was by including a Mission, Impact, and Allocation module. Donors can now immediately see these modules and have a clear vision of what the foundation is what impact their funds will have.

Product + Period Poverty Campaign Call-out

The period poverty campaign now has a large dedicated section where users can find a quick summary of it and learn more. Donors now have a clear pathway to purchase their product as their donation to the campaign and foundation.

Establish trust with Events + Social Proof

We wanted to make sure that donors and supporters believed in the cause and felt comfortable donating their time and money. We decided to incorporate this into various sections of the website, including the Events and Social module.

We also added a donation module to the footer. The donation module has suggested donation amounts, giving the user a simple, quick, and easy choice of how much they would like to donate.

Moving forward with this project, After launch, I would like to conduct usability tests, including A/B testing, heat-mapping, and click mapping.