UC Berkeley

The challenge

Give.berkeley.edu is Berkeley’s giving platform.

We are redesigning the experience to better reflect the needs of our growing donor base, to bring the gift processing in-house, and to fix a few big roadblocks.

The goals for the 2.0 version are:

  1. Allowing donors to give to multiple funds in one transaction
  2. Ability to enter amounts and edit the selected funds within the same UI
  3. Minimize distractions that interrupt the completion of the giving process

I am responsible for generating designs, user testing, presenting my recommendations to the stakeholders, gathering feedback, and adjusting the designs based on that feedback.

Team

Designer (me), backend engineers, frontend engineer, project manager, digital media director, art director

Scope

IA, wireframing, task flows, pitching solutions to stakeholders, conducting user testing, product design, ensuring correct design implementation

Tools

Pen and paper, Sketch, Invision

Giving gifts vs buying things

While the concept of a shopping cart is familiar to many users, we are deliberately trying to avoid the feeling of an e-commerce experience. As a part of it, we are changing some of the semantics to better reflect the fact that the donors are giving gifts: using “gift basket” instead of “shopping cart”, and “proceed to gift details” instead of “proceed to checkout”.

Giving basket experience

We are introducing a persistent UI element in the form of a giving basket. The goal of this basket is to allow donors to quickly view what they have already selected, edit the selection, search and add funds without leaving the basket.

Below are the three possible treatments I am exploring:

Tooltip

This is one of the more compact treatments.

While it is less invasive, it does present the challenge of having very limited space to display all of the information. Specifically, when trying to add a fund to the basket. Here are a few options for the treatment of the Add to Basket button.

Drawer

This is the treatment that I think has the most potential. It provides enough room for all of the information to fit in it, while also allowing for the information underneath it to remain visible.

Sidebar

This permanently open sidebar is the last option I am exploring. Its advantage is that it eliminates the need for a click to reveal the your basket’s content. The disadvantage is in the fact that, again, the space is pretty narrow.

Proceeding with the gift

Once the user adds funds to their gift basket and proceeds to the next step, the Gift Details page, there are a couple of key decisions that they need to complete.

Gift summary

I initially wanted to have a summary in the sidebar that would be visible throughout the “checkout” process. However, after discussing this treatment, we decided to move away from the sidebar and instead move the summary right underneath the amount selection, a la a total tally.

Gift types

There are three different types of gifts that the donors can make: one-time, recurring, and a pledge. The latter means that the donor signs up to give for a set period of time starting from now. While this is the way our gift processing department works, users have expressed their confusion about this concept.

I am proposing to simplify this by only having two options: one-time and recurring. Within the recurring gift, the donors would be able to either make this an ongoing gift or to set the end date for it. By setting the end date, their gift is automatically categorized as a “pledge” on our side.

Here is what the Gift details page looks like with all of the fields revealed.

User testing

Before moving on to the next design phase, I wanted to test our assumptions with real users. I prepared task lists and screen flows. I was able to get a great mix of people: existing and new donors, parents, alumni and students.

Some interesting findings were:

  • Main Search bar is not prominent enough
  • People preferred the sidebar treatment for the gift basket
  • People are confused about the difference between the FAQ vs Contact vs Ways to Give pages

As the result of this testing, I was able to adjust the designs to better reflect the needs of the users.

UI Design

I wanted to make the page feel light and airy, so I am using lots of white space and small pops of color. I am also introducing a curved crop for the hero image as a way to add a more organic feel to the page. I am repeating this motif in the cards below.

Based on the user feedback, I have merged what previously lived in 3 different pages (Ways to give, FAQ, and Contact) into one unified FAQ page.

Dynamic search results in the header

Gift basket counter changes to reflect the number of funds in the basket. We are also changing the language of the button from the lengthly “Proceed to gift details” to a more action-driven “Give now”

We are introducing a new type of page — a fund drive, where fund managers can set up time and dollar amount goals. The users then would see the progress toward the goal.

Once the user proceeds with the giving flow, they are able to enter the amount per fund. The default frequency is set to a one time gift. If there is an athletics-related fund in the gift basket, the last section (“I decline athletic benefits associated with this gift”) appears.

If the frequency is changed to Recurring, we calculate and display sub total and grand total values.

The result

I am proud of the positive impact that I had on the donor experience at this scale as the entire institution’s gift giving goes through this portal. I am also grateful to have worked with amazingly-talented folks.

Other Case Studies

Product and visual design for a B2B2C health insurance platform

Product design for an enterprise-level SaaS business

New product features and flows for a SaaS-based revenue-optimization platform

iOS and Android app design for a transportation startup