Feature Design Checklist 2.0

An ultimate checklist to design screens for all the different scenarios before submitting them to developers.

My design team is quite young, and they are working on a Crypto super app. Working on something completely new is usually fascinating, but when you have no references and a tight deadline, it often leads to unfinished designs. While submitting our ideas to developers, we used to overlook several edge-case scenarios in user flow. As a result, there was a lot of back and forth between designers and developers, which used to cause the entire project to be delayed.

While looking for help on this topic, I did some research and created a checklist to help with certain missing states and edge cases. I have been using this checklist since my team was really small and I was an individual contributor. I am now the lead UX designer, and our team is starting to grow. I have made some changes along the way to keep it up-to-date and used simple language so junior designers on my team can follow it.

Other than my own experience, two of the biggest references I used are

The first version of this checklist created by Anna Weiss
An episode from my favorite design podcast, Design details.

Without wasting any time, let’s get into it. This is something you or your team will eventually get better at, so don’t worry about it that much. Also, not all of this list is applicable all of the time. I have just mentioned all of the possibilities. But it doesn’t mean it applies to every new feature.

All the clickable items — Before you start creating screens for different scenarios, make sure you have a screen designed for all the icons on each screen. This is a good way to make sure you are not missing any screens in the flow. (e.g., clicking on the back icon while filling in profile information).
Ask Developers — It is always a good idea to get developers involved early in the process. Developers will always have a better idea of the flow, so asking them early will always help you to find missing logic.
Existing Patterns — It is really important to keep consistency for a better user experience.
a. So please check that. Do we have a similar step somewhere else in our app? (e.g., adding a member to the group)
b. If it is a completely new feature, then do check the current user behavior of our targeted users for similar actions in the competitor’s app and follow a somewhat similar user flow.
Data — How will the screen look with different amounts of data?
a. When there is no data? (Empty state)
b. When there is some data? (Ideal state)
c. When there is too much data?
Selection Limit -
a. Is there any limit to the selection on certain screens?
b. Is there an option to select multiple things?
c. Is there an option to select all?
d. What is the active user able to perform after selecting?
e. Can a user deselect all?
Characters -
a. How will the screen look with a different number of characters?
b. Do we need to set a character limit?
c. What will the screen look like with the maximum allowed characters?
d. What will the screen look like with only one or no characters?
e. Do we need to add the breakpoint?
f. Do we need to make the input box scrollable?
g. Do we need to add a “Read more” button? Create a screen for both the hidden and expanded states.
Dynamic Text -
a. Will any screen be customized with user-specific content? If so, then how will it look for different users?
b. Is there any screen where data will change automatically? If so, what are the different variations/formats of it? (e.g., time in the news article)
Network Status — Not all the users will have high-speed internet, so make sure you design the screens for different scenarios of change in network status.
a. How will the screen look when the user is not connected to the internet? (Do we have an offline mode for this feature?)
b. How will the screen look while loading?
c. What will happen when users lose the internet in the middle of something? (Will it save the user’s process? Will there be any message indicating that?
d. How will the screen look if the user goes offline and comes back online again?
e. While offline, does the user have the option to reload the screen or to go back?
Pending Status — If a user leaves in the middle of the process, will there be an option for the user to go directly back to that process when the user comes back, or is there any other indicator showing the user that the process is still not finished? (e.g., email verification, filling out a profile)
Error State -
a. Do all the screens and each interacting element have all the possible error states designed?
b. If there is an error, can the user go back to the previous step, or is there any other way to get out of it?
User Status — How will the screen look for users with different statuses? (e.g., guest user, signed in but not verified, signed in and verified).
User permission -Does the user have permission to view the content?
a. How will the screen look if the user doesn’t have permission to view it? (e.g. user shares a Figma link but doesn’t give permission to other users to view it; how will the screen look to group admins vs members?)
Membership — Is there any different membership a user needs to be part of to view the content? (e.g., free version, pro version).
New User -
a. How will the screen look if the user is new to the entire app?
b. What will the screen look like for regular users of the app? (e.g., if the new feature is targeted toward the expert user of the app (hence complicated), then it is better to show hints to help new users).
User Knowledge -
a. Does the user need to know something before making a sensible choice in this workflow?
b. Does the user need to see something on the screen to make an appropriate choice?
Progress — Does the user need to know the progress of the current flow? If it is a long flow, then it is better to show a progress bar in the UI. (e.g., profile data filling, checkout).
Feedback -How will the user know that the task is done?
a. Are there enough visual changes on the screen that will let the user know about their task completion, or do we need to show a toast notification?
Screen behavior — Please make sure to mention the behavior of certain UI elements.
a. What will it look like when the user clicks on the input box?
b. How will the screen visually respond on normal click vs long press vs on hover(for desktop)?
Entry Point — How is the user entering the feature? Are they coming from push notifications or deep links or marketing emails? (e.g. if you don’t have Telegram and click on the telegram community link, it will take you to a deep link and install the Telegram app)
Precondition — Does there need to be any other feature enabled to perform this feature? (e.g. to make a video call, the user must have allowed other people to call him from his privacy settings. In Figma, you can not change the position of an icon if it is inside a component. You need to detach it first and then edit it).
App Setting -
a. Does adding this feature need changes in the app settings?
b. If you are working on an app setting, does it require you to notify the user somewhere else? (e.g., changing privacy settings might change the UI of chat).
Design System — Are there any new elements that will require updating the design system?
Documentation — Please make sure you add the text at the top of the screen explaining in detail the function of the screen to make it easily understandable for developers. Also mention if there are any restrictions that have been set. (e.g., character limit, box height, messaging bubble width).
Themes — Are you creating designs for all the themes? (e.g., light, dark)
Screen size & Orientation — Discuss with developers and PMs and, if required, then create designs for different screen sizes. (e.g. for flip phones and tablets).
Performance — Is there anything you need to create which will affect the performance of the app? (e.g., animation, scroll behavior).
Cross-Device — If the user changes content on one device (desktop), then how will it affect the other device(mobile)?
Accessibility Settings — When the user has turned on the accessibility setting on the phone, do we need to adjust the UI according to different modes? (e.g. contrast mode, voice-over, screen reader/live captions)