Fundraising / Donation detail page — 3 design directions
Same content (organizer-supplied title, story, image; live fundraising stats). Three different takes on chrome, layout, typography, and the support flow. Brand accent shown in this org's orange (it's per-org / themeable). Click an image to open full size.
Fixes shared by all three: one clear support CTA (not two competing ones), the progress/goal made the visual anchor, social proof surfaced, a reading-width story column with a "read more" clamp so long or repetitive copy stays tidy, and a consistent image frame.
Variant AMomentum
Crowdfunding energy. Full-bleed hero with title overlaid; bold sticky donation rail is the hero of the page.
- Most emotional first impression; title + photo + momentum read instantly
- Donation rail visually dominates — strongest "give now" pull
- Backer avatars = live social proof above the fold
- Boldest departure from your current calm system; busiest of the three
Variant BStory-first / Editorial
Reads like a magazine feature. Serif display headline, generous reading column, calm donation sidebar, impact framing.
- Best for emotional, narrative causes; donor-empathy tone
- Pull-quote impact line ("$25 = a week of books") drives intent
- Most distinctive typography; feels premium and human
- Donation card is quieter — softer conversion pull; serif may not fit every org
Variant C · system-consistentFocused Conversion Card
Closest to your Calm Community system. One unified donation card merges progress + amount + CTA; segmented tabs; clamped story.
- Cleanest, most uncluttered; lowest cognitive load
- Single unified donation card = one obvious path to support
- Matches existing portal cards/headers — least implementation risk
- Least emotional; relies on the organizer's image to carry feeling