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.

Allgemeine Spende
Spenden Widget mit Hero

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 Allemeinge Spende

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

Auswahl 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.

Formular für 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.

Adresse mit Spende Übermitteln Button

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

For more complex forms, a grid layout and sections with titles can be divided as steps for grouping fields.

Gruppierungen im Formular

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

Mobile Design von unicef.ch
Mobile Design von unicef.ch
Mobile Design von unicef.ch
Mobile Design von unicef.ch

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.