-
Notifications
You must be signed in to change notification settings - Fork 29
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
Comments
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 |
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. |
To add to Pablo's comment, there's also the new 2fa screens to consider. I'd imagine any changes to the |
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:
Nevertheless, share your notes! |
Here's a very quick mockup of a reduced setup, that omits profile information and simplifies in a few other places:
|
The new style looks nice. Clean and straightforward. I have some thoughts and ideas about the proposal. User account flows
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 updateRegarding the style update. I checked the site's Design Library and the other designs made, and I propose the following changes:
To not overload this message, here are attached some pages based on @jasmussen mockups, and here is the whole flow.
What do you think of this? |
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. |
+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.
I didn't get this. The screenshot in Figma file has the same copy as helper text below Username field. |
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! |
@panchovm @jasmussen Is version 3 in figma the version we are going with? Did we settle on the final password strength visuals? |
Yes @StevenDufresne, we're going with flow 3. I updated the mockups with the final password helper design. |
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!
The text was updated successfully, but these errors were encountered: