Fundamental Collect redesign: unified creation, payment clarity, widget embed

Browse Source

THE CORE PROBLEM:
Users didn't understand the appeal→link hierarchy.
Payment method was hidden inside appeal creation.
The widget was a separate, undiscoverable concept.
External platforms (JustGiving, LaunchGood) felt disconnected.

THE FIX:

1. ONE CREATION FLOW for everything:
   Step 1: 'What are you raising for?' → creates the appeal
   Step 2: 'How will donors pay?' → 3 big clear cards:
     - Bank transfer (most popular, free)
     - External platform (JustGiving, LaunchGood, etc.)
     - Card payment (Stripe)
   Step 3: 'Name your link' → shows summary, creates both

2. PAYMENT METHOD VISIBLE ON EVERY LINK:
   Each link card shows a badge: 'Bank' or 'JustGiving' etc.
   External links show 'After pledging, donors are sent to...'
   No confusion about how money flows.

3. WIDGET IS A SHARING TAB, NOT A SEPARATE CONCEPT:
   Every link card expands to show 3 tabs:
     - Link (copy URL, WhatsApp, email, share)
     - QR Code (download PNG for printing)
     - Website Widget (iframe embed code with copy button)
   The widget is just another way to share the same link.

4. FLAT LINK LIST (not appeal→link hierarchy):
   All links shown in one flat list
   Appeal name shown as subtitle when multiple appeals exist
   'New link' adds to existing appeal
   'New appeal' uses the full 3-step wizard

5. EDUCATIONAL RIGHT COLUMN:
   'How it works' 5-step guide
   'Which payment method should I choose?' comparison
   'Can I mix payment methods?' FAQ
   'What's an appeal?' explanation (demystifies the concept)
   Leaderboard when 3+ links have pledges

...

This commit is contained in:

Omair Saleh

2026-03-05 04:00:14 +08:00

parent dc8e593849

commit c11bf4bea7

13 changed files with 2203 additions and 567 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

pledge-now-pay-later/screenshots/dashboard-automations.png Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 253 KiB

BIN

pledge-now-pay-later/screenshots/dashboard-home.png Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 42 KiB

BIN

pledge-now-pay-later/screenshots/dashboard-money-scroll.png Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 124 KiB

BIN

pledge-now-pay-later/screenshots/dashboard-money.png Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 203 KiB

BIN

pledge-now-pay-later/screenshots/dashboard-reports.png Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 224 KiB

BIN

pledge-now-pay-later/screenshots/dashboard-settings.png Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 83 KiB

1304

pledge-now-pay-later/src/app/dashboard/collect/page.tsx

File diff suppressed because it is too large Load Diff