UCLA Online Giving Portal

Back to Projects

Project Overview

UCLA's online fundraising ecosystem was built on three separate platforms — GiveToUCLA campaign sites, giving.ucla.edu, and department-level microsites — each maintained independently and incompatible with one another. The result was a fragmented donor journey, siloed fundraising data, and a growing backlog of maintenance debt for the technology team.

As the Product Designer on the Advancement Technology Solutions team, I led the UX strategy and design work to consolidate these platforms into a single, cohesive Online Giving Portal — built on Magento and designed to serve both donors and advancement administrators at scale.

The Challenge

• Donors encountered three different visual identities and checkout flows depending on the fund they wanted to support
• Gift officers had no unified view of donor activity across platforms, making stewardship difficult
• Mobile conversion rates lagged significantly behind desktop due to outdated form patterns
• Campaign pages required IT involvement to launch, creating weeks-long delays for advancement staff
• Payment methods were limited — no Apple Pay, Google Pay, or recurring gift options

Design Process

1. Discovery & Stakeholder Research

Ran a series of stakeholder interviews across Advancement, IT, and the gift officer community. Mapped the existing giving journeys across all three platforms end-to-end, identifying the critical drop-off points and the administrative pain points that were slowing campaign execution. Key insight: advancement staff wanted a self-service campaign tool just as much as donors wanted a faster checkout.

2. Competitive Analysis & Benchmarking

Analyzed online giving portals from peer institutions (Michigan, Stanford, Harvard) alongside leading e-commerce patterns. Identified best-in-class patterns for fund discovery, recurring gift configuration, and campaign landing page design that could be adapted within UCLA's brand system.

3. Information Architecture & User Flows

Rebuilt the information architecture from the ground up — mapping the portal into four core experiences: Fund Discovery, Giving Form, Checkout, and Campaign Management. Created detailed user flows for both the donor path and the admin path to ensure neither was treated as secondary.

4. Wireframes & High-Fidelity Design

Designed wireframes for all major screens and iterated rapidly with feedback from gift officers and the development team. High-fidelity mockups followed UCLA brand guidelines while introducing a cleaner, more trust-building visual system — particularly on the checkout and confirmation screens where conversion rates were most at risk.

5. Usability Testing & Iteration

Conducted moderated usability tests with eight donors recruited through UCLA Alumni Affairs. Key iterations included simplifying the fund search experience, reducing the number of steps in the recurring gift setup, and improving error state clarity on the payment form.

Research Findings

• 72% of test participants completed a gift on mobile during usability testing, but 4 of 8 initially abandoned the recurring gift flow due to unclear configuration language
• Gift officers cited "waiting for IT to build a campaign page" as their #1 pain point — average wait time was 3–4 weeks per request
• Donors expressed hesitation on the payment screen due to unfamiliar platform branding; aligning checkout with UCLA's primary brand identity measurably increased perceived trust in follow-up surveys

Before & After

Outcome

The UCLA Online Giving Portal launched as the primary giving destination for UCLA Advancement. The unified platform now facilitates over $50M in annual gifts, with improved mobile conversion rates and measurably reduced campaign launch times for advancement staff. The self-service campaign builder reduced IT dependency for new campaign launches from weeks to hours.