This happened to me recently! I finished the project at work only to realize the disaster – we forgot to design the default avatar image for the users on our website. When we handed over all the design files to the developer, we were asked a simple question “could you send me the default avatar picture for new user’s profile?” and I pretended that I totally had it somewhere on the drive and just needed to upload it. That’s when I realized we needed a list of “jobs to be done” so we don’t forget any details later in the design process. Here are 20 details that everyone forgets to design in their UI UX project.
In this article I’ve divided everything into smaller pieces based on a typical design process for a web or app design projects. After working with freelancers, agencies, startups and biggest corporations.
List of things to remember
Without putting you on a goose chase, as promised, here are are the 20 things that designers forget to design in UI UX projects. If you wish to read details then you can go further into the article and get details on each.
- Splash Screen Animations
- Login & Signup Forms
- User On-boarding
- Thank you Pages
- Email flows
- Empty State Pages
- Autofill Empty State Suggestions
- Search Results Empty State
- Default User Profile Design
- 404 Page
- Error States
- Site/App Notifications
- Notification Settings Page
- User Log-out Flow
- Open Graph graphics
- Presentation Materials and Graphics
- Graphics for online Ads
- Email Newsletter Templates
1. Splash Screen Animation
I’ve never seen anyone forgetting to design and include a splash screen in their project but every other app will be missing a cool splash screen animation. So what is a splash screen, you say? That’s the page, graphics, logo that shows up when you launch a mobile app while everything is loading in the background. Most likely your user is waiting in anticipation to use the app as a result they are stuck looking at the logo staring back at them, well that doesn’t sound so interesting, does it? Use of animation or showing off some cool graphics is the best way to keep the user engaged.
2. Login & Signup Forms
Ever forgot your password? Designers often design for the best case scenarios and forget to design for the worse case scenario. This login form shows when people type in their password and will always remember it. Something that will never happen! The login and sign-up may seem so straight forward to design since we use it every day but it’s actually rather intricate. You can download the login and signup user flow template I created exclusively for the UeyeDesign audience.
3. User On-boarding
User on-boarding can be approached in many different ways. So how do we make the user get familiar with the new app or website? Do we give them a quick tutorial or where things are?
4. The magic word “Thank You”
One of the 3 magic words “thank you” needs to be included every time the user takes the effort to finish a task. When should you show a thank you page? After signup, after subscribing to newsletter, after product purchase, contact form, after user feedback.
Am I being too soft by showering my user with “Thank you”s? Absolutely not. The general rule of adding thank you pages to your user flow is for steps that lead to the end of a user journey. For example a user is looking for a drone on amazon, and then they find the one they like and buy it, after check out the journey is over. How do you keep the user from quitting the website? How do cross sell to the user? That’s when your thank you page comes in handy with a positive tone of voice.
5. Email Flows
I design websites and apps. Email has nothing to do with me — Hold on for a second there! If you call yourself a UI UX designer or a product designer, you design for all the touch points that affect your product. Some emails are sent out automatically triggered by user signup or receiving confirmation after product purchase. If you’re not sure how to design an email template for your product, you can pick any of the free responsive email design templates from UeyeDesign.
6. Empty States
Like i said before, designers design for the best of situations. When someone creates a new account, what do they do next? They need something to look at and something to do, instead of just signing up to an empty page with just the navigation buttons. Design clear and interesting CTAs to get around this problem.
Autofill or autocomplete is great at helping people find exactly what they are looking for. It’s a great practice for UX to actually show top results or most searched results within the empty state of the autocomplete option.
7. Search result empty state
Sometimes you’ll search for something out of the ordinary and you can’t find any result for that in the ocean of content. What do you do?
9. The default user profile picture
Speaking of a new user account, what the hell will the the default user picture? Does it look unisexual (like facebook’s default avatar?) does it look like an alien if it’s a “storm Area 51 site?”. Is it styled and crafted with the brand visuals in mind?
10. 404 Page
Pages, blog posts, content, images and media gets moved around on your website as a result some of your users are likely to get lost. Designing a 404 page is as important as any other page. I recently wrote a guide to designing a 404 page, be sure to check it out!
If your product is not a static website or app, you better remember to put FAQ pages that explain basic how-to of the product. For more complicated products a detailed documentation is a must. You don’t want your users to be left out figuring out your new innovative UX process that has a steep learning curve.
12. Error states
Speaking of things not going the way as planned, sometimes things will break, either in the form, or in the functions. It’s common to forget to design different states for forms, result pages and so on.
Gmail and other bigger guys have nailed down notifications. It makes life so much easier when you get notifications for things that you need to know.
14. Notification Settings
I can’t emphasis how annoying it can be to get notifications for something useless. Facebook has a group called HH Facebook Changelog / Interface Microagressions where UX, UI, Product designer and developers complain and track every little change facebook makes in their UI and UX. There are nearly 5,000 members to this private group and you can easily find someone complaining about Facebook showing them annoying notifications they don’t care about. Let your users choose how and what they would like to be notified about. Nobody likes to get spamy notifications all day long!
15. Log-out Button
Let your users go when it’s time for them to leave. Let them logout. Don’t trap them in your cage. They need a button to logout. Generally logout is initiated with the following intentions in mind:
– Using a public computer
– Login with another account on the same website
– Safety/Privacy reasons
16. Open Graph
Open Graph is the image that shows when you share your link on Twitter, Facebook or anywhere else. By default these websites will pick the first image on that page and insert as a thumbnail. You want to have control over that. 99% of the times the first image is not enough to sell the website. Create custom Open Graphs to get the most out of every time your link is shared on social media.
17. Presentation Material
Most likely your product brings revenue and would be showcased to the world thorough powerpoint or keynotes to investors, buyers or at conferences. Creating graphics showcasing those specific features is super important.
18. Ad Stuff
Recently we did an A/B testing on our facebook ads after our new brand was launched. Disaster struck, when we realized our primary brand colors performed 30% (green) less than our bright secondary colors (yellow). Be sure to do an AB test on what graphics work the best for promoting your brand before you start spending money on it.
19. Email Newsletter Templates
If you’ve an email list or automated trigger emails going out to the users then you want to make sure they match the look and feel of your website and app. If not, your user will feel they are in the wrong place. Make sure your email templates resemble your brand.
20. The boring pages
You may hate it but you’ve to make sure you design for the fine print that keeps the entire company out of court. Here’s a list of pages you indefinitely need.
– Copyright notices
– Terms and conditions of use
– Accessibility Information
– Abuse or complaints contact information
– Corporate Policies
– Cookie Notice