Design-to-Development Handoff

Overview

In general, it’s the part of the software development process where developers start to implement finished designs. This process is a collaborative effort—starting in the early design stages.

1. Design stage

   It’s important to realize that design handoff it’s not a one-time meeting. It’s a process that lasts throughout the whole project.

   • [ ] Introduce developers into discovery phase insights
   • [ ] Get developer input and alignment on technical restraints for the design brief
   • [ ] Involve at least one dev to the kick-off meeting
   • [ ] Use user story mapping together with the dev team to plan epics and sprints
   • [ ] Plan your design work ahead of the development process, at least 1-2 weeks in advance
   • [ ] Inline on frameworks (bootstrap, custom, etc.)

2. Handoff Stage

   Effective collaboration during this stage brings handoff to double-checking & organizing process.

   • [ ] Provide design files and all necessary assets
   • [ ] When using specific software for design handoff (zeplin/invision/figma) then provide information on how these tools work
   • [ ] Have a proper handoff meeting where you walkthrough user flows and lo-fi prototypes for developer feedback on feasibility
   • [ ] Have a dedicated channel with all the relevant parties invited
   • [ ] Setting up regular group meetings with all the team members throughout the project
   • [ ] Establishing guidelines for communication
   • [ ] Provide a prototype
   • [ ] Annotate prototypes with use cases, failure states, and interaction nuances
   • [ ] Create design system/UI kit
   • [ ] Establish naming conventions

3. Testing Stage

   When the product is complete designers should test implementation towards mockups and prototypes.

   • [ ] Implementation audit conducted by the designer during QA process
   • [ ] Attend Demo meetings
   • [ ] Include UX criteria to accept testing

Pro-tips to move forward

📍 Start communication with dev teams as early as possible

📍  Use elements that help you to explain the design - use pointer to highlight users’ clicks or use descriptions

📍  Ask the developers if any things are unclear for them and if they need any additional information.