Product Launch Checklist
Your requirements are met, your users are excited, your testing is complete, and your team is racing toward the finish line of another successful delivery…
You probably didn't forget anything, anything that's easy to overlook. Just to be sure though, here's a final polish checklist to put your mind at ease before you push this thing out the door.
Interaction design #
☑️ Automated a11y
testing passes
- Axe Scan and the IBM Equal Access Accessibility Checker can provide automated testing and best practice recommendations.
☑️ Animation can be disabled
- Check that
prefers-reduced-motion
preference is honoured. Animations can trigger discomfort for those with vestibular motion disorders.
☑️ Bypass blocks are available
- Can people navigate sequentially through content directly access to the primary content of the Web page. Does this page need a skip link?
☑️ Consistent and identifiable application states
- Does the focus and hover interactions for all interactive elements match?
- Is the same language used for system state across the product?
☑️ Navigation and navigability
- Can every feature be be Perceived, Operated, Understood by using a keyboard or screen reader. Is the styling, features and content of your product robust? Can it be accessed on a wide variety of browsers and with a wide variety of assistive technologies?
☑️ Pointer gestures are consistent
- Are the correct pointers consistently displayed when you hover over and interact with elements on the page?
☑️ Layout consistency, and responsiveness
- Double and then half your content (simulating language translation). Is that what you expected to happen? Are you seeing unexpected wrapping or truncation?
- Change your browser zoom (
cmd
/ctrl
and+
/-
) as your layout changes. Is that what you expected to happen? Are visual relationships between (established through spacing and proximity) maintained across different layouts?
☑️ Tab order and reading order matches
- What are the actions on this page? Can you access them using the keyboard only? Can you discover and interact with them using a screen reader? Is the order of content focused in a similar way that a sighted user consumes the content of the page?
☑️ Timing and timeouts are appropriate
- Are your session timeouts at least 2-5 minutes? Do you have an interactivity timer that allows users ample time to complete tasks without being interrupted?
- Throttle your bandwidth and reload each page. Does your design account for empty and loading states. Are loading times appropriate for the content being delivered?
- Are images only as large as they need to be? Is there a significant page re-layout or jank caused as content and media finish loading?
Content design #
☑️ Heading structure is valid
- Check that the semantic heading elements on the page reflect the page organization, skipping heading ranks can be confusing and should be avoided where possible.
☑️ Alternative text is available
- Non decorative images have descriptive alternative text or
- Captioning and transcripts is provided for any embedded, or linked to, video content.
- Graphs have alternative tables
☑️ Error messaging is helpful
- Do the messages associated with any error states you can trigger identify the problem and cause, and provide a solution (if possible)?
☑️ Input feedback in place
- Input fields provide feedback at the correct time. Inline errors should validate when the user leaves the field, not during interaction.
- Form data that needs to be server side validated should summarize the errors at the top of the form and link to the fields or sections related to the errors.
- The correct virtual keyboard type is displayed for each input field (type and input node - text, tel, url, email, numeric, decimal, and search).
☑️ Labels, instructions, page titles, and links have purposeful text
- Do your links make sense on their own. Would someone reading the label of a link know the location that link will take them without needing to decern it from surrounding context?
- Are the page titles set correctly and consistently across the product?
Visual design #
☑️ Color contrast passes AA minimum
- Change your preferred color scheme (light, dark, high contrast mode). Are your focus states, controls, icons, and images still accessible?
☑️ Color usage is purposeful but not overloaded
- Use color with purpose and never as decoration. Never use color alone to convey information; ensure that colored text and graphics are understandable when viewed without color. Color-blind and low-vision users may not be able to perceive the color differences, and screen readers do not announce colors to non-sighted readers.
☑️ Content is printable
- Check the printed versions of each page. As backgrounds styles will be removed when printing it is important to check that information and state is not lost. This is commonly forgotten with customized checkbox and select form elements.
☑️ Graphics are consistent
- Are your icons and pictograms all from the same suite? If not, are the tone, style and stroke sizes consistent?
- Is all content sentence case or all title case? Check to make sure you have a single approach.
☑️ Legible typeface usage
- Are you displaying faux fonts/font synthesis?
- Are your fonts being applied correctly. Check with a device that doesn't have your selected fonts installed? Are suitable fallback fonts defined?
🚢🚀🍻 Happy launching!