Executing a great design handoff is no easy feat. I was recently part of a project that involved redesigning an interface for healthcare providers who order genetic tests, and the experience presented learnings for how Tandem approaches design handoff.
A design handoff is when designers transfer or hand off flows to engineers for implementation. Early on in our engagement, Tandem became aware that the siloed practices in place meant we would not have continuous access to the client’s engineers. Within the agile process, this can present multiple challenges, one being design handoff. On an agile team, there are various points of handoff, specifically at the end of a sprint.
While it may seem straightforward, oftentimes design handoff does not go as smoothly as planned and can be overlooked as an important part of the sprint, whether it’s because of a lack of time or a shift in priorities. Because handoff isn’t always a visible asset, make sure to consult the client throughout the process and clarify why it should be considered during roadmap planning.
Handoff is a critical part of software development because if the developers don’t have everything they need to succeed, rework during the implementation process will cost your product time and money. After reflecting on Tandem’s work with the client, here are some key takeaways to consider when approaching design handoff:
Collaborate as Much as You Can
Design and development collaboration and communication cannot be substituted with a well-executed handoff process. It’s unlikely that when design hands over the design it’s ready to ship with no needed additional communication and collaboration — when possible, keep the door open and continue to work together as a cross-functional team! Having the engineering team present during the design process will set your team up for success, especially during an iterative project. However, you may not always have the resources of your engineers, in which case it’s best to over-communicate during handoff.
Over Communicate
When it comes to design handoff, it’s important to establish expectations with your team, specifically with the engineers implementing your user flows. Have these conversations, and if you can, create the handoff solution together! Ask if there is information that would be helpful for implementation and if anything is unclear about the process. Provide the engineers with as much of your knowledge as you can — they will thank you once you have rolled off the engagement and are left to implement. Ultimately, it’s better to over-communicate expectations so everyone is on the same page.
In an agile environment, a design team ideally has the opportunity to have continuous conversations with the engineering team so the design handoff is not the first time the engineers see what needs to be implemented. Whether or not you have an engineering presence during your engagement, make sure to thoroughly communicate your thoughts — this could be done in collaborative pairing sessions or a handoff file, which is what Tandem did for the client. This leads me to my next point…
Document, Document, Document!
In an ideal world, the team is designing and developing in parallel, but when that’s not feasible, it’s best to pass along as much information as possible.
With the boom of collaboration tools in recent years, Tandem utilized Figma for our handoff process. In theory, this document acts as the team’s source of truth; inclusive of flows, components, responsive behavior, and documentation. While some of these aspects of design handoff can be solved in other ways — with independent design systems, design Wikis, or prototyping tools like InVision — it is important to have a resource that establishes what solutions work best for your team.
What should your team document during handoff? To ensure successful implementation include design decisions, changes made, intended behaviors and interactions, and details on how your team arrived at the solution. Continuously share your knowledge with the engineering team and be open to their feedback.
Keep Files Organized
Make time to organize! Quite often in the rush of a sprint, simple things such as naming pages, layers, and frames can fall last in your list of things to do. By properly naming project files, you eliminate the barrier of entry for your engineers to inspect and find exactly what they are looking for within your file. Start by establishing a naming convention and be consistent with the application — you’ll win with your engineers by utilizing terms shared across design and development teams.
When sharing user flows with engineers, include instances of happy path, edge cases, and empty states to give them a full picture of the user experience. Organize your components as well — on this project, Tandem utilized a separate component library file that acted as the product’s design system, enforcing visual consistency and eliminating more work for our developers.
Include other design artifacts alongside the user flows to provide a wider picture of what was implemented: links to requirements, user stories, packaged assets, prototypes, and even a point of contact for those who acted as subject experts during production. All of this information is useful when handing off your files for implementation.
Create an Accessible File
Lastly, create an accessible file for your collaborators to ensure they use it as you intended. To create a file that is accessible, make sure it can be easily shared and that there is a point of contact for inviting collaborators.
Organize the file so future project members can find what they need: for our client, we solved our lack of access to their engineers by utilizing the ‘pages’ feature in Figma to separate different types of documentation. Most importantly, an accessible file includes patterns and elements that can be duplicated because you likely won’t be the last to touch or contribute to the project.
Like software, the design handoff process should be iterative. Software is never “final” — when it comes to handoff, we provide work that can be implemented by the engineers with the expectation that we may learn something applicable during user research or need to elaborate on a previous feature.
Whether you’re constantly collaborating with engineers or have limited access to them, design handoff is a process your team always needs to establish. Every team faces unique challenges during handoff, so it’s important to work with your engineers to create a process that fits your team’s needs. While executing a great handoff is no easy feat, with the right resources, designers and developers working together can truly change a product for the better.
