Page MenuHomePhabricator

Revision of user interface design of donation application
Closed, ResolvedPublic

Description

The conversion rate of the design introduced in 2017 is still behind its predecessor. Our UX team identified some flaws and proposed some changes both in general design/layout and user experience. We want to introduce and a/b test them in several iterations. The first iteration is about introducing general design changes and applying common best practices to the form layout. The design changes can be seen on Figma. For better exchangeability and increased consistency, it is based on components and a general style guide.

At the same time, we want to modernize the existing client-side code. Further explanation and planning is outlined in T205707 and its subtasks.

First iteration:

  • Flatten complexity of visual direction and fixation of forms.
  • Stop misusing field placeholders as labels.
  • Increase font size.
  • Reduce number of submit buttons.
  • Change background color.

Later steps:

  • When entering the form and already passing data (the usual case when coming from a banner), a brief summary of that data is displayed in a box on top of the form. Users can change the passed data by interacting with the box. The page does not initially scroll to the position of the next expected input field anymore.
  • Icons that are supposed to illustrate payment interval are being removed.
  • Displaying the address section depends on whether or not users decide for receiving a donation receipt and/or information material by postal mailing.
  • Instead of one long form page, the form is split into its sections by pagination. A progress bar shows the current progress to the user. When coming from a banner, form sections that users already provided input for are skipped.
  • Pagination instead of scrolling.

Related Objects

StatusSubtypeAssignedTask
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
Resolvedgabriel-wmde
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript