Tips for smooth design handoff to development teams

Product design has many phases ranging in scope and complexity across the spectrum, but even the minor phases are essential to the overall success of the project. In this post, I’m focusing on one of these smaller phases: Design Handoff, and specifically, the Remote Handoff. This is when UX and visual design are finished and the creative assets are transferred to the implementation team in a different time zone — a scenario becoming more and more common as resources are becoming more distributed.

Design Handoff seems like such an insignificant part of the larger picture. However, a bad handoff can have cascading problems affecting multiple teams and timelines, and could ultimately jeopardize your project.

You’ve probably heard some variation of the phrase, “Just throw it over the fence.” This is something that happens when teams decide to handoff hastily. They bundle up assets and send links to the dev team hoping for the best. Of course, “the best” is rarely the result, and this is not the developer’s fault.

We can’t expect them to be mind-readers. To their credit, they might receive something over the fence and try to run with it, but for them, it would be the equivalent of a chef who’s never eaten Mexican food receiving a photo of a burrito and being asked to cook up a carne asada burrito an hour later. As a result, the chef will fail due to inadequate instructions, the burrito will go uneaten, and the patrons will find the real thing down at La Taqueria in the Mission District of San Francisco.

At Skava, we’ve tried different methods and tools to ensure a smooth handoff, but nothing has been as effective as simply getting to know your team, developing a shared language, and understanding one another’s workflows. All that being said, there are still times when your teams are remote, and connecting is difficult. When that is the case we have a three-part process to help us out.

Part I: Create a tight Handoff Package

  • Annotated creative comps or layout files showing key pages, flows, and states organized with an alphanumeric naming system that is consistent throughout the deliverables: wires, comps, specs, tickets, etc.
  • Style guide: showing fonts, copy styles, color palette, and components.
  • Specs: we use a dynamic spec plug-in tool called Sketch Measure. There are other great speccing tools like Zeplin, but we prefer Measure simply because it’s lightweight and allows you to bundle a standalone spec package which can be versioned on Box. The Sketch Measure output is an HTML file that the dev teams can use to grab CSS code snippets, hex colors, font info, and dimensions. Icons and other graphic assets can be exported from this as well.
  • InVision Demo: This is a light interactive prototyping tool which we use to communicate the flows of the experience. It also does double duty, serving as a presentation and review tool with commenting functionality.

Part II: Remote Handoff Meetings

  • Connect with the Dev team on the other side of the project.
  • Establish lead points of contact on each team.
  • Reinforce the idea that this is a collaboration of efforts working toward a common goal.
  • Walk-through the creative assets.
  • Emphasize the importance of key elements.
  • Spend time clarifying details that are harder to show in comps.
  • Answer questions arising due to gaps in the assets.
  • Establish a weekly cadence for handing off assets (in the event you are on parallel tracks).

Side note: since remote teams are usually in different time zones, be diplomatic and trade off by taking the hand-off calls at odd hours.

Part III: Visual QA

  • One or more of the original designers reviews each build to check fidelity to the approved creatives.
  • Tickets are logged in Jira to correct any deviations.
  • Dev team assigns tickets to the creative team to fill gaps in creative assets.
  • Visual QA lasts until the product launches.

Over the course of many deliveries, we have learned that handoff is just as important as the initial creative work, so we hope this process is something that can help you too. If you have questions or suggestions, please let us know!

Image | This entry was posted in Best Practices, How-To and tagged , , . Bookmark the permalink.