Pledge4Pearson Foundation

Project Overview

Scope
Design a responsive
nonprofit website

Tools
Figma, Adobe Illustrator,
InVision App

Role
UX/UI Designer
(Research & Visual Design)

The Challenge
Pledge4Pearson is a start up nonprofit dedicated to raising awareness and money for research into Pearson Syndrome. The challenge was to design a responsive website that was easy to navigate, looked good on mobile, and centered around getting people to donate money.

The Solution
• Design a responsive and user-friendly nonprofit website
• Create a brand identity that worked with the existing color palette

What is Pearson Syndrome?

Overview
  • Pearson syndrome affects the cells in the bone marrow that produce red blood cells, white blood cells, and platelets.
  • Pearson syndrome is caused by a mutation in the mitochondrial DNA. These mutations can make it hard for the body to make energy.
  • The disorder is very rare with less than one hundred cases reported worldwide.
  • People with Pearson Syndrome have a reduced ability to absorb nutrients from their diet, and most affected infants have an inability to grow and gain weight at the expected rate.

Competitive Analysis
Once I had a good overview of what Pearson Syndrome was, I decided to look into well known nonprofits that raise money and awareness. I wanted to see how they used "call to action" elements to get visitors to donate since this was a primary focus for the Pledge4Pearson website.

I noticed that a lot of charitable websites utilized donation forms on their landing pages. This makes it easy for a user to simply enter their information and donation amount straight from the homepage. This removes any friction of additional steps where they must click a call to action button to then be taken to another page to make a charitable donation.

Wireframing

Key Pages
I knew that the landing page needed to be engaging as well as focused on getting users to donate to the foundation. I did this by wireframing sections that displayed videos, impactful imagery, and the aforementioned donation form. Another key page to consider was "Luca's Story," which provides website visitors with context into how Pledge4Pearson got its name and got started.

Donation Pages
Next, I focused on the key pages for the primary user task: submitting a donation through the website. The landing page utilized a donation form to easily get the process started, but I also wanted to consider the key pages that would come after it. Thinking through these steps this early on ensured that my wireframes presented a simple and easy flow for users to complete.

Branding & UI

Early Logo Concepts
​Pledge4Pearson did not initially have a logo when we first started building out the website. I was asked to create some concepts around the idea of a butterfly and a double helix, two symbols that the foundation felt was key to their branding. Please note that the logo concept below was later changed to what is currently displayed on the high-fidelity wireframes and live website. I do not take design credit for the final logo, only the ones shown here.

Style Tile
‍‍
I created a style tile to present to the stakeholders and engineering team. This helped universally communicate the overall look of the website and included key UI elements that would help connect the branding across various pages on the website.

UI

Reflection
Having the chance to work with a nonprofit was a big part of the reason why I got into product design in the first place. I wanted a way to give back to the community, and getting to work with clients like Pledge4Pearson make it all worthwhile. After many months of working closely with the engineering team, the website is now up and running and makes donating to the cause a quick, and easy process. The proceeds will continue to go towards funding research for a cure for Pearson Syndrome, helping families in need, and raising awareness for others dealing with similar disorders.