Sorry for your bleeding eyes, but these are important.

Methodology

50 Things You [Probably] Forgot To Design

Every PM: “I’m not mad, I’m just disappointed…”

Small Favors: If you love this article, share it with your friends. If you love puppies, rescue one. If you love mayonnaise, refrigerate it.

Look, we all forget to design something on occasion. That’s totally cool!

Well, it’s not cool…but like…it’s okay. It happens. This list will make you better. Or at least more aware. Or maybe you just give it a couple claps because you recognize someone spent time curating this list and move on with your life. Nbd. I’m all about those claps, and that bass. With a Meghan Trainor reference in the first paragraph, we’re off to a roaring start.

This is just a list of things that you might have forgotten to design. When you think about how simple an app like Instagram or Snapchat is, it’s easy to overlook just how many screens, states, and stuff goes in to making a really awesome user experience.

  • Login & Signup stuff
  • First Experience
  • All the Little Things
  • Launch Materials
  • Profile Stuff
  • Mad Flows

So read these, reflect, and…like…don’t upset your PM.


Login & Signup

1. The Splash Screen

The screen that shows up when you launch a mobile app, or when you login to a web app and everything is loading.

Here’s a beautiful one by James Jackson

2. The Forgot Password Flow

Was it “abcd1234” or “1234abcd”? This is important. Don’t forget it.

Majo Puterka doesn’t leave his users locked out of the house in the rain.

3. The “Thanks for Signing Up” Page

This screen usually comes after a user creates an account and tells them to go confirm their email address.

What’s Next? Ask Hayley Cattlin.

4. The Welcome Email

This straddles the line between product design and product marketing, but it’s literally THE FIRST impression you get to have on your users. Make it count. It’s a great time to introduce the quippy tone of your product.

iReally like this. By Brian Golatka.

5. The Terms of Service & Privacy Pages (ugh)

Just do it for the folks over in legal. They’re just trying to avoid getting sued.

I really appreciate how Marko Prljic tried to make the Terms & Conditions more approachable.

First Experience

6. The User Onboarding

There are tons of different methods you can use. Here are five of my favs:

Delightfully helpful, by MuNa.

7. The Out-of-the-Box Empty State(s)

It’s like moving into a house and you haven’t moved in any furniture. Looks pretty empty, huh? Help your users out by giving them a nudge in the right direction. “Place couch here.”

I get the feeling Veli-Johan Veromann likes superheroes.

8. The Help Docs

If you’re at a big company, there’s probably a whole team dedicated to this. But they’re still gonna bug you for illustrations and screenshots. This deserves as much (or more) effort as the login page or the activity feed.

Maya Gao is very helpful. Be more like Maya.

9. The Default User Profile Image/Avatar

Signing up with social accounts or services like Gravatar have really helped us show off our smiling faces, but you’re still gonna get that one guy who never gets around to uploading a profile photo. Give it a little flair and show off the brand.

Hermes Strange makes cute stuff. These are cute AF.

10. The Logout Button

Unfortunately, you DO have to allow users to leave. Just pretend they’re using your app in a public library and they need to logout so some stranger doesn’t change their account name to “Mr. Butts”. Inappropriate.

I’m guessing Kristofer probably stole Henrik’s lunch money. Let him log out and flee the scene.

All The…Small Things

11. The App Footer

Most of the time I assume pages just go on forever, like when people believed the world was flat and just kind of kept going. Note: The Earth is not flat.

Ash Schweitzer might be lost in the woods somewhere. Someone help her.

12. The Browser Favicon

You know…that little icon that shows up on a browser tab. I keep losing my Medium tabs because it’s not green anymore. But it is pretty!

Michael Flarup made an awesome favicon template you can download.

13. The 404 Page

Rizvan is stuck in that hole. Go help her.

14. The Default/Hover/Focus/Pressed/Disabled/Etc. Input States

Ugh, so many states. “Focus + Hover” might be my favorite/most obscure. The screenshot below comes from the UX Power Tools Design System.

Side note for my side project, you should definitely check it out:

15. The Tab Order

Tab Order is an accessibility feature that allows users to navigate a page using the Tab key. I couldn’t find an image to represent this, so I took a screenshot of a spec Christian Beck wrote from 2007 where he defined tab order position in a table for each UI control in a table (I got tired even just writing that 😴…SnoozeFest 2017™). You can actually define the order in which items are visited to ensure primary actions come before secondary ones. This is a neat design challenge.

Ahhh, the days of writing 80-page specs and waterfall development.

16. The Scrolling Behavior

Not only just where and how it scrolls, but what actually scrolls. Is the header fixed? The footer?

Oh man, Peter Blazej, this feels smooth. Nice!

17. The Intercom Button

I mean the least you can do is make it match your app colors. Come on folks. It’s not rocket surgery.

