Skip to main content
UI Coach Logo
Intermediate

Donate to a Verified Local Cause

Design a donation flow that helps supporters understand a charity, choose how funds are used, and keep a reliable receipt.

Mobile, Responsive web2 to 4 hours

The brief

Understand the problem

Background

People are more comfortable donating when they can verify the organization, understand the campaign, and see how fees and recurring commitments work.

User context

Mei wants to donate to flood recovery in her region. She prefers a verified local charity and needs a receipt for tax records.

Product problem

Donation pages often prioritize emotion over informed consent. Critical details about verification, fees, recurring payments, and data sharing can be easy to miss.

Objective

Create an informed donation experience from cause discovery through receipt and recurring gift management.

What to design

Define the experience

Required experience

  • Cause discovery with charity verification signals
  • Donation amount and allocation choices
  • Payment review with fee and recurrence disclosure
  • Receipt and gift management

Screens and states

  • Cause detail
  • Donation form
  • Payment review
  • Receipt
  • Recurring gift settings

Core user flow

Follow the critical path

  1. 01

    Mei reviews the campaign and the charity's verification details

  2. 02

    She chooses an amount and whether to cover processing costs

  3. 03

    She selects a one-time gift and reviews data-sharing choices

  4. 04

    She pays and downloads a receipt

  5. 05

    She later changes her communication preferences

Product rules

Requirements and constraints

Requirements

  • Separate campaign claims from independently verified organization details
  • Make one-time and recurring choices unmistakable
  • Disclose fees before payment confirmation
  • Allow optional anonymity without compromising the receipt
  • Provide cancellation and payment-method controls for recurring gifts

Constraints

  • Tax deductibility varies by location and organization
  • Campaign totals may update while the user is donating
  • The charity may restrict how funds can be allocated

Reality check

States worth considering

The payment succeeds but the receipt is delayed
The campaign closes during checkout
A recurring payment fails
The donor requests a refund or correction

Finish line

What to deliver

  • Design five mobile screens covering trust, payment, receipt, and recurring gift control.

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
LustriaLato

Lustria & Lato

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Intermediate
Fintech

Send Money From a Digital Wallet

Design a wallet transfer that helps users choose the right recipient, understand fees, and recover from delayed payment status.

Mobile2 to 4 hours
Mobile DesignTrust and Safety
Advanced
Fintech

Set Responsible Betting Limits

Design account controls that let an adult set spending and time limits, review activity, and activate a protected break from betting.

Mobile4 hours plus
Trust and SafetyContent Design
Intermediate
Fintech

Searchable Receipt Wallet

Design a receipt organizer that accepts store-issued and photographed receipts, then makes returns, warranties, and expenses easy to find.

Mobile2 to 4 hours
Information ArchitectureSearch and Filtering
Intermediate
Fintech

Subscription Renewal Control

Design a subscription dashboard that reveals upcoming charges, price changes, and cancellation steps before money leaves an account.

Mobile2 to 4 hours
Data VisualizationInformation Hierarchy
Intermediate
Fintech

Track Money Owed Between Friends

Design a private lending record that helps friends remember terms, acknowledge repayments, and resolve mismatched expectations.

Mobile2 to 4 hours
Information HierarchyTrust and Safety
Advanced
Fintech

First Stock Order Ticket

Design a stock trading flow that helps a new investor place and monitor one transparent market or limit order.

Responsive web4 hours plus
Information HierarchyData Visualization