Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Login: Redesign the page #241

Open
jasmussen opened this issue Mar 28, 2023 · 11 comments
Open

Login: Redesign the page #241

jasmussen opened this issue Mar 28, 2023 · 11 comments
Labels

Comments

@jasmussen
Copy link
Contributor

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

Before

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

After

Let me know your feedback on the visuals!

@jasmussen jasmussen added [Status] Needs Design Feedback Feedback is needed on an existing or new component [Type] Enhancement New feature or request labels Mar 28, 2023
@ryelle
Copy link
Contributor

ryelle commented Mar 28, 2023

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

@ryelle ryelle moved this to 🛑 Pending discussion in WordPress.org Mar 28, 2023
@renintw renintw assigned renintw and unassigned renintw Mar 30, 2023
@pablohoneyhoney
Copy link

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
Copy link

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
Copy link
Contributor Author

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:

Reset password

Register:

Create new account

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:

2fa

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
Copy link
Contributor Author

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

Log in and register flow

  • 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
Copy link

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).

CleanShot 2023-04-12 at 11 38 42@2x

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

Page Mockup
Register image
Register. Error fields image
Profile. Password message image

What do you think of this?

@jasmussen
Copy link
Contributor Author

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
Copy link

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.

image

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
Copy link
Contributor Author

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
Copy link
Contributor

@panchovm @jasmussen

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

@fcoveram
Copy link

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

@StevenDufresne StevenDufresne removed the [Status] Needs Design Feedback Feedback is needed on an existing or new component label Apr 17, 2023
@StevenDufresne StevenDufresne moved this from 🛑 Pending discussion to 📋 To do in WordPress.org May 2, 2023
@ryelle ryelle removed this from WordPress.org Aug 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants