Discussion on: Redesigning a Login Form | Full Process

I watched the video and think that it's a nice visual improvement

• I love the chunky shadow
• everything's spaced nicely
• it's simple and doesn't try to do anything outside its remit

From a UX point of view I see a few problems with the version on the site at time of writing, which is close to the one you're looking at as the "before" state:

• there are no labels for the inputs
• the placeholders aren't close to accessibility standards in terms of text/background contrast, and are difficult for me to see even with glasses.
• the "--or--" divider is too low contast
• the error states don't convey any information apart from that something is wrong
• error state borders and messages are in a clashing colour

I have some comments on the version you mocked up:

The original expects an email address as the primary identifier, and yours asks for a username. In many systems these are the same thing, but in many other systems they're not. People can and do share email addresses ("thesmithfamily@example.com", "helpdesk@test.com").

This is confounded because you don't add any input labels. If my browser or an extension has pre-filled those fields and I'm not getting logged in, I don't know whether my password is wrong or if I've accidentally saved my email address instead of my username. The only way I can find out is to delete the text in both boxes, which is a potential pitfall. The "User" icon doesn't really make this any clearer.

You want a hover effect explicitly on the words, "click here". I'd steer clear of that, even to the point of avoiding the words in the entire sentence. "Click here" has no context for screen readers, for example.

Perhaps, "Forgot your password?" would be better? It has the added benefit of keeping the same pronoun as the sub-heading, which is "Sign in to your account". Mixing "my" and "your" in interfaces adds a level of confusion.

You add "Register" and "Back to home" buttons to the heading, which is nice, but this would probably require changing some routes. On the existing home page, what you have as "Register" is /accounts/signup, and is called "Get started". I think that part of a redesign would involve getting these things to be consistent, perhaps to something ultra-clear like "Create a new account" under /accounts/new. This isn't wholly part of a designer's job, but it's where talk between team-mates comes in :)

From the point of view of someone who would code this, I notice you do something very designer-y - you move things around by eye until you think they look good. That's because you've got an eye for it, and you know what whitespace looks pleasing, but it might not match up with the styles for the rest of the site. If you set "Login" as a form legend, or as a heading (say an h2, depending where this is in the flow), then the margins and padding should be consistent with those for an h2 in the rest of the site, otherwise styles will have to be tweaked on a per-component basis.