The checklist should be used as a reference tool to ensure that all aspects of the design have been properly implemented in the development process. The checklist should not be treated as a rigid set of rules.
Establish clear communication
Make sure that both the designer and developer are on the same page when it comes to the design and development requirements. Establish clear lines of communication to avoid misunderstandings.
Review the checklist before development begins
Before starting the development process, review the checklist to ensure that all requirements are clear and understood.
Use the checklist during development
As development progresses, refer to the checklist regularly to ensure that all aspects of the design are being implemented correctly.
Seek feedback
Encourage both the designer and developer to provide feedback on the implementation of the design. This will help identify any issues or areas where improvements can be made.
Test the final product
Once development is complete, test the final product against the checklist to ensure that all requirements have been met.
Responsibilities
Not just for the designer and developer.
Responsibilities
Designer
Create the design concept and ensure it meets the project requirements
Develop detailed designs, including sketches, wireframes, and high-fidelity mockups
Provide design specifications, including typography, color palette, and layout guidelines
Develop style guides to ensure consistency in design across all deliverables
Provide all necessary design assets, including images, graphics, and iconography
Developer
Use the design specifications to create the product or website
Write clean, maintainable, and efficient code
Ensure that the product or website is responsive and accessible
Collaborate with the designer to ensure the design is implementable
Test the product to ensure it is bug-free and meets the project requirements
Copywriter
Write the copy for the product
Ensure the copy is concise, clear, and compelling
Collaborate with the designer to ensure the copy fits within the design
Validate the copy with the developer to ensure it is technically correct
Test the copy to ensure it is error-free
Project Manager
Ensure the project stays on track and within scope
Communicate with the designer and developer to ensure everyone understands their responsibilities
Keep stakeholders informed how the project is tracking
Ensure the project is delivered on time and within the project scope
Tester
Test the product or website to ensure it meets the project requirements
Document and report any bugs found during testing
Work with the developer to ensure any bugs are fixed before launch
Work with the designer to ensure the product is user-friendly and easy to use
Key resources required for the build including Figma files and HTML prototypes.
Provide the original design files in a format that can be opened and accessed by everyone in the team. Figma usually does the trick.
Make sure everyone has a link to the HTML prototype so they can experience the most realistic representation of what is to be built. This collection will likely have it.
Ensure they have the most up-to-date design assets and design system and communicate what potential changes could be coming.
Summarise file structure, naming conventions, and layers in Figma. For HTML prototypes, make note of directory structure and external libraries. This will help everyone navigate and extract the required assets efficiently.
Every team member has to have either view or can edit access to the supplied files or they're going to have a hard time.
Separate all unused designs from the final assets. This way you can refer to them again without causing confusion.
Don't be afraid to add a little additional context. Use the comment tool or add sticky notes to the Figma files. Take screenshots of the HTML prototype and add them to Figma to keep feedback centralised.
Mention what elements will be reusuable like buttons, alerts, and tooltips so developers can leverage the pre-built components in the design system or construct them to be multi-purpose.
Components are reusable assets shared across all our UI
Illustrate how users move through the product, the actions they can perform, and the expected outcomes to idenitfy any discrepancies or potential issues early on.
In an ideal world, screens would be provided for each breakpoint but often a discussion will have to suffice to explain how the design should adjust and rearrange elements to maintain usability and visual appeal across various devices.
Specify any animations, transitions, or micro-interactions that are part of the design. Make a point to describe duration, easing, and triggers for each interaction.
Although it can be difficult to gather early, getting the final content at handoff will help with context, accuracy, and potential delays.
Even if accessibility hasn't been noted in the project, we can do our part to improve the experience for everyone. The A11Y Project checklist is a good starting point.
Ensure what has been built is functional, meets project objectives, and matches design intent.
Ensure that the final implementation matches the intended design across multiple breakpoints.
Verify that buttons, links, form fields, and other interactive components function correctly.
Check that semantic elements are used and that it's keyboard accessible. Bonus points for testing with screen readers.
Ensure that the text, images, and other media content match the approved content. Check for any typographical errors, incorrect data, or missing content.
Test how the design renders and functions in the latest 2 versions of Chrome, Firefox, Safari, and Edge.
Do at least one user testing session to assess usability and effectiveness.
Ensure that the implementation aligns with the project goals and stakeholder expectations.
Get on the same page
Keep feedback in one place: Figma for design, specs, and prototype.
Get involved regularly: participate in demos, comment in docs, and engage on Slack.
Start a temporary Slack channel to centralise the conversation.
