Facilitating High Quality Donations with Less Effort

THE PREGNANCY CENTER / WINTER '21

Context

The Pregnancy Center is a nonprofit supporting new families in Kitchener-Waterloo region. One critical way they support their clients is by gathering donations from potential donors

I led the design of donation portal experience for prospective donors from scratch, along with the request management screens and custom input fields.

Team

2 Product Designers

2 Product Managers

6 Developers

Timeline

3 months

Constraints

Starting from scratch – no existing metrics

Short turnaround time

Protection of client information

The Problem – Constant back and forth and unfiltered donations

Since there was no fast way to communicate donation needs and requirements, TPC has to manually facilitate those conversations and reject requests. Our solution provides the context necessary to reduce those conversations.

Before – telephone calls, excel sheets…

TPC currently struggles with constant back-and-forth conversations with donors.

After – a centralized digital system

No more back-and-forth or unsolicited donations. TPC just has to accept high-quality donation offers.

Design Challenge #1

How might we encourage donors to donate items that are needed and meet requirements?

Research! Oh wait… visual explorations?

With pressure to present an initial vision of our product and delays with user research, I analyzed other donation platforms to develop assumptions to guide our designs.

The critical assumption we made was that emotional appeals and fast contact were critical to increasing donations.

List Browsing

Face to Face

Gallery

User research, finally!

I worked alongside product to develop an interview guide. We interviewed both a past donor and a member of TPC’s staff.

Key Questions

What motivates donors to donate?

What is the source of their donation items?
How often do they donate?
How much do they donate?

Storytelling wasn’t going to cut it for our users, but efficiency would

Persuasion and storytelling techniques weren’t necessary because our target users already had strong self-centered or selfless motives.

The questions our prospective donors would have boiled down to just two questions:

What is needed?
How much is needed?

New Research, New Information Architecture – making requests faster to find and easier to scan

We wanted to make it quick for users to find what and how much is needed. Since most of TPC’s requests were for items with consistent requirements, I moved forward with the request groups approach.

Categories

Grouping individual requests into broad categories.

Request / Teddy Bear for Claire (2)

Request / Drumkit for Iris (1)

Request / Bouncy Seat for Jenny (1)

Category / Toys

Best supports a high degree of nuance between requests for the same item.

Request Groups

Combining all requests for the same item into units

Type / 125mL (5)

Request / Claire Evans (2)

Request / Lin Yao (3)

Group / Bottles

Individual requests aren’t visible to donors

Best supports low degree of nuance between requests for the same item.

Exploring navigation experiences

With a new information architecture, I focused on exploring different layouts and navigational experiences based on our new research insights.

Gallery & Sidepanel

✅

Quick access to donation CTA

✅

Imagery clarifies item for lesser known official item names

❌

Panel is technically challenging to implement and doesn't scale well for more content

❌

Z-pattern scanning is slower

List & Load

✅

Vertical, alphabetical sort easier to scan

✅

Simple and common navigation pattern

❌

Lack of imagery is less visually engaging

Since most of TPC’s requests were for items with consistent requirements, I moved forward with the request groups approach.

Taking the best of both worlds

Using the "List & Load" concept as the base, I brought in elements of the "Gallery" that made it more engaging.

Changes Made

Imagery to help identify items with synonyms

CTA embedded directly in the requests view

De-emphasized item description & requirements due to general similarity

Pagination for scalability

Usability Testing with Donors

For our usability testing, I settled on a concurrent think-aloud & probing approach for its speed and cost-effectiveness. We tested our donation hub on 3 past donors through a guided prototype I built in Maze.

I defined two questions to center our usability testing around:

How well does the user understand our information architecture of groups, types and requests?

How intuitive is navigating our interface as a first time user?

Usability Testing Results

Testing was a success! Some key pieces of feedback we noted down for our next iteration was related to content – the terms we used to describe the information hierarchy were already being leveraged for other TPC-related programs.

9/10

Average Promoter Score

100%

Would use platform

Design Challenge #2

How might we enable TPC to match requests, edit groups, and edit types?

• BPA free

• Less than 3 years old

Bottles are extremely vital to helping both child and mother through the stages of infancy.

Requirements:

Create Request Group

Group Name

Bottles

If no types are applicable, use a universal type such as “One Size”

Item Types

Enter a new type

One size

Description & Requirements

Formatting Tip: Ctrl-B to bold, “-” + Space to create a bullet point

Save changes

Image

Uploads must be JPEGs or PNGs, at least 600 x 430 pixels, and less than 5MB

Logout

Donation Hub

Bottles

Client Name

Quantity

Date Requested

Fulfilled

Timothy Chalamat

Jan 9, 2021

Timothy Chalamat

Jan 9, 2021

250 ML (20)

150 ML (20)

Displaying 40 total requests and 5 types

Elon Musk

Mark Zuckerberg

Jan 9, 2021

Jack Dorsey

Bill Gates

Jan 9, 2021

Understanding the donation reception process

TPC references a list of requests grouped by item e.g. strollers

Clients who have been waiting the longest are contacted to confirm their request is still valid

Requests are marked fulfilled immediately after finding a match

Exploring how to manage requests, types and group details

Keepin' em separate (Modal)

✅

Feels simpler to switch between groups

❌

Requires separate entry point for editing / managing group and type information

Split Panel

✅

Makes it easy to edit and visualize group information

✅

All information and management related to a group is centralized

❌

Group details are not edited often yet distract from request management

Focus Mode

✅

All information and management related to a group is centralized

✅

Clean UI enables complete focus on request management

❌

Increased friction for switching between groups

Developer Collaboration & Design Systems

Empathizing with our developer friends

Throughout every project, I chat with all devs to understand how I can help improve the developer experience.

Halfway through the project, a major pain point was navigating between countless screens to develop a tiny component’s states, since developers wanted to optimize for recyclability and atomic design.

Matching handoff to developer workflow – from endless screens to calling out components

Before

Is this the default? Oh, okay cool. Uh... now where’s the error state now?

After

Thank god, they’re all in one place.

Reflections –– the good, the bad, and everything in between

✅

You are not your work, you are your ability to grow

Given this was my very first design project, there was a lot of constructive feedback at the start. Looking back at how much I’ve grown though, I’m now comfortable with letting go of my designs because I’m confident I’ll be able to create even better ideas.

😕

You can’t always ship a "perfect" product…

Would I have liked to do more testing? Yes. More iterations? Yes. Fancier designs? Yes. But the value delivered in shipping a product sooner sometimes outweighs refining more details... and we can always ship updates later ;)

💪🏼

...but some design battles are worth fighting for

We initially faced pushback for pitching a new admin view. However, the friction it would create was too steep to ignore. I learnt to advocate for user-centered designs to all stakeholders, leveraging factors devs, PMs and TPC would care about most.

🌀

The design process isn’t always linear

With delays in user interviews, I had to circle backwards in our process due to new insights several times. I’ve learnt to embrace the uncertainty and appreciate that sometimes walking backwards is the way forward.

Next up ->

Revamping in-line sign up for the metaverse