Designing for Confidence: Modernizing a Donor Platform to Unlock Generosity at Scale
Core donor actions were buried, forms overwhelmed users, and donation volume lagged. Driving growth required clarifying key donor behaviors and creating a product experience worthy of the financial workflows it supported.
The Challenge: Scale, Simplicity and Trust
Turn a high-stakes, complex donor platform into a clear, trustworthy experience that simplifies financial decisions and supports scale.
Key Objectives:.
- Re-architect donor flows around high-value behaviors
- Redesign dense forms for clarity, completion, and compliance
- Reinforce donor trust by pairing clear intent-driven actions with contextual guidance and transparent feedback.
- Bridge design and engineering through a modular system that optimised product roadmap and enabled rapid, scalable iteration.
Research & Insights: Understanding Donor Behaviour
To modernize the donor experience, we first needed to understand how people actually navigated the portal. Through card sorting, tree testing, and usability walkthroughs, we uncovered why donors hesitated: core actions were buried, everything looked the same, and forms overwhelmed. These insights guided the redesign and directly shaped the strategic shifts that followed.
Research showed that clarity and trust were the main drivers of donor confidence.
Simplicity, transparency, and predictable structure consistently mattered most.
1.
Design Around Donor Behaviour
I transformed a flat, legacy dashboard into a donor-centric hub that prioritizes high-value actions and makes intent clear.
.png)
Legacy donor hub before the redesign.
The donor hub was rebuilt around how donors actually give.
Key actions are clearer, faster to reach, and easier to complete with confidence.
.png)
Mobile donor home was designed around intent.
Quick actions come first, with insights and detail revealed as users scroll.
Key Improvements:
- Action-first orientation - Replaced system-driven navigation with clear, behaviour-based actions like Add to Fund and Recommend a Grant.
- Clear hierarchy over dense dashboards - Suraced balances and primary actions first, reducing noise and helping donors act without scanning or decoding the UI.
- Guided decision-making - Added contextual cues and helper text to clarify next steps and build confidence at moments of action.
- Designed for momentum, not maintenance - Reframed the home from a passive summary into an active starting point for giving.
2.
Adopt a Modular System
We replaced ad-hoc, one-off panels with with a modular system of reusable fund cards. Donors experienced a consistent hub for every fund action, while engineering gained a flexible foundation to iterate, test, and scale with confidence.
This system wasn’t just component-based—it was conceptually organized using Object-Oriented Design (OOD) principles, aligning design with the mental models of both users and engineers.
This modularity set the stage for Shift 5’s deeper design-engineering partnership, enabling clarity, reuse, and velocity across teams.
Scrolling through the Home Screen makes it clear what to browse, what to pause on, and what’s worth diving into.
A modular system carried through action.
The same fund card framework moves seamlessly from the hub into the transfer flow, preserving context for donors and enabling reuse at scale
.png)
Fund cards explain the state of the money before inviting action.
This turns financial complexity into clearer, more confident decisions.
Key Improvements:
- Card-based fund hub gave donors a clear, scannable overview of balances, grants, and actions
- Reusable patterns replaced ad-hoc layouts, creating consistency across flows
- Status labels and tooltips clarified pending vs. available balances, reducing uncertainty
- Toast confirmations provided lightweight feedback without interrupting the flow
3.
Reinforce Trust Through Guidance and Feedback
Clear language, timely guidance, and feedback removed doubt at critical moments.
Events are surfaced directly within the main feed, making participation visible without requiring users to navigate elsewhere.
Placing events alongside articles and video establishes events as part of the core experience, not a secondary feature.
Context cards add reassurance at the moment it’s needed.
They clarify intent, constraints, and outcomes right before high-stakes actions.
Confirmation states validate success and guide the next step.
They reduce drop-off after high-value actions and keep momentum moving.
Helper copy resolves common financial confusion in the moment.
It clarifies pending grants, fund value, and the difference between adding funds and recommending grants, reducing cognitive load at decision time.
Key Improvements:
- Contextual guidance surfaced inlines (cards, helper text, tooltips) to reassure and inform users without breaking flow,
- Transparent status indicators removed clarified what was pending, completed, or in progress
- Confirmation states closed the loop increasedn with reassurance. next steps and momemtum-fotward CTAs
- Reduced dead ends rei by turning completion momemnts into clear transitions rather than stopping points.
4.
Streamling High Value Donor Flows
From Overwhelming Forms To Guided Task Flows.
Before: Intimidation, Friction, and Drop-Off
Compliance-heavy forms were intimidating, with no hierarchy or support — creating hesitation and drop-off.
After: Guided Flows That Build Confidence and Momentum
We preserved every legal requirement while redesigning the experience around progressive disclosure, clear hierarchy, and supportive language. Forms became guided task flows that reduced friction, built confidence step by step, and helped donors complete high-value actions with clarity.
A guided New Fund Application replaces a long, intimidating form.
Clear steps, embedded context, and progressive disclosure make it easier to complete accurately while maintaining every compliance requirement.
Guided flows replace intimidating forms without losing rigor.
Every legal requirement remains intact, while progress feels clear and manageable.
Mobile confirmation guides users from acknowledgment to signature to submission.
The flow keeps effort focused and makes completion feel straightforward.
Key Improvements:
- Chunked forms reorganized long inputs into step-by-step flows donors could follow with ease
- Human tone and hierarchy improved confidence and comprehension
- Inline status indicators clarified what was required and what was optional, preventing stalls
- Confirmation screens wrapped up each flow with impact framing + next actions, avoiding dead ends
5.
From Design Handoff → To Ongoing Partnership
Engineering once treated design as a set of reactive, one-off fixes. We shifted to a coaching partnership, embedding UX into planning and delivery. This elevated design from “screens to ship” into a sustainable framework for clarity, velocity, and measurable donor outcomes.
To support this shift, I applied Object-Oriented Design principles — traditionally rooted in engineering — to the design layer itself. Instead of flows and screens, we defined a modular system of design objects: Donor Tiles, Fund Cards, Insight Modules, etc., each with consistent properties, behaviors, and relationships.
This reframed design as a shared system, not just a deliverable. It aligned our thinking with how engineers already structure logic and components — using the same mental models of objects, classes, and instances.
Inspired by the engineering-centric approach outlined in Object-Oriented UX by Sophia Prater this model gave the team:
- Clarity around how UI mapped to data structures and business logic
- Velocity from reusable components and fewer design bottlenecks
- Consistency across donor experiences, even as functionality scaled
The outcome: a sustainable product foundation where design didn’t just ship screens, it shaped systems, unlocked engineering flow, and made every feature easier to maintain, extend, and evolve.
Key Improvements:
- UX strategy alignment connected modular design decisions to donor outcomes and roadmap priorities
- Shared object model replaced siloed handoffs with a common design-engineering language, grounded in Object-Oriented Design
- Sustainable delivery replaced one-off fixes with a scalable, reusable system—enabling faster iteration and long-term maintainability
