Industry
Samaritan’s Purse
Streamlining Navigational Flow to Drive Donations
Project Type
Responsive redesign
Nonprofit
Role
Timeline
UX / UI designer
May - July 2024
INTRODUCTION
Project Goals
02. Enhance the efficiency of exploring donation opportunities.
01. Simplify site navigation to improve the user experience.
03. Build users’ trust through transparency.
Background
Samaritan’s Purse is a nonprofit, known for its’ commitment to impactful spiritual and physical aid to those in need around the world, however the unintuitive website hinders users’ ability to explore causes and make donations.
Challenge
Redesign the site navigation to transform the user experience into an effortless and inspiring platform, that encourages potential donors to support the cause.
RESULTS
Before
After
User Interviews
Gathering real-world feedback from donors.
Research Methodology
Planning How to Detect Critical Usability Violations
I began the discovery stage with primary and secondary research so I could better understand the severity of the navigational flow, before any designing took place. My goal was to analyze friction points with the interface and discover user needs and pain points.
Heuristic Evaluation
Comparing the site against proven usability principles.
Usbaility Test
Identifying areas where users struggle most.
DISCOVER
I began my research with a heuristic evaluation using Jakob Nielsen’s principles to spot usability issues and rank their severity. This step uncovered key design flaws and helped prioritize improvements, guiding an efficient and effective design process.
Heuristic Evaluation
Prioritizing Based on Severity Ranking
Recognition Rather Than Recall:
-
The "View All Gift Items" CTA, leading to the full list of donation opportunities, is placed in an unexpected location with poor hierarchy, making it difficult for users to find.
-
Returning users must remember where to find donation and volunteer opportunities, leading to more navigation errors, longer task completion times, and increased frustration.
Consistency and Standards:
-
Website is not responsive on smaller devices, causing navigational components to run off the edge of smaller screen.
-
Interface elements, such as buttons, site layout and informational components are not consistent throughout the site, causing a fragmented user experience.
-
The categorization and menu labels don't align with users' expectations, making essential actions unclear and causing confusion.
Aesthetic and Minimalist Design:
-
The site’s pages lack a consistent UI and spacing system, with excessive images and text competing for attention. This makes it difficult for users to stay focused and navigate the site effectively.
-
Excessive visual elements on the landing and informational pages create unnecessary "noise," overwhelming users and resulting in a less intuitive and accessible site.
Usability Test
Understanding How User Interact with the Current Website
Before diving into interviews, I tasked participants briefly interact with the site to help me analyze the navigation and pages. This helped validate the heuristic findings and uncover other friction points. The heuristic evaluation and site audit reveal major usability issues in the donation process, from browsing projects to completing donations. The main problem is an unintuitive navigation system with poor visual hierarchy, disrupting the user experience.
Results
Complex Navigation
Users could not find donation list, giving up frustrated after 3-5 minutes of searching.
Content-heavy Pages
Users want visual aids to show project details like donation impact, fund use and progress.
Checkout Frustration
Users often missed their added donation item and the credit card input field.
User Interviews
Understanding What Motivates Donors
My goals were to learn what causes donors to choose one nonprofit over another, what they value, and what their experiences are Samaritan’s Purse. This helped me uncover potential opportunities that would boost loyalty and donation conversions for Samaritan’s Purse.
Affinity Map
Approach
Style
Participants
In-person; remote.
5 frequent donors.
Duration
Age
30-60 min each.
40-55.
Users Expect Transparency and Impact Results
01. Financial Transparency
Potential donors distrust nonprofits if they have to dig to learn how they’re using funds.
02. Inspiring Impact Reports
They hesitate to make a donation if the nonprofit does not portray the positive outcomes of their projects.
Mark is motivated by financial data and transparency, needing accessible reports, project details and metrics to trust donations are used ethically.
Long text on project descriptions.
Financial reports buried in the website.
Transparency
Easily accessible details on salaries, donation allocations and tangible outcomes of the nonprofit’s efforts.
The Charismatic Donor
Jane is motivated by success stories, photos and testimonials, needing accessible impact visuals and control over where their donation goes.
Core Pain Points with Samaritan’s Purse
Limited visuals of project progress.
Core Needs to Encourage their Support
Visual Impact Report
Photos, stories, and updates on who is receiving help and the progress and the progress of funded projects.
A complex site navigation.
Control Over Donations
Ability to choose exactly where their donation is applied within specific projects.
User Personas
Two Types of Donors with Different Motivations
In this phase, I analyzed primary and secondary research to identify core themes and patterns, ensuring I stay focused on addressing usability issues and motivating donations. My analysis revealed two types of donors with different priorities:
The Analytical Donor
DEFINE
Minimum Viable Product
Brainstorming
How Might We… help busy middle-aged professionals with analytical mindsets trust that donations will be used ethically and genuinely help someone in need?
In addition to improving the site navigation, I needed to make Samaritan's Purse stand out. To do this, I held a quick brainstorming session focused on meeting donors' core needs and how to exceed their expectations:
Detailed Project Page:
Details on goals, progress, and what’s left to accomplish.
Interactive Map Search:
A visual option for user to explore projects on a world map.
Data Visualization:
Charts on finances, progress, donations, and volunteers.
Impact Report Showcase:
Concise and visually engaging impact statistics.
IDEATE
User Flow
Understanding How to Streamline the Donation Process
Once the MVP was approved, I created a user flow to understand how users explore donations, add donations items to their cart and make a contribution. My goal was to ensured the end-to-end flow was seamless and enabled an efficient user journey.
Rejected
Layout Exploration
Before building the wireframes, I explored various layouts for the landing and program pages, with the goal to highlight the organization's impact while creating an intuitive navigation structure that guides users easily to program categories for better engagement and access.
Program Page
Rejected
Rejected
Approved
DEVELOP
Low-Fidelity Wireflow
Landing page
Mid-Fidelity Wireframes
Program page
Checkout page
Project page
Success page
The Donation Process
Approach
Methodology
Participants
In-person & remote; moderated.
5 all frequent donors.
Duration
Age
30 min each.
Pass/ Fail
5/5
0/5
2/5
30-55
Objectives
Evaluate if users can easily locate and explore projects within program categories.
Evaluate how users add donations items to their cart.
Evaluate if the checkout process aligns with what users are familiar with.
Goals
01. Validate revised navigation structure.
02. Evaluate if design align with user needs.
03. Assess effectiveness of data visualization.
Measurable Results
Participants go to curated list of programs to access all projects with no missed clicks.
Participants click the plus icon to add donations to their cart with no missed clicks.
Participants can input their card information without confusion or needing assistance.
Usability Test
VALIDATE
Key Usability Issues
Cluttered Checkout
The checkout page did not reflect a structure they are familiar with and felt unorganized.
Add to Cart Confusion
Users missed click “Donate” button to add items to cart, not the “+” icon.
Distracting Impact Report
Took up too much space, hindering quick access to program list.
Project Page: Adding Donations to Cart
User Insight
“I saw the plus icon but I honestly didn’t think it had anything to do with adding it to my cart.”
Changes Made
Revised add to cart CTA to structure and language familiar to users, increasing the clarity of their next action.
Version 1
Added Value
These minor adjustment improve the usability by reducing confusion of key actions and aligning the site function with users’ expectations.
Version 2
Removed “+” Icon
Refined add to cart action to only the button, increasing consistency and reducing confusion of next action.
Revised Layout
Moved “Where Most Needed” to donation option list to maintain consistency. Added quotes from those helped and related articles to maximize portrayed impact.
ITERATIONS
Checkout Screen: Cart Overview and Inputs
User Insight
“This screen overall feels a little cluttered and confusing. It feels incomplete, like something is missing.”
Changes Made
Revised the hierarchy of cart summary to give the checkout more emphasis. Added a progress indicator to inform and guide their task.
Version 1
Added Value
These improvements provide a navigational structure that reduces the cognitive load and streamlines the checkout process.
Progress Bar
Added progress bar to inform users of the billing and payment review step, so they do not have to guess their next action.
Version 2
Credit Card Icons
Visuals of accepted payment methods to inform users at-a-glance.
Cart Summary Hierarchy
Revised the composition of the donation items added to take up less space, reduce cognitive load and draw users’ attention to the checkout.
Home
Selected project page
Home
Project page - add to cart
Program page
Checkout page
Program page
Successful checkout page
FINAL PRODUCT
Growth as a Designer
This project was incredibly rewarding as I saw significant growth in my design skills, particularly in prototyping complex interactions like automatic scrolling images, map interactions and horizontal overflow scrolling—challenges I genuinely enjoyed.
Project Challenges
The biggest hurdle was narrowing the scope of a disorganized, hard-to-navigate website within a tight deadline. Redesigning the Samaritan’s Purse website gave me valuable experience with heuristic evaluation, helping me prioritize and improve the platform’s usability.
REFLECTION