Redesigning the Mediocre Sign Up/Sign In Pages

shawn posted some pics said
8

I've been busy working on some Mediocre experiments that are still a ways off. When they're ready, you'll sign in with the same mediocre.com username you currently use on the forums here.

We recently redesigned our sign up and sign in pages. There's been no change in functionality (you still sign in with your email address and password, or through Amazon, or through Google) but we cleaned things up a bit.

If you remember, here's the old sign in page:

Not too bad. There's three panels. Sign in with Amazon or Google on the first panel. Or sign in with your email address and password on the second. Or do some troubleshooting on the third panel. It worked reasonably well for desktop browsers. There was a responsive mobile version that also worked, but it was less than ideal.

Here's the old sign up page:

Three steps here. The third step is just ridiculous with one of the biggest buttons I've ever made. You could potentially find yourself in a situation where the error validation messages starting breaking the layout. Again, there was a mobile version that was less than ideal.

Here's the new sign in and sign up pages, next to their mobile counterparts:

And here's a GIF of my favorite little-big detail. We allow you to sign in using your username or your email address in the same field. The text of the label changes depending on what you've entered :)