Problem
Purposeful is a new digital service that empowers people to search and donate to many charities around the world. Organized and personalized online giving, at this scale, is not something that exists today. This is why we needed to create an experience that makes it extremely simple to discover relevant charities and donate to those in need.
Project Goals:
• Make it easy for people to find charities in a variety of ways
• Incentivize giving by making it clear which charity programs offer matching
• Share the positive results your donation realizes in the form of an output calculator (example: $20 gives 4 nights of shelter)
• Populate recommended programs for users they may not be aware of
• Allow people receiving donations to write feedback for charity programs and respond to donors that have helped them
• Allow donors to leave reviews about charities
Process
We wanted to make it effortless for visitors to start searching for charities on the homepage. In order to understand how users wanted to find new charity programs, I designed three different search concepts and created click-through prototypes for user testing.
Homepage UX Concept 01:
The first method uses a natural language form to allow visitors to filter charities by cause, then demographic, then distance or location. These categories come together to build what Purposeful called “Mission Statements”. Mission Statement sentences were very important to the client and tied into Purposeful’s Brand identity. These user friendly statements make it easy for donors to share their passions and through this search method, provide a succinct path to find more personalized ways to give.
This homepage concept includes:
• The least amount of introductory information to get users searching quickly
• Filter option by way of the Mission Statement sentence structure
• Filter option with traditional search bar that populates real time results as donor types
• Recommended donation programs
Homepage UX Concept 02:
Searching by way of a sentence may be confusing for first time visitors, so this second concept allows donors to search by area of interest. Categories are broken down into: Animals, People, and Environment.
This concept page includes:
• An introductory section on how to use Purposeful
• Filtering charity programs by progressive disclosure
• Ability to select multiple cause outputs when searching for charity programs
Homepage UX Concept 3:
The third concept allows for search by charity causes. These naming conventions are what donors are most familiar when they have pledged in the past. Each category allows visitors to filter causes directly: meals, shelter, education, environment & animals, family services, healthcare, disaster relief, and more. This approach allows visitors to see search results in one click, as the other concepts take multiple clicks in order to get to the search results page.
This third homepage includes:
• The most amount of introductory information to benefit first time visitors
• Purposeful statistics
• Search through cause (quickest route to get to results page)
• Global output statistics (how many total safe nights slept, total meals served, etc)
• Benefits & Testimonials
Results
In the end the client liked all three methods as each direction showed different types of success in testing. My final design is a marriage of the three concepts. This solution allows donors to find results by creating a “Mission Statement” sentence, typing into a traditional search bar, and filtering by cause in the top nav. The first two options are placed side by side in hierarchy to allow visitors to choose which search method best fits their needs.
Additionally, we provide recommended programs based on services that are matching donations (causes more impact with no extra donation cost) programs that are gaining popularity, events that may be urgent (disaster relief), and local programs. Doing this helps donors discover relevant programs they may not otherwise know about or hadn’t yet thought of.
Impact Calculator Widget Design:
When viewing a charity page, we challenged ourselves by creating a widget that shows the impact you have on people based on your donation amount. This gets more complex when charities have matching programs.
In order to make the total amount that you are donating clear, we devised a few solutions that indicate how much you pay vs. what what a person in need gets after charity matching.
Additional Page Designs
