Page MenuHomePhabricator

Account creation: design an enhanced account creation landing page
Closed, ResolvedPublic

Assigned To
Authored By
RHo
Jun 10 2021, 12:27 PM
Referenced Files
F34550382: IMG_0171.PNG
Jul 14 2021, 12:22 AM
F34550377: Screen Shot 2021-07-13 at 5.12.18 PM.png
Jul 14 2021, 12:22 AM
F34550386: IMG_0170.PNG
Jul 14 2021, 12:22 AM
F34550393: Screen Shot 2021-07-13 at 5.12.05 PM.png
Jul 14 2021, 12:22 AM
F34534295: image.png
Jul 1 2021, 11:50 AM
F34534253: ptmob-hp-Screenshot_20210701-123802.png
Jul 1 2021, 11:05 AM
F34534261: image.png
Jul 1 2021, 11:05 AM
F34534259: image.png
Jul 1 2021, 11:05 AM

Description

Background

In upcoming plans, the Growth team would like to promote our features as a reason for people to create an account to get help started with editing. The first group we are targeting this for are donors who answered a survey saying they are interested in editing in a recent fundraising campaign in LATAM.
We would like these donors who take action to "Create an account" in a follow-up email to understand they are in the right place. As such, there should be some specific messaging on the Special:CreateAccount landing page.
This task is about designing a special version of that account creation page.

User job story:

As a Donor interested in becoming an editor on Wikipedia...
When I select an action in an email to Create a Wikipedia account in order to easily get started editing...
...I want to to easily be able to register and access the promised ‘quick start’ editing guidance,
...so that I can successfully make edits on Wikipedia.

Proposed design
Desktop
image.png (1×2 px, 609 KB)
Mobile
image.png (2×720 px, 178 KB)

Spec page on Figma: https://www.figma.com/file/Mym1IKUApJ7NucV4251ihE/Growth-Pilot---Convert-donors-to-newcomers?node-id=69%3A2482

  • Notes on designs:
    • New content replaces what is in .mw-createacct-benefits-container
    • On mobile, .mw-createacct-benefits-container will be shown (currently it is {display:none})
    • On mobile, the order will be switched so that .mw-createacct-benefits-container appears before the #userloginForm
    • On the existing mobile page, the warningbox and the Wikipedia globe watermark in the #userloginForm will be hidden
    • TBC: Use the existing article heart graphic that is used in the no edits impact module, as well as existing icons
    • All copy should be considered placeholder pending final input from Fundraising.

Note: Time-pending, we may also want to consider working on T284927, for the edge case where those who select on the CTA may have an account already and are logged in.

Final copy

English

Thank you for being a donor.
Create an account to start improving Wikipedia.

[ONLY SHOWN ON DESKTOP] Wikipedia is built by people like you working together. Editing an article can be as simple as adding a link or changing a word.

  • Suggested tasks that match your interests
  • Get help and guidance as you edit
  • Start with small, easy edits

Spanish

Gracias por ser donante.
Crea una cuenta para empezar a mejorar Wikipedia.

[ONLY SHOWN ON DESKTOP] Wikipedia está construida por personas como tú que trabajan juntas. Editar un artículo puede ser tan simple como agregar un enlace o cambiar una palabra.

  • Tareas sugeridas que coinciden con tus intereses
  • Obtén ayuda y orientación mientras editas
  • Empieza con ediciones pequeñas y sencillas

Portuguese

Obrigado/a por ser um/a doador/a.
Crie uma conta para começar a melhorar a Wikipédia.

[ONLY SHOWN ON DESKTOP] A Wikipédia é construída por pessoas como você trabalhando juntas. Editar um artigo pode ser tão simples quanto adicionar um link ou alterar uma palavra.

  • Tarefas sugeridas que correspondem aos seus interesses
  • Obtenha ajuda e orientação enquanto edita
  • Comece com edições pequenas e fáceis
Final URLs

References

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@RHo should we do anything special when the user is already logged in?

