Conception of the donation process

For the conception of the donation widget, we analyzed donation pages and existing solutions. We are happy to provide insight into the findings and considerations that laid the foundation of the design.

The resulting donation widget offers a seamless conversion-optimized donation process for end users and can be used in many ways.

The donation process basically consists of the following steps

  1. The point of entry of the visitor into the process with contextual information such as
    • a campaign,
    • identification features of the visitor
  2. Possible donation teasers which guide the user further
  3. The donation widget as a call to action for donations and thus definition of the donation business, with
    • the purpose of the donation,
    • the type of donation (single payment, recurring with interval),
    • and the amount.
  4. Next is the donation pledge in the checkout process
    • the choice of a suitable means of payment,
    • the indication of personal data if necessary or desired
    • further information
  5. The concluding payment
    • redirection to payment method provider
    • release of the transaction by user at provider
    • debiting of the means of payment by the provider
    • transmission to SalesForce via the donation transaction via StepOrange
  6. The thank you page to confirm the transaction
    • With request for sharing or further CTAs

The follow-up with the visitor can be completed through any channel, which can be integrated with the process in various ways.

After the donation is completed, any downstream processes can be attached.

The visitor can arbitrarily stop the donation process at any step and sub-step.

Identified critical points:

  1. The appropriate placement of the donation widget in the content as well as any teaser elements in front of it. The widget must be well integrated into the design and be appropriately eye-catching, easy to use, and convey absolute clarity about the chosen donation business.
  2. A transition to the checkout process that is as seamless as possible.
  3. The focus on completing the checkout process.

The reduction and clear definition of the process is the basis for the modularity of the elements and functional expandability.

The donation widget can vary greatly in appearance and additional style variations can be created that can be selected at placement.

The donation process can be integrated into existing processes and systems as required.

We recommend first evaluating the new possibilities and carrying out e.g. content experiments and optimizations before new functional requirements are defined.

Some NGOs process the donation completely in the widget. The advantages of this approach only outweigh the disadvantages if the current webpage is limited to the widget. Otherwise the complete header, footer, content around the widget and further CTA only distracts from the process. There is also a risk of interruption of the process (e.g. accidental clicking on a link and thus loss of form input) and frustration (e.g. accidental scrolling out of the widget).

In contrast, our widget can be placed in the content with almost no restrictions and is suitable for numerous applications.

The separation of the settlement as a separate step is therefore a conscious decision:

  • The environment (header, footer, sidebar) can be reduced
  • The context (purpose of the donation, visual) can be preserved so that there is no break
  • From the checkout on, the focus is solely on supporting the user to complete the process.

The design must take these requirements into account.

We distinguish two phases in the donation process: its definition and its processing.

The definition of the donation details is done in the first step, in the widget. The following dimensions are there settled:

  • the purpose of the donation
  • the type of donation
    (Single payment, recurring with interval)
  • the amount of the donation

The amount is displayed strictly according to the donation type, as the predefined amounts differ depending on the interval.

Each of these dimensions can:

  • be completely fixed by the configuration of the widget
  • or the visitor can choose between several amounts.

During the checkout process, the means of payment is selected and, if necessary, further data required for processing (e.g. address for donation receipt) is collected.

During settlement, the definition of the transaction can no longer be changed. If a visitor wishes to do so, he must cancel the process and revise their choice on the landing page. For this purpose an inconspicuous link back is offered. The checkout will be cancelled and, if necessary, restarted with a new selection.

The incoming page is recorded with the purpose of the donation when the donation is processed.

Visitors can be led to a landing page via several channels (e.g. newsletter, trigger mail) and in different campaigns.

The donations can be evaluated.


When integrated with a CRM, all data of a donation can be transferred to the CRM. In the CRM, any follow-ups and automated workflows are possible.

Users can be sent personalized links towards campaigns when you they could interest them.

This makes a personalized website possible.

We would be happy to show you the possibilities and the potential of this.