18. The Pagination Buttons

Assuming you didn’t opt for infinite scrolling, your users are gonna need a way to get to page 27. Let them!

Borunda did a nice job. Love that yellow, Borunda!

19. The Cursors

Buttons should have a pointer. Non-interactive stuff should have a default cursor. Text should have a text cursor. Developers don’t always know this. I just redlined an app screen the other day where a developer had a text cursor for the hover state of a button. Mercy.

Jeff Broderick LOVES clicking on stuff. He also made a freebie.

20. The Table Sort/Filter/Search Mechanism(s)

There’s gotta be a faster way to get to ZZ Top in that “Bands with Beards” data table…

Eugen Esanu has an exceptional eye for filtering mechanisms, and purple/yellow combos. Nice.

21. The “No Results” Empty States

Sometimes you’ll search for something or add too many filters, and there aren’t any results. How sad. Cheer up your users with a cheeky illustration. Or your bank account and routing numbers.

Reiner Wendland pretty much covered everything for Zendesk.

22. The Error States

Bad input. Incorrect password. Existing account. Too many things selected. There are all kinds of ways things can go wrong, particularly if you’re my Grandma and you got an iPad for Christmas. That was a mistake.

Mike Stezycki really had me thinking that email got sent. Then he was all: 😦

23. The System Notifications

The system is always doing something behind the curtain, and sometimes it’s nice to know when things finish successfully (or don’t). You should definitely let the user know that.

This is from Google Inbox. The “Undo” is really convenient when you “accidentally” delete an email from your mom.

24. The Empty Autocomplete Dropdown

Autocomplete is awesome for helping you find objects in the system, but sometimes there aren’t any results. In this case, you don’t just want an empty box. Show a little message, or allow them to take some kind of action.

Apparently Jurriaan van Drunen didn’t have “Bra” in his contacts already. Probably for the best.

25. The Loading State

Sure, people will probably be Tindering on their phones while the page loads, but in the event they actually look up from their sexy swiping, there should probably be some visual indication that stuff is still loading.

Not the best pan flip form, XPLAI. Keep practicing. But this is still painfully adorable.

Launch Materials

26. The Friggin’ App Icon

Yeah, it’s probably best you don’t forget about this.

I’m willing to bet Eddie Lobanovskiy changed all of his icons to breakfast foods. Delicious.

27. The App Store Images

Daniel Beere didn’t forget the app store images for his app. High five, dude.

28. The Open Graph/Social Images

This is the image that shows up when you tweet a link on Twitter, make a post on Facebook, post a link on Medium, etc…

Kristy T is officially carless. SF will do that to ya.

Here’s how it looks in Medium:

29. The Website Marketing Images

Also don’t forget, they’ll probably want to make the website look like Stripe so just copy this exactly:

And if you’re a designer at Redkix, you’ll have to make sure that image works on crimson.

30. The Sales Deck Images

You’re probably good if you handle the one above. But in this case you’ll probably need to scrub content to match the brand of whatever 6-figure deal your brilliant sales team is working on.

Oh and sales will probably cover up all your mockups with other stuff, so prepare for that.

31. The Pitch Deck Images

Like a Sales Deck image but a little more visionary. I mean…you’re trying to raise money. You’ll figure how to make it possible later.

Here’s a trade secret, always put dashboards in your pitch deck. 🦄 This is not a joke.

32. The Product Hunt Images

Hey they just updated the profile pages too!

I still miss Medium 2.0 but every 👏 I 👏 get 👏 helps 👏 me👏 move 👏 on.

33. The Facebook/Twitter Ad Images

“But we aren’t running Facebook ads!” Ha, until you are. And then nobody tells you. Just make them already and you’ll be safe.

It took some digging to find an ad that WASN’T for a Casper Mattress. Y’all killin’ the game, Casper.

34. The Social Media Profile Images

Yep, you have to make one for all 938 social networks. Thankfully we made a Sketch tool to speed that up for you. Y’welcome, kiddos.

35. The Launch Email Banner

Triple points if you make it an illustration. Current.

^ by the way, this is my agency’s newsletter and my coworkers write some really outstanding content. We’d love it if you subscribed!

Here are some recent favs:


Profile Stuff

36. Notification Preferences

It’s awesome when apps notify you when things happen, and even cooler when it plays a trumpet sound. But after the 19th time, you get really tired of trumpets. You should probably let the user decide when the trumpets sound.

Slack didn’t become an $8 billion company by slacking on notification settings!! Nailed it.

37. The Billing Page

Don’t forget people need to get copies of their bills to expense the product they are paying you thousands of dollars for. And some people make up the idiot IT department for their agency and can’t stand how hard it is to locate this. every. single. month. He’s not bitter.

I don’t know what any of this means, but it was easy to get here!

38. The “Delete My Account” Option