Also, the slides mention that it's unclear the email address field is not mandatory. Should that be fixed (in general, not just for this campaign)? Adding something like (optional) to the placeholder text seems like a trivial change.

@RHo should we do anything special when the user is already logged in?

Also, the slides mention that it's unclear the email address field is not mandatory. Should that be fixed (in general, not just for this campaign)? Adding something like (optional) to the placeholder text seems like a trivial change.

Thanks @Tgr - for the initial campaign, I believe it is very unlikely people will be logged in. However, one idea to generally help mitigate the situation of logged in users going to Special:CreateAccount is to add a warning dialog, as proposed on T284927.
As for making the Email field, let's leave this for now since in a way the "(recommended)" label is implying optional but we really do want people to add it for account recovery.

Change 701106 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Add custom signup flow for donors

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

Change 700709 abandoned by Gergő Tisza:

[mediawiki/extensions/GrowthExperiments@master] Custom Special:CreateAccount messaging for donors

Reason:

Squashed into Icfff8893f08d5ad1c161472210ad2707846074a8 for easier backporting.

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

As for making the Email field, let's leave this for now since in a way the "(recommended)" label is implying optional but we really do want people to add it for account recovery.

It does imply it but it's not visible on mobile.

As for making the Email field, let's leave this for now since in a way the "(recommended)" label is implying optional but we really do want people to add it for account recovery.

It does imply it but it's not visible on mobile.

Oh gotcha. Sure, can we propose revising the copy on mobile to Enter your email address (recommended) in keeping consistency with Desktop?

Oh gotcha. Sure, can we propose revising the copy on mobile to Enter your email address (recommended) in keeping consistency with Desktop?

It would make sense IMO (although not necessarily as part of the current project as we are in a hurry, and apparently that text is a combined effort of MediaWiki core and GrowthExperiments so changing it might be slightly less trivial than I thought). I filed T285397: Mobile registration form should indicate that email is not required about it.

Test wiki created on Patch Demo by RHo (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/5266c7cb3b/w/

Change 701106 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add custom signup flow for donors

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

Change 700741 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Add custom signup flow for donors

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

Change 700742 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.11] Add custom signup flow for donors

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

Change 700741 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Add custom signup flow for donors

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

Change 700742 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.11] Add custom signup flow for donors

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

