Timeline
February 2024
(4 weeks)
Skills
Interaction + Visual Design
Design Systems
Prototyping
Team
Sr Product Designer
Product Manager
Marketing
Background
I was a Product Design intern on the Growth Pod, which drives donation experiences on ACLU.org. Our goal for this project was to create a design vision for the donation form to reduce drop-offs and help donors easily support the causes they care about.
Impact
My team trusted me to independently explore solutions for this opportunity, ultimately leveraging my designs and research at the FY25 Roadmap planning sessions to secure organization-wide support and align teams to launch the project.
Opportunity
We lacked insight into why users abandoned donations, but the 2.8% conversion rate was significantly lower than the average of 19% for similar nonprofits (M+R).
Solution
Prevent early overwhelm: Reducing clutter and decisions at the entry point helps donors focus and easily decide how much to give
Enable flexibility and reduce dark patterns: Key choices like gift amount and payment method were only accessible at Step 1, forcing early commitment. This design reduces friction, helping donors easily review and change previous inputs.
Reduce time and effort spent: Consolidating similar inputs reduces overall form steps. Adding location-aware suggestions enables donors to finalize their donation with less keystrokes.
Challenge
UXR couldn’t finish benchmark usability testing before our deadline, the FY25 roadmap planning sessions. I leveraged my research on checkout and form design to inform decision-making, helping the team build a stronger pitch for stakeholders.
Competitor analysis identifying UX patterns from 15 e-commerce and nonprofit websites.
Literature review synthesizing 50+ articles on form and checkout design.
Data Review uncovering pain points using past reports and Heap.
Design Opportunities
Create efficiency
Filling out fields is tedious. Streamline info entry to reduce donors' mental load and completion time.
Enable flexibility
The structure complicates input revisions. Reduce navigation and editing friction to improve usability.
Enhance trust
The form doesn't adhere to best practices. Align interactions and design to donors’ mental models.
Design Kickoff
Most competitors had 10-14 inputs for donation forms, but the ACLU had 17. I hypothesized that this caused donors to lose motivation throughout the flow, leading to high drop-off.
.png)
I proposed removing address fields since they weren't in competitor forms, but my PM shared that they help Marketing create touch points beyond the form. Receiving mail, like membership cards, boosts donor loyalty and engagement.
Unlike competitors, the ACLU's form forced early commitment on payment method and email opt-in at Step 1. Knowing from earlier research that donors already struggled to decide on gift amount, I believed the decisions and design threatened their attention span.
.png)
Information Architecture
Restricting Step 1's inputs to gift frequency and amount could ease friction at the entry point. But based on team feedback, I could only move payment method selection.
I restructured the rest of the IA to organize inputs more logically and merge related fields. I distributed question complexity and reduced overall steps from 4 to 3, making the flow feel shorter while balancing the need to keep all inputs.
Improving Visual Design
As I translated the flow into high fidelity designs, existing components made the form look outdated or cluttered. To resolve this, I broke from the design system and iterated on designs inspired by competitors. I was conscious of balancing modernization and consistency, knowing that custom components would increase engineering cost.
After iterating, my mentor and I evaluated potential designs. Some ideas looked promising, we ultimately chose a simplified solution for me to continue refining. The final design preserved consistency with the current experience, reducing the potential for user confusion and lowering engineering lift.
.png)
.png)
Enhancing Interactions
Leveraging e-commerce best practices, I implemented features that reduced keystrokes for address input, helping donors quickly complete the longest form section.
Before
Location-aware address suggestions fill remaining inputs
Restructuring and hiding optional fields reduces perceived length
After
Knowing that about 8% of users dropped off at payment entry, I also enhanced the credit card input process by adding clear labels and auto-formatting information to match physical credit cards.
Before
Auto-space supports entering and revising long card number
Follows physical card patterns so donors don't have to convert and look for digits in dropdown
After
Reflection
I explored various layouts—multi-step, accordion, and single-page—during the form redesign. To support future comparison and testing, I iterated on the accordion design while my mentor focused on a single-page design.
Looking back, I would have preferred to dig deeper into the existing multi-step structure, since it could’ve balanced user familiarity and reduced engineering effort. The scope of this project was limited to the donation page, but the form is also embedded in iframes across ACLU.org. The accordion layout could create usability challenges in this context, particularly with revisiting or editing past inputs.
.png)
Alternative multi-step design applied to the homepage's donation iframe, created after the internship
This experience sharpened my ability to align user experience and technical constraints, a balance I prioritized throughout the project and continue to refine in my design process. I'm grateful for my mentor and PM who encouraged me to explore widely, and for the design and engineering teams who shared valuable knowledge and feedback within a tight timeline.
