When a designer has reached the end of a design iteration, they need to share all the implementation details with their developer team. We call this process the design handover.
Within this handover process, there’s usually links shared to various digital assets. The kind of deliverables you’ll send depends on what your organisation does. For digital products, you’ll usually get a combination of the following:
- User flows. Shows how an end user will interact with the product to perform certain tasks. Used to check which elements link where, and how we handle edge cases.
- Screen specs. Any elements that relate to the pixel perfect designs of the screen. Used by developers to check that the product they build matches up to the designs you provide.
- Assets and animations. Again this can change depending on your process, but it usually involves handing over pixel-perfect images or JSON files.
- Prototypes. Sometimes created for some other purpose like user testing, but they’re great for showing a developer how you expect the final product to behave.
The modern designer has access to tools like Zeplin and Figma that can make this process go much more smoothly. But there is still an effort required by designers. A design doc can be so powerful, and it’s something that needs more attention than we usually give it.
All hail the design doc 🙌
Product professionals and developers already document a lot of their work. They generally do this to maintain a single source of truth that helps others do their job. Designers need to be doing this too.
Aside from acting as a reliable information source, a design doc can have many other benefits:
- Showcase your working. From competitor analysis to usability reports, we can share all the work that goes on behind the scenes to people who wouldn’t normally get to see it.
- Log design changes. Add meeting notes from your design reviews to shed light on where certain design decisions came from.
- Create a consistent process. Having the same template for every piece of work you do will encourage you to think about your own process. It sets a standard for what you should be doing.
- Set a standard for design. If everyone on your team is using the same design doc it becomes another design deliverable. People will know what to expect from you all. When a new designer joins the team, you can point them to all your beautiful design docs and onboard them with confidence.
There’s a huge difference between sending an Invison link over Slack and typing up a mini design doc. The extra effort required is always worth it. How you hand your work over to others leaves a big impression of both you and your design team.
Tips for improving your design handoffs
No matter what kind of designer you are - or what kind of team you’re in - there are some habits you can pick up that will keep your design delivery at a high standard.
Pay attention to detail
Correcting mistakes after handover can take up a lot of time. So does asking for clarification on details that are obvious to us but not so clear to devs. Avoid the frustrating back-and-forth by being diligent when you’re making your final deliverables.
- Check your links. Nothing is more annoying than clicking on a link and finding it broken. Don’t be the one responsible for this. Test your document yourself by opening all the links before you send it off.
- Be a tidy designer. Little details like checking for typos make a massive difference. Treat your delivery pieces like your designs. If it isn’t something you’d claim was yours, then don’t share it with your team.
- Review everything! Your team will take whatever you deliver as gospel, so make sure that it’s true. Check the logic in your flows, make sure you’re using the right assets, and cover all the edge cases you can find.
- Be clear and confident. Ambiguity in your documentation will either lead to questions from your developers. Or worse, they’ll make a guess and it won’t be quite what you imagined. The clearer your detailing is, the less time you’ll spend on making corrections.
Think about their experience
As designers, our workflows are different from developers in most ways. Handovers should work to fit the needs of both sides. The smoother the process the better, so it’s in your interest to care about how developers and product managers will use your design doc.
- Make it obvious. If someone comes to your doc looking for a specific item, they should be able to find it. Format your doc in a way that meets their needs.
- Ask them. Collaborate with your team to see if there’s anything you can change to speed up their workflow. Every team is different, get to know yours.
- Watch them work. Our familiarity with our tools gives us a bias. If you’re using a certain shortcut to make working with a tool easier, teach it to your developers.
Keep your finger on the pulse
It’s tempting after a handover to jump headfirst into the next project. This can be dangerous if you’re called upon to make a quick decision and you’ve gone AWOL. Stay present and be supportive.
- Attend design reviews. Seeing how your designs function once they’re built will help you to understand how developers interpret your design docs.
- Keep an open mind. Design change suggestions given by developers will sometimes come through. This could be for many reasons, and it’s important that we hear them out. We aren’t gatekeepers. Sometimes other people make changes to our designs because they know something we don’t, and that’s okay.
- Be reliable. Once you’ve handed your work over, developers will begin building your designs. If there’s something you’ve missed, step up to the plate and help them out. Blocking someone whose work schedule is very structured can cause headaches for everyone.
Be an asset to your team
No matter how skilled you are as a designer, nothing makes a bigger impact than having a team-player attitude.
- Act approachable. Behave in a way that encourages others to share their thoughts with you without fear of getting their head bitten off. If you disagree with them, be amicable and seek compromise. No-one likes a defensive designer.
- Help where you can. Delivering the design doc is the bulk, but picking up the loose threads is also vital. Help out your team, even if it’s beyond your usual work scope.
- Be curious and hungry. The best designers I know have knowledge that spans outside of design. Learning more about how others work will give you a sense of empathy, and ultimately make you a better designer.
Designing and building is a collaborative process. Developers are the last port of call before your designs reach the end user, so it’s in your interest to help them get it right. This is why handovers are so important.
When it comes to internal documentation, your product team members are your users. If you build it right, your team will read your design doc over and over again, and that experience will affect your team’s workflow. Think about their needs and goals, and deliver something that makes their lives easier.