Hand-off checklists are essential to the definition of done
Eliminating pain points when designs are implemented means we all do better work more efficiently
Pilots, who are responsible for people’s lives, use checklists. I’m responsible for much less, but I’m still allowed to love them.
I live by checklists. There are very few people who do well without them. One of my former managers is an exception, he’s someone who’s able to keep large amounts of information readily accessible in his head to recall at any moment. A living checklist in humanoid form. Most of us are not this person.
Many checklists have been birthed from the process of handing off work from design to development. When you see patterns emerge from the questions that arise, those patterns are problems to solve and are ripe for checklisting. A lot of these patterns stem from places of inefficiency, causing pain in the implementation process and making things take longer overall.
At a certain point in a project, I don’t even think it’s possible to call something “done” without referencing a checklist. This mid-point in development is a sweet spot for both identifying and fixing inefficiencies.
To provide you with a better idea of how I work, here are some checklist items that I frequently include:
UI/UX Hand Off Essentials
✓ re-use as many existing components and patterns as possible
✓ check for accessible use of colour and contrast for text and UI
✓ preview scrolling and interactions via Figma Mirror
✓ support for up to a 1.8x increase in text to have enough room for languages like French and German
✓ make sure the order of words (if laid out in separate layers) can be translated without rearranging
✓ design empty states
✓ design completed states
✓ design for min and max number of characters or digits to display
✓ check if any of the new flows affect tutorial flows
✓ make sure layout works for different device sizes
✓ assign sound effects and animations
Design File Clean Up
✓ align elements to 8px grid
✓ use whole, even numbers and dimensions where possible
✓ use dimensions in base 2 where relevant (certain game engines)
✓ tag assets for export
✓ update design system with new components
✓ delete hidden layers from components
✓ move old/unused designs out of the hand off file (but keep everything!)
✓ name all layers
✓ eliminate single layer groups
Marketing and Live Ops
Marketing assets benefit from custom checklists. For marketing campaigns and live ops event asset production some rules I like to follow are:
assign owners to all copy writing and music selection, as it often gets tossed arbitrarily between designers, marketers, producers, and product managers
re-use assets for as many social media outlets as possible using the same dimensions
maintain an up-to-date list of asset dimensions and export settings in the checklist and ticket templates
maintain an asset library of re-usable images and brand elements
create templates for repeated campaigns
leave time for legal team to review
Starting New Things
When starting new projects, I have a handful of resources that I like to review. Sometimes I find it more efficient to jump off from an existing structure rather than starting from scratch.
Checklist Design - A collection of best practices
Adobe Spectrum Design Checklists - Adobe lists checklists by feature
Semantic UI / Tailwind UI - To help with naming, even if a project isn’t using the frameworks themselves
Building a Design System - A systematic breakdown to cover colour, size, spacing, typography, and more
Apple’s Human Interface Guidelines - I’m a fan of Apple’s guidelines for tappable UI elements
Google’s Material Design - I like their colour accessibility tools and guidelines