Prompt: Design a sign up page, modal, form, app screen, etc.
This task was much more difficult than it seemed at first glance–it feels like I sign up for something almost every day, so I’ve got a lot of “baggage” about what a sign-up UI should be like. I decided to take this challenge a step further and redesign the Amazon.com account creation process.
From a user experience perspective, Amazon has already got this down. It’s a dead-simple sign-up. Nevertheless, I decided I could put a little of my own spin on it.
Here’s the original:
Here’s my take:
- This is a separate page and not a modal. We don’t want the user to quit this crucial step.
- The user is greeted by a very simple two-question form in the first step of the sign-up.
- Large screens are broken into two with an active cover image (thank you, Unsplash) reinforcing two ideas: “this is going to be fun,” and “let’s go!”
- The sign up form is on the right, since most people are right-handed.
- The largest bold text explains what the purpose of the page is with a “Step 1 of 2” reassuring the user this multi-step process will be quick and painless.
- In the style of Amazon’s “add to cart”/action button is a big, obvious, “Next” button with a gradient derived from the Amazon logo orange.
- If the user enters an email address associated with an active account, the “Next” button instead asks them for a password, asking “Looks like there’s already an account associated with this email. Did you mean to log in?”
- For step 2, the old form slides out and another two-question form replaces it. All the other elements are here.
- This password form is meant to encourage smart passwords, not hard ones. So, just like Amazon’s original login, the only requirement is that the password is more than six characters. No capital letters, numbers, or symbols required. The colored bar turns green once the user enters a secure password.
- The password field is not obscured by default but can be obscured by clicking/tapping the eye icon. This removes the redundant “repeat password” field. Since lots of users can save their passwords with their browser, this isn’t necessary and makes the sign-up process feel longer than it needs to.
- By default, users are strongly encouraged to use two-factor authentication to keep their account safe. It can be bypassed if they click a button hidden in the “What’s 2-factor authentication?” modal, but otherwise, they’ll be required to enter a mobile phone number for texts that provide one-time-passwords. It’s a hassle, and it’s not ideal, but it’s the best way to keep an Amazon account secure. After all, this site has your credit card number and address. Security is crucial here.
A note for next time: don’t jump into the high-fidelity mockup and start pixel-pushing right away. Sketch something out first, and no, I don’t mean with the Sketch app.
Return to Work