Change Details

**Test Scope** One of the findings of the usability testing sessions was that the donation form in the desktop banners lacked usability (and even visibility). Our UX team had a look at the banner form and suggested a new design to improve on it. **Acceptance Criteria** - The banners are based on the **control banner** of **desktop-de-04**. - Banners are only displayed in the main [namespace](https://en.wikipedia.org/wiki/Wikipedia:Namespace). - The link text for the use of funds overlay is changed to "Was Ihre Spende bewirkt". - The variant banner is changed according to the [design file](https://www.figma.com/file/70xWoz3l34yyRmDQkCSs19/Banners-2023?type=design&node-id=232-699&mode=design&t=RZw147dCo4jbhRkt-0): - The red border stretches across the whole banner. - The close button integrates with the border. - There is a thin line between the text and the form. - Radio buttons are grouped in light grey parent elements. - Radio buttons and their labels have a border with rounded corners. - Checked radio buttons have a different border color. - The color of the submit buttons are changed. - The background and text color of the secondary button in the soft-close banner is changed. - Banner screenshots are uploaded to Shutterbug. **Banner Preview** [control banner](https://de.wikipedia.org/?banner=B23_WMDE_Desktop_DE_07_ctrl&devMode) [variant banner](https://de.wikipedia.org/?banner=B23_WMDE_Desktop_DE_07_var&devMode)

**Test Scope** One of the findings of the usability testing sessions was that the donation form in the desktop banners lacked usability (and even visibility). Our UX team had a look at the banner form and suggested a new design to improve on it. **Acceptance Criteria** - The banners are based on the **control banner** of **desktop-de-06**. - Banners are only displayed in the main [namespace](https://en.wikipedia.org/wiki/Wikipedia:Namespace). - The link text for the use of funds overlay is changed to "Was Ihre Spende bewirkt". - The variant banner is changed according to the [design file](https://www.figma.com/file/70xWoz3l34yyRmDQkCSs19/Banners-2023?type=design&node-id=232-699&mode=design&t=RZw147dCo4jbhRkt-0): - The red border stretches across the whole banner. - The close button integrates with the border. - There is a thin line between the text and the form. - Radio buttons are grouped in light grey parent elements. - Radio buttons and their labels have a border with rounded corners. - Checked radio buttons have a different border color. - The color of the submit buttons are changed. - The background and text color of the secondary button in the soft-close banner is changed. - Banner screenshots are uploaded to Shutterbug. **Banner Preview** [control banner](https://de.wikipedia.org/?banner=B23_WMDE_Desktop_DE_07_ctrl&devMode) [variant banner](https://de.wikipedia.org/?banner=B23_WMDE_Desktop_DE_07_var&devMode)

**Test Scope** One of the findings of the usability testing sessions was that the donation form in the desktop banners lacked usability (and even visibility). Our UX team had a look at the banner form and suggested a new design to improve on it. **Acceptance Criteria** - The banners are based on the **control banner** of **desktop-de-04**6**. - Banners are only displayed in the main [namespace](https://en.wikipedia.org/wiki/Wikipedia:Namespace). - The link text for the use of funds overlay is changed to "Was Ihre Spende bewirkt". - The variant banner is changed according to the [design file](https://www.figma.com/file/70xWoz3l34yyRmDQkCSs19/Banners-2023?type=design&node-id=232-699&mode=design&t=RZw147dCo4jbhRkt-0): - The red border stretches across the whole banner. - The close button integrates with the border. - There is a thin line between the text and the form. - Radio buttons are grouped in light grey parent elements. - Radio buttons and their labels have a border with rounded corners. - Checked radio buttons have a different border color. - The color of the submit buttons are changed. - The background and text color of the secondary button in the soft-close banner is changed. - Banner screenshots are uploaded to Shutterbug. **Banner Preview** [control banner](https://de.wikipedia.org/?banner=B23_WMDE_Desktop_DE_07_ctrl&devMode) [variant banner](https://de.wikipedia.org/?banner=B23_WMDE_Desktop_DE_07_var&devMode)