Elevate Your Design Handoff with Proven Communication Tips
If you want to create great products, you need to learn to communicate. Thankfully, there is a science to it. And we’d like to share it.
So what’s the deal with design handoffs?
The design-to-development handoff is a pivotal moment in the product development cycle as it marks the moment when designers pass the proverbial torch to developers. Even though this subject is of considerable importance, it’s not discussed very often in the design circles.
Here at Brainly, the handoff isn’t really a single isolated point in time, but rather a process extended over days and weeks. It requires active involvement from various team members, forcing us to explore communication methods to improve and streamline the transfer of information.
While ideal design handoff procedures largely depend on your team’s skillset, we’d like to share some of the tried and tested methods that helped us at Brainly untangle the mess that is the design-to-programming stage of the product development cycle.
Tip 1 — Improve Your Design File Structure
The most basic method of improving the transfer of information between designers and devs is simply making the files comfortable to browse through. Although specific practices depend on your design software of choice, there are some general guidelines for maintaining proper file etiquette. Here, we’ll be exploring how you might achieve it in Figma.
The first action you want to take is separating and sorting your files into increasingly more specific brackets. While it does depend on your projects’ scale and type (internal product tools, initiatives with external clients, etc.), the objective is to approximate categories through which you can systematically index your work.
Similarly, the file itself should be methodically structured in a way that’s not open to interpretation and instead follows a pre-established universal standard. At Brainly, the starting point is to split all the pages and artboards into four particular categories: the cover, development-ready designs, the designs in progress, and anything else related to the project — from mood boards to discarded experimental designs.
We also recommend adding some basic visual flair to elevate your file setup further, as this helps with quickly identifying its separate parts. You might want to use emojis, consistent cover templates, and special characters (like ↪) to achieve that. We’re designers, so why not make our files reflect that too? 😉
Tip 2 — Add Explanatory Comments and Labels
Any user interface designer can relate to how the number of artboards can quickly spiral out of control when working on a project. Before you know it, you’re looking for that one particular pixel you worked on three months ago. This exact issue is even more common if you’re a developer trying to make your code consistent with the designs. To alleviate that, organizing your artboards into rows and columns with appropriate labels is recommended. The animation above illustrates how Figma frames are organized at Brainly. The labels that describe the frames are stored in our internal Figma Utilities component library, so any design team member can just drag and drop them whenever and wherever they want.
However, the artboards with designs might not be enough to convey some concepts. Sometimes, you might have a specific idea of how the user interface should scale, animate, and be interacted with. While it’s advised to work with your developers directly in those situations, it’s not always a viable prospect due to scheduling issues or time constraints. To solve this problem and make the handoff more asynchronous, we created an internal comment system in Figma. Using it, the designer can delve deep into detailed feature descriptions, and leave questions or suggestions for developers, among many other practical applications. They are dual-purpose, as they help guide the discussion during meetings. Unlike the comments on Figma or other software, they are visible to everyone and not susceptible to comment spam.
Tip 3 — Use a Clear Language and Supplement It with Graphics
When making comments inside the design source file (or any internal document for that matter!), it’s crucial to use predefined terminology that reflects your design system and documentation. The transfer of information can be significantly streamlined when using words with clear-cut technical definitions. Instead of providing a design-centric description of “a small green label,” you’ll instead want to say “x-small text component in green-70 color” and so on.
It’s often said that pictures are worth a thousand words. The same adage applies to design handoff. There are cases where it’s simply more efficient to explain concepts through visual guides, like in the examples pictured above.
Tip 4 — Structure Your Timeline and Set Open Meetings
While communication and organization tricks are undoubtedly effective, the reality is that scheduling meetings is inevitable. To avoid any unexpected twists and turns during sprints, it’s a good practice to work out a cyclical meeting schedule with your team. It removes some uncertainty when planning work and provides team members space to bring up topics with ample preparation time.
The schedule should include meetings with open editable agendas. At Brainly, where multiple teams contribute to the product and the design system, keeping everything aligned and consistent can be challenging. As policing every team member would be ineffective (and annoying), open cyclical meetings are a good alternative. While they typically follow some theme, anyone can bring any topic to the table, be it a feedback request, general discussion, or some technical question. Our collaborative meetings are as effective as we make them.
Tip 5 — Create Rules for the Meeting Coordination
Although open, meetings abide by some rules. Firstly, it’s a priority to mark down any action points related to the agenda topics. By doing so, the team has a concrete plan to follow due to the discussion. The action points get frequently revisited in the future, and everyone is kept updated. The action points can range from smaller tasks performed by a single person to more significant initiatives with entire groups of people responsible.
One of the challenges when arranging cross-team meetings is simply managing them. As a solution, cyclical meetings rotate coordinators who execute the agenda and scribes who jot down notes and action points. This way, every invitee has first-hand experience leading the discussion and can improve meeting coordination through their unique perspectives and experiences.
Tip 6 — Optimize the Scope of Work and Delegate
Time is of the essence in product teams; designers often have to agree on concessions with developers to meet deadlines. They are encouraged to discuss their initial concepts with devs and look for ways to verify the original hypotheses while reducing the time to market without sacrificing the quality.
Delegation is an essential part of this optimization process, especially for design system tasks. Other teams might be willing to help with development as they have a vested interest in some component or any other singular part of the project.
Tip 7 — Encourage Candid and Honest Communication
Maintaining proper file etiquette and structuring team collaboration are crucial steps in your journey to perfect the handoff process; however, it’s also worth keeping in mind some communication basics. In the book Radical Candor, Kim Scott goes into detail about how to effectively convey ideas in a business environment. She provides descriptions of four communication method archetypes — ruinous empathy, manipulative insincerity, obnoxious aggression, and radical candor. Radical candor symbolizes the type of environment that effective teams should foster. One in which members are empathetic to one another and aren’t afraid to challenge ideas directly. While important in its own right, straightforward and honest communication helps in exploring further process improvements.
…to sum up
Honest and methodical communication between developers and designers is one of the things that can make or break your product team.
Whether it be optimizing the time to market, making better products, improving the handoff process, or simply making your life easier, we hope our tried and tested collaboration methods will help you improve your team.
Do you have any advice or experiences you’d like to share? Please, share them in the comments!
