unicef.ch step by step process description

In the following sections we will introduce the donation widget and the form widget.

The donation widget can be used for a specific or general purpose. In the case of general donations, there is the possibility of making recurring donations.

Spenden allgemein
Zweckgebundene Spende

In this example, we show the checkout page of the General Donation. First, there is a Hero element with a summary of the donation, the purpose and amount. The amount can still be adjusted if necessary.

Checkout Seite Allgemeine Spende

Below the Hero element you can choose between the different payment options. A sidebar with contact information is also displayed here.

Checkout Seite Zahlungsmittel

The contact details are reduced to a personal address, the e-mail as well as the telephone number and are therefore separate from the address information.

Checkout Seite Kontaktangaben

Below the contact details, you find the address information. Before the checkbox for the general terms and conditions is ticked, it can still be called up and read using the link.

Checkout Seite Adresse mit CTA

The form widget is used in different sizes. For a simple contact form with a few steps like the one shown here in the example, a narrow widget is used.

Formular Narrow

All content on the Unicef website has been optimized for different devices to meet the needs of mobile users.

Mobile Design von unicef.ch
Donation Widget Mobile unicef.ch
Mobile References von unicef.ch
Mobile Besonderer Anlass

Read more about the different elements already implemented in the UNICEF relaunch 2018. In a first step, all content pages were migrated to Drupal 8 and more complex and deeply integrated processes (such as donations) were maintained on the existing Drupal 7 website.