Login: Redesign the page

[jasmussen]

At the moment, login.wordpress.org looks like this:

Let's refresh this. Here's a first pass:

Let me know your feedback on the visuals!

[ryelle]

We can use this issue for tracking, but I'm pretty sure the code for login.wordpress.org lives in trac still: https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login

[pablohoneyhoney]

I think the above is a styling improvement worth doing, pending further work on auth flows. Keep in mind the lost password as we implement it.

[bengreeley]

To add to Pablo's comment, there's also the new 2fa screens to consider. I'd imagine any changes to the input or button elements would be carried throughout the form, but it would be a good test scenario.

[jasmussen]

Took a stab at rolling out this refresh to the other sections. Sharing early here, as the full flow reveals a lot of additional opportunities for improvement, but it might be useful to see the work in progress to help inform that, so let me know any comments these mockups inspire. It might also be easier to see these designs in the Figma file.

Reset password:

Register:

Note that 2FA does not seem to have been implemented in the register flow quite yet, but I had a separate mockup for this that should be mostly compatible, give or take a few updates:

A lot of opportunities reveal themselves in the full register flow:

• Revisiting the verbiage to be shorter, more precise
• Revisiting whether filling out your profile is worth doing during signup or not, this might be better filled out after the fact
• Exploring style and code reusage between this flow and the profile page, I imagine there's a lot of overlap, 2fa being one example
• Potentially making the registration flow into a "stepped" flow, not unlike how the new 2fa flow itself is built.

Nevertheless, share your notes!

[jasmussen]

Here's a very quick mockup of a reduced setup, that omits profile information and simplifies in a few other places:

• Top align register pages, vs. being vertically centered for the main login and reset password pages.
• Remove profile information entirely, simplifying the password setting flow.
• Position the password notice as a replacement for the password field, improving context.

[fcoveram]

The new style looks nice. Clean and straightforward. I have some thoughts and ideas about the proposal.

User account flows

Revisiting whether filling out your profile is worth doing during signup or not, this might be better filled out after the fact

I am hesitant about covering this change now. Mapping all flows to revisit the process friction and possible copy inconsistencies sounds better as a first step for a flow redesign. I agree that filling a profile is unnecessary, but I am also curious about the different emails you get during these different flows.

So we can go with revisiting the flow or updating the style. Both efforts are valuable.

Style update

Regarding the style update. I checked the site's Design Library and the other designs made, and I propose the following changes:

• Add a heading with paragraph (large) style on each page to reinforce the page's purpose. Especially in cases like "Link expired" or single-goal pages.
• Bring back the helper text in "Username" field. The string limitation prevents users from frustration if they don't know which characters are not allowed.
• Align WordPress logo to the left.
• Align CTA and secondary action (below CTA) in the center.
• Put the bottom links outside the content area as both actions are site-wise.
• Use the Callout colors for the input alerts. This site-wise consistency is necessary.
• I tweaked some spacings based on the Design Library:
  • Move CTA and secondary buttons out of the form wrapper.
  • Reduce space to 30px between sections in the content area (image attached below).

To not overload this message, here are attached some pages based on @jasmussen mockups, and here is the whole flow.

Page	Mockup
Register
Register. Error fields
Profile. Password message

What do you think of this?

[jasmussen]

Nice work Francisco, and I like tackling this in two phases, the first of which is mainly visual. Profile or not can be a discussion for a different time.

It occurs to me that we probably should include iconography in the weak/strong indicator, as well as the invalid email/username notices, so as to accommodate folks with red/green color blindness.

Small detail, in my mockup I rephrased the "Only lower case letters ..." help text to avoid the widow and keep it on one line.

[fcoveram]

It occurs to me that we probably should include iconography in the weak/strong indicator, as well as the invalid email/username notices, so as to accommodate folks with red/green color blindness.

+1 to this idea. I tried different options, and I like the bottom one in the image below.

The helper text looks like an input validator when it's placed inside a box, like in error and success examples. From my understanding, a weak password meets the field requirement, therefore, it makes sense to follow the helper text style of username.

Small detail, in my mockup I rephrased the "Only lower case letters ..." help text to avoid the widow and keep it on one line.

I didn't get this. The screenshot in Figma file has the same copy as helper text below Username field.

[jasmussen]

Options look good, the helper text validator works well. If we do go with a background, I'd color code it. It seems okay to use the stoplight colors if we combine it with text/iconography.

But from these screenshots, the no-background options look great. I don't think we need colors, there, though, can just use the default gray helper text colors. Nice work!

[StevenDufresne]

@panchovm @jasmussen

Is version 3 in figma the version we are going with? Did we settle on the final password strength visuals?

[fcoveram]

Yes @StevenDufresne, we're going with flow 3. I updated the mockups with the final password helper design.