Page MenuHomePhabricator

Email preference center: Implement polished UI
Closed, ResolvedPublic

Description

As a Donor I would like to see attractive ui for the email preference center so that I can understand and use the form.

DoD:

  • implement the formatting shown in the screen shot and mockups, accommodating the currently implemented fields and controls.
  • Ignore the element on the right hand side with various types of subscription and things like "snooze"

Screen shots are here:
https://docs.google.com/document/d/1wKtGxJn06bs6OGAFV7DKUfVw2salKdU_NAUn5SMGks0/edit#

Trilogy mockup:
https://design.bytrilogy.com/wikimedia-email-preference-center?frequency=cat&button=&s=#epc-form-col-content-salutation-email-edit

image.png (556×1 px, 109 KB)

Event Timeline

the styles for this form are currently living in email-pref-ctr/extensions/DonationInterface/modules/css/emailPreferences.css

Hi! Just some initial questions:

  • In the mockup and the images, we see a header and footer that are identical to what's on wikimediafoundation.org. Should we be reproducing this verbatim in the E-mail Preference Centre?
  • If so, I imagine at least we'd omit the language UI switcher, site search box and donate button in the upper right?
  • Also, would we want some technical mechanism to ensure the header and footer of both sites remain in sync?
  • Alternately, we could just have a header and footer that are extremely pared-down but similarly styled. For example, the header could just be the "Wikimedia Foundation" logo and name, and the horizontal line, and the footer could be a grey area styled like the Foundation site, with whatever static text we actually need?
  • The mockups also have a "change e-mail" link next to the user's e-mail. However, my understanding is that with the current setup, this would be unsupported. Or is this something we need to think about trying to implement?

Thanks much!!

Some comments in line

Hi! Just some initial questions:

  • In the mockup and the images, we see a header and footer that are identical to what's on wikimediafoundation.org. Should we be reproducing this verbatim in the E-mail Preference Centre?
  • If so, I imagine at least we'd omit the language UI switcher, site search box and donate button in the upper right?

DS: yea it's ok to omit that

  • Also, would we want some technical mechanism to ensure the header and footer of both sites remain in sync?

DS: I don't think this is necessary

  • Alternately, we could just have a header and footer that are extremely pared-down but similarly styled. For example, the header could just be the "Wikimedia Foundation" logo and name, and the horizontal line, and the footer could be a grey area styled like the Foundation site, with whatever static text we actually need?

DS: Go with what is in the mock up right now

  • The mockups also have a "change e-mail" link next to the user's e-mail. However, my understanding is that with the current setup, this would be unsupported. Or is this something we need to think about trying to implement?

DS: That was in the original spec but if it's not ready right now I'll split that out into another task to be done later.

Thanks much!!

editing the email address is now a separate task: T299962

Change 757687 had a related patch set uploaded (by AndyRussG; author: AndyRussG):

[mediawiki/extensions/DonationInterface@master] Put E-mail Pref. Ctr. styles in their own module, for early loading

https://gerrit.wikimedia.org/r/757687

Change 757687 merged by jenkins-bot:

[mediawiki/extensions/DonationInterface@master] Put E-mail Pref. Ctr. styles in their own module, for early loading

https://gerrit.wikimedia.org/r/757687

Change 758283 had a related patch set uploaded (by AndyRussG; author: AndyRussG):

[mediawiki/extensions/DonationInterface@master] WIP E-mail Preferences Center header

https://gerrit.wikimedia.org/r/758283

Change 758283 abandoned by Wfan:

[mediawiki/extensions/DonationInterface@master] WIP E-mail Preferences Center header, footer and styling

Reason:

move to T299962

https://gerrit.wikimedia.org/r/758283

Change 758283 restored by Wfan:

[mediawiki/extensions/DonationInterface@master] WIP E-mail Preferences Center header, footer and styling

https://gerrit.wikimedia.org/r/758283

Change 758283 merged by jenkins-bot:

[mediawiki/extensions/DonationInterface@master] E-mail Preferences Center header, footer and styling

https://gerrit.wikimedia.org/r/758283

Change 765663 had a related patch set uploaded (by Wfan; author: Wfan):

[mediawiki/extensions/DonationInterface@master] Update readio button style and update email style

https://gerrit.wikimedia.org/r/765663

Change 765663 merged by jenkins-bot:

[mediawiki/extensions/DonationInterface@master] Update CSS and add template partials

https://gerrit.wikimedia.org/r/765663