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.