Mentioned in SAL (#wikimedia-operations) [2021-06-23T18:53:33Z] <urbanecm@deploy1002> Synchronized php-1.37.0-wmf.11/extensions/GrowthExperiments/: 76e5fc91083736d14049a05ed227cdea015c113e: Add custom signup flow for donors (T284740; T284800; T285281) (duration: 01m 07s)

Mentioned in SAL (#wikimedia-operations) [2021-06-23T18:55:00Z] <urbanecm@deploy1002> sync-file aborted: REVERT: 76e5fc91083736d14049a05ed227cdea015c113e: Add custom signup flow for donors (T284740; T284800; T285281) (duration: 00m 01s)

Mentioned in SAL (#wikimedia-operations) [2021-06-23T18:55:42Z] <urbanecm@deploy1002> Synchronized php-1.37.0-wmf.9/extensions/GrowthExperiments/: REVERT: 76e5fc91083736d14049a05ed227cdea015c113e: Add custom signup flow for donors (T284740; T284800; T285281) (duration: 00m 38s)

Change 700744 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Revert "Add custom signup flow for donors"

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

Change 700744 merged by Urbanecm:

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Revert "Add custom signup flow for donors"

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

Mentioned in SAL (#wikimedia-operations) [2021-06-23T19:07:32Z] <urbanecm@deploy1002> Synchronized php-1.37.0-wmf.9/extensions/GrowthExperiments/: 2338e53: Revert "Add custom signup flow for donors" (T284740; T284800; T285281) (duration: 01m 06s)

Etonkovidova subscribed.

For Design review

Screen Shot 2021-06-23 at 5.40.24 PM.png (810×1 px, 183 KB)

  • for mobile - the viewport shows only portion of the Special:CreateAccount, but it seems to be common to present some extra information above the sign-up form.
Mobile first halfMobile second half
IMG_0133.PNG (1×640 px, 193 KB)
IMG_0134.PNG (1×640 px, 108 KB)

Current CreateAccount screen on enwiki:

IMG_0135.PNG (1×640 px, 128 KB)

Change 701361 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Re-apply "Add custom signup flow for donors", step 1

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

Change 701363 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Re-apply "Add custom signup flow for donors", step 2

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

Change 701364 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Re-apply "Add custom signup flow for donors", step 3

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

Change 701361 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Re-apply "Add custom signup flow for donors", step 1

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

Mentioned in SAL (#wikimedia-operations) [2021-06-24T11:34:41Z] <tgr@deploy1002> Synchronized php-1.37.0-wmf.9/extensions/GrowthExperiments: Backport: [[gerrit:701361|Re-apply "Add custom signup flow for donors", step 1 (T284799 T284740 T284800 T285281)]] (duration: 01m 06s)

Change 701363 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Re-apply "Add custom signup flow for donors", step 2

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

Change 701364 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.9] Re-apply "Add custom signup flow for donors", step 3

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

I'm not sure if the case of users being already connected has been covered? I'm dropping a note to be sure it is covered! ;)

Mentioned in SAL (#wikimedia-operations) [2021-06-24T12:08:28Z] <tgr@deploy1002> Synchronized php-1.37.0-wmf.9/extensions/GrowthExperiments: Backport: [[gerrit:701363|Re-apply "Add custom signup flow for donors", step 2 (T284799 T284740 T284800 T285281)]] (duration: 01m 06s)

Mentioned in SAL (#wikimedia-operations) [2021-06-24T12:18:43Z] <tgr@deploy1002> Started scap: Backport: [[gerrit:701364|Re-apply "Add custom signup flow for donors", step 3 (T284799 T284740 T284800 T285281)]]

I'm not sure if the case of users being already connected has been covered? I'm dropping a note to be sure it is covered! ;)

Do you mean T284927: Special:CreateAccount should warn against creating a new account if already logged in? It's not, should we do it?

Mentioned in SAL (#wikimedia-operations) [2021-06-24T12:44:50Z] <tgr@deploy1002> Finished scap: Backport: [[gerrit:701364|Re-apply "Add custom signup flow for donors", step 3 (T284799 T284740 T284800 T285281)]] (duration: 26m 07s)

Thanks @Etonkovidova and @Tgr - I noticed some minor things that are not quite as intended listed below:
1. Text colour (Header, Body, Bullets) should all be Base10 (#20212), not black. Apologies, this was my fault for not checking that the style defaulted back to black in the figma spec.
2. Bullet text should not wrap below icons

Actual
image.png (360×872 px, 45 KB)
image.png (288×650 px, 20 KB)
Expected
image.png (238×562 px, 15 KB)

3. Space between icon and text should be 16px
4. Mobile only - heart graphic should be at 50% size
5. Mobile only - Bullet icons should be 20x20px only

Actual
image.png (508×668 px, 54 KB)
Expected
image.png (420×988 px, 67 KB)

For Design review

Screen Shot 2021-06-23 at 5.40.24 PM.png (810×1 px, 183 KB)

  • for mobile - the viewport shows only portion of the Special:CreateAccount, but it seems to be common to present some extra information above the sign-up form.
Mobile first halfMobile second half
IMG_0133.PNG (1×640 px, 193 KB)
IMG_0134.PNG (1×640 px, 108 KB)

Current CreateAccount screen on enwiki:

IMG_0135.PNG (1×640 px, 128 KB)

Change 701693 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Donor campaign: fix signup page styling

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

Change 701711 had a related patch set uploaded (by Kosta Harlan; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.11] Donor campaign: fix signup page styling

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

I'm going to backport this to wmf.11 today, so it can be checked there, or in betalabs now.

Change 701693 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Donor campaign: fix signup page styling

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

Change 701711 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.37.0-wmf.11] Donor campaign: fix signup page styling

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

Mentioned in SAL (#wikimedia-operations) [2021-06-28T11:28:35Z] <urbanecm@deploy1002> Synchronized php-1.37.0-wmf.11/extensions/GrowthExperiments/modules/signup/campaign.less: cd16aa2b51fb74e628c4ad26ac6b469bc04ab370: Donor campaign: fix signup page styling (T284740) (duration: 00m 56s)

Super, I've reviewed ptwiki for the design tweaks requested on T284740#7175129 and LGTM:

Desktop
image.png (703×960 px, 179 KB)
Mobile
image.png (1×740 px, 187 KB)

I'm not sure if the case of users being already connected has been covered? I'm dropping a note to be sure it is covered! ;)

Do you mean T284927: Special:CreateAccount should warn against creating a new account if already logged in? It's not, should we do it?

We should do it.

We know that some users create an account to read Wikipedia. Some donors may to too, and these users might be logged-in when they will open the invitation email.

If we aren't redirecting them automatically to their homepage, we should have a warning being displayed and an invite to go to the homepage instead.

Hi @kostajh @MMiller_WMF - I've done some testing of the two links today.
On mobile the display is fine, and I created a test account each on pt & es that led to the homepage directly as intended, though I did file a bug T285932 that is presumably unrelated.

MobilePT landing page
PT mobile create acc Screenshot (1 Jul 2021 12:32:18) (2×1 px, 262 KB)
ES landing
esmob-create-Screenshot_20210701-123930.png (2×1 px, 227 KB)
PT homepage
ptmob-hp-Screenshot_20210701-123802.png (2×1 px, 213 KB)
ES homepage
esmob-hp-Screenshot_20210701-124030.png (2×1 px, 226 KB)

On desktop I only created an account on PT (ran out of accounts for ES) but both create account landing pages and homepages seem fine.
However, I wonder if we care and if so, can do anything about not showing the 20y anniversary CentralNotice banner that is pushing the content down on ptwiki?

DesktopPT landing
image.png (1×2 px, 615 KB)
ES landing
image.png (1×2 px, 532 KB)
PT homepage
image.png (1×2 px, 620 KB)
ES homepage
image.png (1×2 px, 591 KB)

However, I wonder if we care and if so, can do anything about not showing the 20y anniversary CentralNotice banner that is pushing the content down on ptwiki?

That sounds like something we'd need to coordinate with the community on (cc @Wittylama). But given that no code is shipping next week, plus holiday schedules for our team for the week after, I would propose that we leave it as is.

I checked if CentralNotice banners will be displayed at the same time as our campaign: WPWP2021 started today, for July and August, and they target both es and pt. So we will always have banners, but they won't be displayed all the time.

The anniversary banner at pt.wp is a local banner: users have both the local banner displayed all the time and some CentralNotice banners at random times.

Regarding the CentralNotice and SiteNotice banners, I do not think we should take any action on those. I know we want to put our best foot forward for this test, but banners are ongoing issue that are in front of newcomers inside and outside this test on all our wikis -- they're a normal part of the environment. If we want to do something to suppress banners on the homepage, I think that’s something we should do holistically, unrelated to the Fundraising test. @RHo -- do you think we should create a task about that? Could you please?

Regarding the CentralNotice and SiteNotice banners, I do not think we should take any action on those. I know we want to put our best foot forward for this test, but banners are ongoing issue that are in front of newcomers inside and outside this test on all our wikis -- they're a normal part of the environment. If we want to do something to suppress banners on the homepage, I think that’s something we should do holistically, unrelated to the Fundraising test. @RHo -- do you think we should create a task about that? Could you please?

I created T286034 for not showing notices on the homepage. However, I disagree this is a to be expected as a "normal" part of the environment when it is an account creation page, but feel that it is more that conflicting banner messages is usually not an issue because there is coordination for when campaigns are run on local wikis. While for this campaign it probably isn't worth doing anything about it, in future we may consider alternatives. For example, we could create a different Special landing page (or even a logged out version of the homepage) with suppressed site notices and a bespoke account creation form.

I disagree as well. These banners are distracting, and they often lead to pages that are not really easy for newcomers. They could lead to people abandoning their first steps because they haven't been properly guided.

@Urbanecm_WMF -- we now have the translations for this special version of the account creation page. Could you please insert them so that they are live in production? We need this by the end of the day on Tuesday, July 12 (tomorrow):

English

Thank you for being a donor.
Create an account to start improving Wikipedia.

[ONLY SHOWN ON DESKTOP] Wikipedia is built by people like you working together. Editing an article can be as simple as adding a link or changing a word.

  • Suggested tasks that match your interests
  • Get help and guidance as you edit
  • Start with small, easy edits

Spanish

Gracias por ser donante.
Crea una cuenta para empezar a mejorar Wikipedia.

[ONLY SHOWN ON DESKTOP] Wikipedia está construida por personas como tú que trabajan juntas. Editar un artículo puede ser tan simple como agregar un enlace o cambiar una palabra.

  • Tareas sugeridas que coinciden con tus intereses
  • Obtén ayuda y orientación mientras editas
  • Empieza con ediciones pequeñas y sencillas

Portuguese

Obrigado/a por ser um/a doador/a.
Crie uma conta para começar a melhorar a Wikipédia.

[ONLY SHOWN ON DESKTOP] A Wikipédia é construída por pessoas como você trabalhando juntas. Editar um artigo pode ser tão simples quanto adicionar um link ou alterar uma palavra.

  • Tarefas sugeridas que correspondem aos seus interesses
  • Obtenha ajuda e orientação enquanto edita
  • Comece com edições pequenas e fáceis

Hello @MMiller_WMF, (most) translations pushed to production. I want to double check with the following translations, as the comment doesn't have the English original, and I want to avoid publishing an incorrect translation.

Text above the three bullet points

In Spanish, it says "Wikipedia está construida por personas como tú que trabajan juntas. Editar un artículo puede ser tan simple como agregar un enlace o cambiar una palabra.", which Google-translates to "Wikipedia is built by people like you who work together. Editing an article can be as simple as adding a link or changing a word.". However, the English original says something different, "Editing Wikipedia can be as simple as adding a link or changing a word. Get suggestions for articles in your topics of interest after you create your account!". Same applies for Portugalese as well. Is that difference intentional?

Second bullet point

The second bullet point reads "Obtenha ajuda e orientação enquanto edita" in Portugalese. That google-translates to "Get help and guidance while editing". The English original is "Ask for help from an experienced editor" -- is that difference intentional?

Convenience links

@Urbanecm_WMF -- thank you for reading closely and double-checking. The English text that's currently in production is out of date. I've updated my comment above to include the English original, and now all three languages should match in that comment. I'll also put them in the task description.

@Urbanecm_WMF -- thank you for reading closely and double-checking. The English text that's currently in production is out of date. I've updated my comment above to include the English original, and now all three languages should match in that comment. I'll also put them in the task description.

Thanks for clarifying that. All translations should be now in production.

Checked in wmf.14

eswikiptwiki
Screen Shot 2021-07-13 at 5.12.18 PM.png (834×925 px, 177 KB)
Screen Shot 2021-07-13 at 5.12.05 PM.png (918×912 px, 197 KB)
IMG_0170.PNG (1×640 px, 184 KB)
IMG_0171.PNG (1×640 px, 137 KB)
MMiller_WMF renamed this task from Donors to newcomers: design an enhanced account creation landing page to Account creation: design an enhanced account creation landing page.Feb 5 2022, 2:35 AM

Test wiki on Patch demo by RHo (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/5266c7cb3b/w/