The 47-Point Checklist for Improving Designer and Developer Workflow

Designer and developer collaboration should never start during the handoff process.

Developers must be equal partners in the product development process, involved in UX discussions from the very start.

In this checklist, you’ll get tips for improving the collaborative workflow from discovery all the way through handoff. Use it as a baseline for your team and customize as needed. 

During Design

1. Discovery

• Invite developers to attend user interviews when possible.

• Circulate bulleted summary of user interview insights with developers.

• Conduct a 30-minute to 1-hour stakeholder interview with at least one developer. Use Kim Goodwin’s excellent questions.

• Create and quickly review lean personas with developers.

• Get developer input and alignment on technical restraints for the design brief.

2. Planning

• Ensure developers (or at least the development lead) attends the kickoff.
  
  
• Conduct user story mapping with developers to plan epics and sprints.

• Estimate build time for user stories with developers using tactics like planning poker.

• Plan design sprints 1-2 sprints ahead of development.

• Check if designs will be implemented with a common framework (Bootstrap, Foundation, etc.). Adapt grids and elements accordingly.

• Verify browser support with developers.

• After each standup meeting, quickly review the backlog with developers.

3. Prototyping

• Walk through user flows and lo-fi prototypes for developer feedback on feasibility.

• Start designing extreme viewports (smallest and largest) to accurately “bracket” your content. Consider how your design will respond to screen sizes slightly smaller or larger than your assumptions.

• Incorporate rough content (not Lorem Ipsum) into the prototype within the first two iterations.

• Invite developers to attend at least one user testing session.

• Prototypes account for all interaction states, error states, and transitions between states.

• Prototypes account for data extremes (e.g. short and long last names, phone number formats, non-US post codes).

• Circulate all user test recordings with bulleted summary of insights to developers.

• Collect feedback and approval from developers at each iteration of the prototype.

4. UI Design

• With each iteration, rename your design file (v.1, v.2, etc.). Do not rename with “Latest” or “Newest”. Upload every new version into a shared repository.    

• Create as many reusable patterns as possible (menus, links, buttons, panels, etc.) so developers have a component-based system.  

• Make UI decisions that create consistency for the experience and code base.

• Get developer buy-in on image formats and sizes.

• Create designs in all major breakpoints on a grid system with guides/overlays.

• Use whole font values and leading values (e.g. 15 instead of 15.75) to preserve typographic integrity.
• Use web-safe fonts when possible. Don’t use more than one custom font.

• Check that you own the rights for all photography and typography.  

• Hold a 30-minute to 1-hour review of final approved mockups alongside the prototype. Walk through project goals, user stories, interactions, states, and failure states.

During Handoff

1. Visual Hygiene

• Delete all unused layers. Don’t just hide them, since that may confuse developers.

• Delete all unused guides.

• Group and name layers appropriately based on UI modules (navigation, footer, etc.)

• Follow a common naming convention with developers (e.g. a “widget” is not the same as a “module”). Consider using BEM notation.

• Instead of naming artboards with “FINAL” or “LATEST”, follow a standard versioning protocol (v.1, v.2, etc.).

• For easier navigation, collapse all layers before sending off designs.

2. Assets

• Create subfolders within your main project containing all relevant icons, fonts, images.

• Include SVGs wherever possible. For raster files, include versions at 2x.

3. Documentation

• Annotate prototypes with use cases, failure states, and interaction nuances.

• Annotate the full code snippet (or classes in frameworks) next to every element.

• Use an inspection tool to auto-generate visual specs (color codes, dimensions, font sizes, margins, padding, etc.). Avoid redlining as much as possible.

• Ensure all documentation stays updated to reflect the final system as it evolves. Developers will refer to documentation to understand depth and breadth of the system, using the final prototype as a reference for acceptable behaviors.

After Handoff

1. Accuracy of Build

• During the QA process, designers perform “implementation audit” of each build against the final prototype.

• Designers attend sprint demos along with PMs.

• Acceptance testing includes UX criteria based on final prototype.

2. Design System

• Describe accessibility requirements and any implications on development. For example, Salesforce Lightning: “Our forms offer proper use of <fieldset> and <legend> tags as well as appropriate labeling for input controls.”

• Include code snippets for all UI components (menus, buttons, etc.) along with specific descriptions of use cases.

• Include links to downloadable UI kits, color swatches, and code repositories (e.g. Github).

For more advice on improving design and development process, download the 67-page e-book Product Development for Distributed Teams.