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”.

Right?

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:

  1. Sign Up (empty)
  2. Sign Up (filled)
  3. Sign Up (error)
  4. Sign Up Confirmation Email
  5. Welcome Email (optional…but encouraged)
  6. Login (Empty)
  7. Login (Filled)
  8. Login (Error)
  9. Forgot Password
  10. Forgot Password Email
  11. Reset Password (empty)
  12. Reset Password (filled)
  13. Reset Password (Error)
  14. Password Change Confirmation Page
  15. 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:


Download the Freebie

If you want a head start on designing these pages, I put together a couple of these flows in a freebie you can grab below. Feel free to modify and reuse them in your own projects, or download UX Power Tools to create your own using our ready-made design system.

 

Download Now