Charity Protector

Charity Protector is a website that showcase non-profits overall transparency to the user. Using a grading scale and user reviews, that will increase user trust and confidence when donating to a non-profit.

Year

2022

Duration

2 weeks

Project Type

UX/ UI design

Role

UX/UI Designer

Project Overview

Reinforce a Culture of Generosity

For this project my group and I were given a task to reinforce a culture of generosity by creating charitable giving solutions that are more accessible, inclusive and effective. We conducted a Survey and User interviews which revealed that prior mistrust in nonprofit organizations and little to none indicators on knowing where their money is going hinders majority of users from continuous donating.

Design Process

Double Diamond Process

My Role/Responsibilities

UX Research
UI Design

Research & Defining

Transparency = Trust

Users want to feel included and confident when donating to a nonprofit.We were tasked with:

-Propose a validated website that utilizes the fundamentals of UX, design thinking, usability, and testing

-Work as a team
, using Agile methodologies to facilitate a design sprint

-Considering what features would be most useful to the users

-Testing/iterating the UX/UI of The Proposed website

User research

The user interview gives you a more in-depth look into your research. My team and I carefully arranged a series of questions in a specific order to gather as much data as possible, while keeping the conversation open we let the users speak their minds from their personal experiences with nonprofit organizations.

As a group, we were able to conduct 7 interviews, of which 3 were female and 4 male. Their ages ranged from 24–65 years old. Important questions and answers we received are:

Affinity Mapping

Click Here to view Full Map.
I was tasked to organize an Affinity Map and synthesize the data into common pain points from the user. While synthesizing I noticed multiple paint points and shared them with the team:

-Users want transparency from the organization, where is the money going and how is it being used?

-Users want to trust the organization they're donating to, and the user wants to feel personable with the nonprofit and its projects.

User Persona

Miranda is a common personality that was created to understand the ideal target user. We were able to prioritize the needs of the user as we considered Miranda's needs, experiences, behaviors, and goals throughout the entire design process.

Competitive & Comparative
Analysis

Now that we have a base idea of how might we raise trust and transparency from donor to nonprofit, we conducting a competitive analysis on two well-known sites within the Charity trade associations- Charity Watchdog and Charity Navigator. We drew a feature analysis graph that is common to charity trade associations to understand the common feature the users are already experiencing.

Design

More Accessible, Inclusive and Effective

With a clear scope of the competitive landscape, My team and I developed a Site map and User Flow that would decrease uncertainty and increase trust while the user is on the website.

Design System Ethos

01

Minimal Aesthetic
Emphasis on visual over technical text

02

Comprehensible Language
Clearly stated site methodology of rating a charity

03

Grading Scale
Breakdown of each individual charity

Site map & User Flow

With our user needs solidified from our user research we created a site map and user flow that will showcase the easiest flow throughout the design. Please Click Here for the a full view of the site map and User flow.

Sketches

Now it is time to transfer the structured data we've solidified through research into a interface layout. We took 1 hour to synthesize our ideas into one flow.

Wireframing

After Solidifying the sketches we created low-mid fidelity wireframes to showcase the site map and user flow. Here is an example of the user flow below.

Final Dashboards

Designing for Trust and Confidence

The best user flow aims to increase Trust and Confidence for the user while navigating through the website. By showcasing grading scales by transparency and trustworthy reviews, the user will feel more confident when donating to a non-profit online.

Home Dashboard

Centralized hub to view all charities and their current transparency status, designed for quick-reference and glanceability

Filter Directory

Displays all non-profits, grading scales, and mission statements for each non-profit in a easy to follow list layout for seamless user flow.

Single Request

Non-profit detail page that showcase detailed metrics of transparency from non-profit, Full mission statement, and more. Donate call to action button placed top right to guide users to the official site of the non-profit.

User Flow Prototype

Click here for the full clickable prototype (Desktop/Laptop). Below is a video of the full user flow in the user perspective.

What's Next

-High-Fidelity wireframes & Usability test with more clickable buttons

-Creating a Mobile App, Identifying what features to optimize and new M.V.P's

-Continue to increase the number of charities we showcase for the user

More Case Studies