Donation Portal

Background: United Way of the Bay Area uses a secure compliant donation portal application for its workplace campaigns. Donors who use this portal are typically making a payroll deduction pledge for the year. This tool allows for designation of the donation to any nonprofit agency the donor chooses.

Business need: Many donors designate to other agencies rather than to United Way of the Bay Area. United Way would like to persuade donors to give to them instead of another nonprofit.

Goal: Use the portal as a touchpoint to more effectively communicate and highlight the work that United Way is doing in the Bay Area and provide a great brand experience. Increase percentage of donations to United Way rather than to other agencies.

Challenge: Influence the donor to direct their donation to United Way instead of designating to another nonprofit.

User research: What were the blockers and motivators? The users are participating in a workplace campaign at their desks and are fitting this task along with their mandatory tasks for the day (blocker to spending time researching). They are often in a hurry and want to finish as quickly as possible (motivated to finish quickly). Many of the users were uninformed about the United Way focus areas (blocker to give directly to United Way).


  • Start the donation process on the home page with a clear call to action.
  • Streamline the workflow to 3 steps (down from 8).
  • Move the buttons from the bottom to the top of the form and keep them in the same coordinates so that the user does not have to look for the buttons each time.
  • Show an image of a United Way volunteer ‘on the ground’ making a difference in the community.
  • Include a thank you letter from the CEO, Anne Wilson, on the home page to extend gratitude to donor.
  • Use an infographic to simplify the explanation of the focus areas where donations are allocated at United Way.
  • Include personal quotes from clients about how they have been helped by United Way to add warmth and gratitude to the form pages.
  • Hide the main menu bar on the form pages to reduce distraction from the task of pledging and elevate more content above the fold.
  • Add emotive images above the form fields to visually describe the three focus areas within United Way.
  • Include an upsell at the point of submitting the form offering a time-sensitive which will be matched and is added to the donor’s yearly pledge.

My role: As a user experience and visual designer, I worked with a front end programmer in Canada who used remote desktop to access our instance of the software within our firewall to assist with styling the tool to match my photoshop mockups. Implementing the design was a challenge as the software is a blackbox, the html was unaccessible and could only be styled once the pages were rendered by the browser using jQuery and css. We were successful in achieving a new look for our portal

Results: Gifts directed to United Way increased 30% during the workplace campaign.

Backstory: The strategy document below was shared not only with the executive team and development officers but also with other United Ways nationwide who are working on donation portals using the same tool. This presentation was a useful tool for the project kickoff and communicating with the web programming team during the compressed 6 week timeline to launch.