Every Screen You Should Design for Sign Up and Login
It’s…a lot more than you’d think.
What’s been been most eye-opening throughout my design career is the fact that only about 30% of my job actually involves pushing pixels in a design tool. The other 70% is research, brainstorming, whiteboarding, presenting, explaining, and validation.
I’ve come to realize that most stakeholders aren’t as intimately in touch with the ins and outs of designing a digital product, much less the specific screens required to put one together.
I find this particularly evident whenever I’m tasked with designing a login screen:
“While you’re at it, we’ll need a quick login screen.”
I can’t say I blame people for their flippant request. It’s a login screen…how hard can it be? 🤷🏼♂️ It’s just a couple fields and a big button that says “Log In”.
Well not quite. Here’s a quick list of all the screens I tell stakeholders need to be designed in order to check the box for LOGIN:
- Sign Up (empty)
- Sign Up (filled)
- Sign Up (error)
- Sign Up Confirmation Email
- Welcome Email (optional…but encouraged)
- Login (Empty)
- Login (Filled)
- Login (Error)
- Forgot Password
- Forgot Password Email
- Reset Password (empty)
- Reset Password (filled)
- Reset Password (Error)
- Password Change Confirmation Page
- Password Change Confirmation Email
Now to be fair, it’s really only 4–6 unique page designs, then a bunch of states (empty, filled, but still, that’s a decent amount of work, and certainly something you shouldn’t skip designing.
For a more detailed look at all the different login patterns, Christian Beck wrote a super, probably overly-comprehensive article over here:
An Unnecessarily Detailed Look at the Design of the Login Screen
Login is possibly the most boring afterthought of any design project and it’s possible that you won’t read past this…
If you want a head start on designing these pages, I put together a couple of these flows in a freebie you can grab here:
When I’m not writing about design, I’m the principle designer at Innovatemap, a digital product agency in Indianapolis, Indiana, USA.
Some other stuff:
Originally published at https://www.uxpower.tools on August 25, 2019.