Right, I know. Nobody will do this. But hey, maybe they’ll start a new account again someday! Just like the people who pass a kiosk in the mall and say “I’ll come back later and buy three!” Sure.

There are legit reasons for this that are positive. I’ve deleted accounts as I merged into a larger team license. I’ve deleted old accounts that collected dust and I wanted to start fresh. In any case, it’s good customer service to make this a good experience as well.

Pssst, Mr. President, you can de-activate your account here.

39. The Profile Photo Cropping Tool

Well this is a dumpster fire nightmare scenario for most apps and it doesn’t need to be. I had Christian send me a screenshot from earlier when he was changing his profile picture to Beyoncé.

He couldn’t even get past this screen to show how it cropped a photo. 2 out of 10 stars. Would not put a ring on it.

40. The “Upgrade My Account” Option/Flow

It boggles my mind how difficult this is for many SaaS products. Shut up and take my money. Shouldn’t this be easy?! Like…THE EASIEST?!

Buffer has a menu item to upgrade then a pretty simple form. Bam. You’ve got my money. Way to go, Buffer.

Mad Flows

Eventually, you’ll have finished all the previous things and think you’re home free — then you literally start to go home for the day proud of how on the ball you are.

Then halfway home on your fixie, sipping kombucha from your camelbak, you remember development hasn’t actually started yet! #$%@

Once development starts, you’ll start realizing that just mocking up one screen doesn’t really tell the story (it’s cool, we all try to be lazy). Developers need you to actually break down how a user experience flows from screen-to-screen.

41. The “Change My Address” Flow

You know when you get a snazzy new apartment downtown and you have to change your address on EVERY CREDIT CARD YOU’VE EVER OWNED?

Dhaval S. Gandhi wants to make sure his Aloe Vera is shipped to the right place.

42. The “Add A Credit Card” Flow

Some people (ahem, me) like to keep like a hundred credit/debit cards on file so that thieves have lots of accounts to choose from. So make it easy to add cards. That’s really all I have to say about that.

This looks way too real, Carlos Medina. Unrelated, I just bought some new shoes and it didn’t cost a dime!

43. The “Bulk Add” Flow

It’s one thing to make adding an object into the system quickly, but it’s an entirely different thing to make adding a BUNCH OF OBJECTS into the system quickly.

Please sir, may I have some more?

44. The “Create a Custom Filter” Flow

If you allow for sophisticated filtering, it might be nice to add the ability to save this complicated filter for later. That way you don’t have to click a million times all over again.

Oykun Yilmaz could take this one step further by allowing the user to save this filter. Do it, Oykun!

45. The “Add to Shopping Cart” Flow

It’s kind of funny to think that people forget about this flow, but you know…I’m one of those people. Shut up.

Apparently Alberto Conti needed 4 chairs and 4 side tables. Must be a big house…

46. The “Share This” Flow

Sharing has become pretty ubiquitous online, but that doesn’t mean it’s already designed for you. All the more reason to spend some time on this one.

Tomek Kwiatkowski really knows how to get social.

47. The “Create from Existing” Flow

This is kind of like “Duplicate + Edit” all in one action. Basically the user is able to start from an existing object and update it as needed.

Kyle Johnston is writing a LOT of scripts. Maybe secretly Christopher Nolan?

48. The “Invite Someone” Flow

There’s no better way to add some “virality” to your product than through invitations and sharing. Looking at you Dribbble. Make sure it’s easy, quick, and fun!

I think Paula Pintaric and Christine are going on a flight. Or they’re working on a project and watching other people fly. That’s worse.

49. The “Change User Permissions” Flow

You know that guy Greg? You know how he kind of screws up everything he touches? Yeah, you might wanna revoke some of Greg’s privileges just so he doesn’t delete the entirety of the Internet. Silly Greg.

Matt Shwery, on the other hand…much less of a knucklehead than Greg.

50. The “Delete and Recover” Flow

You know when you delete something SUPER important and need to get it back immediately? No? Alright.

Eric Tsai understands that we all make mistakes.

BONUS #51. Animations

Full disclosure, I actually forgot about these myself. Look, I love animations but I’m lucky if we have the luxury to build these when sales wants a prototype done yesterday, and development is pointing out something I completely missed in my 8th iteration of the landing page. And honestly if we get to animations at all, I just peruse Dribbble or CodePen and send something I like to dev and say, “Make it like that!” Kidding. Am I?

I’m not.


Summary

You’re probably furiously writing a list of everything I forgot for this article. Feel free to kindly remind me in the comments. Designers have about a million things to remember when designing MVP products, or large features for an enterprise software platform. Hopefully this can at least be a handy reference to help remind you on your next project.

When I’m not trying to remember every little thing (she does is magic), I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer. You can learn more here:

Follow UX Power Tools on Twitter
Follow me on Twitter