Scope
Design a responsive
nonprofit website
Tools
Figma, Adobe Illustrator,
InVision App
Role
UX/UI Designer
(Research & Visual Design)
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.
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.
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.
High-Fidelity Wireframes
Once the branding and UI elements were finalized, I was able to put all of the components together into high-fidelity wireframes to show the engineering team how the website should look when it was being built. I worked closely with the engineering team to also ensure that the responsive webpages looked consistent since the majority of users would be visiting the site on their mobile devices.
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.