Let’s be honest, getting designs from your UX team into the hands of your engineering team in a way that makes sense is rarely easy. Add tight deadlines, team changes, and miscommunication to this process and your application will likely end up looking very different than what you expected. The handoff between design and development is no easy task.

At SitePen, we’ve spent a lot of time learning how to improve this process. When we work with a client, we integrate our team with theirs to fill in any gaps that might be present. Sometimes our designers work with the client’s developers. Sometimes our engineers work with their designers. Sometimes it’s a bit of both. But the point is — we’ve been around the block a few times and picked up a few tricks that can make a big difference when bridging the gap between mockup and code.

Design One and Done

If there’s one thing that will consistently have the biggest impact on a handoff, it’s the implementation of a design system which provides a shared library of components, typography, colors, and other patterns that are used frequently across an application or series of applications.

Centralizing design and development to a single shared library is a huge win, especially when working with large teams or across multiple products. Rather than requiring each designer and each developer to create and implement patterns individually, they can rely on patterns that already exist and have already been vetted by the team.

Whether you design and develop your own design system, or incorporate a third party system like Bootstrap or Google’s Material Design, it will ensure that designers and developers are speaking the same language. Rather than worrying about meticulous documentation for padding, margins, and font sizes, designers and developers can easily dissect a mockup into predefined widgets, patterns, and components that they already understand.

On top of facilitating a better hand-off, implementing a design system can also lead to a few other benefits:

  • A consistent user experience across the application (and even other apps, if they all use the same system)
  • Reduces both design and development time
  • Improves the overall quality of the application

Don’t Tell Me, Show Me

Traditionally, a designer will work within an application like Sketch or Illustrator, create mockups, and share those static images with developers who will then translate the design into a functioning application. Even worse, sometimes it’s not even the design team who presents the mockups to the developers. Like a bad game of telephone this process can leave a lot of room for misinterpretation. The designer, the developer, and anybody in between (?PMs and BAs!) may have different understandings for how things should behave. This problem is compounded if it includes complex interactions or unique patterns.

To solve this, encourage your design team to create interactive prototypes to accompany their designs. Allow the developers to actually click through the user journey and see the desired behavior themselves. This will alleviate confusion and also save your team from a lot of followup meetings to clarify the requirements.

There are many solid application prototyping tools. Work with your designers to find a solution that fits your needs. If you only need simple page to page prototyping, then something like InVision, Adobe XD, or the prototyping tool in Sketch should be sufficient. If you are building unique components or anything requiring animation within the UX, then you’re better off looking at tools like Figma, InVision Studio, or Axure.

Use a Rosetta Stone

Back in the early days of web design, designers had to make meticulous red line diagrams documenting the styles used in their designs. This was always a pain — unless, of course, you’ve got an intern you can make do it! But with modern design hand-off tools, we’ve outgrown the need to work that way.

Tools like Zeplin and Invision Inspect make hand-offs much less painful between design and development. They allow designers to upload their actual design files — no exporting required. Then, the application provides exact style documentation that developers can refer to when implementing the design. In most cases, these tools provide actual CSS! Go take a ?? break, engineers!

This will save countless hours of your design team’s (or let’s face it, that poor intern’s) time. It will also allow developers to stay busy engineering and have an easy reference point. No more back and forth to get colors or measurements just right.

Learn to Dance

A good design/development hand-off is about more than the moment a mockup is attached to a Jira ticket. It’s a process, a dance even, between these two teams. They will both take turns leading and following. This must be accommodated in your sprint cadence. Many teams make the mistake of keeping design and development completely segregated. When it comes to the hand-off, development has very little context with the design decisions. Similarly, the designers have little to no visibility into the engineering that follows the hand-off.

At SitePen, we make an effort to allow these roles to overlap. Having a lead developer involved in some of the design reviews prior to the hand-off will help the designers understand technical limitations. It will also give the development team the context they need to make informed decisions when building the application.

On the other hand, designers seldom get everything right before the hand-off — even though we don’t like to admit it. There will inevitably be last minute changes or new requirements that weren’t anticipated prior to the hand-off. Anticipate this and allocate design resources to bleed over to the other side of the hand-off. Having a designer available to your development team is an easy way to solve most ad hoc issues and keep a project on schedule.

Find What Works

Every team is different. Your processes, your culture, and your team’s experience will impact how you choose to implement hand-offs between UX and development. Spend some time with both teams to discover what pain points exist and explore what solutions would help. With a little proactive effort, this process can be much more seamless and less painful for everyone involved.

Do you need a little extra help with your design/development hand-off? Need a few more resources to balance out one side of that equation? We’re here to help! Our UX designers and JavaScript engineers are experts at integrating with your team to ship products and meet deadlines. Sound too good to be true? Let us prove you wrong!