Client

Pretty smart
foundation

UI / UX for Non-Profit

PSF is a non-profit that focuses on providing resources for minority women interested in pursuing the STEM academic field.

DURATION

On-going

TEAM

UI/UX Designer

KEY SKILLS

Design Research, UX Design, Visual Design, Content Strategy, Prototyping, Front-End Coding

Tools

Figma
Adobe Creative Suite
Webflow

My role

PRODUCT
DESIGNER

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.

VISUAL DESIGN

THE
PROBLEM

The foundation was growing, but the web site's user experience seemed to add friction to donations + sign-ups. PSF was also launching a new campaign focusing on the topic of Period Poverty, and their product offer experience was confusing.

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

THE
GOAL

The goal was to revamp the visual identity, rebuild the website, increase email-sign ups, and increase donor contributions.

FINAL
DELIVERABLES

I delivered and implemented high-fidelity designs, an interactive prototype, a style guide + design system for PSF.

DESIGN RESEARCH

The visual design was dependent on the analysis of the research conducted and as the sole researcher, I focused my efforts on the categories below.
Analysis of Visual Identities
Analysis of Competitors
Analysis of Supporters / Donators Needs + Goals

competitive visual audit in strategy deck

Analysis of
Visual Identities

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.

Using this research, I was able to pin-point an open visual opportunity for the foundation and create a disruptive design system.

VISUAL 
DESIGN

The Pretty Smart Foundation branding had a good base but needed to be tweaked a bit. I wanted to keep its original femininity while adding more pops of color.

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.

competitive feature + content audit in strategy deck

Analysis of Competitors

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.

proto-persona

Analysis of SUPPORTERS 
Needs + Goals

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.

site map with legend

INFORMATION
ARCHITECTURE

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.

lo-fi wireframes

WIREFRAMING

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.

HI-FIDELITY
DESIGN

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.

NeXT STEPS

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

MORE WORK

Amazing Lash Studios

Digital Marketing, Branding and Packaging Design
View Case Study

Lavanila

Ecommerce Usability
Optimization + Redesign
View Case Study

Charmed

Digital Marketing, Branding and Packaging Design
View Case Study